请解释 ES6 中的展开运算符 (Spread Operator) 和剩余参数 (Rest Parameters) 的用法和区别。

推荐答案

展开运算符（Spread Operator）和剩余参数（Rest Parameters）都使用三个点 (...) 语法，但它们的用法和作用完全不同。

展开运算符 (...)

• 作用: 将一个可迭代对象（如数组、字符串、Set、Map等）“展开”成独立的元素。
• 场景:
  • 数组或对象字面量创建: 可以方便地创建新的数组或对象，同时包含现有数组或对象的元素/属性。
  • 函数调用: 可以将数组的元素作为函数的独立参数传递。
  • 浅拷贝: 用于创建数组或对象的浅拷贝。

剩余参数 (...)

• 作用: 将不定数量的函数参数打包成一个数组。
• 场景:
  • 函数定义: 允许函数接收任意数量的参数，并将它们收集到一个数组中。

区别:

本题详细解读

展开运算符 (...) 的用法

1. 数组展开:

   const arr1 = [1, 2, 3];
   const arr2 = [...arr1, 4, 5]; // arr2: [1, 2, 3, 4, 5]
   
   const str = "hello";
   const chars = [...str]; // chars: ['h', 'e', 'l', 'l', 'o']

2. 对象展开 (ES2018):

   const obj1 = { a: 1, b: 2 };
   const obj2 = { ...obj1, c: 3 }; // obj2: { a: 1, b: 2, c: 3 }
   
   const obj3 = { a: 1, b: 2, c: 3 };
   const obj4 = { ...obj3, b: 4}; // obj4: { a: 1, b: 4, c: 3 } 后面的覆盖前面的同名属性

3. 函数调用:

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

4. 浅拷贝:

   // www.javascriptcn.com code example
   const originalArray = [1, 2, 3];
   const copiedArray = [...originalArray]; //浅拷贝，修改copiedArray不影响originalArray
   copiedArray.push(4); // [1, 2, 3, 4]
   console.log(originalArray) // [1, 2, 3]
   
   const originalObj = {a:1,b:2}
   const copiedObj = {...originalObj} //浅拷贝，修改copiedObj不影响originalObj
   copiedObj.a = 2;
   console.log(originalObj) // { a: 1, b: 2 }
   
   //注意：只拷贝第一层，深层任然是引用
   const originalArr = [1, {c:2}];
   const copiedArr = [...originalArr];
   copiedArr[1].c = 3;
   console.log(originalArr) // [ 1, { c: 3 } ]

剩余参数 (...) 的用法

1. 函数参数收集:

   // www.javascriptcn.com code example
   function myFunc(a, b, ...args) {
       console.log(a); // 第一个参数
       console.log(b); // 第二个参数
       console.log(args); // 其余参数组成数组
   }
   
   myFunc(1, 2, 3, 4, 5);
   // 输出：
   // 1
   // 2
   // [3, 4, 5]

2. 与解构结合

// www.javascriptcn.com code example
function func1(...[a, b, ...others]) {
  console.log(a,b,others)
}

func1(1,2,3,4,5) // 1 2 [3, 4, 5]

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

重要区别总结

展开运算符和剩余参数的关键区别在于其使用场景和目的：

• 展开运算符主要用于将已有的数组/对象“展开”为独立的元素/属性，常用于创建新的数组/对象、函数调用等。
• 剩余参数主要用于将函数传入的不定数量的参数收集到一个数组中，方便函数内部处理。

它们虽然都使用三个点 ... ，但在代码中的位置和作用完全不同，需要区分使用。