JavaScript 风格指南（1）

一、Types

· 1-1 基本类型：当你使用基本类型的数据时，只关注它的值就可以了

• string
• number
• boolean
• undefined
• null

const foo = 1;
let bar = foo;

bar = 9;

console.log(foo, bar); // => 1, 9

· 1-2 复杂类型：当使用复杂类型的数据时，需要关注对值的引用

• object
• function
• array

const foo = [1, 2];
const bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9

二、References

· 2-1 使用 const 去声明一个常量，避免使用 var

理由：这样能够保证你的变量不会被更改，有时候可能由于这些无意中的更改会导致 bug 的出现或者降低代码可读性。

// bad
var a = 1;
var b = 2;

// good
const a = 1;
const b = 2;

· 2-2 如果你必须去给变量重新赋值的话，请使用 let 进行声明，而不是 var 

理由：let 支持块级作用域，而 var 是与函数的作用域保持一致。

// bad
var count = 1;
if (true) {
  count += 1;
}

// good, use the let.
let count = 1;
if (true) {
  count += 1;
}

· 2-3 请注意：let 和 const 都支持块级作用域

// const and let only exist in the blocks they are defined in.
{
  let a = 1;
  const b = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError

三、Objects

· 3-1 使用对象字面量创建对象

// bad
const item = new Object();

// good
const item = {};

· 3-2 当需要使用动态的属性名时，直接在对象字面量内部进行计算获得即可

理由：方便在一处定义所有属性。

function getKey(k) {
  return `a key named ${k}`;
}

// bad
const obj = {
  id: 5,
  name: 'San Francisco',
};
obj[getKey('enabled')] = true;

// good
const obj = {
  id: 5,
  name: 'San Francisco',
  [getKey('enabled')]: true,
};

· 3-3 如果对象内部有方法，使用简略写法

// bad
const atom = {
  value: 1,

  addValue: function (value) {
    return atom.value + value;
  },
};

// good
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  },
};

· 3-4 对属性值使用简略写法

理由：书写和描述更简洁

const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  lukeSkywalker: lukeSkywalker,
};

// good
const obj = {
  lukeSkywalker,
};

· 3-5 声明一个对象时，把简洁写法的属性放在起始位置

理由：哪个属性使用了简洁写法一目了然。

const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  lukeSkywalker,
  episodeThree: 3,
  mayTheFourth: 4,
  anakinSkywalker,
};

// good
const obj = {
  lukeSkywalker,
  anakinSkywalker,
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  episodeThree: 3,
  mayTheFourth: 4,
};

· 3-6 声明对象属性时，只把那些使用无效标识符的属性用引号引起来

理由：主观上讲，这样做更易读。客观上，这样有助于语法高亮和 JS 引擎优化。

// bad
const bad = {
  'foo': 3,
  'bar': 4,
  'data-blah': 5,
};

// good
const good = {
  foo: 3,
  bar: 4,
  'data-blah': 5,
};

· 3-7 不要直接调用 Object.prototype 的方法，如这些方法：hasOwnProperty、propertyIsEnumberable 和 isPrototypeOf 等

理由：这些方法可能会被对象的自有属性所覆盖，考虑这样的情况：{ hasOwnProperty: false } 或者，对象本来就为空 Object.create(null)。

// bad
console.log(object.hasOwnProperty(key));

// good
console.log(Object.prototype.hasOwnProperty.call(object, key));

// best
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
/* or */
import has from 'has';
// ...
console.log(has.call(object, key));

· 3-8 在进行对象浅拷贝时请使用扩展运算符，而不是 Object.assign。

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // 这会改变 `original` ಠ_ಠ
delete copy.a; // 这样做也会改变 'original'

// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }

// good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

原文地址： JavaScript 风格指南

--未完待续--