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. hdu-1536 S-Nim SG函数

    http://acm.hdu.edu.cn/showproblem.php?pid=1536 给出能够取的方法序列,然后求基本石子堆问题. 只要用S序列去做转移即可. 注意has初始化的一些技巧 #i ...

  2. Headless Service 和Service

    定于spec:clusterIP: None 还记得Service的Cluster IP是做什么的吗?对,一个Service可能对应多个EndPoint(Pod),client访问的是Cluster ...

  3. 【实战问题】【4】Vue写的页面在微信手机端和微信web开发者工具中都能正常显示,但是在微信pc端上显示空白

    原因:pc端微信浏览器不支持es6,而代码中使用了 let . 解决:将 let 改为 var(若使用 es6 语法比较多,可以进行转换,将 es6 语法转为 es5) 参考博客: 1,h5微信页面在 ...

  4. jquery等待特定元素加载再执行相关函数

    jQuery.fn.wait = function (func, times, interval) { var _times = times || 100, //100次 _interval = in ...

  5. MySQL Packets larger than max_allowed_packet are not allowed

    MySQL的一个系统参数:max_allowed_packet,其默认值为1048576(1M), 查询:show VARIABLES like '%max_allowed_packet%'; 修改此 ...

  6. laravle 整合 thrift

    1,安装thrift https://www.cnblogs.com/sunlong88/p/9965522.html 2,生成 RPC文件 thrift -r --out ./app --gen p ...

  7. xshell6 同时操作多个终端

    当我们使用Xshell的时候,有时候需要同时建立多个会话,连接不同的服务器或者不同的用户,如何同时向所有会话发送同一指令呢?方法如下: 1.依次点击  查看 ---> 撰写 ---> 撰写 ...

  8. 二分查找方法和printk打印级别

    人生就是一个茶几,上面摆满了杯具.内核也是一个大茶几,不过它上面的杯具是一个个的bug.确定bug什么时候被引入是一个很关键的步骤,在这个定位bug的过程中,不论有意或无意,都会很自然地用到二分查找的 ...

  9. MFC界面分割以及挂载

     MFC中文档与视图(二) Last Edit 2013/11/19 这篇主要是介绍一下怎么去分割视图. 视图的分割分为:动态分割,静态分割.所谓的静态分割是指软件一启动视图就分割完成,而动态分割是在 ...

  10. Centos 安装dhcp及简单配置

    install yum -y install dhcp file /etc/dhcp/dhcpd.conf eg:-------------------------------- ddns-updat ...