ES6中的扩展运算符

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。同时,扩展运算符也不能用于函数参数的部分解构。