es6函数的rest参数和拓展运算符(...)的解析

Posted 行果、

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了es6函数的rest参数和拓展运算符(...)的解析相关的知识,希望对你有一定的参考价值。

es6的新特性对函数的功能新增加了rest参数和...的拓展运算符。这是两个什么东西呢?

先来看一个问题:如何获取一个函数除了定义的参数之外的其他参数?传统的做法是借助函数的arguments关键字来获取的。

方法如下:

function add(a,b){
          var i=2,rest=[];
          if(arguments.length>2){
             for(i;i<arguments.length;i++){
                 rest.push(arguments[i]);
             }
          }
        return rest;
      }
console.log(add(5,6,7,8));//7,8
//这种方法饶了一个弯子,需要排除前面两个参数,i从2进行循环。

es6的方法:
采用...“变量名”的方法,这个就是es6的rest参数,rest将函数多余的参数转化为一个数组,无需借助arguments参数了。
      function sum(a,b,...rest) {
         let sum = a + b; 
         console.log(‘获取出ab之外的其他参数:‘+rest);  
         for(var val of rest){
            sum += val;
         }
         return sum;
      }
      var arr = [];
      for(var i = 0;i < 100;i++){
          arr.push(i);
      }
      console.log(sum(4,5,9,10,11,12,13));
      console.log(sum(...arr));

如上我们用rest参数就可以获取到除了a,b参数之外的参数。

 

再来看看什么是es6的拓展运算符...?

...是一个将数组转为用逗号分隔的参数序列,与rest参数恰恰相反。

思考问题?如何求一个数组中的最大值?

  //es5的方法,需要借助apply将数组转化为参数给Math.max()方法使用。
      var maxArr=[10,20,35];
      var max = Math.max.apply(null,maxArr);//apply()第一个参数指定为null 或     undefined 时this会自动指向全局对象(浏览器中就是window对象);
//es6方法。借助...拓展运算符。
var max2 = Math.max(...maxArr);
console.log(max2);//是不是比es5的方法方便多了。

...拓展运算符还可以用来合并两个数组:

//使用...合并数组
var arr1 = [1,2,3];
var arr2 = [4,5,6];
//es5
var arr3 = arr1.concat(arr2);
//es6
var arr4 = [...arr1,...arr2]; console.log(arr3);[1,2,3,4,5,6] console.log(arr4);[1,2,3,4,5,6]

以上是关于es6函数的rest参数和拓展运算符(...)的解析的主要内容,如果未能解决你的问题,请参考以下文章

ES6 随记(3.4.1)-- 函数的拓展(参数默认值,扩展运算符)

ES6箭头函数rest参数扩展运算符Symbol的使用

☀️Rest参数和扩展运算符

☀️Rest参数和扩展运算符

☀️Rest参数和扩展运算符

ES6---扩展运算符和rest‘...’(三点运算符),在数组函数set/map等中的应用