ES6学习之路3----rest参数与扩展运算符

什么是rest参数(…rest)

ES6引入rest参数（形式为“…变量名”），用于获取函数的多余参数。rest参数之后不能再有其他参数（即只能是最后一个参数）。

函数的rest参数

ES5写法：

function fn(){
    for(var i = 0; i<arguments.length ; i++){
        console.log(arguments[i]);
    }
}
fn(1,2,3);//1,2,3

ES6写法：

function fn(...arg){
    arg.forEach(current => console.log(current));
}
fn(1,2,3);//1,2,3

实例1：

function fn(...rest){console.log(rest);}
fn(1);//[1]
fn(1,2,3,4);//[1,2,3,4]
fn.length;//0

实例2：

function fn(a,...rest){
    console.log(a);
    console.log(rest);
}
fn(1);//1   []
fn(1,2,3,4);//1   [2,3,4]
fn.length;//1

实例3：

function fn(a,b,...rest){
    console.log(a);
    console.log(b);
    console.log(rest);
}
fn(1);//1 undefined  []
fn(1,2,3,4);//1  2 [3,4]
fn.length;//2

实例4：

function fn(a,...rest,b){
    console.log(a);
    console.log(b);
    console.log(rest);
}
fn(1);
fn(1,2,3,4);
fn.length;
//报错：Uncaught SyntaxError: Rest parameter must be last formal parameter

实例5：

function fn(...rest) {
 console.log(rest);
 console.log(arguments);
}
fn();
//[]
//[callee: (...), Symbol(Symbol.iterator): ƒ]
fn(1,2);
//[1,2]
//[1,2,callee: (...), Symbol(Symbol.iterator): ƒ]

此处是谷歌浏览器测试的结果。ECMAScript6函数剩余参数（Rest Parameters）写到在Firefox浏览器会报错，所以在Firefox，(…rest)和arguments不能同时使用！

数组的rest参数

实例1：

let [a,...rest] = [1,2,3,4];
console.log(a);//1
console.log(rest);//[2,3,4]

实例2：

let [a,...rest] = [1];
console.log(a);//1
console.log(rest);//[]

实例3：

let [a,...rest,b] = [1,2,3,4];
console.log(a);
console.log(rest);
console.log(b);
//直接报错：Uncaught SyntaxError: Rest element must be last element

通过以上实例我们可以总结出：

1. rest参数是一个真正的数组，它可使用Array.prototype上的所有方法；
2. 对函数使用length属性时，不包含rest参数；
3. rest参数只能作为最后一个参数，在它之后不能再有其他参数，否则会报错。

什么是扩展运算符(…)

扩展运算符可以看做是 rest 参数的逆运算，将一个数组转为参数序列。
实例1：

let arr = [1,2,3,4];
console.log(...arr);//1 2 3 4

实例2：

let arr = [1,2,3,4];
console.log(1,...arr,2);//1 1 2 3 4 2

实例3：

function add(...rest){
    let sum = 0;
    rest.forEach(current => sum += current);
    return sum;
}
add(...[1,2,3,4,5,6]);//21

替代 apply 方法

实例1：

## Math.max
ES5:
Math.max.apply(null,[1,2,3,5,6,7,4,5]);//7
ES6:
Math.max(...[1,2,3,5,6,7,4,5]);//7

## Array.prototype.push
ES5:
let arr = [1,2,3],arr0 = [6,7,8];
Array.prototype.push.apply(arr,arr0);
console.log(arr);//[1, 2, 3, 6, 7, 8]
ES6:
arr.push(...arr0);
console.log(arr);//[1, 2, 3, 6, 7, 8]

字符串转为数组

实例：

let str = 'prototype';
ES5:
console.log(str.split(''));//["p", "r", "o", "t", "o", "t", "y", "p", "e"]
ES6:
console.log(...str);//p r o t o t y p e
console.log([...str]);//["p", "r", "o", "t", "o", "t", "y", "p", "e"]

任何 Iterator 接口的对象，都可以用扩展运算符转为真正的数组。

总结：

rest参数

1. rest参数是将一个参数序列转化为数组；
2. rest参数是一个真正的数组；
3. rest参数可使用Array.prototype上的所有方法；
4. 对函数使用length属性时，不包含rest参数；
5. rest参数只能作为最后一个参数，在它之后不能再有其他参数，否则会报错；
6. 在Firefox浏览器，rest参数和arguments不能同时使用，同时使用会报错。

扩展运算符

1. 任何 Iterator 接口的对象，都可以用扩展运算符转为真正的数组;
2. 扩展运算符将一个数组转为参数序列。

其他

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表