前端入门学习笔记（二十六）JavaScript入门（九）rest参数、spread操作符，三个点（...）

1. Rest参数（…）

rest参数都表示三个点…
我们可以回顾一下，在前端入门学习笔记（二十三）中的提到的rest

调用函数时，按顺序传入参数即可：

abs(10); // 返回10
abs(-9); // 返回9

由于JavaScript允许传入任意个参数而不影响调用，因此传入的参数比定义的参数多也没有问题，虽然函数内部并不需要这些参数：

abs(10, 'blablabla'); // 返回10
abs(-9, 'haha', 'hehe', null); // 返回9

若想要接收多出的参数应该怎么做呢，在ES6前有arguments（不过箭头函数中没有arguments），这里要用ES6后提供的新关键字rest

function foo(a, b, ...arr) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(arr);
}

foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// [ 3, 4, 5 ]

foo(1);
// 结果:
// a = 1
// b = undefined
// []

---

2. spread 扩展运算符（…）

我们已经学会了如何把一系列的参数收集到数组中。

不过有时候我们也需要做与之相反的事情。

比如，内建函数 Math.max 会返回参数中最大的值：

console.log( Math.max(3, 5, 1) ); // 5

假如我们已有数组 [3, 5, 1]，我们该如何用它调用 Math.max 呢？

直接把数组“原样”传入是不会奏效的，因为 Math.max 期待你传入一系列的数值型参数，而不是单一的数组：

let arr = [3, 5, 1];
console.log( Math.max(arr) ); // NaN

毫无疑问我们不可能手动地去一一设置参数 Math.max(arg[0], arg[1], arg[2])，因为我们不确定需要设置多少个参数。待代码最终执行时，这个参数数组可能很大，也可能啥也没用。这样手动设置实为下策。

Spread 操作符 来拯救你了！它看起来和 Rest 参数操作符很像，都表示为 …，但是二者完全做了相反的事。

当在函数调用时使用 …arr，它会把可迭代的对象 arr “展开”为参数列表。

例如使用 Math.max：

let arr = [3, 5, 1];
console.log( Math.max(...arr) ); // 5（Spread 操作符把数组转为参数列表）

我们同样可以传递多个被展开的迭代对象：

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

console.log( Math.max(...arr1, ...arr2) ); // 8

我们甚至可以在普通的参数间使用展开操作符：

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

console.log( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25

同样，我们可以使用 Spread 操作符合并数组：

let arr = [3, 5, 1];
let arr2 = [8, 9, 15];

let merged = [0, ...arr, 2, ...arr2];
console.log(merged); // 0,3,5,1,2,8,9,15（0，然后是 arr 的值，2，然后是 arr2 的值）

在上面的例子中，我们都是使用数组来讲解 Spread 操作符的，其实其他可遍历的对象也同样适用。

如下例所示，我们可以使用 Spread 操作符把字符串展开为字符数组：

 let str = "Hello";

console.log( [...str] ); // H,e,l,l,o

JavaScript 内部使用了遍历器来实现 Spread 操作符，因此使用 Spread 操作符展开对象与使用 for…of 遍历该对象是一致的。

所以，针对一个字符串，for…of 会逐位返回该字符串中的字符，…str 也同理会得到 “H”,“e”,“l”,“l”,“o” 这样的结果。再将上一步所得的字符串序列传入数组初始化操作符 […str]，一个字符数组就这样生成了。

我们还可以使用 Array.from 实现上述功能，因为该操作符会将可遍历对象（如字符串）转换为数组：

 let str = "Hello";

// Array.from 会将可遍历对象转为数组
console.log( Array.from(str) ); // H,e,l,l,o

运行结果与 […str] 结果一致。

不过需要注意的是使用 Array.from(obj) 和使用 […obj] 还是存在细微差别：

Array.from 同时适用于类数组对象和可遍历对象。
Spread 操作符只能操作可遍历对象。
因此，若希望把一些“东西”转为数组，使用 Array.from 将更为通用。