[js高手之路] es6系列教程 - 不定参数与展开运算符(...)
2017-08-07 12:06
701 查看
三个点(...)在es6中,有两个含义:
用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式: 在形参面前加三个点( ... )
用在数组前面,可以把数组的值全部打散,展开,叫展开运算符. 语法格式: 在数组面前加三个点( ... )
求不定参数的和,以前可以用arguments来做,现在可以用不定参数来做,如下:
筛选拷贝对象的属性,之前我们是这样子做的:
这样做没有什么问题,读取属性我们始终要记得从1开始, 因为arguments对象的索引0 被 src这个参数占据了. 用不定参数修改如下:
以上方式,更符合数组操作习惯, 拿来就用,不要老是记着从1开始
不定参数与arguments类似,当初设计的目的就是为了取代arguments,那不定参数会不会影响arguments呢?
不定参数修改之后,arguments并不会受到影响
展开运算符:
我们可以借助apply的语法,把数组传递进去
有了展开运算符之后,更简单
用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式: 在形参面前加三个点( ... )
用在数组前面,可以把数组的值全部打散,展开,叫展开运算符. 语法格式: 在数组面前加三个点( ... )
求不定参数的和,以前可以用arguments来做,现在可以用不定参数来做,如下:
function add( ...values ){ console.log( values ); // [10, 20, 30] let sum = 0; for( let i = 0, len = values.length; i < len; i++ ){ sum += values[i]; } return sum; } var res = add( 10, 20, 30 ); console.log( res ); //60
function add( ...keys, last ) { //报错,不定参数只能放在最后面 }
// function add( ...key1, ...key2 ){ //报错,一个函数不能出现多个不定参数 // }
筛选拷贝对象的属性,之前我们是这样子做的:
function pick( src ){ let target = Object.create( null );//创建一个空对象,跟new Object不同 for( let i = 1, len = arguments.length; i < len; i++ ){ target[arguments[i]] = src[arguments[i]]; } return target; } let user = { name : 'ghostwu', age : 22, sex : 'man', }; var obj = pick( user, 'name', 'age' ); //拷贝user对象的name和age属性 console.log( obj ); //{name: "ghostwu", age: 22}
这样做没有什么问题,读取属性我们始终要记得从1开始, 因为arguments对象的索引0 被 src这个参数占据了. 用不定参数修改如下:
function pick( src, ...keys ){ console.log( keys ); //['name','age']; let target = Object.create( null ); for( let i = 0, len = keys.length; i < len; i++ ){ target[keys[i]] = src[keys[i]]; } return target; } let user = { name : 'ghostwu', age : 22, sex : 'man', }; var obj = pick( user, 'name', 'age' ); console.log( obj );
以上方式,更符合数组操作习惯, 拿来就用,不要老是记着从1开始
不定参数与arguments类似,当初设计的目的就是为了取代arguments,那不定参数会不会影响arguments呢?
function show( ...keys ){ console.log( keys.length ); //3 console.log( arguments.length ); //3 keys[0] = 1000; console.log( keys[0], keys[1], keys[2] ); // 1000,20,30 console.log( arguments[0], arguments[1], arguments[2] ); //10,20,30 } show( 10, 20, 30 );
不定参数修改之后,arguments并不会受到影响
展开运算符:
let a = 10, b = 20; console.log( Math.max( a, b ) ); //20
let arr = [ 1, 3, 0, -1, 20, 100 ]; console.log( Math.max( arr ) );//NaN, max不能接收数组参数
我们可以借助apply的语法,把数组传递进去
let arr = [ 1, 3, 0, -1, 20, 100 ]; console.log( Math.max.apply( Math, arr ) );//100
有了展开运算符之后,更简单
let arr = [ 1, 3, 0, -1, 20, 100 ]; console.log( Math.max( ...arr ) ); //100 ...: 把数组展开 console.log( Math.max( ...arr, 1000 ) ); //1000
相关文章推荐
- [js高手之路] es6系列教程 - 不定参数与展开运算符(...)
- [js高手之路] es6系列教程 - 函数的默认参数详解
- [js高手之路] es6系列教程 - 函数的默认参数详解
- [js高手之路] es6系列教程 - 箭头函数详解
- [js高手之路] es6系列教程 - var, let, const详解
- [js高手之路] es6系列教程 - Set详解与抽奖程序应用实战
- [js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)
- [js高手之路] es6系列教程 - 解构详解
- [js高手之路] es6系列教程 - var, let, const详解
- [js高手之路] es6系列教程 - 新的类语法实战选项卡
- [js高手之路] es6系列教程 - 箭头函数详解
- [js高手之路] es6系列教程 - 迭代器与生成器详解
- [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解
- [js高手之路] es6系列教程
- [js高手之路] es6系列教程 - var, let, const详解
- [js高手之路] es6系列教程 - new.target属性与es5改造es6的类语法
- [js高手之路] es6系列教程 - 对象功能扩展详解
- [js高手之路] es6系列教程 - 解构详解
- [js高手之路] es6系列教程 - Map详解以及常用api
- [js高手之路] es6系列教程