このページでは、JavaScriptで配列をループ処理したり操作するためのさまざまなメソッドについて詳しく解説します。それぞれの使い方を例とともに紹介します。

• forループ
• array.forEach()
• array.entries()
• array.keys()
• array.values()
• array.map()
• array.reduce()
• array.reduceRight()

forループ

forループは、配列を反復処理するための最も基本的な方法です。インデックスを指定して要素にアクセスします。

const array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}
// 出力: 1, 2, 3, 4, 5

ループの条件を自由に設定できるため、より柔軟な操作が可能です。

array.forEach()

array.forEach()は、配列の各要素に対して指定した関数（コールバック関数）を1回ずつ呼び出します。配列を直接操作しません。

const array = [1, 2, 3];
array.forEach((value, index) => {
    console.log(`インデックス: ${index}, 値: ${value}`);
});
// 出力:
// インデックス: 0, 値: 1
// インデックス: 1, 値: 2
// インデックス: 2, 値: 3

オプションでthisを指定することも可能です。

array.entries()

array.entries()は、キーと値のペア（[index, value]）を含む反復可能なオブジェクトを返します。

const array = ['a', 'b', 'c'];
for (const [index, value] of array.entries()) {
    console.log(index, value);
}
// 出力:
// 0 'a'
// 1 'b'
// 2 'c'

array.keys()

array.keys()は、配列のキー（インデックス）を反復可能なオブジェクトとして返します。

const array = ['x', 'y', 'z'];
for (const key of array.keys()) {
    console.log(key);
}
// 出力: 0, 1, 2

array.values()

array.values()は、配列の値を反復可能なオブジェクトとして返します。

const array = [10, 20, 30];
for (const value of array.values()) {
    console.log(value);
}
// 出力: 10, 20, 30

array.map()

array.map()は、各要素に対してコールバック関数を実行し、新しい配列を作成します。元の配列は変更されません。

const array = [1, 2, 3];
const squared = array.map(value => value ** 2);
console.log(squared);
// 出力: [1, 4, 9]

array.reduce()

array.reduce()は、配列のすべての要素を単一の値に集約します。最初の引数はコールバック関数、オプションの第2引数は初期値です。

const array = [1, 2, 3, 4];
const sum = array.reduce((acc, value) => acc + value, 0);
console.log(sum);
// 出力: 10

コールバック関数には累積値（acc）、現在の値、インデックス、配列全体が渡されます。

array.reduceRight()

array.reduceRight()は、array.reduce()と同様ですが、右から左へ集約処理を行います。

const array = ['a', 'b', 'c'];
const result = array.reduceRight((acc, value) => acc + value, '');
console.log(result);
// 出力: 'cba'

これでJavaScriptの配列操作メソッドについての解説は終了です。適切なメソッドを選択して効率的なコードを書きましょう！