【ECMAScript6】你不得不知道系列之剩余参数&扩展运算符

【ECMAScript6】你不得不知道系列之剩余参数&扩展运算符

1、 剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

ES6中对于函数多余的实参，采用args数组接收：

function sum(first,...args){
    console.log(first);
    console.log(args);
}
sum(10,20,30)

const sum = (...args)=> { //使用三点加args表示接收多余的实参
    let total = 0 ;
    args.forEach(item => total += item ) ;//循环遍历sum数组中的每一项
    return total ;
};

console.log(sum(10,20));
console.log(sum(10,20,30));

2、剩余参数与解构配合使用:

let students =['wangwu','zhangsan','lisi'];
let [s1,...s2] =students;
console.log(s1);//'wangwu'
console.log(s2);//['zhangsan','lisi']

3、扩展运算符（展开语法）可将数组或者对象拆分为 以逗号分隔的参数序列

let ary = ['a','b','c'];
console.log(...ary);//a b c
console.log('a','b','c')//a b c；这里说明console.log(...ary)与console.log('a','b','c')等价

4、扩展运算符（展开语法）可应用与合并数组

(1)方法一

let ary1=[1,2,3];
let ary1=[4,5,6];
let ary3=[...ary1,...ary2];
console.log(ary3);//[1,2,3,4,5,6]

(2)方法二

let ary1=[1,2,3];
let ary1=[4,5,6];
ary1.push(...ary2);
console.log(ary1);//[1,2,3,4,5,6]

5、扩展运算符（展开语法）可将 类（伪）数组或者可遍历对象转换成为真正的数组，转换后的数组才可调用数组对象的内置方法。

<div> </div>
<div> </div>
<div> </div>
var divs =documents,getElementsByTagn=Name('div');
console.log(divs);//HTMLCollection(3)[div,div,div]
var ary =[...divs];//(3)[div,div,div]
ary.push('a');
console.log(ary);//(4)[div,div,div,a]

*构造函数方法：Array.from( )也可将 类（伪）数组或者可遍历对象转换成为真正的数组

var array ={
    "0":"1"，
    "1"："2"，
    "length"：2
}
var ary1 = Array.from(array);
console.log(ary1);//["0":"1"，"1"："2"]
var ary2 = Array.from(array,item=>item*2)
console.log(ary2);//[2,4]