目次
【JavaScript】配列の各要素に処理をする方法【foreEach／map／filterなど】
配列の各要素に処理をする方法が主にこちら↓
・foreEach（返り値なし）
・map
・find
・findIndex
・filter
・reduce
・reduceRight
・some
・evrey
・flatMap
順に解説してきます。
foreEachを使うと、配列要素それぞれに対してコールバック関数の処理を行います。
返り値はもちません。
単純にループして処理を行ってくれるだけです。
const nums = [10, 25, 50, 100];
nums.forEach((num) => {
console.log(num + 100); // 110 125 150 200
});mapメソッドを使うと、各要素に処理をしてそれを新しい配列に返してくれます。
下記例では配列各要素に「+10」して、新たな配列を返しました↓
const nums = [10, 25, 50, 100];
const numsArray = nums.map((num) =>{
return num + 10;
});
console.log(numsArray); // [20, 35, 60, 110]findを使うと条件に一致する最初の要素を見つけ、その値を返してくれます。
const nums = [10, 25, 50, 100];
const numsArray = nums.find((num) => {
return num === 50;
});
console.log(numsArray); // 50findIndexを使うと条件に一致する最初の要素を見つけ、その値のインデックスを返してくれます。
const nums = [10, 25, 50, 100];
const numsArray = nums.findIndex((num) => {
return num === 50;
});
console.log(numsArray); // 2filterを使うと、処理内の条件に合うもののみがは新配列として返してくれます。
const nums = [10, 25, 50, 100];
const numsArray = nums.filter((nums) => {
return nums > 40;
});
console.log(numsArray); // [50, 100]reduceを使うと、配列要素をそれぞれ累積的に処理してくれ最終的に1つの値を生成します。
例が下記（引数名と200の数値は任意でOKです）
const nums = [10, 25, 50, 100];
const numsArray = nums.reduce((preNum, num) => {
return preNum + num;
}, 200);
console.log(numsArray); // 385- preNum ⇒ 現在までに累積された合計値
- num ⇒ 現在処理している配列の要素
- 200 ⇒ 初期値（preNumの）、累積値のスタート地点
初期値は 200
↓
200 + 10 = 210
↓
210 + 25 = 235
↓
235 + 50 = 285
↓
285 + 100 = 385
ちなみに第二引数は省略可能で、配列の最初の要素を初期値として使用。
そのため、最初のループでは2番目の要素から演算が始まります。
const nums = [10, 25, 50, 100];
const numsArray = nums.reduce((preNum, num) => {
return preNum + num;
});
console.log(numsArray); // 185reduceRightを使うと、reduceを配列要素の右から行うという意味の処理ができます。
const nums = [10, 25, 50, 100];
const numsArray = nums.reduceRight((preNum, num) => {
return preNum - num;
}, 200);
console.log(numsArray); // 15初期値は 200
↓
200 – 100 = 100
↓
100 – 50 = 50
↓
50 – 25 = 25
↓
25 – 10 = 15
someを使うと、1つだけでも配列要素が処理内の条件にあっていれば「true」を返します。
下記例だと100という配列要素がありますが
50以下の配列要素が1つ以上あるので「true」を返します。
const nums = [10, 25, 50, 100];
const numsArray = nums.some((num) => {
return num < 50;
});
console.log(numsArray); // true下記例だと1つも条件にあう配列要素がないため「false」を返します。
const nums = [10, 25, 50, 100];
const numsArray = nums.some((num) => {
return num > 10000;
});
console.log(numsArray); // false
ちなみに一度trueが出たらそこでループ処理は終わるよ
everyを使うと、全ての配列要素が処理内の条件にあってるかどうかで「boolean値」を返します。
例として下記だと「true」を返し↓
const nums = [10, 25, 50, 100];
const numsArray = nums.every((num) => {
return num < 10000;
});
console.log(numsArray); // true下記だと「false」を返します。
const nums = [10, 25, 50, 100];
const numsArray = nums.every((num) => {
return num > 10000;
});
console.log(numsArray); // falseちなみに一度falseが出たらそこでループ処理は終わるよ
flatMapを使うと、処理後にできた入れ子になった配列を1つにしてくれます。
通常mapを使った場合、処理内の要素が配列だと入れ子になるんですよね↓
const nums = [10, 25, 50, 100];
const numsArray = nums.map((num) =>{
return [num + 10];
});
console.log(numsArray); // [ [ 20 ], [ 35 ], [ 60 ], [ 110 ] ]flatMapを使えば、入れ子にならずに1つのフラットな配列にしれくれます↓
const nums = [10, 25, 50, 100];
const numsArray = nums.flatMap((num) =>{
return [num + 10];
});
console.log(numsArray); // [20, 35, 60, 110]ちなみにこれはmapメソッドと、flatメソッドを使っているのと同じ意味です。
flatメソッドに関しては下記記事を参考にどうぞ↓
【JavaScript】配列を追加・変更・検索などする方法【まとめてみた】 【JavaScript】配列の各要素に処理をする方法【foreEach／map／filterなど】：まとめ
・foreEach（返り値なし）
・map
・find
・findIndex
・filter
・reduce
・reduceRight
・some
・evrey
・flatMap
配列の各要素に処理をする時はためしてみてね！
ちなみにforeEachと、ループ文で使う「for of」は処理内容はほぼほぼ同じです。
「for of」に関しては下記記事で解説しているのでどうぞ↓
【解説】JavaScriptのループ文をまとめてみた【for／while】
