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 的出现或者降低代码可读性。

// badvar a = 1;var b = 2;// goodconst a = 1;const b = 2;

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

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

// badvar 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); // ReferenceErrorconsole.log(b); // ReferenceError

三、Objects

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

// badconst item = new Object();// goodconst item = {};

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

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

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

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

// badconst atom = {  value: 1,  addValue: function (value) {    return atom.value + value;  },};// goodconst atom = {  value: 1,  addValue(value) {    return atom.value + value;  },};

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

理由：书写和描述更简洁

const lukeSkywalker = 'Luke Skywalker';// badconst obj = {  lukeSkywalker: lukeSkywalker,};// goodconst obj = {  lukeSkywalker,};

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

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

const anakinSkywalker = 'Anakin Skywalker';const lukeSkywalker = 'Luke Skywalker';// badconst obj = {  episodeOne: 1,  twoJediWalkIntoACantina: 2,  lukeSkywalker,  episodeThree: 3,  mayTheFourth: 4,  anakinSkywalker,};// goodconst obj = {  lukeSkywalker,  anakinSkywalker,  episodeOne: 1,  twoJediWalkIntoACantina: 2,  episodeThree: 3,  mayTheFourth: 4,};

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

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

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

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

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

// badconsole.log(object.hasOwnProperty(key));// goodconsole.log(Object.prototype.hasOwnProperty.call(object, key));// bestconst 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 badconst original = { a: 1, b: 2 };const copy = Object.assign(original, { c: 3 }); // 这会改变 `original` ಠ_ಠdelete copy.a; // 这样做也会改变 'original'// badconst original = { a: 1, b: 2 };const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }// goodconst 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 风格指南

--未完待续--