【JavaScript】配列の扱い方をまとめてみた！

WEBアプリ開発において、JavaScriptで配列を扱うことが多いので、一通り、まとめてみた！

1. 配列の作成と要素の追加

// 配列の作成
let arr = [];

// 要素の追加
arr.push(1);      // [1]
arr.push(2, 3);   // [1, 2, 3]

2. 配列の要素にアクセス

let arr = [10, 20, 30];

// インデックスで要素にアクセス
console.log(arr[0]); // 10
console.log(arr[2]); // 30

3. 配列の長さを取得

let arr = [1, 2, 3];
console.log(arr.length); // 3

4. 要素の削除

let arr = [1, 2, 3, 4];

// 最後の要素を削除
arr.pop(); // [1, 2, 3]

// 最初の要素を削除
arr.shift(); // [2, 3]

5. 要素の追加と削除 (splice)

let arr = [1, 2, 3, 4, 5];

// インデックス2から1つの要素を削除
arr.splice(2, 1); // [1, 2, 4, 5]

// インデックス2に要素を追加
arr.splice(2, 0, 3); // [1, 2, 3, 4, 5]

6. 配列の結合 (concat)

let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = arr1.concat(arr2); // [1, 2, 3, 4]

7. 配列の検索

let arr = [10, 20, 30, 40];

// インデックスを返す
let index = arr.indexOf(20); // 1

// 条件に一致する最初の要素を返す
let item = arr.find(x => x > 25); // 30

8. 配列の並べ替え (sort)

let arr = [3, 1, 4, 2];

// 昇順
arr.sort((a, b) => a - b); // [1, 2, 3, 4]

// 降順
arr.sort((a, b) => b - a); // [4, 3, 2, 1]

9. 配列の反転 (reverse)

let arr = [1, 2, 3, 4];
arr.reverse(); // [4, 3, 2, 1]

10. 配列の繰り返し処理 (forEach)

let arr = [1, 2, 3];
arr.forEach(item => console.log(item)); // 1, 2, 3

11. 配列から新しい配列を作成 (map)

let arr = [1, 2, 3];
let newArr = arr.map(x => x * 2); // [2, 4, 6]

12. 配列のフィルタリング (filter)

let arr = [1, 2, 3, 4, 5];
let evenNumbers = arr.filter(x => x % 2 === 0); // [2, 4]

13. 配列の要素を累積 (reduce)

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, curr) => acc + curr, 0); // 10