JavaScriptで配列を結合する方法3選!

JavaScript

JavaScriptで、配列を結合する方法について書いています。
下記のメソッドや構文を使うことで、配列を結合することが可能です。

・スプレッド構文
・concatメソッド
・pushメソッド

それぞれについて、次項から詳しくみていきます。

PR

スプレッド構文で結合する

スプレッド構文を使うと、配列の内容を展開することが可能です。
この挙動を結合するために、使うことができます。

const redFruits = ['apple', 'strawberry', 'cherry']
const yellowFruits = ['banana', 'lemon']
const fruits = [...redFruits, ...yellowFruits]

console.log(fruits) // [ 'apple', 'strawberry', 'cherry', 'banana', 'lemon' ]

最初にredFruits配列を3つの要素で作成しました。
次にyellowFruits配列を2つの要素で作成しています。

次の行で作成した、redFruits配列とyellowFruits配列を、スプレッド構文で展開しています。
[...redFruits, ...yellowFruits]」とredFruits配列を先に書いているので、こちらの要素が先に展開されます。
展開されたredFruits配列と、yellowFruits配列から、fruits配列が作成されました。

console.logで確認すると、「[ 'apple', 'strawberry', 'cherry', 'banana', 'lemon']」が出力されます。
2つの配列の要素が展開されたことが確認できました。

結合順序を逆にする

また、順番を反対にすると、fruits配列の順番も変わります。
今回の内容で、下記のように展開します。

const fruits = [...yellowFruits, ...redFruits]

展開される順番が逆になって、fruits配列は下記のようになります。

[ 'banana', 'lemon', 'apple', 'strawberry', 'cherry' ]

yellowFruits配列が先に展開されて、redFruits配列の内容が後にきていますね。

PR

concatメソッドで結合する

concatメソッドでも、配列を結合することが可能です。
concatメソッドは配列から呼び出して使います。

const lowScores = [10, 22, 31]
const highScores = [86, 93, 75]
const scores = lowScores.concat(highScores)

console.log(scores) // [ 10, 22, 31, 86, 93, 75 ]

最初にlowScores配列を3つの数字で作成しました。
その次にhighScores配列も3つの数字で作成しています。

lowScores配列からconcatメソッドを呼んでいます。
引数として、highScores配列を渡しました。
こうすると、lowScores配列の末尾に、highScores配列が結合されて返ってきます。

受け取ったscores配列を出力すると「[10, 22, 31, 86, 93, 75 ]」が出力されました。
lowScoresの後にhighScoresの要素が続いています、ふたつの配列の要素が結合されたことが確認できました。

結合順序を逆にする

順番を逆にしたい場合は、下記のように呼び出し元を変えると良いです。

const lowScores = [10, 22, 31]
const highScores = [86, 93, 75]
const scores = highScores.concat(lowScores)

console.log(scores) // [ 86, 93, 75, 10, 22, 31 ]

上記では、highScores配列からlowScores配列を呼ぶようにしました。
結果、「[ 86, 93, 75, 10, 22, 31 ]」が出力されます。
highScoresが先になって、lowScoresの内容が後から並びました。

pushメソッドで結合する

pushメソッドは配列の末尾に要素を追加するメソッドですが、このメソッドを使って、配列を結合することも可能です。
pushメソッドの引数にスプレッド構文を使います。

let drinks = ['beer', 'wine']
let addDrinks = ['milk', 'coffee']

drinks.push(...addDrinks)
console.log(drinks) // [ 'beer', 'wine', 'milk', 'coffee' ]

最初にdrinks配列を2つの文字列で作成しました。
次に配列に結合するaddDrinks配列を2つの文字列で作っています。

その後にdrinks配列にpushメソッドを使って、addDrinks配列を展開しています。
こうすることで、配列の内容が展開されて、全てdrinks配列に追加されます。

console.logで出力すると、結果「[ 'beer', 'wine', 'milk', 'coffee' ]」が表示されました。
drinks配列に追加した、addDrinks配列が展開されて追加されました。結合と同じような挙動になりました。

コメント

Ads Blocker Image Powered by Code Help Pro

広告ブロッカーが検出されました。

ブラウザの拡張機能を使用して広告ブロックをしていることが確認できました。 ブラウザの広告ブロッカー機能を無効にしていただくか、codelikes.comをホワイトリストに追加し、更新をクリックしてください。 お手数ですが、よろしくお願いします🙇‍♂️
タイトルとURLをコピーしました