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 に設定すれば、問題は解決しました。

れぇ

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

ループ挿入

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

a = b = null; // 'a'和'b'就被回收了

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

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

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

// `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;

関数トリック

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

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

// `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"]

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

これはどうですか:

// `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"]

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

配列の最大長制限

最初の大きな問題は、メモリ使用量が 2 倍になったことです (もちろん、一時的に追加されるコンテンツは、基本的に関数呼び出しを介して要素をスタックにコピーします。さらに、さまざまな JS エンジンにはコピーされるデータの長さに制限があるため、配列に 100 万個の要素がある場合は、間違いなく制限を超えます。 Push(…) または unshift(…) で許可される呼び出しスタックの数は、数千の要素でうまく機能しますが、適切な長さの制限を超えないように注意する必要があります

注: splice を試すことができます。 (...) には、push(...) や unshift(...) と同じ問題があります

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

// `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"]

待ってください、それは可読性が後退しています。それは、変化するにつれて悪化する可能性があります（笑）。

以上がJavaScript 配列の結合を実装するためのいくつかの方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。