Airbnb编程风格

读了Airbnb的编程风格，记录一些有意思的书写习惯

• 3.2 使用计算出来的属性创建对象

function getKey(k){
  return `a key named ${k}`
}
// good 
const obj={
  id:5,
  name : 'San Francisco',
  [getKey('enabled')] : true,
}

• 4.5 使用Array.from把类数组对象转变为数组

const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };

// bad
const arr = Array.prototype.slice.call(arrLike);

// good
const arr = Array.from(arrLike);

• 7.1 使用赋值函数表达式而不是函数声明方式
  why:

1. 函数声明是会提升到全文的，很容易在未声明之前就使用了，降低程序的可维护性和可读性。
2. 可以用短的名字来简写长的函数

const short = function longUniqueMoreDescriptiveLexicalFoo(){

}

• 7.4 在非函数的{}中声明函数的时候，如(if,while,etc)中，使用箭头表达式

if(currentUser){
  test = () =>{
    console.log('Yup.')
  }
}

• 7.6 不用使用arguments，使用...代替
  why: ...args是一个真正的数组，而arguments是一个类数组对象

function concatenateAll(...args){
  return args.join('')
}

• 7.7 使用默认参数语法，而不是改变函数参数

// really bad
function handleThings(opts) {
  // No! We shouldn’t mutate function arguments.
  // Double bad: if opts is falsy it'll be set to an object which may
  // be what you want but it can introduce subtle bugs.
  opts = opts || {};
  // ...
}

// good
function handleThings(opts = {}) {
  // ...
}

• 8.5 不要把箭头表达式(=>)和比较运算符一起使用(<=,>=)

// bad
const itemHeight = item => item.height <= 256 ? item.largeSize : item.smallSize;

// bad
const itemHeight = (item) => item.height >= 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = item => (item.height <= 256 ? item.largeSize : item.smallSize);

// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height <= 256 ? largeSize : smallSize;
};

• 9.1 使用class，避免直接操控原型
  why: class语法更简洁

// bad
function Queue(contents = []) {
  this.queue = [...contents];
}
Queue.prototype.pop = function () {
  const value = this.queue[0];
  this.queue.splice(0, 1);
  return value;
};

// good
class Queue {
  constructor(contents = []) {
    this.queue = [...contents];
  }
  pop() {
    const value = this.queue[0];
    this.queue.splice(0, 1);
    return value;
  }
}

• 9.3 方法中可以return this 让函数可以链式的调用

// good
class Jedi {
  jump() {
    this.jumping = true;
    return this;
  }

  setHeight(height) {
    this.height = height;
    return this;
  }
}

const luke = new Jedi();

luke.jump()
  .setHeight(20);

• 9.5 class中有默认的构造函数

class Rey extends Jedi{
  constructor(...args){
    super(...args);
    this.name = 'Rey'  //如果没有这个 不要指定构造函数
  }
}

• 11.1 不要使用迭代器。最好使用JavaScript的高阶函数，而不是像for-in或for-of
  why:这遵循了不变得规则，纯函数的返回值比副作用更容易推断

  const numbers = [1, 2, 3, 4, 5];

// bad
let sum = 0;
for (let num of numbers) {
  sum += num;
}
sum === 15;

// good
let sum = 0;
numbers.forEach((num) => {
  sum += num;
});
sum === 15;

// best (use the functional force)
const sum = numbers.reduce((total, num) => total + num, 0);
sum === 15;

// bad
const increasedByOne = [];
for (let i = 0; i < numbers.length; i++) {
  increasedByOne.push(numbers[i] + 1);
}

// good
const increasedByOne = [];
numbers.forEach((num) => {
  increasedByOne.push(num + 1);
});

// best (keeping it functional)
const increasedByOne = numbers.map(num => num + 1);

• 13.6 使用num+=1 代替 num++
  使用num-=1 代替 num--

• 13.7 有超长的函数或者函数名时，用括号括起来

// bad
const foo =
  superLongLongLongLongLongLongLongLongFunctionName();

// bad
const foo
  = 'superLongLongLongLongLongLongLongLongString';

// good
const foo = (
  superLongLongLongLongLongLongLongLongFunctionName()
);

// good
const foo = 'superLongLongLongLongLongLongLongLongString';

• 15.5 使用{}在包含变量声明的语句中，例如:(let,const,function, class)

switch(foo){
  case 1: {
    let x = 1;
    break;
  }
  case 2: {
    const y = 2;
    break;
  }
  case 3: {
    function f(){
      // ...
    }
    break;
  }
  case 4: 
    bar();
    break;
  default:{
    class C {}
  }
}

• 15.7 不要使用不需要的三元表达式

// bad
const foo = a ? a : b;
const bar = c ? true : false;
const baz = c ? false : true;

// good
const foo = a || b;
const bar = !!c;
const baz = !c;