一、Types
· 1-1 基本类型：当你使用基本类型的数据时，只关注它的值就可以了
stringnumberbooleanundefinednull
const foo = 1;
let bar = foo;
bar = 9;
console.log(foo, bar); // => 1, 9
· 1-2 复杂类型：当使用复杂类型的数据时，需要关注对值的引用
objectfunctionarray
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 风格指南
--未完待续--
