配列は順序付きのリスト
JavaScriptの配列は、値を順番に並べて格納するためのものです。中身には数値、文字列、オブジェクト、さらには別の配列まで、どんな型の値でも入れられます。しかも型を揃える必要はなく、バラバラでも問題ありません。配列を作るには、角かっこ [] を使います。
リテラル構文（[]）を使うのが、配列を作るときの 99% のやり方です。new Array(...) という書き方もありますが、これには落とし穴があります。new Array(3) は [3] ではなく、長さ 3 で要素が 1 つも入っていない配列 になってしまうのです。素直に [] を使っておきましょう。
インデックスは 0 から始まる
配列の要素には、位置（インデックス）を指定してアクセスします。インデックスは 0 から始まります。
ここで押さえておきたいポイントが2つあります。1つ目は、配列の範囲外のインデックスにアクセスしてもエラーにはならず、undefined が返ってくるということ。「なんで undefined になるの?」と悩むバグの定番パターンです。2つ目は、配列の末尾を超えたインデックスにも自由に代入でき、JavaScript は文句ひとつ言わず配列を勝手に伸ばしてくれる、という点です。
インデックス3と4は「空のスロット」(スパースな穴) になります。length は6まで一気に増えます。これは基本的に避けたい挙動で、配列の柔軟さゆえの副作用であって、積極的に使う機能ではありません。
length プロパティはリアルタイムに変わる
array.length は常に「最大インデックス + 1」の値になります。要素を追加したり削除したりすると、自動で更新されます。
この小ネタは覚えておいて損はありません。length に値を代入すると配列が切り詰められるので、nums.length = 0 とすれば配列をその場で空にできます。
push / pop / shift / unshift
配列の先頭・末尾で要素を追加・削除する4つのメソッドです。
push(x)は末尾に要素を追加し、追加後の長さを返します。pop()は末尾の要素を削除し、削除した要素を返します。unshift(x)は先頭に要素を追加します。shift()は先頭の要素を削除します。
push と pop は高速です。一方、shift と unshift は残りの要素すべてのインデックスを振り直す必要があるので、大きな配列では遅くなります。普段使いのサイズなら気にしなくて大丈夫ですが、数百万件レベルのデータを扱うなら覚えておきたいポイントです。
slice と splice の違い
名前はそっくりなのに、動きは全然違います。この2つをきちんと区別できれば、あとで悩むことがぐっと減ります。
slice(start, end) は配列の一部を_コピー_して返します。元の配列には手を加えません。end は含まれない点に注意してください。
splice(start, deleteCount, ...items) は元の配列を直接書き換えるメソッドです。削除・挿入のどちらもできますし、両方同時に行うことも可能で、戻り値は取り除かれた要素になります。
覚え方のコツ：パンから一切れ「スライスして取り分ける」イメージなら slice、フィルムを「切って差し込む（スプライスする）」イメージなら splice です。
配列から要素を探す: indexOf, includes, find
配列の中から要素を探す方法は、用途別に大きく3つあります。
indexOf(x)は要素の位置を返し、見つからなければ-1を返します。インデックス自体が欲しいときに使います。includes(x)は真偽値を返します。「入ってるかどうかだけ知りたい」ときはこっちの方がスッキリ書けます。indexOfが正しく扱えないNaNもちゃんと判定してくれるのもポイントです。find(predicate)は各要素に対して関数を実行し、最初に条件を満たした要素を返します。indexOfやincludesは厳密等価でしか比較できないので、オブジェクトの配列を扱うときはこのfindの出番です。
配列をループで処理する
状況に応じて使い分けたい、定番のループ方法をいくつか紹介します。
for...of が基本の選択肢です。読みやすく、どんなイテラブルにも使えて、値が直接取れます。forEach はインデックスも一緒に欲しいときや、途中で抜ける必要がないときに便利です（forEach 内で break は使えません）。昔ながらのインデックス付き for は冗長ですが制御しやすく、要素をスキップしたいときや逆順に回したいとき、あるいはその両方に向いています。
避けたほうがいいループが一つあります。for...in です。これは「キー」を列挙し、継承されたプロパティまで拾ってしまいます。配列ではなく、オブジェクト向けの構文です。
配列のコピーと結合
配列は参照型です。別の変数に代入してもコピーにはならず、同じ配列に名前が二つ付くだけです。
コピーを作りたいときは、スプレッド構文か slice() を使います:
どちらも シャローコピー になります。つまり、一番外側の配列は新しく作られますが、中身がオブジェクトの場合、そのオブジェクト自体は元と共有されたままです。配列を連結したいときも、スプレッド構文を使うのが一番スッキリ書けます。
オブジェクトの配列
実際のコードでは、JavaScript の配列に入れるのはオブジェクトがほとんどです。これまで紹介してきたメソッドはそのまま使えますが、条件の書き方が少し工夫のしどころになります。
filter は条件に一致する要素だけを集めた新しい配列を返し、map は各要素を変換した新しい配列を返します。この2つを繋げて使うのが、オブジェクトの配列を扱うときの定番パターンです。こうしたメソッドについては、次のページでさらに詳しく見ていきます。
配列とオブジェクトの使い分け
ざっくりしたイメージとしては、順序が意味を持ち、同じ種類のものが並んだ リスト を扱うときは配列を使います。一方、名前をキーにして値を引きたいときはオブジェクト（または Map）の出番です。「1番目、2番目、3番目」なら配列、「id が 42 のユーザーを探す」ならオブジェクトや Map、という感じですね。
もちろん両者を組み合わせることもできて、オブジェクトの配列はあらゆる場面で登場します。ただし、配列をキー付き辞書のように使ったり、逆にオブジェクトを順序付きリスト代わりに使うのは避けましょう。それぞれ得意な役割があります。
次は: 分割代入
配列からインデックスで値を取り出したり、オブジェクトからプロパティ名で値を取り出したりする場面は本当に多いので、JavaScript には専用の構文が用意されています。それが分割代入（destructuring）です。次はこれを見ていきましょう。
よくある質問
JavaScriptで配列を作るにはどうすればいい？
角括弧のリテラル構文が王道です：const fruits = ['apple', 'banana']。Arrayコンストラクタ（new Array(3)）もありますが、ほぼ使いません。new Array(3)は「長さ3だけど中身が空っぽ」の配列を作るので、初見だとハマりがちです。
JavaScriptの配列から要素を削除するには？
末尾からならpop()、先頭からならshift()。途中の要素を消したいときは、元の配列を書き換えるsplice(index, 1)か、新しい配列を返すfilter(...)を使います。ポイントは、spliceは破壊的、filterは非破壊的という違いです。
sliceとspliceの違いは？
slice(start, end)は配列の一部を浅いコピーとして返すだけで、元の配列はそのまま。一方splice(start, deleteCount, ...items)は元の配列を直接書き換え、要素を削除したり挿入したりして、削除した要素を返します。一文字違いですが挙動はまったく別物です。
配列に特定の値が含まれているか確認するには？
array.includes(value)が一番シンプルで、trueかfalseを返してくれます。NaNもちゃんと判定できるのがポイント。位置まで欲しいときはindexOf(value)（見つからなければ-1）。オブジェクトの中身で判定したいときなど、条件が複雑な場合はsome(predicate)やfind(predicate)の出番です。
