JavaScriptの配列をマージする5つの方法とそれらの違い

安array 要素または項目のコレクションです.データを要素として格納し、必要なときにそれらを取り戻すために配列を使用します.配列は多くのプログラミング言語で広く使われているデータ構造であり、JavaScriptは例外ではない.
1つ以上の配列をマージし、個々の配列からすべての要素を1つの配列に結合する必要があります.データが異なるストリームから来るとき、我々はこの必要に直面します、そして、我々は1つのデータ構造にそれらを合併したいです.
この記事では、JavaScriptの配列をマージする5つの方法を学びます.また、どれが最も良い方法であるか、そしていつそれを使うべきかを結論付けます.
閉じるこの動画はお気に入りから削除されています.🙂
してください将来のコンテンツをお気軽に
さあ、始めましょう.

伝統的な使い方for ループ
使用for つ以上の配列要素をマージするループは、最も実行可能な方法かもしれません.ほとんどの人はプログラミングでループを使う方法を知っています.だから、最も簡単なオプションを起動することです.しかし、それは手に問題のための最良の解決策ではない場合があります.
つの配列から要素への要素をマージするには、まずすべての配列要素を反復処理する必要があります.ループでは、配列から各要素を取得し、push() メソッド)別の配列.
JavaScriptの機能は同じです.

const merge = (first, second) => {
  for(let i=0; i<second.length; i++) {
    first.push(second[i]);
  }
  return first;
}

今、私たちはmerge() 関数と2つの配列をマージの引数として渡す.

merge([1,2,3], [4,5,6]);

予想通り、マージされた配列の出力です.

しかし、どのように、我々は同じものを使っている2つの配列よりマージしますかmerge() 機能?まあ、それは非常に友好的な方法ではないかもしれませんが、我々はこのようなことができます.

merge(merge([1,2,3], [4,5,6]), [7,8,9]);

そこで、まず2つの配列をマージし、出力を別の配列でマージします.

あなたが推測できるように、入力配列の数の我々の要件がマージのために成長するにつれて、それはそれを管理するためのより友好的な方法であるでしょう.したがって、forループを使用して2つ以上の配列をマージすることは、最初から始めても良いですが、実際に使用する優れた方法ではないかもしれません.

2 .使用Spread 演算子
ES 6から、私たちは... (はい、3つの連続したドット).スプレッド演算子を配列リテラル内の配列に使用できます.[] ) マージする.例を見てみましょう.
まず、2つの配列をとります.arr1 and arr2 . 次に、展開演算子を使用して配列をマージします.... ) 配列リテラル内で.

const arr1 = [1,2,3];
const arr2 = [4,5,6];

// Merge arrays
const merged = [...arr1, ...arr2];

console.log(merged); // [1,2,3,4,5,6]
console.log(arr1); // [1,2,3]
console.log(arr2); // [4,5,6]

さて、マージの出力に注意してください.配列arr1 and arr2 が結合され、それらの要素はnew 配列.入力配列はここでは変更されません.
では、このメソッドを使用して2つ以上の配列をマージするにはどうしたらよいですか?簡単に、コンマ区切りとしてマージする多くの配列として渡します.

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [7,8,9];

// Merge arrays
const merged = [...arr1, ...arr2, ...arr3];

console.log(merged); // [1,2,3,4,5,6,7,8,9]

このように配列をマージする方法は以前に見た従来のループアプローチを使用するよりもずっと便利です.JavaScriptの配列をマージするには少しのgotchaを除いて、我々はしばらく見て行く方法です!

3 .使用concat() アレイメソッド
ジャバスクリプトArray オブジェクトにはいくつかの実用的なメソッドがあります.そのうちの一つはconcat() メソッド.Contactメソッドの主な使用法は2つの配列をマージすることです.

const arr1 = [1,2,3];
const arr2 = [4,5,6];

// Merge arrays
const merged = arr1.concat(arr2);

console.log(merged); // [1,2,3,4,5,6]
console.log(arr1); // [1,2,3]
console.log(arr2); // [4,5,6]

上記のコードでは、concat() メソッド.しかし、配列をマージするのは私の好きな構文ではありません.構文を誤解してしまうかもしれないarr1.concat(arr2) 我々が合併しているようにarr2 's要素arr1 array 1自体を変更します.それは事実ではない.
我々が使ったようにspread 演算子concat メソッドは入力配列を変更しません.むしろ、すべての入力配列をマージする新しい配列を作成し、それを返します.だから、より良い方法を書くconcat() 配列をマージする方法は

const merged = [].concat(arr1, arr2);

ここで、複数の配列を空の配列にまとめることができ、結果としてマージされた配列を返すことは明らかです.入力引数として多くの配列を渡すことができますconcat() メソッド.

グレート、しかし使用するいずれか?The spread 演算子またはconcat() 方法?
入力がすべての配列であることを確認してくださいspread 演算子.配列をマージするのはとても簡単で現代的な方法です.しかし、入力要素型について不明な場合はconcat() メソッド.
例えば、文字列を取りましょうtapas を使って、スプレッド演算子を配列リテラルで使用します.

[...'tapas']

出力は何でしょうか?弦tapas が生成される文字の配列に破壊される.

したがって、他の配列でマージした場合、最終結果は期待していたものではないかもしれません.

const arr = [1,2,3];
const name = 'tapas';

const merged = [...arr, ...name];
console.log(merged);

出力

このような場合、concat() 代わりに

const arr = [1,2,3];
const name = 'tapas';

const merged = [].concat(arr, name);
console.log(merged);

出力


使用するpush() アレイメソッド
我々はpush() 配列の末尾に要素を挿入する方法.このメソッドを使用して、2つ以上の配列を併合できます.ご覧下さい.

const arr1 = [1,2,3];
const arr2 = [4,5,6];

// Merge arrays
const merged = arr1.push(...arr2);

console.log(merged); // 6
console.log(arr1); // [1,2,3,4,5,6]
console.log(arr2); // [4,5,6]

ここで注意するいくつかの重要な点

The push() method要素を配列に挿入します.このメソッドは配列を変更し、挿入後の配列の要素数を返します.したがって、上の例では、最初の配列を返します.arr1 , 新しい要素に対応するために変更されます.返り値6 からpush() メソッドはmerged 変数.

要素を他の配列に押しながら配列を広げなければなりません.arr1.push(...arr2) . スプレッド演算子が見つからなかった場合、配列全体を他の配列に挿入します.

  const arr1 = [1,2,3];
  const arr2 = [4,5,6];

  // Merging without the ... on arr2
  const merged = arr1.push(arr2);

  console.log(merged); // 4
  console.log(arr1); // [1,2,3,[4,5,6]]
  console.log(arr2); // [4,5,6]

では、どのようにして、push() 方法?はい、どうぞ.

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [7,8,9];

// Merge more than two arrays
arr1.push(...[...arr2, ...arr3]); // [1,2,3,4,5,6,7,8,9]

5 .利用reduce() アレイメソッド
複数の配列をマージする最後の方法はreduce() メソッド.

This way of merging array is not recommended as it is closer to the for-loop approach we have seen above with the extra headache of reduce. We are discussing it here for the sake of building awareness!

とreduce メソッドを初期化できますarr ) 値arr1 そして、arr2 一人ずつarr .

const arr1 = [1,2,3];
const arr2 = [4,5,6];

const merged = arr2.reduce((arr, item) => {
    arr.push(item);
    return arr;    
}, arr1);

console.log(merged);

出力


要約する
まとめる.

JavaScriptで2つ以上の配列を1つにマージする方法はいくつかあります.

使用spread operator またはconcat() 方法は最も最適解である.

マージするすべての入力が配列であることを確認してくださいspread operator . 不明な場合は、concat() メソッド.

あなたはpush() 入力配列の一つを変更したいときに配列をマージする方法.

使用reduce() 配列をマージする方法は、オーバーヘッドです.

JavaScriptで配列をマージする他の方法を知っていますか?下記のコメント欄でお知らせください.
あなたは私のgithubレポからこの記事で使用されるすべてのソースコードを見つけることができます.

atapas / js-tips-tricks
JavaScriptのヒントと私は毎日学んでいるトリックのリスト!
私はあなたが記事を洞察力と有益な発見してください.閉じるこの動画はお気に入りから削除されています.
つながりましょう.私はJavaScript、ウェブ開発、およびこれらのプラットフォーム上のブログに私の学習を共有します.