[JavaScript] JavaScript での配列操作まとめ

JavaScript の配列操作は、日常的なプログラミングタスクにおいて非常に重要です。配列に要素を追加したり削除したり、 filter, map, reduce などのメソッドを使ってデータを操作する方法について学びましょう。この記事では、配列操作の基本から応用までをカバーし、サンプルコードを交えて解説します。

配列の追加

pushメソッド

pushメソッドを使用すると、配列の末尾に要素を追加できます。

let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]

unshiftメソッド

unshiftメソッドは、配列の先頭に要素を追加します。

let fruits = ["apple", "banana"];
fruits.unshift("mango");
console.log(fruits); // ["mango", "apple", "banana"]

配列の削除

popメソッド

popメソッドは、配列の末尾から要素を削除します。

let fruits = ["apple", "banana", "orange"];
let lastFruit = fruits.pop();
console.log(fruits); // ["apple", "banana"]
console.log(lastFruit); // "orange"

shiftメソッド

shiftメソッドは、配列の先頭から要素を削除します。

let fruits = ["apple", "banana", "orange"];
let firstFruit = fruits.shift();
console.log(fruits); // ["banana", "orange"]
console.log(firstFruit); // "apple"

配列の検索と削除

spliceメソッド

spliceメソッドは、配列の特定の位置に要素を追加したり削除したりするために使用されます。

let fruits = ["apple", "banana", "orange"];
let removedFruits = fruits.splice(1, 1); // インデックス1の要素を1つ削除
console.log(fruits); // ["apple", "orange"]
console.log(removedFruits); // ["banana"]

filterメソッド

filterメソッドは、条件に一致する要素だけを含む新しい配列を作成します。

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4]

配列の変換

mapメソッド

mapメソッドは、配列の各要素に対して関数を適用し、新しい配列を作成します。

let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = numbers.map(number => number * number);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

配列の集約

reduceメソッド

reduceメソッドは、配列の各要素に対して関数を適用し、単一の値に集約します。

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15

まとめ

この記事では、 JavaScript での配列操作に関する基本的なメソッドについて学びました。配列の追加、削除、検索、変換、そして集約の方法を理解することで、データ操作の効率が大幅に向上します。これらのメソッドを使いこなすことで、より複雑なデータ処理も簡単に行えるようになります。