8.1 forEach()メソッド
JavaScriptの配列の繰り返しメソッドは、配列の要素に対してさまざまな操作を行うための強力な手段を提供するんだ。ここでは、
forEach(), map(), filter(), reduce(), some(),
every(), find(), そしてfindIndex()といった主要な繰り返しメソッドについて見ていこう。
forEach()メソッドは、配列の各要素に対して指定された関数を一度だけ実行するよ。このメソッドは新しい配列を返さず、中断もできないんだ。
構文:
array.forEach(function(element, index, array) {
// 関数の内容
});
例:
forEach()メソッドはnumbers[]配列の各要素を走査し、そのインデックスと値を出力するんだ。
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number, index) => {
console.log(`Index: ${index}, Value: ${number}`);
});
// 出力:
// Index: 0, Value: 1
// Index: 1, Value: 2
// Index: 2, Value: 3
// Index: 3, Value: 4
// Index: 4, Value: 5
8.2 map()メソッド
map()メソッドは、配列の各要素に指定された関数を呼び出した結果を持つ新しい配列を作成するんだ。
構文:
const newArray = array.map(function(element, index, array) {
// 関数の内容
return 新しい値;
});
変換関数はアロー関数としても書けるよ:
const newArray = array.map((element, index, array) => 新しい値);
例:
map()メソッドは、numbers[]配列の数値を2乗した値を持つ新しい配列squared[]を作成するんだ。
const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(number => number * number);
console.log(squared); // [1, 4, 9, 16, 25]
8.3 filter()メソッド
filter()メソッドは、指定された関数でチェックを通過したすべての要素を持つ新しい配列を作成するんだ。
const newArray = array.filter(function(element, index, array) {
// 関数の内容
return 条件;
});
フィルタ関数はアロー関数としても書けるよ:
const newArray = array.filter((element, index, array) => 条件);
例:
filter()メソッドは、numbers[]配列から偶数だけを持つ新しい配列evenNumbers[]を作成するんだ。
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4]
8.4 reduce()メソッド
reduce()メソッドは、配列の要素に対して左から右へとアキュムレータと各要素で指定された関数を適用し、単一の値にまとめるものなんだ。
構文:
const result = array.reduce(function(accumulator, current, index, array) {
// 関数の内容
return 新しいアキュムレータの値;
}, initialValue);
アキュムレータ関数はアロー関数としても書けるよ:
const result = array.reduce((accumulator, current, index, array) =>
新しい値, initialValue
);
例:
reduce()メソッドは、numbers[]配列を単一の値sumにまとめて、配列のすべての要素を合計するんだ。
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, number) => acc + number, 0);
console.log(sum); // 15
8.5 some()メソッド
some()メソッドは、配列の少なくとも1つの要素が指定された関数の条件を満たすかどうかをチェックするんだ。trueまたはfalseを返すよ。
構文:
const result = array.some(function(element, index, array) {
// 関数の内容
return 条件;
});
チェック関数はアロー関数としても書けるよ:
const result = array.some((element, index, array) => 条件);
例:
some()メソッドはnumbers[]配列に少なくとも1つの偶数があるかどうかをチェックし、trueを返すんだ。
const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some(number => number % 2 === 0);
console.log(hasEvenNumber); // true
8.6 every()メソッド
every()メソッドは、配列のすべての要素が指定された関数の条件を満たすかどうかをチェックするんだ。trueまたはfalseを返すよ。
構文:
const result = array.every(function(element, index, array) {
// 関数の内容
return 条件;
});
チェック関数はアロー関数としても書けるよ:
const result = array.every((element, index, array) => 条件);
例:
every()メソッドはnumbers[]配列のすべての要素が正であるかどうかをチェックし、trueを返すんだ。
const numbers = [1, 2, 3, 4, 5];
const allPositive = numbers.every(number => number > 0);
console.log(allPositive); // true
8.7 find()メソッド
find()メソッドは、配列の中で指定された関数の条件を満たす最初の要素を返すんだ。条件を満たす要素がない場合はundefinedを返す。
構文:
const result = array.find(function(element, index, array) {
// 関数の内容
return 条件;
});
チェック関数はアロー関数としても書けるよ:
const result = array.find((element, index, array) => 条件);
例:
find()メソッドはnumbers[]配列から最初の偶数を返すんだ。
const numbers = [1, 2, 3, 4, 5];
const firstEven = numbers.find(number => number % 2 === 0);
console.log(firstEven); // 2
8.8 findIndex()メソッド
findIndex()メソッドは、配列の中で指定された関数の条件を満たす最初の要素のインデックスを返すんだ。条件を満たす要素がない場合は-1を返す。
構文:
const result = array.findIndex(function(element, index, array) {
// 関数の内容
return 条件;
});
チェック関数はアロー関数としても書けるよ:
const result = array.findIndex((element, index, array) => 条件);
例:
findIndex()メソッドはnumbers[]配列の中で最初の偶数のインデックスを返すんだ。
const numbers = [1, 2, 3, 4, 5];
const firstEvenIndex = numbers.findIndex(number => number % 2 === 0);
console.log(firstEvenIndex); // 1
GO TO FULL VERSION