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(...) に許可される呼び出しスタックの制限。悲しいことに、数千の要素では問題ありませんが、適切な長さの制限を超えないように注意する必要があります。注: Push(...) や unshift(...) と同じ問題がある splice(...) を試すことができます

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

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

。