ES6 引入了一个新的运算符 "...", 通常称为 spread/rest(展开或收集运算符), 取决于在哪如何使用, 这里先介绍此运算符的概念和基本使用, 更多应用将在函数, 数组部分学习
第一种: 作为扩展运算符(spread)
场景: 使用在数组之前.
作用: 将一个数组转为用逗号分隔的参数序列
举例 1: 数组之前
- function foo(x, y, z){
- console.log(x, y, z)
- }
- foo.appley(null, [1, 2, 3]) // 在 ES6 之前我们这样使用数组作为函数参数调用.
- foo(...[1, 2, 3]) // 此处...[1, 2, 3]就被展开为用逗号隔开的 1, 2, 3 参数序列
当运算符 "..." 用在数组之前时, 数组会被转为用逗号分隔的参数序列.
举例 2: 替代 apply()方法
- // ES5 的 写法
- var arr1 = [0, 1, 2];
- var arr2 = [3, 4, 5];
- Array.prototype.push.apply(arr1, arr2); //push 方法参数不能为数组, ES5 需要借助 apply()方法实现.
- // ES6 的写法
- let arr1 = [0, 1, 2];
- let arr2 = [3, 4, 5];
- arr1.push(...arr2); //ES6 中借助扩展运算符直接将数组转为了参数序列.
举例 3: 替代数组的 concat()方法
- let a = [2, 3, 4]
- let b = [1, ...a, 5] // 此处 a 数组被展开为 2, 3, 4
- console.log(b) // 结果为[1, 2, 3, 4, 5]
上面的用法基本上替代了 concat(..), 这里的行为就像[1].concat(a, [5])
注意: 扩展运算符后如果是空数组, 不会产生任何效果
[...[], 1] // [1]
第二种: 作为收集运算符(rest)
作用: 收集剩余的参数转为一个数组.
场景: 在函数参数之前使用.
举例 1: 函数参数之前
- function foo(x, y, ...z){ //z 表示把剩余的参数收集到一起组成一个名叫 z 的数组.
- console.log(x, y, z)
- }
foo(1, 2, 3, 4, 5) //x 赋值 1,y 赋值 2,z 中赋值 [3, 4, 5] 数组
上例中参数 z 之前的'...'作为 rest 使用.
举例 2: 解构赋值
- const [first, ...rest] = [1, 2, 3, 4, 5]; // 此处'...'作为 rest 收集运算符使用
- first // 1
- rest // [2, 3, 4, 5]
- const [first, ...rest] = [];
- first // undefined
- rest // []
- const [first, ...rest] = ["foo"];
- first // "foo"
- rest // []
总结: 如何判断 ES6 中的运算符是扩展运算符 (spread) 还是收集运算符(rest), 主要取决于其作用的位置.
1. 数组之前, 作为扩展运算符使用, 将数组转为逗号分隔的参数序列.
2. 函数形参中, 收集传入的参数为数组.
3. 解构赋值中, 收集对应的数据为数组.
来源: http://www.bubuko.com/infodetail-2582871.html