時給単価UP【3大特典付き】
コーディングテクニック集100選⋙

【JavaScript】配列の各要素に処理をする方法【foreEach/map/filterなど】

記事内に広告を含みます

【JavaScript】配列の各要素に処理をする方法【foreEach/map/filterなど】

配列の各要素に処理をする方法が主にこちら↓

・foreEach(返り値なし)

・map

・find

・findIndex

・filter
・reduce

・reduceRight

・some

・evrey

・flatMap

順に解説してきます。

foreEach「配列各要素それぞれに対してコールバック関数を実行する」

foreEachを使うと、配列要素それぞれに対してコールバック関数の処理を行います。

返り値はもちません。

単純にループして処理を行ってくれるだけです。

const nums = [10, 25, 50, 100];
nums.forEach((num) => {
  console.log(num + 100); // 110 125 150 200
});

map「処理内容に応じて新しい配列を作成」

mapメソッドを使うと、各要素に処理をしてそれを新しい配列に返してくれます。

下記例では配列各要素に「+10」して、新たな配列を返しました↓

const nums = [10, 25, 50, 100];

const numsArray = nums.map((num) =>{
  return num + 10;
});
console.log(numsArray); //  [20, 35, 60, 110]

find「配列要素と条件一致の最初の要素を返す」

findを使うと条件に一致する最初の要素を見つけ、その値を返してくれます。

const nums = [10, 25, 50, 100];

const numsArray = nums.find((num) => {
  return num === 50;
});
console.log(numsArray); // 50

findIndex「配列要素と条件一致の最初の要素のインデックスを返す」

findIndexを使うと条件に一致する最初の要素を見つけ、その値のインデックスを返してくれます。

const nums = [10, 25, 50, 100];

const numsArray = nums.findIndex((num) => {
  return num === 50;
});
console.log(numsArray); // 2

filter「条件にあう要素のみで新しく配列作成」

filterを使うと、処理内の条件に合うもののみがは新配列として返してくれます。

const nums = [10, 25, 50, 100];

const numsArray = nums.filter((nums) => {
  return nums > 40;
});
console.log(numsArray); //  [50, 100]

reduce「配列要素を累積的に処理して1つの値を作る」

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を右から行う」

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つの要素が条件一致してるかでboolean値を返す」

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が出たらそこでループ処理は終わるよ

evrey「全ての配列要素が条件一致してるかでboolean値を返す」

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つにする」

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】

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA