ECMAScript 2019的扩展运算符-JavaScript中文网-JavaScript教程资源分享门户

随着JavaScript和前端技术的快速发展，越来越多的新特性得到了广泛的应用和推广。ECMAScript 2019的扩展运算符就是其中之一。扩展运算符是一种非常有用的语法，可以极大地提高代码的可读性和编写效率。

扩展运算符的基本概念

在JavaScript中，扩展运算符可以被用于数组、对象、字符串等数据结构上。它的作用是可以将一个数组或对象打散为独立的元素，或将多个元素合并为一个数组或对象。不仅如此，扩展运算符还有很多其他的用法。

数组扩展

在数组上使用扩展运算符，可以将一个数组“展开”成为一个个单独的元素。例如：

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

以上代码中，使用[...arr]可以将数组arr的所有元素展开为单独的元素，并将它们放在一个新的数组中。同时，我们还可以在这个新数组中添加其他的元素，比如4, 5和6。

另外，通过扩展运算符，我们也可以将多个数组进行合并，形成一个新的数组：

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

对象扩展

在对象上使用扩展运算符，可以将一个对象中的所有属性“展开”并复制到一个新的对象中。例如：

const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { ...obj1, d: 4 };
console.log(obj2); // { a: 1, b: 2, c: 3, d: 4 }

在以上代码中，使用{...obj1}可以将对象obj1中的所有属性（a，b和c）展开，在一个新对象中复制。同时，在这个新对象中添加了一个新属性d。

需要注意的是，如果多个对象中包含了相同的属性，那么后面的对象将会覆盖前面的对象中的同名属性：

const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { b: 3, c: 4, d: 5 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { a: 1, b: 3, c: 4, d: 5 }

在以上代码中，两个对象都包含了属性b和c，因此在新的对象中，属性b和c来自于obj2，而属性a来自于obj1。值得注意的是，在这个新对象中新增加了一个属性d，来自于obj2。

函数参数中的使用

除了可以在数组和对象中使用扩展运算符，还可以用于函数参数中。例如：

function sum(a, b, c) {
  return a + b + c;
}
const arr = [1, 2, 3];
console.log(sum(...arr)); // 6

在以上代码中，使用...arr可以将数组arr中的所有元素打散，作为函数sum的参数。可以看到，这样的写法非常简便，也非常容易理解。

总结与指导意义

扩展运算符是一种非常实用的语法，可以极大地提高我们的代码写作效率。我们可以使用扩展运算符：

在数组中添加/删除元素
将多个数组合并为一个新的数组
在对象中添加/删除属性
将多个对象合并为一个新的对象
将数组元素作为函数参数传递

在项目实践中，我们可以把扩展运算符和其他新特性结合起来使用来增强我们的代码实现能力。

const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { b: 3, c: 4, d: 5 };
const { a, ...rest } = { ...obj1, ...obj2 };
console.log(a); // 1
console.log(rest); // { b: 3, c: 4, d: 5 }

以上代码中，我们结合了对象的解构赋值，通过扩展运算符将两个对象合并成一个新对象并解构，最终得到了一个a变量和一个rest对象。

需要注意的是，在使用扩展运算符时我们需要保证其扩展的内容是可迭代的。否则将会抛出错误。比如，以下代码中的str就是不可迭代的，因此我们在使用时会抛出TypeError: Found non-callable @@iterator：

const str = 'hello';
console.log([...str]); // TypeError: Found non-callable @@iterator

在此提醒大家，在使用时请注意代码健壮性和安全性。

示例代码

接下来，为大家提供一些扩展运算符在实际应用中的示例代码。

1. 使用扩展运算符将对象添加到现有数组中：

const arr = [1, 2, 3];
const obj = { a: 4, b: 5, c: 6 };
const newArr = [...arr, obj];
console.log(newArr); // [ 1, 2, 3, { a: 4, b: 5, c: 6 } ]

2. 使用扩展运算符将多个对象合并成一个新对象：

const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { b: 3, c: 4, d: 5 };
const newObj = { ...obj1, ...obj2 };
console.log(newObj); // { a: 1, b: 3, c: 4, d: 5 }

3. 将数组元素拼接成字符串并去重：

const arr = ['abc', 'def', 'abc', 'xyz', 'xyz'];
const str = [...new Set(arr)].join('');
console.log(str); // "abcdefxyz"

4. 使用扩展运算符将多个数组排序后合并：

const arr1 = [3, 1, 4];
const arr2 = [2, 5];
const arr3 = [6, 9, 8, 7];
const allArrs = [...arr1, ...arr2, ...arr3];
const sortedArr = allArrs.sort((a, b) => a - b);
console.log(sortedArr); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

5. 使用扩展运算符将对象解构并赋值给变量：

const obj = { a: 1, b: 2, c: 3 };
const { a, ...rest } = obj;
console.log(a); // 1
console.log(rest); // { b: 2, c: 3 }

以上是扩展运算符在实际应用中的一些示例代码。希望大家可以将这种语法尽情地运用在自己的项目中，提高开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/647809f7968c7c53b044f754