ES6展开运算符

128 阅读1分钟

展开运算符的使用场景

函数调用

var names = ["abc", "123", "cvb"];

function foo(x, y, z) {
    console.log(x, y, z);
}
foo(...names);//abc 123 cvb

数组构造

var names = ["abc", "123", "cvb"];
var newArray = [...names];
console.log(newArray);//[ 'abc', '123', 'cvb' ]

构建对象字面量

let info = {
    name: "echo",
    other: {
        age: 18
    }
};
let obj = {
    ...info
};
console.log(obj);//{ name: 'echo', other: { age: 18 } }

构建对象字面量时使用展开运算符实际上是进行了一次浅拷贝操作(执行浅拷贝操作会为该对象内的基本数据类型开辟新的空间,但引用数据类型仍与原对象的引用数据类型使用同一个引用)。

let info = {
    name: "echo",
    other: {
        age: 18
    }
};
let obj = {
    ...info
};

obj.name = "err";
obj.other.age = 1777;
console.log(info);//{ name: 'echo', other: { age: 1777 } }
console.log(obj);//{ name: 'err', other: { age: 1777 } }

上述代码可以看出修改obj内的基本数据类型name和引用数据类型中的age,原对象info引用类型中的age随之更改,但基本数据类型name并没有更改。所以可以说构建对象字面量时使用展开运算符执行了一次浅拷贝操作。