zoukankan      html  css  js  c++  java
  • ES6数组的扩展运算符

    一、基本使用

    ES6中函数可以使用 rest参数 接收函数的多余参数,组成一个数组,放在形参的最后面。

    let fn = (a, ...value) => {
        console.log(a);
        console.log(value[0], value[1]);
    };
    add(10, 20, 30);
    // 10
    // 20 30

    数组中的扩展运算符就好比 rest参数 的逆运算,将一个数组转为用逗号分隔的参数序列(也就是展开数组),在语法上,用三个点表示(...)。

    var fruits = ['apple', 'banana', 'orange'];
    console.log(...fruits);   // apple banana orange

     

    二、取代apply

    扩展运算符主要应用于函数的调用,比如下面这种情况给俩个数求和,在ES5中可以使用 apply 方法实现:

    let add = (a, b) => a + b;
    let arr = [10, 20];
    let result = add.apply(null, arr);
    console.log(result);   // 30

    现在不必了,直接使用扩展运算符即可:

    let add = (a, b) => a + b;
    let arr = [10, 20];
    console.log(add(...arr));   // 30

    而且可以放置于形参中的任意位置,这点和 rest参数 不同:

    let add = (a, b, c, d) => a + b + c + d;
    let arr = [20, 30];
    console.log(add(10, ...arr, 40));   // 100

    下面是俩个比较实用的取代 apply 方法例子:

    // 1、取出一个数字数组中的最大值
    
    // ES5
    let arr = [10, 15, 5, 20, 10];
    alert(Math.max.apply(null, arr));   // 20
    
    // ES6
    let arr = [10, 15, 5, 20, 10];
    alert(Math.max(...arr));   // 20
    
    ----------------------------------------------
    
    // 2、将一个数组添加到一个数组里
    
    // ES5
    let arr1 = [10, 20];
    let arr2 = [30, 40];
    Array.prototype.push.apply(arr1, arr2);
    console.log(arr1);   // [ 10, 20, 30, 40 ]
    console.log(arr2);   // [ 30, 40 ]
    
    // ES6
    let arr1 = [10, 20];
    let arr2 = [30, 40];
    arr1.push(...arr2);
    console.log(arr1);   // [ 10, 20, 30, 40 ]
    console.log(arr2);   // [ 30, 40 ]

    三、其他运用的地方

    1、复制数组

    在ES5中如果你这样复制数组式其实是不对的:

    let arr1 = [10, 20];
    let arr2 = arr1;
    arr1.push(30);
    console.log(arr1);   // [ 10, 20, 30 ]
    console.log(arr2);   // [ 10, 20, 30 ]

    因为数组式复合类型的数据,复制的仅仅是指针,其中一个数组发生变化,另一个数组当然随之变化。

    因此需要这样做:

    let arr1 = [10, 20];
    let arr2 = arr1.concat();
    arr1.push(30);
    console.log(arr1);   // [ 10, 20, 30 ]
    console.log(arr2);   // [ 10, 20 ]

    现在ES6使用扩展运算符更加方便:

    let arr1 = [10, 20];
    let arr2 = [...arr1];
    arr1.push(30);
    console.log(arr1);   // [ 10, 20, 30 ]
    console.log(arr2);   // [ 10, 20 ]

    2、合并数组

    ES5中合并数组可以这样做:

    let arr1 = [10, 20];
    let arr2 = [30, 40];
    let arr3 = arr1.concat(arr2);
    arr1.push(50);
    console.log(arr1);   // [ 10, 20, 50 ]
    console.log(arr2);   // [ 30, 40 ]
    console.log(arr3);   // [ 10, 20, 30, 40 ]

    ES6中又有了新写法:

    let arr1 = [10, 20];
    let arr2 = [30, 40];
    let arr3 = [...arr1, ...arr2];
    arr1.push(50);
    console.log(arr1);   // [ 10, 20, 50 ]
    console.log(arr2);   // [ 30, 40 ]
    console.log(arr3);   // [ 10, 20, 30, 40 ]

    注意:

    以上俩种写法都是浅拷贝,合并成员是复合类型的数据就要注意了:

    let arr1 = [{user: 'tom'}];
    let arr2 = [{user: 'jack'}];
    let arr3 = arr1.concat(arr2);
    let arr4 = [...arr1, ...arr2];
    alert(arr1[0] === arr3[0]);   // true
    alert(arr1[0] === arr4[0]);   // true

    原因还是这些对象成员拷贝的是地址。

  • 相关阅读:
    Python 存储引擎 数据类型 主键
    Python 数据库
    Python 线程池进程池 异步回调 协程 IO模型
    Python GIL锁 死锁 递归锁 event事件 信号量
    Python 进程间通信 线程
    Python 计算机发展史 多道技术 进程 守护进程 孤儿和僵尸进程 互斥锁
    Python 异常及处理 文件上传事例 UDP socketserver模块
    Python socket 粘包问题 报头
    Django基础,Day7
    Django基础,Day6
  • 原文地址:https://www.cnblogs.com/xlj-code/p/10348541.html
Copyright © 2011-2022 走看看