JavaScriptにおける配列の包括的ガイド:構造、生成、操作、応用テクニック

配列は複数のデータを順序付けして格納するためのコンテナです。

内部的には、0から始まる連続した数値キーを持つ特殊なオブジェクトであり、lengthプロパティが自動的に管理されます。

配列の生成方法

リテラル記法

const emptyArr = [];
const numArr = [10, 20, 30];

Arrayコンストラクタ

const arrA = new Array();           // []
const arrB = new Array(3);          // [undefined × 3]
const arrC = new Array(5, 6, 7);    // [5, 6, 7]

Array.of(ES6)

const single = Array.of(5);         // [5]
const mixed = Array.of('x', true, {id: 1}); // ['x', true, {id: 1}]

fillによる初期化

const filled = Array(5).fill('ok'); // ['ok','ok','ok','ok','ok']

主要な配列操作メソッド一覧

メソッド用途引数戻り値破壊的
unshift先頭に要素追加要素新長さ
push末尾に要素追加要素新長さ
shift先頭要素削除-削除要素
pop末尾要素削除-削除要素
sort並び替え比較関数配列自身
reverse逆順-配列自身
fill範囲置換値, 開始, 終了配列自身
splice挿入/削除位置, 削除数, 要素削除要素群
slice部分抽出開始, 終了新配列×
filter条件抽出判定関数新配列×
concat結合配列/要素新配列×
reduce集約計算集約関数, 初期値計算結果×
join文字列化区切り文字文字列×

配列判定と基本操作

const items = [100, 200, 300];
console.log(Array.isArray(items));  // true
console.log(items.length);          // 3

// 長さ変更
items.length = 5;   // [100,200,300,undefined,undefined]
items.length = 1;   // [100]

// 要素アクセス
console.log(items[0]);              // 100
console.log(items[items.length-1]); // 100
console.log(items[99]);             // undefined

検索系メソッド

const nums = [5, 8, 12, 8];

// 位置検索
console.log(nums.indexOf(8));       // 1
console.log(nums.lastIndexOf(8));   // 3

// 存在確認
console.log(nums.includes(8));      // true
console.log(nums.includes(99));     // false

// 条件検索
const firstOverTen = nums.find(x => x > 10);        // 12
const indexOverTen = nums.findIndex(x => x > 10);   // 2

要素操作

let data = [1, 2, 3];

// 直接代入
data[1] = 99;                       // [1,99,3]

// spliceで挿入
data.splice(1, 0, 'new');           // [1,'new',99,3]

// 先頭/末尾操作
data.unshift('start');              // 先頭追加
data.push('end');                   // 末尾追加
data.shift();                       // 先頭削除
data.pop();                         // 末尾削除

// 指定位置削除
data.splice(2, 1);                  // インデックス2を削除

文字列変換と結合

const parts = ['apple', 'banana', 'cherry'];

console.log(parts.toString());      // "apple,banana,cherry"
console.log(parts.join('|'));       // "apple|banana|cherry"

const more = ['date', 'elderberry'];
const combined = parts.concat(more); // 新配列生成
// スプレッド演算子でも可能
const altCombined = [...parts, ...more];

配列変形

let values = [3, 1, 4];

values.reverse();                   // [4,1,3] (破壊的)
values.sort((a,b) => a - b);        // [1,3,4] (破壊的)

const subset = values.slice(1, 3);  // [3,4] (非破壊)
const replaced = values.fill(0, 0, 2); // [0,0,4] (破壊的)

// 配列平坦化 (ES2019)
const nested = [1, [2, [3, 4]]];
console.log(nested.flat(1));        // [1,2,[3,4]]
console.log(nested.flat(Infinity)); // [1,2,3,4]

配列コピー

const original = [1, 2, 3];

// 浅いコピー
const shallow = [...original];
const shallow2 = original.slice();
const shallow3 = Array.from(original);

// 深いコピー(簡易版)
const deep = JSON.parse(JSON.stringify(original));

// ネスト対応の深いコピー関数
function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') return obj;
    if (Array.isArray(obj)) {
        return obj.map(item => deepClone(item));
    }
    const cloned = {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            cloned[key] = deepClone(obj[key]);
        }
    }
    return cloned;
}

実践例:地域別統計集計

const rawData = [
    { region: '東京', male: 120, female: 150 },
    { region: '大阪', male: 80, female: 90 },
    { region: '東京', male: 110, female: 130 },
    { region: '大阪', male: 75, female: 85 }
];

const summary = {};
rawData.forEach(record => {
    const { region, male = 0, female = 0 } = record;
    if (!summary[region]) {
        summary[region] = { male: 0, female: 0 };
    }
    summary[region].male += male;
    summary[region].female += female;
});

console.log(summary);
// {
//   東京: { male: 230, female: 280 },
//   大阪: { male: 155, female: 175 }
// }

タグ: javascript Array ES6

5月21日 09:01 投稿