ES6 中的扩展运算符应用详解-优快云博客

本文链接：https://blog.youkuaiyun.com/NiHoAjy/article/details/119061317

本文详细介绍了JavaScript中的扩展运算符（...），它能够将可迭代对象转换为参数序列。在参数扩展中，扩展运算符常用于将数组元素逐个作为参数传递，或者合并多个数组。在收集参数时，它可以将不定数量的独立参数组合到一个数组中。应用场景包括数组的解构传参、数组拼接和将伪数组转换为真数组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参数扩展与收集

ES6 增加有一个特殊符号，拓展运算符 ’ … ’ 即三个点。
它的使用如下：

扩展参数

… 扩展运算符能将可迭代对象转换为逗号分隔的参数系列；

如将数组拆开，其位置在传值体前（实参，需把自身拆开的变量）前

const arr = ['手机','电脑','人一个']
...arr  //  => '手机'，'电脑','人一个'

应用场景：

1. 如果将数组作为参数传入；则传入的只有一个参数，参数是一个数组；如果传入参数时给数组前加上扩展运算符如…arr;如会将数组解构出来，将每个元素做为参数传入；

function fun4() {
  console.log(arguments);
}
fun4(...[1, 2, 3]) //  { '0': 1, '1': 2, '2': 3 }

fun4([1, 2, 3])  // { '0': [ 1, 2, 3 ] }

2.[…arr1,…arr2] 可将两个数组（字符串也可以）合并在一起；如果只有一个数组，则可以复制数组，返回给新数组；

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

3. 可以将伪数组转换成数组，包括arguments;

function fun4() {
  console.log(...arguments);
}
fun4(1, 2, 3)   // 1 2 3

收集参数

在构思函数定义时，可以使用扩展操作符把不同长度的独立参数组合为一个数组。这有点类似arguments 对象的构造机制，只不过收集参数的结果会得到一个 Array 实例

function fun5(...params) {
  console.log(params);  // [ 1, 2, 3, 4 ]
}
fun5(1, 2, 3, 4)

function fun6(a, ...params) {
  console.log(a)
  console.log(params)
}
fun6(1, 2, 3) // 1  //  [2,3]
fun6(1) // 1 []
fun6()  // undefined  []

注意

扩展运算符用于形参和其他参数一起使用时必须放在最后

fun(...a , b )   // 报错
fun(a , ...b  ,c)  // 报错