介紹JavaScript中...擴充運算子的常用方法

個人對…常用方法的理解

…作為擴充運算符

這裡指的擴展是針對數組或字串或偽數組（就是類似於數組這樣的可以用下標將每一項取出來，並且有總體長度屬性的數據，以下簡稱為可遍歷物件）的擴展，代表的含義是將數組中的每一項取出來，並用，進行分隔（當使用的時候是這樣，如果單獨打印的話是用空格分隔） 。

• …可以將一個一維數組展開，也就是只能去掉最外面一層的[]；
• 他的結果就是數組被去掉[]的結果，不是字串也不是數組也不是別的東西，所以按照它逗號分隔的方式，可以將它作為函數的形參傳遞也可以外面再套一個[]，當做數組作為一個函數的return，但是不能直接return，可以用console輸出。

<script>
        let arr = [
            5,
            "str",
            [1,2,3],
            ["hello","world"],
        ];

        function fn(arr){
            console.log(...arr);   
            return [...arr]        
        }
        function fo(...arr){
            console.log(arr);
        }
        // function foo(arr){
        //     return ...arr;  //    Expression expected.
        // }
        console.log(fn(arr));     //  5 "str" (3) [1, 2, 3] (2) ["hello", "world"]
                                  //  (4) [5, "str", Array(3), Array(2)]
		//   外面的[]去掉了，但是里面的[1,2,3]、["hello","world"]的[]没有去掉
    </script>

…作為剩餘運算子

• 剩餘運算子的意思就是我不知道這個參數總共有多少個，我用…表示剩餘的，同樣它只適用於數組。
• 而且這兩個方法得到的結果都是一個陣列，而不是陣列去掉[]。
• 主要有以下兩種方法：
  • 第一種： 所有的參數都是未知的，不知道傳幾個。
  • 第二種： 有一個或多個已知參數，其餘參數未知。

//  第一种所有参数都未知function aa(...arr){
    console.log(arr);}aa(5,"sss",22)     //  (3) [5, "sss", 22]     =>    结果是一个数组//  第二种，有两个已知参数function ff(a,b,...arr){
    console.log(arr)}ff(2,3,"str","111")    // (2) ["str", "111"]   =>    结果是一个数组

特性其他應用：

分解字串

可以用str.split("")也可以用[…str ]

偽數組轉換為真數組

由於他可以將可遍歷物件用數組去掉[]的方法顯示出來，而且可以對偽數組使用，所以很好理解對偽數組使用後將偽數組的形式轉換後，加上[]就是真數組了，可以呼叫真數組的方法。 => […arr.]

淺拷貝

由於它是對一個可遍歷的物件使用循環過來的，所以它不會改變原始數組，會進行一個淺克隆的操作，因此可以用於數組的淺拷貝。 => […arr]

陣列扁平化

  <script>
        // 简单的二维数组（一个数组里面又套了一个数组  =>  二维)
        let arr = [
            5,
            "str",
            [1,2,3],
            ["hello","world"],
        ];

        // 三维数组（一个数组里面套一个数组，里面又套一个数组）
        let arr1 = [
            5,
            "str",
            [
                1,2,3,
                ["ccc","dddd"]
            ],
            ["hello","world"],
        ];


        function flatten(arr){
            return [].concat(...arr);
        }

        function flatten1(arr){
            return [].concat(...arr.map(x => Array.isArray(x) ? flatten1(x) : x));
        }
        console.log(flatten(arr));    // (7) [5, "str", 1, 2, 3, "hello", "world"]
        console.log(flatten1(arr));   // (7) [5, "str", 1, 2, 3, "hello", "world"]
        console.log(flatten(arr1));   // (8) [5, "str", 1, 2, 3, Array(2), "hello", "world"]
        console.log(flatten1(arr1));  // (9) [5, "str", 1, 2, 3, "ccc", "dddd", "hello", "world"]
    </script>

由以上可知，當陣列結構非常簡單（二維）時，擴充運算子可以將裡面的陣列解出來，並使用concat進行拼接。但是當陣列比較多維時，它並不能將更深層的陣列解出來，需要使用擴展運算子來配合遞歸才可以實現。

推薦學習：《javascript基礎教學》

以上是介紹JavaScript中...擴充運算子的常用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！