![見出し画像](https://assets.st-note.com/production/uploads/images/148891663/rectangle_large_type_2_b014c9b5d3679885c840fe36e592b46c.png?width=1200)
【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
この記事が気に入ったらサポートをしてみませんか?