[js高手之路] es6系列教程 - 不定参数与展开运算符(...)

三个点(...)在es6中,有两个含义:

  • 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式:  在形参面前加三个点( ... )
  • 用在数组前面,可以把数组的值全部打散,展开,叫展开运算符. 语法格式:  在数组面前加三个点( ... )

求不定参数的和,以前可以用arguments来做,现在可以用不定参数来做,如下:

 1         function add( ...values ){
 2             console.log( values ); // [10, 20, 30]
 3             let sum = 0;
 4             for( let i = 0, len = values.length; i < len; i++ ){
 5                 sum += values[i];
 6             }
 7             return sum;
 8         }
 9         var res = add( 10, 20, 30 );
10         console.log( res ); //60
1         function add( ...keys, last ) { //报错,不定参数只能放在最后面
2 
3         }
1         // function add( ...key1, ...key2 ){ //报错,一个函数不能出现多个不定参数
2 
3         // }

筛选拷贝对象的属性,之前我们是这样子做的:

 1         function pick( src ){
 2             let target = Object.create( null );//创建一个空对象,跟new Object不同
 3             for( let i = 1, len = arguments.length; i < len; i++ ){
 4                 target[arguments[i]] = src[arguments[i]];
 5             }
 6             return target;
 7         }
 8         let user = {
 9             name : 'ghostwu',
10             age : 22,
11             sex : 'man',
12         };
13         var obj = pick( user, 'name', 'age' ); //拷贝user对象的name和age属性
14         console.log( obj ); //{name: "ghostwu", age: 22}

这样做没有什么问题,读取属性我们始终要记得从1开始, 因为arguments对象的索引0 被 src这个参数占据了. 用不定参数修改如下:

 1         function pick( src, ...keys ){
 2             console.log( keys ); //['name','age'];
 3             let target = Object.create( null );
 4             for( let i = 0, len = keys.length; i < len; i++ ){
 5                 target[keys[i]] = src[keys[i]];
 6             }
 7             return target;
 8         }
 9 
10         let user = {
11             name : 'ghostwu',
12             age : 22,
13             sex : 'man',
14         };
15 
16         var obj = pick( user, 'name', 'age' );
17         console.log( obj );

以上方式,更符合数组操作习惯, 拿来就用,不要老是记着从1开始

不定参数与arguments类似,当初设计的目的就是为了取代arguments,那不定参数会不会影响arguments呢?

1         function show( ...keys ){
2             console.log( keys.length ); //3
3             console.log( arguments.length ); //3
4             keys[0] = 1000;
5             console.log( keys[0], keys[1], keys[2] ); // 1000,20,30
6             console.log( arguments[0], arguments[1], arguments[2] ); //10,20,30
7         }
8         show( 10, 20, 30 );

不定参数修改之后,arguments并不会受到影响

展开运算符:

1         let a = 10, b = 20;
2         console.log( Math.max( a, b ) ); //20
1         let arr = [ 1, 3, 0, -1, 20, 100 ];
2         console.log( Math.max( arr ) );//NaN, max不能接收数组参数

我们可以借助apply的语法,把数组传递进去

1 let arr = [ 1, 3, 0, -1, 20, 100 ];
2 console.log( Math.max.apply( Math, arr ) );//100

有了展开运算符之后,更简单

1         let arr = [ 1, 3, 0, -1, 20, 100 ];
2         console.log( Math.max( ...arr ) ); //100 ...: 把数组展开
3         console.log( Math.max( ...arr, 1000 ) ); //1000

 

posted @ 2017-08-07 12:06 ghostwu 阅读(...) 评论(...) 编辑 收藏
Copyright ©2017 ghostwu