合并数组
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']
以上是扩展运算符一些常用场景,希望对大家有所帮助。