配列の基本操作とメソッド体系

JavaScriptにおける配列操作は、データ処理の基盤となる重要なスキルです。本稿では実践で頻繁に使用される配列メソッドを体系的に整理します。

配列の生成方法

コンストラクタによる生成：

let emptyArray = new Array();
let fixedLengthArray = new Array(5);
let preFilledArray = new Array("apple", "banana", "cherry");

リテラル表記による生成：

let emptyArrayLiteral = [];
let singleElementArray = [42];
let fruitArray = ["orange", "grape", "melon"];

主要配列メソッド詳細

1. join() - 要素結合

配列要素を指定区切り文字で結合し文字列を生成します。

let numbers = [10, 20, 30];
console.log(numbers.join());        // "10,20,30"
console.log(numbers.join(":"));     // "10:20:30"

2. push() / pop() - 末尾操作

配列の末尾に対する追加・削除操作を提供します。

let colors = ["red", "green", "blue"];
let newLength = colors.push("yellow", "purple");
console.log(newLength);             // 5
console.log(colors);                // ["red", "green", "blue", "yellow", "purple"]

let removedColor = colors.pop();
console.log(removedColor);          // "purple"

3. shift() / unshift() - 先頭操作

配列の先頭に対する要素操作を実行します。

let items = ["first", "second", "third"];
let updatedCount = items.unshift("newFirst");
console.log(updatedCount);          // 4
console.log(items);                 // ["newFirst", "first", "second", "third"]

let shiftedItem = items.shift();
console.log(shiftedItem);           // "newFirst"

4. sort() - 要素ソート

配列要素の並び替えを行います。カスタム比較関数を指定可能です。

let randomValues = [23, 5, 100, 42];
console.log(randomValues.sort());   // [100, 23, 42, 5]（文字列比較）

function numericalSort(a, b) {
    return a - b;
}
console.log(randomValues.sort(numericalSort));  // [5, 23, 42, 100]

5. reverse() - 順序反転

配列要素の順序を完全に反転させます。

let sequence = [1, 2, 3, 4];
console.log(sequence.reverse());    // [4, 3, 2, 1]

6. concat() - 配列結合

複数の配列または要素を結合して新配列を生成します。

let baseArray = [1, 2];
let extendedArray = baseArray.concat(3, [4, 5]);
console.log(extendedArray);         // [1, 2, 3, 4, 5]

7. slice() - 部分配列抽出

指定範囲の要素からなる新規配列を作成します。

let sourceArray = [10, 20, 30, 40, 50];
let partialArray = sourceArray.slice(1, 4);
console.log(partialArray);          // [20, 30, 40]

8. splice() - 要素置換

要素の削除、追加、置換を柔軟に実行できます。

let dataSet = [1, 2, 3, 4, 5];
let removedElements = dataSet.splice(1, 2, 6, 7);
console.log(dataSet);               // [1, 6, 7, 4, 5]
console.log(removedElements);       // [2, 3]

9. indexOf() / lastIndexOf() - 要素検索

指定値の位置を前方・後方から検索します。

let sampleArray = [5, 3, 5, 7, 5, 9];
console.log(sampleArray.indexOf(5));        // 0
console.log(sampleArray.lastIndexOf(5));    // 4

10. forEach() - 反復処理

各要素に対して指定関数を実行します。

let digits = [1, 2, 3];
digits.forEach(function(element, position, array) {
    console.log(`値: ${element}, 位置: ${position}`);
});

11. map() - 要素変換

各要素を変換した新配列を生成します。

let original = [1, 2, 3];
let squared = original.map(function(value) {
    return value * value;
});
console.log(squared);               // [1, 4, 9]

12. filter() - 条件フィルタリング

条件を満たす要素のみで新配列を構築します。

let mixedNumbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = mixedNumbers.filter(function(num) {
    return num % 2 === 0;
});
console.log(evenNumbers);           // [2, 4, 6]

13. every() / some() - 条件検査

全要素または一部要素が条件を満たすかを検査します。

let testArray = [2, 4, 6, 8];
let allEven = testArray.every(function(x) { return x % 2 === 0; });
console.log(allEven);               // true

let hasLargeNumber = testArray.some(function(x) { return x > 5; });
console.log(hasLargeNumber);        // true

14. reduce() / reduceRight() - 累積処理

配列要素を累積的に処理し単一値を導出します。

let values = [1, 2, 3, 4];
let total = values.reduce(function(accumulator, current) {
    return accumulator + current;
}, 0);
console.log(total);                 // 10