JavaScript 扩展运算符的学习及应用详情(ES6)

扩展运算符 (spread operator) 是 ES6 中引入的一个新的运算符。该运算符的语法是三个点（...），用于在函数调用时扩展一个数组或者在数组字面量中将一个数组展开成多个独立的元素。

扩展运算符的应用场景

数组展开

扩展运算符可以将一个数组展开成多个独立的元素，这使得数组的复制、合并等操作非常方便。

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

console.log(arr3); // [1, 2, 3, 4, 5, 6]

上述代码中，我们使用扩展运算符将 arr1 和 arr2 两个数组展开成多个独立的元素，并将这些元素合并成一个新的数组 arr3。

函数调用

扩展运算符还可以用于函数调用，让我们可以更方便的向函数传递参数。

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

const arr = [1, 2, 3];

console.log(sum(...arr)); // 6

上述代码中，我们使用扩展运算符将 arr 数组展开成多个独立的元素，并将这些元素作为参数传递给 sum 函数。这样，我们可以非常方便地通过一个数组向函数传递多个参数。

注意事项

• 扩展运算符只能用于可迭代对象，包括数组、字符串、Map、Set 等。
• 使用扩展运算符展开对象时，实际上是浅拷贝对象的键值对，而不是深拷贝对象。
• 使用扩展运算符展开数组时，会 “展开” 所有元素，包括数组中的对象、数组等。

示例代码

数组展开

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

console.log(arr3); // [1, 2, 3, 4, 5, 6]

函数调用

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

const arr = [1, 2, 3];

console.log(sum(...arr)); // 6

以上就是 JavaScript 扩展运算符的学习及应用详情。通过扩展运算符，我们可以更方便地复制、合并、展开数组，也可以更方便地向函数传递多个参数。