ES6对象扩展

Posted 2021-01-04 i-leo

es6中对象的属性新增简洁表示法、表达式表达法，对象新增Object.is方法和Object.assign方法。

1、属性的简洁表示法

// 属性的简洁表示法,属性名用变量名表示，属性值为变量的值
var foo=‘abc‘
var obj={foo}
obj // {foo: "abc"}

//方法的简洁表示法，需要注意，简洁表示法的属性名总是字符串
var obj={
  class(){}
}
// 等价于，虽然IE9/firefox/chrome支持保留字直接作属性名 ，但应尽量避免这种写法，需要加引号使用。var obj={
  ‘class‘: function(){}
}

2、属性的表达式表达法

var obj={}
obj.name=‘mdj‘
obj[‘ac‘+‘dc‘]=123
obj // {name: "mdj", acdc: 123}

var obj1={
  [‘h‘+‘i‘](){return ‘hi‘}
}
obj1 //{hi: ?}

注意，属性名表达式与简洁表示法，不能同时使用，会报错。

// 报错
var foo = ‘bar‘;
var bar = ‘abc‘;
var baz = { [foo] };

// 正确
var foo = ‘bar‘;
var baz = { [foo]: ‘abc‘};

3、Object.is用来比较两个值是否严格相等，与===功能类似，略有不同

// 不同之处
NaN===NaN // false
-0===+0 // true

Object.is(NaN,NaN) // true
Object.is(+0,-0) // false

4、Object.assign用于对象的合并，将源对象的所有可枚举属性复制到目标对象

var target = { a: 1 };
 
var source1 = { b: 2,c:2 };
var source2 = { c: 3 };
 
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
// 需要注意，当有多个源对象时，后面的属性会覆盖前面的属性，这里source1的c属性被覆盖了

如果只有一个参数，则直接返回，如果该参数不是对象，则会先转换为对象，如果无法转换为对象，则报错，如null、undefined

Object.assign({a:12}) //直接返回该对象
typeof Object.assign(2) // "object"

源对象可以是数组和字符串，源对象的首参数必须有效，后面的参数如果无效，会直接跳过。

Object.assign({}, [‘a‘,‘b‘]); //{0: "a", 1: "b"}
Object.assign({}, ‘ab‘); //{0: "a", 1: "b"}