扩展运算符用法实例总结

… ES6的扩展运算符

扩展运算符可以将数据展开
不能单独使用扩展运算符展开数组，可以在参数中使用，将参数数组转成参数列表。
如果扩展运算符后面跟的是变量，那么接受单独多余的数组放置到数组中。

扩展运算符允许一个表达式在多个参数（用于函数调用）或多个元素（用于数组字面量）或多个变量（用于解构赋值）的位置扩展。

数组使用

1.将一个数组放到另一个数组中

// 没有用扩展运算符的情况下
let arr1 = [1,2,3,4]
let arr2 = [arr1,5,6,7,8]
console.log(arr2)// [[1,2,3,],5,6,7,8]//使用的情况下
let arr1 = [1,2,3,4]
let arr2 = [...arr1,5,6,7,8]
console.log(arr2)// [1, 2, 3, 4, 5, 6, 7, 8]

2.复制数组

let arr1 = [1,2,3]
let arr2 = [...arr1]
console.log(arr2)//[1,2,3]

arr1数组中的元素扩展成为单独元素被分配到arr2中。现在可以随意改变arr2数组，且都不会对源数组arr产生影响因为arr1数组值被扩展后添加到arr2数组中，我们设置arr2等于arr1的值，而不是其本身。

3.数组拼接

let arr1 = [1,2,3]
let arr2 = [4,5,6]arr1 = [...arr1,...arr2]console.log(arr1)//[1, 2, 3, 4, 5, 6]

4.运用在Math

let arr = [1,2,3,4,5,6];
// Math.max()将返回一组数最大值。
// 在没有扩展运算符，在数组上使用Math.max()最容易方法就是使用.apply()。
let result = Math.max.apply(null,arr)
console.log(result) //6
// 现在看看使用扩展运算符做同样事情。只需要两行代码就可以做到同样效果。
let result1 = Math.max(...arr)
console.log(result1) //6

5.字符串转数组

let str = 'hello'
let arrChars = [...str]
console.log(arrChars)//["h", "e", "l", "l", "o"]

6.用于展开数据结构，数组去重

let arr = [1,2,3,4,5,6,7,7,8,7,7];console.log(...new Set(arr))//1 2 3 4 5 6 7 8

对象使用

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

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1 }; // { a: 1, b: 2 }
//等同于
let obj1 = { a: 1, b: 2 };
let obj2 = Object.assign({}, obj1); // { a: 1, b: 2 }

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。(如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性)。
用扩展运算符对数组或者对象进行拷贝时，只能扩展和深拷贝第一层的值，对于第二层极其以后的值，扩展运算符将不能对其进行打散扩展，也不能对其进行深拷贝，即拷贝后和拷贝前第二层中的对象或者数组仍然引用的是同一个地址，其中一方改变，另一方也跟着改变。

补充：扩展运算符和Object.assign()都不是深拷贝

扩展运算符：

let outObj = {inObj: {a: 1, b: 2}
}
let newObj = {...outObj}
newObj.inObj.a = 2
console.log(outObj) // {inObj: {a: 2, b: 2}}

Object.assign():

let outObj = {inObj: {a: 1, b: 2}
}
let newObj = Object.assign({}, outObj)
newObj.inObj.a = 2
console.log(outObj) // {inObj: {a: 2, b: 2}}

当然，如果只有一层嵌套还是可以的，那要看数据结构怎么设计的。

如果要实现深拷贝呢？

有一个简单的办法： JSON.parse(JSON.stringify())。

let outObj = {inObj: {a: 1, b: 2}
}
let newObj = JSON.parse(JSON.stringify(outObj))
console.log(newObj); // {inObj: {a: 1, b: 2}}
newObj.inObj.a = 2
console.log(outObj); // {inObj: {a: 1, b: 2}}

我知道一个：不能拷贝函数。当然，还有其他问题，比如正则会变成对象等。

let outObj = {foo: 1,bar: function() {},inObj: { a: 1, b: 2}
}
let newObj = JSON.parse(JSON.stringify(outObj))
console.log(newObj) // {foo: 1, inObj: {a: 1, b: 2}}

也可以自己实现，拿到所有可枚举属性：

const deepClone = (obj) => {  if (typeof obj !== 'object') returnlet newObj = obj instanceof Array ? [] : {}  for (let key in obj) {    if (typeof obj[key] === 'object') {      newObj[key] = deepClone(obj[key])    } else {      newObj[key] = obj[key]    }  }return newObj
}let outObj = {foo: 1,bar: function() {},inObj: { a: 1, b: 2}
}
let ooo = deepClone(outObj)
console.log(ooo) // {bar: ƒ (), foo: 1, inObj: {a: 1, b: 2}}
ooo.inObj.a = 2
console.log(outObj) // {bar: ƒ (), foo: 1, inObj: {a: 1, b: 2}}

如果你还不满意，去引个deepclone的库好了。