Vanilla JavaScript（ES5およびES6）で配列をマージする方法

JavaScriptのpush()を使用して、配列にアイテムを追加したり、配列からアイテムを削除したりする方法を以前に学びました。 メソッド。

しかし、アイテムの配列を既存の配列に追加したい場合はどうでしょうか。つまり、2つの異なるアレイをマージする場合はどうなりますか？

JavaScriptで2つ以上の配列をマージするには、Array.prototype.push.apply()を使用できます。

たとえば、フルーツバスケットが2つあり、すべてのフルーツを1つのバスケットに入れたいとします。問題ありません。

ES5

var fruitBasketOne = ["apple", "banana", "grapes"]
var fruitBasketTwo = ["orange", "apricot", "pear"]
Array.prototype.push.apply(fruitBasketOne, fruitBasketTwo)

// returns ['apple', 'banana', 'grapes', 'orange', 'apricot', 'pear']
console.log(fruitBasketOne)

// returns ["orange", "apricot", "pear"]
console.log(fruitBasketTwo)

これにより、2番目の配列が最初の配列にマージされます。 2番目の配列fruitBasketTwoに注意してください。 まだメモリに残っています。この方法はしません 元のアレイを削除します。

ES6とのアレイのマージ

ES6スプレッド演算子を使用すると、マージがさらに簡単になります。

let fruitBasketOne = ["apple", "banana", "grapes"]
let fruitBasketTwo = ["orange", "apricot", "pear"]
fruitBasketOne.push(...fruitBasketTwo)

// returns ['apple', 'banana', 'grapes', 'orange', 'apricot', 'pear']
console.log(fruitBasketOne)

互換性

最初のプッシュ方法は、最新のすべてのブラウザーと互換性があり、少なくともIE6に戻ります。 2番目の方法は最新のブラウザでのみ機能しますが、Babelなどのプリプロセッサを使用してJavaScriptをES5互換コードにコンパイルし直し、古いブラウザで機能させることができます。

配列プッシュメソッドの詳細。