对象

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的方法,比如hasOwnPropertypropertyIsEnumerableisPrototypeOf

为什么?这些方法可能会被对象的属性所覆盖,那这就会有问题了。-像{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}

results matching ""

    No results matching ""