ES6扩展运算符/...运算符常见用法

132 阅读1分钟

...运算符可以用于对象和数组当中,下面分别讲述常见用法:

一.对象中使用...运算符

对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中

let obj1 = {a:1,b:2},obj2 = {c:3,d:4}
let obj3 = {...obj1,...obj2}    //{a: 1, b: 2, c: 3, d: 4}

//ES6前的做法:
let obj3 = Object.assign({},obj1,obj2)  //{a: 1, b: 2, c: 3, d: 4}

这里有点需要注意的是...运算符对对象实例的拷贝属于一种浅拷贝

我们知道javascript中有两种数据类型,分别是基础数据类型引用数据类型。              基础数据类型是按值访问的,常见的基础数据类型有Number、String、Boolean、Null、Undefined,这类变量的拷贝的时候会完整的复制一份;                                    引用数据类型比如Array,在拷贝的时候拷贝的是对象的引用,当原对象发生变化的时候,拷贝对象也跟着变化。

let obj1 = {a:1,b:2,c:{name:"Wonder Woman"}}
let obj2 = {...obj1}
obj2.c.name = "Arrow"
console.log(obj1)    //{a:1,b:2,c:{name:"Arrow"}}
console.log(obj2)    //{a:1,b:2,c:{name:"Arrow"}}

二.数组中使用...运算符

1.复制数组

//这样复制数组是不行的(引用类型的缘故)
let arr1 = [1, 2];
let arr2 = arr1;
//用...
let arr1 = [1,2]
let arr2 = [...arr1]

2.可以将数组转换为参数序列

Math.max()只能接受一个一个参数而不能接受一个数组
//ES6前的做法:
Math.max.apply(null,[1,2,3])
//使用...运算符:
Math.max(...[1,2,3])

3.将字符串转化成数组

[..."Superman"]    //["S", "u", "p", "e", "r", "m", "a", "n"]