掌握 JavaScript 中的展开和剩余运算符

JavaScript 中的展开和休息运算符

spread 和 rest 运算符均由三个点 (...) 表示，是 ES6 中引入的 JavaScript 中的多功能功能。尽管它们共享相同的语法，但它们具有不同的用途：展开运算符用于扩展元素，而剩余运算符用于收集元素。

1.传播运算符

扩展运算符用于将数组、对象或可迭代对象的元素扩展为单个元素。

A.以数组形式传播

扩展运算符可用于复制、连接或传递数组元素。

示例：复制数组

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // Creates a copy of arr1
console.log(arr2); // Output: [1, 2, 3]

示例：连接数组

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // Output: [1, 2, 3, 4, 5, 6]

示例：将元素传递给函数

const numbers = [10, 20, 30];
console.log(Math.max(...numbers)); // Output: 30

B.在物体中传播

您可以使用扩展运算符来复制或合并对象。

示例：复制对象

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };
console.log(obj2); // Output: { a: 1, b: 2 }

示例：合并对象

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // Output: { a: 1, b: 3, c: 4 }

2.休息操作员

剩余运算符将多个元素收集到单个数组或对象中。它常用于函数参数或解构赋值。

A.在函数参数中使用 Rest

剩余运算符可以将不定数量的参数收集到数组中。

示例：收集参数

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // Output: 10

B.在解构数组中使用 Rest

剩余运算符收集数组解构操作中剩余的元素。

示例：数组解构

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

C.在解构对象中使用 Rest

剩余运算符收集对象解构操作中剩余的属性。

示例：对象解构

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // Creates a copy of arr1
console.log(arr2); // Output: [1, 2, 3]

3.扩展运算符和剩余运算符之间的主要区别

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // Output: [1, 2, 3, 4, 5, 6]

const numbers = [10, 20, 30];
console.log(Math.max(...numbers)); // Output: 30

以上是掌握 JavaScript 中的展开和剩余运算符的详细内容。更多信息请关注PHP中文网其他相关文章！