JavaScriptで、配列を結合する方法について書いています。
下記のメソッドや構文を使うことで、配列を結合することが可能です。
・concatメソッド
・pushメソッド
それぞれについて、次項から詳しくみていきます。
スプレッド構文で結合する
スプレッド構文を使うと、配列の内容を展開することが可能です。
この挙動を結合するために、使うことができます。
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配列の内容が後にきていますね。
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配列が展開されて追加されました。結合と同じような挙動になりました。
コメント