对象扩展

这篇笔记我们介绍一些ES6中对于对象的一些扩展语法。

对象属性的简化写法

我们的代码中有很多这样的写法:创建一个对象,对象的值来自一个变量,对象字段名和变量名相同。ES6提供了简化的写法,使得定义对象时更加简洁。

原始的写法:

let key1 = 'aaa';
let key2 = 'bbb';

let obj = {key1: key1, key2: key2};

简化的写法:

let obj = {key1, key2};

对象比较

ES5中我们经常使用===比较两个对象是否相等,ES6引入Object.is()。它相比之前的写法主要做出两个改进:

  1. 解决了+0不等于-0的问题
  2. 解决了NaN不等于自身的问题

当然,实际上碰到这两种问题的情况比较少,我们使用===也没有太大问题。

关于===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});
作者:Gacfox
版权声明:本网站为非盈利性质,文章如非特殊说明均为原创,版权遵循知识共享协议CC BY-NC-ND 4.0进行授权,转载必须署名,禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap