ES6扩展——函数扩展之剩余函数

Posted rickdiculous

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6扩展——函数扩展之剩余函数相关的知识,希望对你有一定的参考价值。

1、结合扩展运算符

            //剩余参数是做聚合的,扩展运算符是做展开的
            function sum(...args){
                console.log(arguments);
                console.log(arguments instanceof Array);  //false 因为它是一个类数组对象
                
                //以下代码均可将类数组转成数组
                //let args = Array.prototype.slice.call(arguments);
                //let args = [...arguments];
                //let [...args] = arguments;
                //或者在函数参数的前面加三个点,即剩余参数
                
                console.log(args);  // [1,2,321,4354,‘fdafsd‘]
            }
            sum(1,2,321,4354,‘fdafsd‘);
            
            

 

2、有多个参数时

            //有多个参数时
            function op(type, ...nums){
                console.log(type);  //sum
                console.log(nums);  //[1, 23, 454, 3, 67, 234]
            }
            op(‘sum‘, 1, 23, 454, 3, 67, 234);
            

 

3、剩余参数必须是参数中的最后一位,否则报错

            //需要注意的是,剩余参数必须是最后一位,否则会报错,例如:
            function op(type, b, ...nums, d){
                console.log(type);
                console.log(nums); //Rest parameter must be last formal parameter
            }
            op(‘sum‘, 1, 23, 454, 3, 67, 234);
            
            

 

4、剩余参数和reduce函数结合

            //用剩余参数和reduce函数结合,使参数相加
            function sum1(...numbers){
                return numbers.reduce(function(a,b){
                    return a + b;
                },0);
            }
            console.log(sum1(1,2,3,4))  //10
            

 

4.1

reduce函数的第一个参数是回调函数,第二个参数是表示第一次遍历的值为多少。回调函数中的两个参数,a表示上一次return的值,b表示这次遍历到的一个项,
 
arr.reduce(function(prev,cur,index,arr){
...
}, init);
arr 表示原数组;
prev 表示上一次调用回调时的返回值,或者初始值 init;
cur 表示当前正在处理的数组元素;
index 表示当前正在处理的数组元素的索引,若提供 init 值,则索引为0,否则索引为1;
init 表示初始值。
常用的参数只有两个:prev 和 cur。
原理:由于传入了初始值0,所以开始时a的值为0,b的值为数组第一项1,相加之后返回值为1作为下一轮回调的a值,然后再继续与下一个数组项相加,以此类推,直至完成所有数组项的和并返回。
第一轮 a=0(init默认值0),b=1; 返回值:a=1;
第二轮:a=1,b=2, ;返回值:a=3;
第三轮:a=3 ,b=3;返回值:a=6;
第四轮:a=6,b=4-----返回值:a=10

 

以上是关于ES6扩展——函数扩展之剩余函数的主要内容,如果未能解决你的问题,请参考以下文章

ES6 从入门到精通 # 05:函数之扩展运算符箭头函数

ES6躬行记——扩展运算符和剩余参数

ES6---函数的扩展之函数的默认值

ES6新增语法 + 内置对象扩展 + 箭头函数

ES6 之函数扩展和对象扩展

ES6新语法之---函数扩展