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. 廖雪峰Java3异常处理-2断言和日志-3使用Commons Logging

    Commons Logging是Apache创建的日志模块: 可以挂接不同的日志系统 可以通过配置文件指定挂接的日志系统 自动搜索并使用Log4j 如果Log4j不存在,使用JDK Logging(J ...

  2. 0000 - Spring Cloud 概述

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

  3. golang "text/template" 模板语法简明教程

    转自:https://www.cnblogs.com/Pynix/p/4154630.html [模板标签] 模板标签用"{{"和"}}"括起来   [注释] ...

  4. （转）TP-LINK WR720N v3 刷OpenWrt

    之前买了一台改过硬件的TP-Link WR841N-V7路由器,并且成功刷机OpenWrt也完成了FQ,WR841N-V7的更多详情可以看这里,但是可能卖家焊接的有问题,导致老是听到滋滋滋高频率的赤耳 ...

  5. Shiro ini配置

    Shiro.ini配置: ini配置文件类似Java中的properties(key = value),不过提供了key/value分类的特性,每个部分的key不重复即可 在eclipse中设置打开方 ...

  6. Hibernate c3p0的整合

    Hibernate整合c3p0 Hibernate中可以使用默认jdbc连接池,但是无论功能还是性能都不如c3p0 在pom添加jar包: <!-- hibernate-c3p0 --> ...

  7. javascript-table出现滚动条表格自动对齐

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Python绘制2D图像

    封装了一个简单的2d绘图函数 from matplotlib import pyplot as plt def plot_line(*args, **kw): """ : ...

  9. selenuim和phantonJs处理网页动态加载数据的爬取

    一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/中的图片数据 #!/usr/bin/env python # -*- coding:utf-8 -* ...

  10. SQL获取连续数字中断数字

    表A -- 创建结果表 create table #u(LostA int) declare @minA int,@maxA int set @minA=(select min(ID) from A) ...