JavaScript_javascript スキルで配列をマージする N つの方法

これは、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、
「フー」、「バー」、「バズ」、「バム」、「バン」、「ファン」
]

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` を `a` に重ねます
for (var i=0; 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` を `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` を `a` に追加:
a = b.reduce( function(coll,item){
coll.push(アイテム);
リターンコール;
}, a );

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

// または `a` を `b` に変換します:
b = a.reduceRight( function(coll,item){
coll.unshift(item);
リターンコール;
}, b );

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

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

これはどうでしょうか:

コードをコピー コードは次のとおりです:

// `b` を `a` に追加:
a.push.apply( a, b );

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

// または `a` を `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(...) で許可される呼び出しスタックの制限を確実に超えてしまいます。悲しいことに、数千の要素でもうまく機能しますが、適切な長さの制限を超えないように注意する必要があります。

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

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

コードをコピー コードは次のとおりです:

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

ちょっと待ってください。可読性が逆になっています。 それだけです、変化するにつれて悪化する可能性があります（笑）。