こんにちは！Reiです(˵ •̀ ᴗ – ˵) ✧
配列の結合って、いくつかやり方があるの知っていますか？
たとえばこれ↓
const fruits1 = ["りんご", "バナナ"];
const fruits2 = ["みかん", "ぶどう"];
const result = fruits1 + fruits2;
どうなると思いますか？
見た感じは普通にくっつきそうなんですが… ( ; ˘-ω-)
実際はちょっと違う動きをします 👀
（解説はこの後！）
今回は、クイズ形式で配列の結合や操作を見ながら、
配列の結合や操作の違いを確認していきます！
どこまで分かるか、ぜひ試してみてくださいᥫᩣ ̖́-
第1問 ＋で結合すると？
まずはここから！
const fruits1 = ["りんご", "バナナ"];
const fruits2 = ["みかん", "ぶどう"];const result = fruits1 + fruits2;
console.log(result);
このコードを実行するとどうなるでしょうか？
- 配列として結合される
- エラーになる
- 文字列としてつながる
正解は… （ここをクリック！）
３の「文字列としてつながる」でした！
（びっくりですよね…( °_° )!!）
解説 !!
配列を + で足すと、そのまま結合されるのではなく…、
文字列として扱われてつながるんです。
つまり、こんなイメージ↓
"りんご,バナナ" + "みかん,ぶどう"
なので、結果は
"りんご,バナナみかん,ぶどう"
とこんな感じで、配列同士がくっつくというより、
文字列がそのままつながっちゃうんです…！
配列として扱いたい場合は、この方法は使えないですね 💦
第2問 concat と スプレッド構文
次はよく使う結合方法についてのクイズ！
const arr1 = [1, 2];
const arr2 = [3, 4];
const resA = arr1.concat(arr2);
const resB = [...arr1, ...arr2];
console.log(resA);
console.log(resB);
それぞれどうなるでしょうか？
- AもBも同じ結果になる
- Aだけネストされる
- Bだけネストされる
正解は… （ここをクリック！）
１の「AもBも同じ結果になる」でした！
解説 !!
concat と スプレッド構文も配列を結合するための方法ですが、
共通しているのは「新しい配列を作る」という点。
元の配列はそのままで、結合された結果だけが新しく作られるんです。
じゃあこの2つ、何が違うのかというと…
・ concat → メソッドで結合する書き方
・ スプレッド構文 → 展開して並べる書き方
この違いは、配列の扱い方に出てきます 👀
スプレッド構文は「展開して並べる」ので、
[...arr1, "中間", ...arr2]
のように、配列の中に直接値を差し込んだり、
順番をその場で組み替えたりできます。
一方で concat は、
arr1.concat(arr2)
のように、「配列と配列をつなげる」ことに特化した動きになります。
なので、途中に値を入れたりする場合は、別で処理を書く必要があるのです。
同じ「結合」でも、
配列をそのままつなげるのか、
中身を展開して並べるのかで使い方が少し変わってくるんです。
少し違いが分かりにくいですが、
このあたりが concat とスプレッド構文の違いなので、気をつけてください (˵ •̀ ᴗ – ˵) ✧
第3問 push と unshift
今度は少しタイプを変えての出題！ (๑ •̀ω•́)۶ﾌｧｲﾄ!!
const colors = ["赤", "青"];
const newColor = "黄";
colors.push(newColor);
colors.unshift("白");
console.log(colors);
console.log(colors) ではどうなるでしょうか？
- [“赤”, “青”, “黄”, “白”]
- [“黄”, “赤”, “青”, “白”]
- [“白”, “赤”, “青”, “黄”]
正解は… （ここをクリック！）
３でした！（わかったかな？）
解説 !!
push は値を配列の後ろに追加して、
unshift は値を前に追加します。
どちらも「要素を追加する」という点では同じなんですが…、
追加される位置が違うのがポイント！
つまり、結果はこうなる↓
["白", "赤", "青", "黄"]
この2つは、新しい配列を作るのではなく、
今ある配列にそのまま値が追加されていくのが特徴なのです！
push の場合は、
["赤", "青"] → ["赤", "青", "黄"]のように、配列の末尾に追加されていくので、
後ろにどんどん積み重なっていくイメージです。
一方で unshift は、
["赤", "青"] → ["白", "赤", "青"]のように、配列の先頭に追加されるので、もともとあった要素が後ろにずれていきます。
ずれることで意図しない位置を参照してしまう可能性があるので、使用時に注意！
同じ「追加」でも、
後ろに足されるのか、前に足されるのかで、配列の中身の並び方が変わっていきます。
このあたりが push と unshift の違いなんです 👀
第4問 splice と slice
名前が似ているこの2つです。
const alphabet = ["A", "B", "C", "D"];
const resA = alphabet.slice(1, 3);
alphabet.splice(1, 2, "X");
console.log("resA:", resA);
console.log("alphabet:", alphabet);
さて、どうなるでしょうか！
- resA は [“B”, “C”]、alphabet は変わらない
- resA は [“B”, “C”]、alphabet は [“A”, “X”, “D”]
- resA は [“B”, “C”]、alphabet は [“A”, “B”, “C”, “D”]
正解は… （ここをクリック！）
２でした！
解説 !!
slice は指定の範囲を取り出して、splice は削除や置き換えします。
今回の結果はこんな感じ↓
resA: ["B", "C"]
alphabet: ["A", "X", "D"]
この2つはどちらも配列の一部を扱う処理ですが、
動きがかなり違うのです 👀
じゃあこの2つ、何が違うのかというと…
・ slice → 取り出すだけ
・ splice → 中身を書き換える
ここが一番の違いです！
slice は、
["A", "B", "C", "D"] → ["B", "C"]のように、必要な部分だけ取り出して新しく配列を作るので、元の配列には影響がないのです。
一方で splice は、
["A", "B", "C", "D"] → ["A", "X", "D"]のように、配列の中身を入れ替えるので、元の配列そのものを書き換えちゃいます。
同じような操作に見えても、
取り出すだけなのか、中身を書き換えるのかで動きが変わってきます。
このあたりが slice と splice の違いです！
ここまでのポイントおさらい !!
ここまで見てきた内容をまとめると、こんな感じ↓
＋
・配列同士を足すと、文字列としてつながる
concat / スプレッド
・concat は配列同士をそのままつなげて新しい配列を作れる
・スプレッドは中身を展開して並べ替れ、途中に値を入れたり並びをその場で変えながら新しい配列を作れる
push / unshift
・push は元の配列の後ろに追加される
・unshift は元の配列の前に追加される
slice / splice
・slice は範囲を取り出し元の配列は変わらない
・splice は削除や置き換えをして元の配列が変わる
同じ「配列の操作」でも、やっていることはそれぞれ違うので、
なので普段書くときは…
・ 結合 → スプレッド構文
・ 元を変えたくない → concat / slice
・ 書き換えたい → push / splice
このあたりを意識して使い分けてみてください (˵ •̀ ᴗ – ˵) ✧
まとめ
配列の操作は、一見似ているものが多いですが、
「元の配列が変わるかどうか」で、動きが変わってくるんです。
ここを押さえておくだけでも、
思っていた結果と違う、というケースはかなり減るはず！
少しでも参考になっていたら嬉しいです ᥫᩣ ̖́-
コメント