目次
【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); // 50
findIndexを使うと条件に一致する最初の要素を見つけ、その値のインデックスを返してくれます。
const nums = [10, 25, 50, 100];
const numsArray = nums.findIndex((num) => {
return num === 50;
});
console.log(numsArray); // 2
filterを使うと、処理内の条件に合うもののみがは新配列として返してくれます。
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); // 185
reduceRightを使うと、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); // [Array(1), Array(1), Array(1), Array(1)]
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】