ES6引入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不能同时使用!
实例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
通过以上实例我们可以总结出:
- rest参数是一个真正的数组,它可使用Array.prototype上的所有方法;
- 对函数使用length属性时,不包含rest参数;
- 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
实例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 接口的对象,都可以用扩展运算符转为真正的数组。
总结:
我的博客,欢迎交流!
我的CSDN博客,欢迎交流!
微信小程序专栏
前端笔记专栏
微信小程序实现部分高德地图功能的DEMO下载
微信小程序实现MUI的部分效果的DEMO下载
微信小程序实现MUI的GIT项目地址
微信小程序实例列表
前端笔记列表
游戏列表