JavaScript配列を結合する複数のメソッドの詳細な説明

この記事では、主に JavaScript 配列を結合するさまざまな方法を詳しく紹介します。興味のある方は参考にしてください。

これは、JavaScript 配列の使用に関するいくつかのヒントについての簡単な記事です。さまざまな方法を使用して 2 つの JS 配列を結合/マージし、各方法の長所/短所について説明します。

まず次の状況を考えてみましょう:

var a = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
var b = [ "foo", "bar", "baz", "bam", "bun", "fun" ];

明らかに、最も単純な組み合わせの結果は次のようになります:

[
  1, 2, 3, 4, 5, 6, 7, 8, 9,
  "foo", "bar", "baz", "bam" "bun", "fun"
]

concat(..)

これが最も一般的なアプローチです:

var c = a.concat( b );
a; // [1,2,3,4,5,6,7,8,9]
b; // ["foo","bar","baz","bam","bun","fun"]
c; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

ご覧のとおり、C は次のようになります。新しい配列。2 つの配列 a と b の組み合わせを表し、A と B は変更されません。シンプルですよね？

しかし、a に 10,000 個の要素があり、b にも 10,000 個の要素がある場合はどうなるでしょうか? C には 20,000 個の要素があるため、a と b のメモリ使用量は 2 倍になります。

「問題ありません！」とあなたは言いました。ガベージ コレクションを実行し、A と B を null に設定すれば、問題は解決しました。

a = b = null; // 'a' と 'b' はリサイクルされます
はは。要素が数個しかない小さな配列の場合、これは問題ありません。しかし、大規模な配列の場合、またはこのプロセスを頻繁に繰り返す必要があるメモリが限られているシステムの場合、実際には改善の余地がたくさんあります。

ループ挿入

それでは、Array#push(..)

// `b` onto `a`
for (var i=0; i < b.length; i++) {
  a.push( b[i] );
}
a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]
b = null;

を使用して、ある配列の内容を別の配列にコピーしましょう。これで、配列 a には配列 b の内容が含まれます。

メモリ使用量が向上しているようです。

しかし、配列 a が比較的小さい場合はどうなるでしょうか?メモリと速度の理由から、小さい方の a を b の前に置くこともできます。問題ありません。push(..) を unshift(..) に置き換えるだけです。

// `a` into `b`:
for (var i=a.length-1; i >= 0; i--) {
  b.unshift( a[i] );
}
b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

関数トリック

ただし、for ループ は確かに醜く、保守が困難です。もっとうまくできるでしょうか？

これは、Array#reduce を使用した最初の試みです:

// `b` onto `a`:
a = b.reduce( function(coll,item){
  coll.push( item );
  return coll;
}, a );

a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

// or `a` into `b`:
b = a.reduceRight( function(coll,item){
  coll.unshift( item );
  return coll;
}, b );

b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

Array#reduce(..) と Array#reduceRight(..) は素晴らしいですが、少し不器用です。 ES6 => アロー 関数 はコードの量をいくらか削減しますが、依然として各要素に対して 1 回呼び出す必要がある関数が必要であり、完全ではありません。

これはどうですか:

// `b` onto `a`:
a.push.apply( a, b );
a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]
// or `a` into `b`:
b.unshift.apply( b, a );
b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

これはずっと良いですよね?特に、 unshift(..) メソッドは、ここで以前の逆ソートを気にする必要がないためです。 ES6 のスパン操作はより美しくなります: a.push( ...b ) または b.unshift( ...a

配列の最大長制限

最初の大きな問題は、メモリ使用量が 2 倍になったことです (もちろん、一時的に追加されるコンテンツは、基本的に関数呼び出しを介して要素をスタックにコピーします。また、さまざまな JS エンジンには、コピーされるデータの長さに制限があります

そのため、配列に 100 万個の要素がある場合は、間違いなくそれを超えます。 Push(…) または unshift(…) で許可される呼び出しスタックの制限があります。悲しいことに、数千の要素ではうまく機能しますが、適切な長さの制限を超えないように注意する必要があります

注: スプライスを試すことができます。 (…)、push(…) や unshift(…) と同じ問題があります

この最大長制限を回避する方法があります

function combineInto(a,b) {
  var len = a.length;
  for (var i=0; i < len; i=i+5000) {
    b.unshift.apply( b, a.slice( i, i+5000 ) );
  }
}

待って、可読性が低下する可能性があります。変化するにつれて。

以上がJavaScript配列を結合する複数のメソッドの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。