扩展运算符的一些常用场景

合并数组

const nums1 = [ 1, 2 ]
const nums2 = [ 3, 4 ]
const nums = [...nums1, ...nunms2]
// [1, 2, 3, 4]

需要注意的是，扩展运算符执行的是浅复制。如果数组中的值是引用类型的值，对其进行修改，原数组和合并后的数组的值都会改变。如下代码我们合并了数组 arr1 和 arr2，当我们修改了数组 arr1 中对象的变量 a 的值为 3 ，合并的数组 res 中对象的变量 a 的值也变为 3，反之修改了 res 中的值，arr1 也会受到影响。对数据类型不了解的小伙伴可以查看 JavaScript 中的数据类型

const arr1 = [{a:1}]
const arr2 = [{b:2}]
const res = [...arr1, ...arr2]
arr1[0].a = 3
console.log('res[0].a', res[0].a)
// 3

合并对象

const obj1 = { a: 1 }
const obj2 = { b: 2 }
const res = {...obj1, ...obj2}
// {a:1,b:2}

如果后面的对象中的变量与前面对象中的变量是同一个，则会覆盖前面对象的值。

const obj1 = { a: 1 }
const obj2 = { a: 3, b: 2}
const res = {...obj1, ...obj2}
// {a:3,b:2}

解构数组

扩展运算符可以与解构赋值结合起来，用于生成数组，生成的数组是浅复制，如果更改数组中引用对象的值，原数组和复制的数组中的值都会改变。

const arr = [1, 2, 3, {a: 1}]
let [a, ...rest] = arr
console.log('a', a) // 1
console.log('rest', rest)
// [1, 2, 3, 4]

需要注意的是，将扩展运算符用于生成数组，必须放在最后一位，否则会抛出错误。

字符串

扩展运算符可以将字符串转换成真正的数组。

const str = 'aye'
const arr = [...str]
console.log('arr', arr)
//['a', 'y', 'e']

以上是扩展运算符一些常用场景，希望对大家有所帮助。