（给前端大全加星标，提升前端技能）
英文：AirBnB，翻译：Kakaka Hou
为什么要在前端大全推送这个系列？
前段时间有读者通过我的个人微信，提议能不能推送一些编程规范的文章。我们以前关注过 Airbnb 在 GitHub 上开源的 JS 编程规范（现在有10万+ star，可见受欢迎程度），但因为篇幅太长，一直没有推送过。现在化整为零，设立这个每天学点 JS 编程规范系列，把长篇的规范划分成小节推送，方便大家讨论和掌握。
以下就是今天要推荐的 JS 编码规范，欢迎大家结合自己的实践到评论中来探讨。相信有更多前端开发者参与讨论的规范，会更加精彩。
- 以下是正文 -
注意：这个指南假定你正在使用 Babel， 并且需要你使用或等效的使用 babel-preset-airbnb。同时假定你在你的应用里安装了带有或等效的 airbnb-browser-shims 的shims/polyfills。
Objects
-
3.1 使用字面值创建对象. eslint:
no-new-object1// bad 2const item = new Object(); 3 4// good 5const item = {}; 6 -
3.2 当创建一个带有动态属性名的对象时，用计算后属性名
Why? 这可以使你将定义的所有属性放在对象的一个地方.
1 2function getKey(k) { 3 return `a key named ${k}`; 4} 5 6// bad 7const obj = { 8 id: 5, 9 name: 'San Francisco', 10}; 11obj[getKey('enabled')] = true; 12 13// good getKey('enabled')是动态属性名 14const obj = { 15 id: 5, 16 name: 'San Francisco', 17 [getKey('enabled')]: true, 18}; 19 -
3.3 用对象方法简写. eslint:
object-shorthand1// bad 2const atom = { 3 value: 1, 4 5 addValue: function (value) { 6 return atom.value + value; 7 }, 8}; 9 10// good 11const atom = { 12 value: 1, 13 14 // 对象的方法 15 addValue(value) { 16 return atom.value + value; 17 }, 18}; 19 -
3.4 用属性值缩写. eslint:
object-shorthandWhy? 这样写的更少且更可读
1const lukeSkywalker = 'Luke Skywalker'; 2 3// bad 4const obj = { 5 lukeSkywalker: lukeSkywalker, 6}; 7 8// good 9const obj = { 10 lukeSkywalker, 11}; 12 -
3.5 将你的所有缩写放在对象声明的开始.
Why? 这样也是为了更方便的知道有哪些属性用了缩写.
1const anakinSkywalker = 'Anakin Skywalker'; 2const lukeSkywalker = 'Luke Skywalker'; 3 4// bad 5const obj = { 6 episodeOne: 1, 7 twoJediWalkIntoACantina: 2, 8 lukeSkywalker, 9 episodeThree: 3, 10 mayTheFourth: 4, 11 anakinSkywalker, 12}; 13 14// good 15const obj = { 16 lukeSkywalker, 17 anakinSkywalker, 18 episodeOne: 1, 19 twoJediWalkIntoACantina: 2, 20 episodeThree: 3, 21 mayTheFourth: 4, 22}; 23 -
3.6 只对那些无效的标示使用引号
''. eslint:quote-propsWhy? 通常我们认为这种方式主观上易读。他优化了代码高亮，并且页更容易被许多JS引擎压缩。
1// bad 2const bad = { 3 'foo': 3, 4 'bar': 4, 5 'data-blah': 5, 6}; 7 8// good 9const good = { 10 foo: 3, 11 bar: 4, 12 'data-blah': 5, 13}; 14 -
3.7 不要直接调用
Object.prototype上的方法，如hasOwnProperty,propertyIsEnumerable,isPrototypeOf。Why? 在一些有问题的对象上， 这些方法可能会被屏蔽掉 - 如：
{ hasOwnProperty: false }- 或这是一个空对象Object.create(null)1// bad 2console.log(object.hasOwnProperty(key)); 3 4// good 5console.log(Object.prototype.hasOwnProperty.call(object, key)); 6 7// best 8const has = Object.prototype.hasOwnProperty; // 在模块作用内做一次缓存 9/* or */ 10import has from 'has'; // https://www.npmjs.com/package/has 11// ... 12console.log(has.call(object, key)); 13 -
3.8 对象浅拷贝时，更推荐使用扩展运算符[就是
...运算符]，而不是Object.assign。获取对象指定的几个属性时，用对象的rest解构运算符[也是...运算符]更好。 -
这一段不太好翻译出来， 大家看下面的例子就懂了。^.^
1// very bad 2const original = { a: 1, b: 2 }; 3const copy = Object.assign(original, { c: 3 }); // this mutates `original` ಠ_ಠ 4delete copy.a; // so does this 5 6// bad 7const original = { a: 1, b: 2 }; 8const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 } 9 10// good es6扩展运算符 ... 11const original = { a: 1, b: 2 }; 12// 浅拷贝 13const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 } 14 15// rest 赋值运算符 16const { a, ...noA } = copy; // noA => { b: 2, c: 3 } 17