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

清疚 2022-06-13 23:41 192阅读 0赞

## 0、一句话总结 ##

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

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

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

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

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

### 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\}

**效果：**

1.  遍历并展开对象属性。
2.  要求必须被大括号包含（数组则不用）。即可以`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新特性开关，依然不能使用。

所以略

[Link 1]: http://blog.csdn.net/qq20004604/article/details/72858929

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6扩展运算符三个点(...)

在react或者vue项目中，你或许已经注意到有的地方已经开始使用ES6扩展运算符...，这个运算符很简洁，如果不熟悉，可能会觉着难以理解，这里稍微介绍一下扩展运算符的

深藏阁楼爱情的钟/ 2023年06月25日 03:14/ 0 赞/ 17 阅读

相关 es6之扩展运算符三个点（...）

[https://blog.csdn.net/qq\_30100043/article/details/53391308?utm\_medium=distribute.pc\_

喜欢ヅ旅行/ 2022年12月17日 01:28/ 0 赞/ 174 阅读

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

0、一句话总结 1. 属性名，以及是属性的函数的简洁写法，写起来简单易阅读 2. 属性名可以用变量字符串拼接起来（话说以前也有吧？） 3. 函数都有name属性，但

清疚/ 2022年06月13日 23:41/ 0 赞/ 193 阅读

相关从零开始学_JavaScript_系列（39）——对象的扩展（2）Object对象的扩展方法

对象的扩展 0、一句话总结 1. 属性名，以及是属性的函数的简洁写法，写起来简单易阅读 2. 属性名可以用变量字符串拼接起来（话说以前也有吧？） 3. 函数都

以你之姓@/ 2022年06月13日 23:40/ 0 赞/ 273 阅读

相关从零开始学_JavaScript_系列（38）——对象的扩展（1）属性的简洁写法

对象的扩展写在前面的话感觉博客写的有点太细了，导致我学习进度过于缓慢。因此，建议学习者以[阮一峰博客][Link 1]为主，以本博客为补充。我这里主要写

野性酷女/ 2022年06月13日 23:39/ 0 赞/ 194 阅读

相关从零开始学_JavaScript_系列（47）——Reflect

Reflect 1、是什么？ 1. window的原生对象，但不能通过new来生成实例； 2. 对对象的属性的操作，都可以通过这个来完成（读、写、定义属性等）；

迷南。/ 2022年06月12日 20:45/ 0 赞/ 240 阅读

相关从0开始学架构4 - 可扩展篇

从0开始学架构.可扩展篇 -------------------- 32 | 可扩展架构的基本思想和模式今天我们进入架构可扩展模式的学习，这部分内容包括分层架构

￡神魔★判官ぃ/ 2022年04月24日 04:02/ 0 赞/ 216 阅读

相关 es6 扩展运算符三个点（...）

原文地址[https://blog.csdn.net/qq\_30100043/article/details/53391308][https_blog.csdn.net_qq

短命女/ 2022年04月12日 05:09/ 0 赞/ 233 阅读

相关扩展运算符：扩展对象的属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

短命女/ 2021年12月13日 14:29/ 0 赞/ 369 阅读

相关 es6之扩展运算符三个点（...）

[https://blog.csdn.net/astonishqft/article/details/82899965][https_blog.csdn.net_astonis

港控/mmm°/ 2021年09月19日 21:02/ 0 赞/ 490 阅读