1. 什么是扩展运算符
扩展运算符,也称为展开运算符,是ES6中一个重要的语法特性。它可以将一个可迭代对象(比如数组和字符串)展开成单个的参数,或者将多个参数,合并成一个数组。
在函数调用、数组构造、对象构造以及函数参数等方面,扩展运算符都有重要的应用。
2. 数组的扩展运算符
2.1 展开数组
展开数组,是把一个数组展开成多个参数。举个例子:
const arr1 = [1, 2, 3];
console.log(...arr1); // 1 2 3
上述代码中,`...arr1` 就是数组的展开运算符,它把 `arr1` 数组展开成多个参数。
展开运算符还可以和其他值一起使用,比如:
const arr2 = [4, 5];
console.log([...arr1, ...arr2]); // [1, 2, 3, 4, 5]
对比一下上面的代码和下面的传统写法:
const arr3 = arr1.concat(arr2);
console.log(arr3); // [1, 2, 3, 4, 5]
可以看到,使用展开运算符比传统写法更简洁、更易读。
2.2 构造数组
使用展开运算符还可以构造新数组,例如:
const arr4 = [...arr1, 4, 5, 6];
console.log(arr4); // [1, 2, 3, 4, 5, 6]
上述代码中,我们把一个新数组 `[4, 5, 6]` 合并到了 `arr1` 数组后面,构造出了一个新的数组 `arr4`。
2.3 克隆数组
使用展开运算符还可以对数组进行快速克隆,例如:
const arr5 = [...arr1];
console.log(arr5); // [1, 2, 3]
上述代码中,`[...arr1]` 就克隆了一个新的数组。
3. 函数的扩展运算符
函数调用时,扩展运算符可以把一个数组展开成多个参数,举个例子:
function sum(a, b, c) {
return a + b + c;
}
const arr6 = [1, 2, 3];
console.log(sum(...arr6)); // 6
上述代码中,我们把 `arr6` 数组展开成三个参数,传递给了 `sum` 函数。
4. 对象的扩展运算符
4.1 展开对象
扩展运算符还可以用于展开对象,举个例子:
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
console.log({...obj1, ...obj2}); // {a: 1, b: 3, c: 4}
上述代码中,`...obj1` 和 `...obj2` 把两个对象展开成了多个键值对。
4.2 克隆对象
使用展开运算符也可以对对象进行克隆:
const obj3 = {...obj1};
console.log(obj3); // {a: 1, b: 2}
上述代码中,`{...obj1}` 就克隆了一个新的对象。
5. 扩展运算符的局限性
扩展运算符只能用于可迭代对象和对象字面量,它不能用于数字、布尔值和null。同时,扩展运算符也不能用于函数参数的部分解构。
如果试图使用扩展运算符来展开一个非对象或非可迭代对象,会报错:
console.log(...123); // Uncaught TypeError: 123 is not iterable
如果试图把扩展运算符用于函数参数的部分解构,也会报错:
const [x, y, ...z] = [1, 2, 3, 4, 5];
console.log(x, y, ...z, 6); // SyntaxError: Rest element must be last element
你只能把扩展运算符用于函数参数的最后一个参数,例如:
function foo(x, y, ...z) {
console.log(x, y, z);
}
foo(1, 2, 3, 4, 5); // 1 2 [3, 4, 5]
6. 总结
扩展运算符是ES6中一个非常实用的语法特性,它可以用于展开数组、构造数组、克隆数组、展开对象和克隆对象。值得注意的是,扩展运算符只能用于可迭代对象和对象字面量,不能用于数字、布尔值和null。同时,扩展运算符也不能用于函数参数的部分解构。