【翻译】AirbnbJavaScriptStyleGuide Airbnb JavaScript Style Guide
译者的话：⽂章中有⼀些词句翻译的可能不是很准确，如果有错误的话欢迎⼤家及时指正。
⽂中的深蓝⾊字体是我的个⼈见解，可略过。
原⽂地址戳这⾥：，⾥边作者还列出了⼀些其他的规范，可以参考看看。
1. 变量类型
1.1 原始类型(Primitives)
当你访问⼀个原始类型时，直接改变他的值。
string
number
boolean
null
undefined
const foo = 1;
let bar = foo;
bar = 9;
console.log(foo, bar); // => 1, 9
1.2 复杂类型(Complex)
当你访问⼀个复杂类型时，将对其进⾏引⽤。
object
array
function
const foo = [1, 2];
const bar = foo;
bar[0] = 9;
console.log(foo[0], bar[0]); // => 9, 9
2. 引⽤
2.1 所有引⽤中使⽤const，避免使⽤var。
eslint:
,
为什么要这么⽤呢？因为这保证了你不能再次你更改引⽤变量，⽽更改引⽤变量可能会导致bug和代码理解困难。
//bad
var count = 1;
if(true) {
count += 1;
}
//good, use the let.
let count = 1;
if(true) {
count += 1;
}
2.2 如果必须要改变变量的值，⽤let替代var。
eslint: jscs:
为啥？因为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和let只存在于定义他们的作⽤域中
{
let a = 1;
const b = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
3. 对象
3.1 创建对象时，尽量使⽤字⾯量⽅法。
eslint:
//bad
const item = new Object();
/
/good
const item = {};
3.2 创建动态属性名称时，使⽤计算属性名称。
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,
};const的作用
3.3 使⽤对象快速创建法。
eslint:
jscs:
// 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 属性值简写。
eslint:
jscs:
Why? => 简洁
const lukeSkywalker = 'Luke Skywalker';
//bad
const obj = {
lukeSkywalker: lukeSkywalker,
};
//good
const obj = {
lukeSkywalker,
};
};
3.5 将简写属性全部写在对象声明的开头
Why? => ⽅便看出哪个简写了
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 仅把含⽆效标⽰的属性⽤引号括起来。
eslint:
jscs:
Why? 我们⼀般认为主观上更容易阅读，能帮助凸显语法，并且更容易被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，`propertyIsEnmerable，and isPrototypeof。
Why? 这些属性有可能被对象属性掩盖了，如{ hasOwnProperty: false }，或者可能是⼀个null对象(ate(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 Prefer the object spread operator over to shallow-copy objects. Use the object rest operator to get a new object with
certain properties omitted.
// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // this    mutates `original` _
delete copy.a; // so does this
// 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 }
4. 数组
4.1 创建时使⽤字⾯量⽅法。
eslint:
//bad
const items = new Array();
//good
const items = [];
4.2 使⽤代替直接添加项到数组中。
const someStack = [];
// bad
someStack[someStack.length] = 'despacito';
// good
someStack.push('despacito');
4.3 拷贝数组时使⽤...
//bad
const len = items.length;
const itemsCopy = [];
let i;
for(i=0; i<len; i+=1) {
itemsCopy[i] = items[i];
}
//good
const itemsSopy = [...items];

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。