展开运算符、剩余运算符

一、展开运算符

(1)展开数组

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

(2)合并数组

const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const newArray = [...arr1, ...arr2]; // [1, 2, 3, 4, 5]

(3)复制数组

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // [1, 2, 3]

(4)传递参数

function sum(a, b, c) {
  return a + b + c;
}
const numbers = [1, 2, 3];
const result = sum(...numbers); // 6

(5)展开对象

const o = {a:1,b:2,c:3}
const o1 = {…,d:4}      //输出结果：{a:1,b:2,c:3,d:4}

二、剩余参数

剩余运算是ES6引入的一种语法，用于在函数中接收不确定数量的参数。它允许我们将多个参数收集到一个数组中。 在函数内使用。

使用剩余参数的语法是在函数的参数列表中使用三个点（...）后跟一个参数名。这个参数名将成为一个包含所有传递给函数的剩余参数的数组。

function fn(…r) {
console.log(r)
}
fn(1,2,3)
//[1,2,3]

function sum(...numbers) {
  let total = 0;
  for (let number of numbers) {
    total += number;
  }
  return total;
}

console.log(sum(1, 2, 3, 4)); // 输出10

在上面的例子中，我们定义了一个名为sum的函数，并使用剩余参数...numbers来接收传递给函数的所有参数。在函数内部，我们可以像操作数组一样遍历numbers数组并计算它们的总和。

三、二者不同：

 （1）剩余参数用于将多个参数捕获为一个数组，而展开运算符用于将一个数组展开为多个独立的参数。

（2）剩余参数只能用于函数定义的最后一个参数，而展开运算符可以在函数调用和数组/对象字面量中使用。

（3）剩余参数和展开运算符在语法上有所不同，但它们可以一起使用来处理函数参数的灵活性。