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项目地址

微信小程序实例列表

前端笔记列表

游戏列表

你可能感兴趣的:(Rattenking,的前端笔记,es6)