... 扩展运算符特点

JavaScript中的扩展运算符（Spread Operator）是一种语法，通常用于展开（或拆解）数组和对象，以将它们的元素或属性插入到另一个数组或对象中。扩展运算符以三个连续的句点（...）表示。

扩展运算符对对象实例的拷贝属于浅拷贝，对数组的拷贝也属于浅拷贝。它会创建一个新数组，并将原数组的元素复制到新数组中，但不会递归地复制数组元素内部的对象或子数组。因此，新数组和原数组之间仍然共享对相同对象或子数组的引用。

它将可迭代对象展开到其单独的元素中，所谓的可迭代对象就是任何能用 ``for of 循环进行遍历的对象，例如：**数组、字符串、Map、Set、DOM节点(将伪数组转换为数组)**等。

基础语法

const arr= [1,2,3];
const str = "a-b-c";

console.log(...arr); // 1 2 3
console.log(...str); // a - b - c

[...'abc']; // ['a', 'b', 'c']

扩展运算符可以与解构赋值结合

const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first) // 1
console.log(rest) // [2, 3, 4, 5]

... 使用场景

展开数组/对象

const arr = [1,2,3];
const arr1 = [10,11, ...arr,12];
// 输出 arr1: [10, 11, 1, 2, 3, 12]

const obj={
    a:1,
    b:2,
    c:3
}
const obj1 = {A:"A",...obj,C:"C"};
// 输出 obj1: {A: 'A', a: 1, b: 2, c: 3, C: 'C'}

合并数组/对象

将两个或多个数组/对象合并且成一个

const arr = [1,2,3];
const arr1 = [4,5];
const arr2 = [arr, arr1]; // 不使用...时, 为[[1,2,3],[4,5]]

const arr3 = [...arr, ...arr1, 6]; // [1, 2, 3, 4, 5, 6]

const obj={
    a:1,
    b:2,
    c:3
}
const obj1 = {A:"A",B:"B",C:"C"};
obj2 = {...obj,...obj1}
// 输出 obj2: {a: 1, b: 2, c: 3, A: 'A', B: 'B', C:"C"}

复制数组/对象

浅拷贝, 只拷贝一级.

const arr = [2,6,7];
const copyArr = [...arr];

copyArr[1] = 100;
console.log(arr); // [2, 6, 7]
console.log(copyArr); // [2, 100, 7]

const obj = {a:1,b:2,c:{d:3}};
const copyObj = {...obj};

obj.c.d =100;
console.log(obj); // {a:1,b:2,c:{d:100}};
console.log(copyObj);// {a:1,b:2,c:{d:100}};

函数参数

把数组结构后,作为参数传给函数.

Math.max 使用时,不需要在用 apply 来适应数组参数, 使用... 直接展开数组,符合 max 的入参规则 Math.max(2,6,7)

const arr = [2,6,7,1,9];
Math.max.apply(null, arr); // 9
Math.min(...arr); // 1

function add(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
const sum = add(...numbers); // add(1, 2, 3)
console.log(sum); // 6

总结

1. 展开/合并/拷贝 数组或对象, ... 是浅拷贝,只拷贝一级
2. 展开数组或对象, 作为函数参数使用
3. 扩展运算符与解构赋值 结合使用

补充其他

1. 解构赋值是对赋值运算符(=) 的扩展