本文共 2372 字，大约阅读时间需要 7 分钟。
扩展运算符（...）是 JavaScript 中一个非常有用的特性，能够将数组转换为可变参数序列。它在函数调用、数组操作、字符串处理等场景中有广泛的应用。本文将深入探讨扩展运算符的功能及其实际应用场景。
扩展运算符（...）看起来像三个点，用于将数组中的元素拆分成独立的参数。它类似于 rest 参数的逆运算，可以将数组转换为逗号分隔的参数序列。
console.log(...[1, 2, 3]) // 输出：1 2 3console.log(1, ...[2, 3, 4], 5) // 输出：1 2 3 4 5console.log([...document.querySelectorAll('div')]); // 输出：数组中的所有 div 元素 传统的 ES5 写法中，通过 apply 方法可以将数组传递为函数参数。然而，扩展运算符的引入使得这种操作更加简便。
// ES5function f(x, y, z) { // ...}var args = [0, 1, 2];f.apply(null, args); // 成功调用函数// ES6function f(x, y, z) { // ...}var args = [0, 1, 2];f(...args); // 更简便的写法 扩展运算符还可以用于替代 apply 方法，将数组元素扩散到函数参数中。例如，计算数组最大值：
// ES5Math.max.apply(null, [14, 3, 77]); // 输出：77// ES6Math.max(...[14, 3, 77]); // 输出：77
扩展运算符在 JavaScript 中有多种实际应用场景。
扩展运算符可以用来轻松合并多个数组。
// ES5[1, 2].concat(more) // 输出：[1, 2, ...more]// ES6[1, 2, ...more] // 输出：[1, 2, ...more]
例如，合并多个数组：
var arr1 = ['a', 'b'];var arr2 = ['c'];var arr3 = ['d', 'e'];// ES5：arr1.concat(arr2, arr3) // 输出：['a', 'b', 'c', 'd', 'e']// ES6：[...arr1, ...arr2, ...arr3] // 输出：['a', 'b', 'c', 'd', 'e']
扩展运算符可以与解构赋值结合，用于生成数组或提取数组元素。
// ES5var a = list[0], rest = list.slice(1);// ES6var [a, ...rest] = list; // a = list[0], rest = list.slice(1)
例如，提取数组的前两个元素和剩余元素：
const [first, ...rest] = [1, 2, 3, 4, 5];console.log(first); // 输出：1console.log(rest); // 输出：[2, 3, 4, 5]
扩展运算符可以用于函数返回多个值。例如，构造一个日期对象：
var dateFields = readDateFields(database);var d = new Date(...dateFields); // 正确构造日期对象
扩展运算符可以将字符串转换为数组：
[...'hello'] // 输出：['h', 'e', 'l', 'l', 'o']
这在处理 Unicode 字符时非常有用：
var str = 'x\uD83D\uDE80y';console.log(str.length); // 输出：4console.log([...str].length); // 输出：3
扩展运算符可以将具有 Iterator 接口的对象转换为数组。例如，将 node列表 转换为数组：
var nodeList = document.querySelectorAll('div');var array = [...nodeList]; // 转换为数组 扩展运算符还可以用于 Map 和 Generator 函数。例如，遍历 Map 的键：
var map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'] ]);var arr = [...map.keys()]; // 输出：[1, 2, 3]
Generator 函数也可以使用扩展运算符：
var go = function*() { yield 1; yield 2; yield 3;};console.log([...go()]); // 输出：[1, 2, 3] 扩展运算符在使用时需要注意以下几点：
只能用于可迭代对象：如果将不可迭代的对象传递给扩展运算符，会抛出错误。
结合解构赋值时的位置：扩展运算符必须放在解构赋值的最后一位，否则会导致语法错误。
性能考虑：在大数组中使用扩展运算符可能会影响性能，需要根据具体需求权衡。
扩展运算符是 JavaScript 中非常强大的一个特性，能够简化代码并提高开发效率。通过合理使用扩展运算符，可以在多种场景中实现更简洁的代码。
转载地址：http://tdgfk.baihongyu.com/