1.1 先看一个求最大值的例子

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <script>

         let val1 = 70,

             val2 = 20;

         console.log(Math.max(val1, val2)); // 70

     </script>

 </head>

 <body>

 </body>

 </html>

1.2. 传入一个数组求最大值呢？

         let arr = [1, -2, 3, 0, 44];

         console.log(Math.max(arr)); //NaN, max函数不支持数组参数

1.3 伪装成数组来使用呢，调用apply或者call ，两者都可以达到伪装的目的，只是参数不同，apply 参数是数组或者arguments；call的参数是一个一个的参数，这里是数组，所以使用apply

        let arr = [1, -2, 3, 0, 44];

        // 把arr传递给Math对象，然后调用Math.max()函数，这样实现对数组最大值的查找

        console.log(Math.max.apply(Math, arr));

1.4 使用es6 展开运算符：也可以达到目的，而且还简单一点，不用去伪装

         let arr = [1, -2, 3, 0, 44];

         console.log(Math.max(...arr));

2.1  数组计算：（arguments 是传入参数的一个类数组）

        function add() {

             var sum = 0;

             for (var i = 0, len = arguments.length; i < len; i++) {

                 sum += arguments[i];

             }

             return sum;

         }

         console.log(add(10, 20, 30));

2.2 数组计算改写成数组展开运算符：

         function add(...values) {

             console.log(values);     // [10, 20, 30, 40]

             let sum = 0;

             for (let i = 0, len = values.length; i < len; i++) {

                 sum += values[i];

             }

             return sum;

         }

         var res = add(10, 20, 30, 40);

         console.log(res);            //

3. 展开运算符：不定参数的位置定义

3.1 不定参数只能放在最后面

function add(...keys, last) { //报错

        }

3.2 不定参数可以和其他参数搭配使用

       function add(last, ...keys) { //不定参数一定要放在最后面

            console.log(last, keys);

            console.log(last);

            console.log(keys);

        }

        add(10, 20, 30, 40);

3.2.2 多个参数

        function add(first, last, ...keys) { //不定参数一定要放在最后面

             console.log(last, keys);

             console.log(first);

             console.log(last);

             console.log(keys);

         }

         add(10, 20, 30, 40);

3.3 不定参数只能有一个

        function add(...keys1, ...keys2) { //报错 不定参数 不能出现2个(包含2个)

         }

4. 过滤性拷贝一个对象的属性（使用arguments）

一个对象有很多属性，有的时候，我们只想知道其中的部分属性，别的并不关心，所以就只需要传入关心的属性就可以了

思路：

4.1 建立一个对象，包含无数属性和方法，例如下面的user

4.2 写一个方法，对属性过滤的过程进行定义，例如下面的函数 pick()

4.2.1 建立一个新对象target

4.2.2 对传入的arguments 进行循环，从第一个参数开始（因为第0个参数是对象本身，所以去除）

4.2.3 把传入参数的对应对象的属性值，挨个的保存到新创建的对象target中

4.2.4 最后返回target 对象

备注：这里src 是把传入的arguments 当做一个对象，而这个对象的属性分别是arguments 中的值，对象调用属性src--->arguments[i]，然后得到属性值src[ argument[ i ] ]，然后把这个值src[ argument[ i ] ]赋值给对象target ，此时顺便把target的属性也一并创建了，因为值是挂在对象的属性上的。当循环完毕，target 也成了一个完整的有实体属性的对象了，返回这个新建的对象，就达到了顾虑的目的了

        //过滤性的拷贝一个对象的属性

         function pick(src) {

             let target = Object.create(null); //创建一个空对象,跟new Object不同

             for (let i = 1, len = arguments.length; i < len; i++) {

                 target[arguments[i]] = src[arguments[i]];

             }

             return target;

         }

         let user = {

             name: 'huanying2015',

             hobit: 'running',

             age: 25,

             sex: 'man',

         };

         var obj = pick(user, 'name', 'age'); //拷贝user对象的name和age属性

         console.log(obj); //{name: "huanying2015", age: 25}

5. 过滤性拷贝一个对象的属性（使用展开运算符）：与上面的效果相同，只是这里就不能使用arguments了，使用keys 更方便，直接从第0个开始遍历

          function pick(src, ...keys) {

             console.log(keys);                                     //['name','age'];

             let target = Object.create(null);

             for (let i = 0, len = keys.length; i < len; i++) {

                 target[keys[i]] = src[keys[i]];

             }

             return target;

         }

         let user = {

             name: 'huanying2015',

             hobit: 'running',

             age: 25,

             sex: 'man',

         };

         var obj = pick(user, 'name', 'age');

         console.log(obj);                                         //{name: "huanying2015", age: 25}

6. arguments 和 keys 的差异：（仅针对本页面）

6.1 初始状态：

         function show(...keys) {

             console.log(keys.length); //

             console.log(arguments.length); //

             console.log(keys[0], keys[1], keys[2]); // 10,20,30

             console.log(arguments[0], arguments[1], arguments[2]); //10,20,30

         }

         show(10, 20, 30);

6.2 在函数中改变keys 的值

         function show(...keys) {

             console.log(keys.length); //

             console.log(arguments.length); //

             keys[0] = 1000; //不定参数的修改，不会影响arguments

             console.log(keys[0], keys[1], keys[2]); // 1000,20,30

             console.log(arguments[0], arguments[1], arguments[2]); //10,20,30

         }

         show(10, 20, 30);

7. 关于new Object() 和 Object.create(null) 的差异

         var obj = new Object();       //不要天真的以为，他就是空对象， 他有Object原型上的东西

         console.log(obj);

         var obj = Object.create(null);

         console.log(obj);             //create传了null, 什么也没有的空对象

es6 初级之展开运算符的更多相关文章

  1. ES6中的展开运算符和解构对象

    let obj = { a:1 b:2 } let obj2 = { ...obj c:3 d:4 } console.log(obj2)//1,2,3,4,对象展开 //常考题目 let a = 1 ...

  2. ES5与ES6常用语法教程之 ④展开运算符...在数组和对象中的作用

    展开操作符(spread) 展开运算符(spread operator)允许一个表达式在某处展开.展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以 ...

  3. ES6之展开运算符

    本文介绍ES6新增的展开运算符(spread operator). 由上图可得,展开运算符负责拼装数组和对象,与之相反,解构赋值负责分解数组和对象. 由上图可得,展开运算符能和解构赋值一起发挥成更大的 ...

  4. [js高手之路] es6系列教程 - 不定参数与展开运算符(...)

    三个点(...)在es6中,有两个含义: 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式:  在形参面前加三个点( ... ) 用在数组前面,可以把数组的值 ...

  5. [转] ES6展开运算符

    语法 用于函数调用 myFunction(...iterableObj); 用于数组字面量 [...iterableObj, 4, 5, 6] 函数传参 目前为止,我们都是使用Function.pro ...

  6. javascript es6系列教程 - 不定参数与展开运算符(...)

    三个点(...)在es6中,有两个含义: 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式:  在形参面前加三个点( ... ) 用在数组前面,可以把数组的值 ...

  7. es6展开运算符

    数组的展开合并 现在有两个数组[1, 2, 3, 4]和[5, 6, 7],想要将两个函数拼接成一个新的函数. //es5的写法 let arr1 = [1, 2, 3, 4]; let arr2 = ...

  8. ES6展开运算符数组合并，函数传参

    定义: .展开运算符允许一个表达式在某处展开. 使用场景 1.展开函数在多个参数的地方使用 .意指用于函数传参 2.多个元素的地方使用,意指用于数组字面量 3.多个边框的地方使用,意指用于解构赋值 函 ...

  9. ES6箭头函数与展开运算符

    箭头函数:省去了关键字function和return: eg: reduce=(a,b)=>a+b;//返回a+b的值 redduce=(a,b)=>{console.log(a);con ...

随机推荐

  1. 廖雪峰Java1-3流程控制-4switch多重选择

    switch语句 根据switch(表达式)跳转到匹配的case结果,继续执行case结果: 的后续语句,遇到break结束执行,没有匹配条件,执行default语句. int i = 3 switc ...

  2. PowerDesigner最基础的使用方法入门学习(二)

    1.  生成sql脚本 Database→Generate Database 选择要输出的文件路径,即文件存储路径,并根据需要修改文件名,单击确定后便会生成sql脚本. 在Options选项卡里,可以 ...

  3. [UE4]碰撞的随机性

    物理引擎(包括碰撞)的计算具有随机性 原因: 一.每一帧的时间并不是严格相等 二.浮点数计算不是完全准确(两个浮点数运算,结果不可重复) 影响 在左边窗口(服务器端)打几发子弹把其中3个立方体的位置打 ...

  4. Java的Start和Runnable方法的区别

    两种方法的区别 1) start:用法:start方法来启动线程,真正实现了多线程运行,这时无需等待run方法体代码执行完毕而直接继续执行下面的代码.通过调用Thread类的start()方法来启动一 ...

  5. 0000 - Spring Cloud 概述

    1.概述 Spring Cloud是一系列框架的有序集合,它利用Spring Boot的开发便利性简化了分布式系统的开发,比如服务发现.服务网关.服务路由.链路追踪等.Spring Cloud并不重复 ...

  6. sas 经验小结（1）

    1.重要的事情说三遍:在SAS中,对数据集操作要在OPTIONS中使用Compress=yes 能有效的降低文件的大小. 在SAS运行LOG中,可以看如下提示: NOTE: 压缩的数据集 T.PHON ...

  7. 面向对象javascript编程

    以构造函数的方式定义对象 function Person(name, age) { this.name = name; this.age = age; this.sayName = function ...

  8. CS229 5.用正则化(Regularization)来解决过拟合

    1 过拟合 过拟合就是训练模型的过程中,模型过度拟合训练数据,而不能很好的泛化到测试数据集上.出现over-fitting的原因是多方面的: 1) 训练数据过少,数据量与数据噪声是成反比的,少量数据导 ...

  9. Can't create handler inside thread that has not called Looper.prepare()

    Looper.prepare(); // Can't create handler inside thread that has not called Looper.prepare(). Toast. ...

  10. angularjs指令中的scope

    共享 scope 使用共享 scope 的时候,可以直接从父 scope 中共享属性.因此下面示例可以将那么属性的值输出出来.使用的是父 scope 中定义的值. js代码: app.controll ...