一、基本概念
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 中非常强大的功能之一,可以大大简化代码的编写,提高程序的效率。不仅可以用于数组和对象操作,还可以将字符串转换为字符数组,将数组转换为对象等。