zoukankan      html  css  js  c++  java
  • 通过四个例子理解JavaScript拓展运算符

    原文地址:JavaScript & The spread operator

    拓展运算符看起来像什么? 三个点,...
    它能做什么? 拓展运算符允许一个表达式在某个地方展开成为多个元素、变量或参数

    定义看上去毫无乐趣,下面通过几个例子理解到底什么是拓展运算符。

    初识

    • 1、创建一个数组middle
    • 2、创建第二个数组,包含第一个数组
    • 3、输出结果
    var middle = [3, 4];
    var arr = [1, 2, middle, 5, 6];
    
    console.log( arr );
    // [1, 2, [3, 4], 5, 6]
    

    上面没有使用拓展运算符arr在创建的时候把middle插入到arr数组的中间,此时arr数组里面包了一个数组middle

    如果我们的目标是两个数组,那上面的做法很不错,但如果我们只想要一个数组呢?

    我们可以通过拓展运算符实现。再提一次,拓展运算符允许数组的元素展开。来看下面的代码,除了使用了拓展运算符,代码和上面的没啥区别:

    var middle = [3, 4];
    var arr = [1, 2, ...middle, 4, 5];
    
    console.log( arr )
    // [1, 2, 3, 4, 5, 6]
    

    还记得刚才读到的拓展运算符的定义吗?上面的代码发挥了拓展运算符的作用,正如你看的,我们创建了数组arr,然后对middle使用了拓展运算符,此时,middle数组并没有直接插入到arr中,而是被展开了。middle数组中的每一个元素插入到了arr数组中。此时,arr不再是嵌套数组,而是一个从1到6的简单数组。

    1、Slice

    slice是JavaScript中数组方法,允许我们拷贝数组。同样,我们可以使用拓展运算符来拷贝数组。

    var arr = ['a', 'b', 'c'];
    var arr2 = [...arr];
    
    console.log(arr2);
    // ['a', 'b', 'c']
    

    瞧,我们成功复制了数组。arr数组中的所有元素都分解成独立的个体,然后分配到arr2数组中。我们现在可以对arr2进行任意修改,都不会影响到源数组arr

    上述可以工作的原因是arr的值填充到了arr2定义的方括号中。所以,我们是让arr2的值和arr的值相等,而不是和arr本身相等。下面的不适用拓展运算符的示例更能说明问题。

    如果我们简单的创建一个数组,然后让另一个数组和他相等,就像这样:

    var arr = ['a', 'b', 'c'];
    var arr2 = arr;
    
    console.log(arr2);
    // ['a', 'b', 'c']
    

    现在你可能会说,这也work了,和上面的结果一样啊。

    然后,这只是看起来一样,但是本质是完全不同。我们并没有让arr2的值和arr中每个值相同,而是直接让两个数组相等,这也就意味着任何对arr2的修改都是影响arr

    arr2.push('d');
    
    console.log(arr2);
    // ['a', 'b', 'c', 'd']
    
    console.log(arr);
    // ['a', 'b', 'c', 'd']
    

    正如你亲眼所见,即使没有明确的向源数组arr添加新值,新值d依然会添加到arr中。

    2、Concat

    使用concat()可以连接数组,使用拓展运算符也能实现。首先看看使用concat()是什么样子:

    var arr = ['a', 'b', 'c'];
    var arr2 = ['d', 'e', 'f'];
    
    arr1 = arr.concat(arr2);
    console.log(arr);
    // ['a', 'b', 'c', 'd', 'e', 'f']
    

    现在,使用拓展运算符:

    var arr = ['a', 'b', 'c'];
    var arr2 = ['d', 'e', 'f'];
    
    arr = [...arr, ...arr2];
    console.log(arr);
    // ['a', 'b', 'c', 'd', 'e', 'f']
    

    结果完全相同,每个数组都分解然后加入到新的数组arr中。

    注:原文评论中有人指出使用拓展运算符连接数组可能并不高效。在测试中,使用拓展运算符要比concat慢一些。对大数组的处理,使用拓展运算符可能并不理想。

    3、Math

    Math函数可以与拓展运算符结合使用,我们以Math.max()为例。

    简单介绍一下,Math.max()返回一组数字中的最大值。

    Math.max();
    // -Infinity
    
    Math.max(1, 2, 3);
    // 3
    
    Math.max(100, 3, 4);
    // 100
    

    如果没有拓展运算符,我们也可以借助.apply()通过Math.max()求数组中的最大值:

    var arr = [2, 4, 8, 6, 0];
    
    function max(arr) {
      return Math.max.apply(null, arr);
    }
    
    console.log(max(arr));
    // 8
    

    这是让人讨厌的实现。

    现在,我们来看通过拓展运算符如何实现。代码更加简洁:

    var arr = [2, 4, 8, 6, 0];
    var max = Math.max(...arr);
    
    console.log(max);
    // 8
    

    4、String to Array

    将字符串转成数组有很多种方法,比如slicesplit等,使用拓展运算符会更加简单:

    var str = "hello";
    var chars = [...str];
    
    console.log(chars); 
    // ['h', 'e',' l',' l', 'o']
    

    很酷吧,拓展运算符会遍历str中的每个字符,然后分配到chars新数组中。

  • 相关阅读:
    Java API学习
    Java接口类学习笔记
    TCP/IP协议族
    Web服务器
    Redis笔记
    Python知识总汇
    GIL锁
    day8
    day7
    day6
  • 原文地址:https://www.cnblogs.com/yangyoucun/p/6943237.html
Copyright © 2011-2022 走看看