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]
时间: 2024-10-05 21:01:04

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

ES6 rest参数和扩展运算符

rest参数 ES6引入了rest参数(形式为“…变量名”).其中rest参数搭配的变量是一个数组可以使用数组的一切操作. 例: function rest(...values){ let sum=0; for(var val of values){ sum+=val; } return sum; } add(1,2,3)//6 值得注意的是rest参数之后不能再有其他参数(只能是最后一个参数)否则会报错. 例: function rest(a,...b,c){ }//报错 函数的length属

ES6函数的拓展

1.函数参数的默认值 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello World 上面代码检查函数log的参数y有没有赋值,如果没有,则指定默认值为World.这种写法的缺点在于

ES6 函数的拓展(四)

一.参数带默认值函数1.在函数形参可以赋予函数默认值[即实参严格匹配undefined时,在函数内部使用形参时调用它的默认值]2.函数name属性 [返回函数名称,无名的函数返回空字符串]3.函数length属性  [从左往右开始计算函数形参直到碰到带有默认值形参结束的形参个数的计算]eg: //普通函数传参 function test(a,b=2,c,d=3){ console.log(a,b,c,d); } test(3,4,5); //输出abcd分别为:3,4,5,3 console.l

ES6 函数参数的默认值

基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采取变通的方法. function log(x,y){ y = y||'world'; console.log(x,y); } log('kkk');//kkk world 这种写法的缺点在于: 如果参数y赋值了,但是对应的布尔值为false,则该赋值不起作用.如果在调用函数的时候,传入的y参数是一个空字符串,那么y就会被修改为默认值. 避免这个问题,需要先判断一下:1.通过判断值是否等于undefined,2.判断arguments.

ES6函数参数解构

ES6函数参数解构 常规的JavaScript若要给函数传递的参数是一个对象,需要像下面这样来实现: function sayName(person) { if(Object.prototype.toString.call(person) == '[object Object]') { console.log( `${person.firstName} ${person.lastName}`); } } sayName({firstName: 'Stephen', lastName: 'Curr

ES6函数扩展

前面的话 函数是所有编程语言的重要组成部分,在ES6出现前,JS的函数语法一直没有太大的变化,从而遗留了很多问题和的做法,导致实现一些基本的功能经常要编写很多代码.ES6大力度地更新了函数特性,在ES5的基础上进行了许多改进,使用JS编程可以更少出错,同时也更加灵活.本文将详细介绍ES6函数扩展 形参默认值 Javascript函数有一个特别的地方,无论在函数定义中声明了多少形参,都可以传入任意数量的参数,也可以在定义函数时添加针对参数数量的处理逻辑,当已定义的形参无对应的传入参数时为其指定一个

深入理解javascript函数系列第四篇——ES6函数扩展

× 目录 [1]参数默认值 [2]rest参数 [3]扩展运算符[4]箭头函数 前面的话 ES6标准关于函数扩展部分,主要涉及以下四个方面:参数默认值.rest参数.扩展运算符和箭头函数 参数默认值 一般地,为参数设置默认值需进行如下设置 function log(x, y) { y = y || 'World'; console.log(x, y); } 但这样设置实际上是有问题的,如果y的值本身是假值(包括false.undefined.null.''.0.-0.NaN),则无法取得本身值

rest 参数与扩展运算符

rest 参数与扩展运算符 1.rest 参数 ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了.rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中. function add(...values) { let sum = 0; for (var val of values) { sum += val; } return sum; } add(2, 5, 3) // 10 上面代码的add函数是一个求和函数,利用

JavaScript函数的默认参数(default parameter)

JavaScript函数的默认参数(default parameter) js函数参数的默认值都是undefined, ES5里,不支持直接在形参里写默认值.所以,要设置默认值,就要检测参数是否为undefined,按需求赋值. function multiply(a, b) { b = typeof b !== 'undefined' ? b : 1; return a*b; } multiply(5); // 5 multiply(5, 0); // 0 上面是MDN的相关例子,是比较严谨的