ES6学习笔记： rest参数 和 扩展运算符

rest参数

ES6引入用来代替arguments，收集函数的多余参数，放在一个数组中。

只要有多个参数的个数不确定的时候，就首选rest参数。

该运算符主要用于函数定义。

// arguments变量的写法
function sortNumber() { //arguments中就收集了所有的实参值
  return Array.prototype.slice.call(arguments).sort((a,b)=>a-b);
    	 //强行调用数组原型对象上slice方法把arguments转换为数组在用sort排序
}
sortNumber(23,56,98,33,4); //[4, 23, 33, 56, 98]

// rest参数的写法
function sortNumbers(...arr) { //arr数组中就收集了所有的实参值
  return arr.sort((a,b)=>a-b);
}
sortNumbers(23,56,98,33,4); //[4, 23, 33, 56, 98]

优点：

1. 是纯正的数组类型，所以可以使用Array的函数
2. 可以收集除了前边部分固定部分后边的参数
3. 箭头函数支持

扩展运算符

扩展运算符也是三个点（...），将一个数组打散为用逗号分隔的参数列表。

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

function add(x, y) {
  return x + y;
}
let num = [24, 3];
add(...num);  //27

扩展运算符与正常的函数参数可以结合使用

function add(o, v, w, x, y, z) {
  console.log("" + o + v + w + x + y + z);
}
let num = [24, 3];
add(-1, ...num, 2, ...[3],5); //"-1243235"

扩展运算符后面还可以放置表达式

let x = 0;
let arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
];
// arr:[b]

注意：只有函数调用时，扩展运算符才可以放在圆括号中，其他比如(...[1,2])单纯使用圆括号包裹就会报错

案例rest参数和扩展运算符最常用的情况：

function push(array, ...items) {  //此处是函数定义，"..."为rest参数
  array.push(...items);  //此处是函数的调用，"..."为扩展运算符
}
let arr =[1,2]
push(arr,3,4,5)  //arr:[1,2,3,4,5]

替代函数的apply方法

apply方法传送门

这里说的代替是说扩展运算符可以代签apply的打散数组的功能，如下

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

// ES6的写法
function fun(x, y, z) {
  // ...
}
let args = [0, 1, 2];
fun(...args);

参考资料：ECMAScript 6 入门 作者：阮一峰