JavaScript ES6 扩展运算符详解与实战

扩展运算符概述

本文详细介绍 JavaScript 中扩展运算符的具体用法，旨在为读者提供实用的参考与示例。

扩展运算符的基本语法格式

其语法非常直观，仅由三个连续的点号（...）组成。

关键前提：该特性依赖于 ES6 语法环境的支持。

扩展运算符的核心功能是什么？

扩展运算符允许在期望多个参数（用于函数调用）、多个元素（用于数组字面量）或多个变量（用于解构赋值）的位置，将一个表达式展开。

数组嵌套与展开

1、将数组放入另一个数组中

接下来通过四个具体案例来深入理解扩展运算符的实际应用。

① 创建一个名为 middle 的数组 ② 创建第二个数组，其中包含 middle 数组 ③ 输出最终结果

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

在上述示例中，未使用扩展运算符。此时 middle 作为一个整体数组被直接放入另一个数组中。

2、如何使输出结果仅包含一个平铺后的数组？

此时需要引入扩展运算符。参考下方示例，除使用扩展运算符外，其余部分与前述示例保持一致。

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

当创建数组 arr 并在 middle 数组上使用扩展运算符时，并非将 middle 数组直接插入到 arr 中，而是将 middle 数组展开，将其中的元素逐一插入到 arr 中。

数组复制与深拷贝

3、复制数组

slice() 是 JavaScript 数组的一个内置方法，主要用于复制数组。我们同样可以利用扩展运算符来实现数组复制。

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
console.log(arr2);
// ['a', 'b', 'c']

arr 数组中的元素被展开后，作为单独的元素被分配到 arr2 中。此时可以随意修改 arr2 数组，而不会对源数组 arr 产生任何影响。

这是因为 arr 数组的值被展开后添加到 arr2 中，我们设置 arr2 等于 arr 的值，而非其引用本身。通过观察未使用扩展运算符时发生的情况，即可理解这一机制。

如果创建数组后，将另一个数组直接设置为等于其本身，代码如下：

var arr = ['a', 'b', 'c'];
var arr2 = arr;
console.log(arr2);
// ['a', 'b', 'c']

此时我们将 arr2 数组赋值给 arr 数组，这意味着只要修改 arr2，arr 数组也会随之发生变化。

arr2.push('d');
console.log(arr2);
// ['a', 'b', 'c', 'd']
console.log(arr);
// ['a', 'b', 'c', 'd']

数组拼接

4、拼接数组

使用扩展运算符可以替代 concat() 来实现数组的拼接操作。

var arr = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
arr1 = arr.concat(arr2);
console.log(arr);
// ['a', 'b', 'c', 'd', 'e', 'f']

以下是使用扩展运算符的实现方式。

var arr = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
arr = [...arr, ...arr2];
console.log(arr);
// ['a', 'b', 'c', 'd', 'e', 'f']

Math函数应用

5、Math 函数的应用

还可以将 Math 函数与扩展运算符结合使用。例如本例中，将使用 Math.max()。

Math.max()将返回一组数最大值。
Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100

在不使用扩展运算符的情况下，在数组上使用 Math.max() 的最简便方法是使用 .apply()。

var arr = [2, 4, 8, 6, 0];
function max(arr) {
 return Math.max.apply(null, arr);
}
console.log(max(arr));
// 8

现在看看如何使用扩展运算符实现相同的效果。仅需两行代码即可完成同样的操作。

var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);
console.log(max);
// 8

字符串转数组

6、字符串转换为数组

利用扩展运算符可以将字符串转换为字符数组。

var str = "hello";
var chars = [...str];
console.log(chars);
// ['h', 'e',' l',' l', 'o']

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。