ES6扩展运算符——三个点（...）用法详解

目录

1  含义

2  替代数组的 apply 方法

3  扩展运算符的应用

（ 1 ）合并数组

（ 2 ）与解构赋值结合

（ 3 ）函数的返回值

（ 4 ）字符串

（ 5 ）实现了 Iterator 接口的对象

（ 6 ） Map 和 Set 结构， Generator 函数

---

1  含义

扩展运算符（ spread ）是三个点（...）。又叫展开运算符，它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。 ——参考：【JS高级】ES6_剩余参数、打散数组-优快云博客

展开语法 (Spread syntax), 可以在函数调用/数组构造时，将数组表达式或者 string 在语法层面展开；还可以在构造字面量对象时，将对象表达式按 key-value 的方式展开。(译者注: 字面量一般指 [1, 2, 3] 或者 {name: "mdn"} 这种简洁的构造方式)

参考：展开语法 - JavaScript | MDN 

console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

该运算符主要用于函数调用。

var array=[1,2,3,4,5]
var items=[6,7]
function push(array, ...items) {
array.push(...items);
}
push(array,...items) // 9 返回数组的长度

function add(x, y) {
return x + y;
}
var numbers = [4, 38];
add(...numbers) // 42

上面代码中，array.push(...items)和add(...numbers)这两行，都是函数的调用，它们的都使用了扩展运算符。该运算符将一个数组，变为参数序列。

扩展运算符与正常的函数参数可以结合使用，非常灵活。

function f(v, w, x, y, z) {
    return v + w + x + y + z
 }
var args = [0, 1];
f(-1, ...args, 2, ...[3]); // 5

2  替代数组的 apply 方法

由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。

// ES5 的写法
function f(x, y, z) {
    return x + y + z
}
var args = [0, 1, 2];
f.apply(null, args); // 3

// ES6 的写法
function f(x, y,