rest参数与扩展运算符

  1. rest参数

    当遇上这样一种需求:对于输入的参数,求和返回,但传入的参数个数并不确定。

    // 在es5中,通常是使用函数自身的arguments对象实现的
    function sum () {
    let sum = 0;
    for(let i = 0; i < arguments.length; i++) {
    sum += arguments[i];
    }
    return sum;
    }

    // 使用Array.from将其转化为数组,就可以使用数组的方法
    function sum () {
    // arguments对象是一个伪数组,必须转化为数组才能使用reduce方法
    return Array.from(arguments).reduce((temp, value) => temp + value, 0);
    }
    // 使用Array.prototype.call()方法返回一个数组对象 --> 将伪数组转换为数组
    function sum () {
    return Array.prototype.call(arguments).reduce((temp, value) => temp +value, 0);
    }

    // ES6中还可以通过rest参数接收函数参数,并转换成一个数组
    function sum (...plus) {
    return plus.reduce((temp, value) => temp + value, 0);
    }

    注意:rest参数只能作为函数的最后一个参数,否则会报错

    function func (a, ...rest, b) {
    // do something
    }
    // Rest Parameter must be last formal paramter
  2. 扩展运算符

    扩展运算符与rest参数恰好是一个逆过程,rest参数是将多个参数转换成一个数组,而运算符扩展则是将一个数组扩展成多个参数的形式。

     // 现有一个数组
    let arr = [1, 2, 3, 4, 5];
    // 有一个求和函数
    function sum (...rest) {
    return rest.reduce((temp, value) => temp + value, 0);
    }
    // 现在需要通过sum函数对数组进行求和操作,但是函数需要的参数不是数组
    // 在es5中是不容易实现的
    // 但是使用扩展运算符,恰好可以解决问题
    sum(...arr);
    let arr1 = [1, 2, 3, 4, 5];
    let arr2 = [6, 7, 8];
    // 求arr1和arr2所有元素的和
    sum(...arr1, ...arr2);

    扩展运算符还可以用于数组的复制

    let arr1 = [1, 2, 3, 4];
    // ...arr1 扩展运算符就相当于 1, 2, 3, 4 --> 即数组的展开
    let copy = [...arr1];

    对于任何实现了遍历器接口(Iterator)的对象都可以使用扩展运算符

     let lis = document.querySelectorAll('li');
    console.log(...lis); // <li>a</li> <li>b</li> <li>c</li>
    // querySelectorAll()函数返回的是一个NodeList对象(注意:与document.get...系列返回的HTML集合是不一样的)
    let lisList = [...lis];
    // 内部的...后的参数是一个NodeList对象,NodeList对象实现了遍历器接口,因此能够用扩展运算符进行扩展,而后形成一个新数组,使用该方法可以将伪数组转化为数组

rest参数与扩展运算符的更多相关文章

  1. rest 参数和扩展运算符

    rest 参数和扩展运算符 rest 参数的形式为 ...变量名:扩展运算符是三个点 .... rest 参数 function add(...values) { console.log(values ...

  2. rest 参数与扩展运算符

    rest 参数与扩展运算符 1.rest 参数 ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了.rest 参数搭配的变量是一个数组 ...

  3. ES6 rest参数和扩展运算符

    rest参数 ES6引入了rest参数(形式为“…变量名”).其中rest参数搭配的变量是一个数组可以使用数组的一切操作. 例: function rest(...values){ let sum=0 ...

  4. es6 默认参数、rest参数、扩展运算符

    1.默认值 现在可以在定义函数的时候指定参数的默认值了,而不用像以前那样通过逻辑或操作符来达到目的了. function sayHello(name){ //传统的指定默认参数的方式 var name ...

  5. ES6学习笔记(一)——扩展运算符和解构赋值

    前言 随着前端工程化的快速推进,在项目中使用ES6甚至更高的ES7等最近特性早已不是什么新鲜事.之前还觉得既然浏览器支持有限,那了解一下能看懂就好,然而仅仅了解还是不够的,现在放眼望去,那些成熟框架的 ...

  6. es6中参数【默认值,扩展运算符】

    参数默认值 1.普通参数 function info(age,name="grace"){ console.log(name); } info(); //输入:grace 2.对象 ...

  7. es6可变参数-扩展运算符

    es5中参数不确定个数的情况下: //求参数和 function f(){ var a = Array.prototype.slice.call(arguments); var sum = 0; a. ...

  8. ES6躬行记(2)——扩展运算符和剩余参数

    扩展运算符(Spread Operator)和剩余参数(Rest Parameter)的写法相同,都是在变量或字面量之前加三个点(...),并且只能用于包含Symbol.iterator属性的可迭代对 ...

  9. ...扩展运算符+rest参数+call/apply/bind

    之前在set,map里面有提过扩展运算符的概念,但是今天偶然遇到一个问题,类似于扩展运算符的经典用法,突然发现对其了解不是很深,所以再来整理一下扩展运算符的相关知识. 重点:扩展运算符内部调用的是数据 ...

随机推荐

  1. 配置Spring MVC - 2019

    未完 软件环境:Eclipse-EE 1. 创建Maven Project 2. pom.xml - [更新日期19/03/31] <dependencies> <dependenc ...

  2. Postman中x-www-form-urlencoded请求K-V的ajax实现

    在Postman中使用x-www-form-urlencoded,并且用K-V传值,但是在代码中用ajax来请求,传值一直有问题,静下心来思考才发现K-V传入的是string,所以记录下来以防忘记!! ...

  3. PHP的json_encode()函数与JSON对象

    一.问题描述 这周搬砖的时候,前端通过ajax获取后端的数据后,照例用 对象.属性 的方式取值,然而结果总是总是不能如预期般展示在页面上. 先写个 demo 还原下场景:选中一个下拉框列表选项后,会在 ...

  4. [luogu P3313] [SDOI2014]旅行

    [luogu P3313] [SDOI2014]旅行 题目描述 S国有N个城市,编号从1到N.城市间用N-1条双向道路连接,满足从一个城市出发可以到达其它所有城市.每个城市信仰不同的宗教,如飞天面条神 ...

  5. Could not autowire. No beans of 'xxxx' type found的错误

    在Idea的spring工程里,经常会遇到Could not autowire. No beans of 'xxxx' type found的错误提示.但程序的编译和运行都是没有问题的,这个错误提示并 ...

  6. Dubbo常用配置解析

    一.多版本的支持 如何发布服务,需要将需要暴露的服务接口发布出去供客户端调用,需要在java同级目录新建一个resources目录,然后将resoureces目录标记成Test Resoureces ...

  7. 梳理:python—同一个类中的方法调用

    为什么突然在此提到这个梳理问题呢? 因为在自己实践综合练习学过的知识时,突然觉得有些知识点的运用总是不成功,于是翻过课本进行回顾,总是觉得是对的,可是当再进一步思考“既然是对的,为什么在程序中总是不成 ...

  8. ionic3+angular4的三方微信开发(登录and分享)

    登录: 1.在微信开放平台注册开发者帐号,并拥有一个已审核通过的移动应用,并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程. 2.通过cordova添加微信插件:进 ...

  9. 关于SASS

    SASS:(是一款辅助编写css的工具 安装之后可以通过同时按window键+“R”键 输入“powershell”进入CMD命令页面: 输入“sass -v”可以查看当前的sass版本 输入“cd ...

  10. Java代码调用服务器上的Shell脚本

    Java代码调用服务器上的Shell脚本 这里主要是因为我们报表平台有用到用户手工录入的数据作为结果数据且需要纳入saiku去展示 如我们所知,saiku不会自动刷新,所以需要在数据更新接口中调用服务 ...