JS 扩展运算符详解

VTYVT • 2025-02-05 13:05 • 编程

一、基本概念

JavaScript 的扩展运算符是指三个点（…）。它可以将一个数组转为用逗号分隔的参数序列，或将一个对象转为由 (key,value) 组成的序列。

扩展运算符出现的初衷是为了取代 ES5 中的 apply 方法。

下面是一个简单的示例：

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

扩展运算符将数组 [1, 2, 3] 转换成了参数 1，2，3。这个特性使得函数的调用非常方便。

二、数组操作

1. 数组合并

扩展运算符可以将两个或多个数组合并成一个数组。示例如下：

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

2. 数组拷贝

扩展运算符还可以拷贝数组，而不是引用。下面的示例可以看出，在拷贝过程中，修改新数组并不会影响原数组。

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

三、函数调用

扩展运算符可以将数组转换为一个函数的参数序列。这一特性对于需要多个参数的函数非常有用。

下面的示例演示了如何使用扩展运算符调用一个函数：

function myFunction(x, y, z) {
  console.log(x, y, z);
}
const arr = [1, 2, 3];
myFunction(...arr); // 1 2 3

四、对象操作

1. 对象合并

扩展运算符可以将多个对象合并成一个对象。如果有重复的键名，后面的属性会覆盖前面的属性。

const obj1 = { foo: 1, bar: 2 };
const obj2 = { baz: 3, bar: 4 };
const newObj = {...obj1, ...obj2};
console.log(newObj); // { foo: 1, bar: 4, baz: 3 }

2. 对象新增属性

扩展运算符还可以为一个对象添加新的属性，同时不会影响原对象。

const obj1 = { foo: 1, bar: 2 };
const newObj = { ...obj1, baz: 3 };
console.log(obj1); // { foo: 1, bar: 2}
console.log(newObj); // { foo: 1, bar: 2, baz: 3 }

五、其他用法

1. 字符串转数组

扩展运算符可以将一个字符串转换成字符数组。

const str = 'hello';
const arr = [...str];
console.log(arr); // ['h', 'e', 'l', 'l', 'o']

2. 数组转对象

扩展运算符可以将一个数组转换成对象。但是需要注意的是，数组中的每一项必须是由键名和键值构成的数组。

const arr = [['foo', 1], ['bar', 2]];
const obj = {...arr};
console.log(obj); // {foo: 1, bar: 2};

六、总结

扩展运算符是 JavaScript 中非常强大的功能之一，可以大大简化代码的编写，提高程序的效率。不仅可以用于数组和对象操作，还可以将字符串转换为字符数组，将数组转换为对象等。

原创文章，作者：VTYVT，如若转载，请注明出处：https://www.506064.com/n/334028.html