这篇笔记我们介绍一些ES6中对于对象的一些扩展语法。
我们的代码中有很多这样的写法:创建一个对象,对象的值来自一个变量,对象字段名和变量名相同。ES6提供了简化的写法,使得定义对象时更加简洁。
原始的写法:
let key1 = 'aaa';
let key2 = 'bbb';
let obj = {key1: key1, key2: key2};
简化的写法:
let obj = {key1, key2};
ES5中我们经常使用===
比较两个对象是否相等,ES6引入Object.is()
。它相比之前的写法主要做出两个改进:
当然,实际上碰到这两种问题的情况比较少,我们使用===
也没有太大问题。
关于===
和Object.is()
,这里额外补充一点,这两个比较都是浅层的,拷贝有深拷贝和浅拷贝问题,Object.is()
对象比较也是有同样问题的,下面例子代码就展示了这个特性。
let tom1 = {
'name':'Tom',
'job':{
'company':'Baidu',
'address':'China'
}
};
let tom2 = {
'name':'Tom',
'job':{
'company':'Baidu',
'address':'China'
}
};
console.log(tom1 === tom2);
console.log(tom1.company === tom2.company);
console.log(Object.is(tom1, tom2));
console.log(Object.is(tom1.company, tom2.company));
输出结果如下:
false
true
false
true
那么如何实现深层比较呢?这个是不能一概而论的,一种简单的方式是比较两个对象序列化后的JSON字符串,另一种方式就是手动实现深层比较。
ES6中引入了一个相当实用的函数Object.assign()
,它能够实现从任意源对象到目标对象的复制拷贝(浅拷贝),说白了就是把几个对象合并到一起,具体例子如下。
let user = {
name: '',
age: 0
};
let a = {
name: 'gacfox'
};
let b = {
age: 18
};
let newB = {
age: 19
};
// 返回值是目标对象user
console.log(Object.assign(user, a, b, newB));
输出结果如下。
{ name: 'gacfox', age: 19 }
实际上,我们更常用的是另一种仿照数组合并的写法合并对象,ES6提供了相应的语法糖对象合并扩展运算符,使用起来更加方便,下面是一个例子。
let user = {
name: '',
age: 0
};
console.log({...user, name: 'gacfox', age: 18});