对象
3.1 使用字面语法创建对象
eslint:no-new-object
// 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 使用对象方法的简写
eslint: object-shorthand jscs: requireEnhancedObjectLiterals
为什么?因为这样写起来和描述起来都更简洁
// 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: object-shorthand jscs: requireEnhancedObjectLiterals
为什么?因为这样写起来和描述起来都更简洁
const lukeSkywalker= 'Luke Skeywalker';
//bad
const obj={
lukeSkywalker:lukeSkywalker
}
// good
cost 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 只有当属性名是无效标识符的时候才用引号
eslint:quote-props jscs:disallowQuotedKeysInObjects
为什么?一般来说,我们会觉得这样更易于阅读。这样可以提升语法高亮,也可以使很多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
,propertyIsEnumerable
,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 //在模块范围内缓存一次
/* or */
import has from 'has' //https://www.npmjs.com/package/has
// ...
console.log(has.call(object,key))
3.8 使用扩展运算符代替Object.assign
来进行对象的浅拷贝。使用对象的rest运算符来获得一个新对象,这样可以省略写一些属性。
//very bad
const original={a:1,b:2}
const copy=Object.assign(original,{c:3}) //这样会使原来的original也发生改变
delete copy.a
//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}