JavaScriptのスプレッド演算子の一般的なメソッドの紹介

#...一般的な方法についての個人的な理解

...展開操作としての記号

は、ここでは

配列、文字列、または疑似配列 の展開を指します (配列と同様に、添字を使用して各項目を取り出すことができ、 length 属性データ (以下、トラバース可能オブジェクトと呼びます) の拡張とは、配列内の各項目を取り出して、 で区切ることを意味します (使用する場合、個別に出力する場合はスペースで区切ります)。

...1 次元配列を展開できます。つまり、[] の最外層のみを削除できます。
• 結果は、配列の結果です。文字列は配列でも他のものでもありません。そのため、カンマ区切り形式に従って、関数の仮パラメータとして渡すことも、文字列の外側を [] で囲むこともできます。関数の戻り値として配列として扱いますが、直接返すことはできません。コンソール出力を使用できます。

<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>

...剰余演算子として

剰余演算子は、パラメーターが合計でいくつあるかわからないことを意味します。私は... を使用します。同様に、配列にのみ適用されます。
• そして、これら 2 つのメソッドによって得られる結果は、[] が削除された配列ではなく、
• array です。
主に 2 つの方法があります:
• 最初の方法: すべてのパラメータが不明で、いくつ渡せばよいかわかりません。
  • 2 番目のタイプ: 1 つ以上の既知のパラメーターがあり、残りのパラメーターは不明です。

//  第一种所有参数都未知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>

上記のことから、配列構造が非常に単純 (2 次元) の場合、スプレッド演算子で配列を解くことができることがわかります。内側にあり、スプライシングに concat を使用します。ただし、配列が多次元の場合、より深い配列を解くことができないため、これを実現するにはスプレッド演算子と再​​帰を使用する必要があります。

推奨学習: 「

JavaScript 基本チュートリアル #」

以上がJavaScriptのスプレッド演算子の一般的なメソッドの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。