【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]