concat は es6 の構文ですか?

concat は es6 の構文ではなく、es5 で利用可能ですが、互換性が高く翻訳が不要な点が利点です。 concat メソッドは、「元の配列 object.concat(new value)」という構文を使用して、複数の配列をマージするために使用されます。このメソッドは、配列パラメーターおよびその他のタイプの値をパラメーターとして受け入れることができます。 concat メソッドは、新しい配列のメンバーを元の配列メンバーの末尾に追加し、元の配列を変更せずに新しい配列を返します。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

concat は es6 構文ではありませんが、 es5 で使用できます。

ES5 配列メソッド concat()

concat メソッドは 複数の配列に使用されます # ＃＃マージ＃＃＃。新しい配列のメンバーを元の配列メンバーの末尾に追加し、元の配列 を変更せずにそのままにして、新しい配列を返します。

concat()

メソッドは現在の
• Array を変更せず、新しい Array を返すことに注意してください。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">['hello'].concat(['world']) // [&quot;hello&quot;, &quot;world&quot;] ['hello'].concat(['world'], ['!']) // [&quot;hello&quot;, &quot;world&quot;, &quot;!&quot;] [].concat({a: 1}, {b: 2}) // [{ a: 1 }, { b: 2 }] [2].concat({a: 1}) // [2, {a: 1}]</pre><div class="contentsignin">ログイン後にコピー</div></div>
concat

は、パラメーターとしての配列に加えて、ターゲット配列の末尾に追加される他のタイプの値もパラメーターとして受け入れます。

[1, 2, 3].concat(4, 5, 6)
// [1, 2, 3, 4, 5, 6]

実際、concat()

メソッドは、任意の数の要素と
• Array を受け取り、Array を自動的に逆アセンブルできます。 , 次に、それらをすべて新しい Array に追加します。つまり、concat() 操作のパラメーターが配列の場合、配列ではなく配列内の要素が追加されます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var arr = ['A', 'B', 'C']; arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]</pre><div class="contentsignin">ログイン後にコピー</div></div>注:
concat

は配列パラメーターを 2 回ではなく 1 回だけフラット化します。

arr.concat([1, [2, 3]]); // [1, 2, 3, 1, [2, 3]]

配列メンバーにオブジェクトが含まれる場合、 concat

メソッドは、現在の配列の
• 浅いコピーを返します。いわゆる「浅いコピー」とは、新しい配列が オブジェクトの参照 をコピーすることを意味します。

  var obj = { a: 1 };
  var oldArray = [obj];
  
  var newArray = oldArray.concat();
  
  obj.a = 2;
  newArray[0].a // 2

  上記のコードでは、元の配列にはオブジェクトが含まれており、
concat

メソッドによって生成された新しい配列には、このオブジェクトへの参照が含まれています。したがって、

元のオブジェクトを変更すると、新しい配列も 変更されます。

拡張知識: 配列をマージする別の方法

ES6 拡張演算子を使用する

マージ

const name1 = ['A','B','C'];
        const name2 = ['D','E','F'];
        const name = [...name1,...name2]
        console.log(name);

比較: ES6 拡張演算子...と ES5-concat

concat は es5 の場合に使用できます。利点は次のとおりです。互換性が高く、翻訳する必要がありません。

...

は es6 の新しい構文で、記述方法が簡素化されています。コードはより簡潔で直感的に見えますが、実際にはカプセル化されているだけで、最下位層はまだ元のメソッドを使用しており、以下はバベル変換の結果です

arr1 = [...arr1, ...arr2];
  ↓ 相当于
function _toConsumableArray(arr) {
 if (Array.isArray(arr)) { 
   for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; 
   } else { return Array.from(arr); }
}
arr1 = [].concat(_toConsumableArray(arr1), arr2);

[関連する推奨事項:

javascript ビデオ チュートリアル

、プログラミングビデオ＃＃＃]＃＃＃

以上がconcat は es6 の構文ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。