JavaScript | 第10章「インデックス付きコレクション」

JavaScript「インデックス付きコレクション」要点まとめ

基本の考え方

• 「インデックス付き」＝ 番号（0, 1, 2, …）で要素を順番に管理するコレクション
• JavaScript では主に次の3つが該当：
  1. Array（配列）
  2. TypedArray（型付き配列）
  3. 配列っぽいオブジェクト（array-like objects）

Array（配列）

作り方

const arr = [10, 20, 30];     // 配列リテラル（よく使う）
const arr2 = new Array(3);    // 長さ3の空配列

const arr = [10, 20, 30];     // 配列リテラル（よく使う）
const arr2 = new Array(3);    // 長さ3の空配列

基本操作

arr[0]         // 10（最初の要素）
arr.push(40)   // 末尾に追加
arr.pop()      // 末尾を削除
arr.length     // 要素数を取得

arr[0]         // 10（最初の要素）
arr.push(40)   // 末尾に追加
arr.pop()      // 末尾を削除
arr.length     // 要素数を取得

主なメソッド

Sparse Array（疎な配列）

• 空のスロット（未定義の要素）がある配列

const arr = [];
arr[3] = "hello";  // [ <3 empty slots>, "hello" ]

const arr = [];
arr[3] = "hello";  // [ <3 empty slots>, "hello" ]

• 一部のメソッド（forEach, map など）は空スロットをスキップする場合がある → 注意！

配列っぽいオブジェクト（Array-like）

• length プロパティと数値キーを持つオブジェクト
  例：arguments, NodeList, HTMLCollection
• 配列メソッドは直接使えないことが多い
  → Array.from() や [...obj] で本物の配列に変換！

const divs = document.querySelectorAll("div");
const arr = Array.from(divs);  // NodeList → Array

const divs = document.querySelectorAll("div");
const arr = Array.from(divs);  // NodeList → Array

TypedArray（型付き配列）

• 数値専用の高速配列（メモリ効率重視）
• 例：Int8Array, Uint16Array, Float32Array
• WebGL・音声処理・画像処理などで利用

const data = new Float32Array([0.5, 1.0, 1.5]);

const data = new Float32Array([0.5, 1.0, 1.5]);

まとめ：使い分けの目安