跳到主要内容

JavaScript 展开运算符

提示
  1. 扩展操作符的基本用途：扩展操作符（...）被用于展开可迭代对象，如数组，使其元素能够在多种场景下单独出现。
  2. 复制和克隆数组：扩展操作符可以用来复制数组，从而创建一个新的数组，这样对新数组的修改不会影响原数组。
  3. 在对象和函数中的应用：扩展操作符不仅可以用在数组上，还可以用于对象字面量的合并以及函数参数的传递，其中在函数参数中使用时被称为剩余参数（rest parameter）。

展开运算符是JavaScript ES6版本中新增加的特性之一。

展开运算符​

展开运算符...用于展开或扩展可迭代对象或数组。例如，

const arrValue = ["My", "name", "is", "Jack"];

console.log(arrValue); // ["My", "name", "is", "Jack"]
console.log(...arrValue); // My name is Jack

在这个例子中，代码：

console.log(...arrValue);

等同于：

console.log("My", "name", "is", "Jack");

使用展开运算符复制数组​

您也可以使用展开语法...将项目复制到单个数组中。例如，

const arr1 = ["one", "two"];
const arr2 = [...arr1, "three", "four", "five"];

console.log(arr2);
// 输出：
// ["one", "two", "three", "four", "five"]

使用展开运算符克隆数组​

在JavaScript中，对象是按引用而非按值赋值的。例如，

let arr1 = [1, 2, 3];
let arr2 = arr1;

console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3]

// 向数组追加一个项目
arr1.push(4);

console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3, 4]

这里，变量arr1和arr2都指向同一个数组。因此，对一个变量的更改会导致两个变量都发生更改。

然而，如果您想要复制数组，使它们不指向同一个数组，您可以使用展开运算符。这样，对一个数组的更改不会反映在另一个数组上。例如，

let arr1 = [1, 2, 3];

// 使用展开语法复制
let arr2 = [...arr1];

console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3]

// 向数组追加一个项目
arr1.push(4);

console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3]

展开运算符与对象​

您也可以将展开运算符与对象字面量一起使用。例如，

const obj1 = { x: 1, y: 2 };
const obj2 = { z: 3 };

// 将obj1和obj2的成员添加到obj3
const obj3 = { ...obj1, ...obj2 };

console.log(obj3); // {x: 1, y: 2, z: 3}

这里，obj1和obj2的属性都通过展开运算符添加到了obj3。

剩余参数​

当展开运算符用作参数时，被称为剩余参数。

您还可以使用剩余参数在函数调用中接受多个参数。例如，

let func = function (...args) {
  console.log(args);
};

func(3); // [3]
func(4, 5, 6); // [4, 5, 6]

这里，

  • 当单个参数传递给func()函数时，剩余参数只接受一个参数。
  • 当传递三个参数时，剩余参数接受所有三个参数。

注意：使用剩余参数会将参数作为数组元素传递。

您也可以使用展开运算符将多个参数传递给函数。例如，

function sum(x, y, z) {
  console.log(x + y + z);
}

const num1 = [1, 3, 4, 5];

sum(...num1); // 8

如果使用展开运算符传递多个参数，函数将接受所需的参数并忽略其余的参数。

注意：展开运算符是在ES6中引入的。一些浏览器可能不支持展开语法的使用。访问JavaScript展开运算符支持情况了解更多。

最后于 更新