从零开始学_JavaScript_系列（41）——对象的扩展（4）扩展运算符三个点...

本文链接：https://blog.csdn.net/qq20004604/article/details/72860859

0、一句话总结

属性名，以及是属性的函数的简洁写法，写起来简单易阅读
属性名可以用变量字符串拼接起来（话说以前也有吧？）
函数都有name属性，但set和get也要加前缀
Object.is判断两个变量是否相等
Object.assign可以合并对象的非原型链上，且可枚举属性
Object.getOwnPropertyDescriptor查看属性是否可枚举、可修改、可赋值
Object.keys获取对象非原型链上，且可枚举属性的key
Object.values获取对象非原型链上，且可枚举属性的值
Object.entries同时获取上面两个
当属性在原型链上，或者不可枚举时，会被很多方法忽视（参照6.1）
__proto__和prototype的关系（参照7.1）
Object.setPrototypeOf(obj, prototype)设置__proto__属性
Object.getPrototypeOf(obj)获取__proto__属性
es7新增对对象有效的扩展运算符…（三个点）

本篇没有的请翻看【对象的扩展】系列的其他篇

8、扩展运算符…（三个点）

本节内容属于es7特性，chrome默认不支持es7。

如果想要使用这些特性，阅读该链接

8.1、解构赋值（…在等式左边）（es7特性，浏览器默认不能跑）

简单粗暴的说，就是指在解构赋值时，让所有未被辅助的对象，被解构赋值到某个属性上。

示例代码：

var {x, ...y} = {x: 1, a: 2, b: 3};
x;    //1
y;    //{a: 2, b: 3}

x有对应的，所以被赋值为1。剩下的a和b没有对应的，但是左边的y有扩展运算符...，所以a与b全部以kv的形式，被添加到对象中并赋值给y

注意：

1、不能复制set和get属性；

let foo = {
    _val: 0,
    get val() {
        return this._val + 1;
    },
    set val(val) {
        this._val = val;
    }
}

let {...y} = foo;
y;    //{_val: 0, val: 1}
foo.val = 1;    //
foo.val;    //2
y.val = 1;
y.val;    //1

2、属性的enumerable为false的，会被忽视。

let foo = Object.defineProperties({}, {
    val: {
        value: 1,
        enumerable: true
    },
    cannot: {
        value: 2
    }
});
let {...y} = foo;
y;  //{val: 1}

3、原型链上的属性，也会被忽视

function Child() {
    this.a = "a";
}
function Father() {
    this.b = "b";
}
Child.prototype = new Father();
let foo = new Child();

let {...y} = foo;
y;  //{val: 1}

4、只能解构赋值时，只能有一个属性使用该运算符，如果大于一个则会报错；

let foo = {a: 1, b: 2, c: 3}
let {...x, ...y} = foo; //Uncaught SyntaxError: Rest element must be last element

8.2、遍历对象属性（…在等式右边）（需要支持es7）

{…obj}

效果：

遍历并展开对象属性。
要求必须被大括号包含（数组则不用）。即可以console.log(...[a:1])，但不能console.log(...{a:1})

与对数组使用扩展运算符的对比：

我们之前提过，当扩展运算符…在等式右边的时候，会遍历数组所有元素。如代码：

let a = [1, 2, 3];
let b = [...a, 4];
b;    //[1, 2, 3, 4]

在对数组使用的时候，可以方便的将数组元素合并起来。

同样，对对象也可以这么使用。例如代码：

let a = {
    a: 1,
    b: 2
}
let b = {...a, c: 3};
b;  //{a: 1, b: 2, c: 3}

有点像

let b = Object.assign({}, a, {c: 3});

只不过本方法不会对a和b造成影响，但注意，这种方法对按引用传递类型是浅复制的。

对象的合并

除了上面那种类似数组的写法外，也可以用来合并2个对象（或者数组）：

let foo = {a: 1};
let bar = {b: 2};
let test = {...foo, ...bar};    //与之前的写法区别在于c:3和...{c:3}
test;    //{a: 1, b: 2}

//数组版
let foo = [1, 2]
let bar = [3, 4]
let test = [...foo, ...bar];
test;    //[1,2,3,4]

将上面抽象出来：

let foo = {...{a: 1}, ...{b: 2}};
foo;    //{a: 1, b: 2}

9、Null 传导运算符（null propagation operator）

提示：

chrome版本 58.0.3029.110，打开js新特性开关，依然不能使用。

所以略