map、filterを使用した配列の処理

はじめに

mapとfilterについて使ったことがないメソッドだったため使い方をまとめてみました。

従来の配列の処理方法

const nameArr = ["たかき", "山田", "田中"];
for (let index = 0; index < nameArr.length; index++) {
  console.log(`${index + 1}番目は${nameArr[index]}です`);
}

console

1番目はたかきです
2番目は山田です
3番目は田中です

上記は従来のfor文を使用した文字列の出力です。

mapメソッドの使用方法

const nameArr = ["たかき", "山田", "田中"];
nameArr.map((name) => {
  console.log(name);
});

console

たかき
山田
田中

アロー関数の中には変数を入れることができ、選択された変数が繰り返されて表示できるようになっています。

const nameArr = ["たかき", "山田", "田中"];
const nameArr2 = nameArr.map((name) => {
  return name;
});
console.log(nameArr2);

console

['たかき', '山田', '田中']

上記の例では変数に対して、mapメソッドを使用し値を代入している。
下記のように簡潔にし書くこともできます。

const nameArr = ["たかき", "山田", "田中"];
nameArr.map((name) => console.log(name));

console

たかき
山田
田中

二つ目の引数を加えたmapの記述方法

const nameArr = ["たかき", "山田", "田中"];
nameArr.map((name, index) => console.log(`${index + 1}番目は${name}です`));

console

1番目はたかきです
2番目は山田です
3番目は田中です

テンプレート文字列を使用することで、短くわかりやすく記述ができるようになっている

mapメソッドを使用した条件分岐

const newNameArr = nameArr.map((name) => {
  if (name === "たかき") {
    return name;
  } else {
    return `${name}さん`;
  }
});
console.log(newNameArr);

console

['たかき', '山田さん', '田中さん']

条件分岐を使用し、参照した値を加工し配列の変数に格納しています。

filterの使用方法

const numArr = [1, 2, 3, 4, 5];
const newNumArr = numArr.filter((num) => {
  return num % 2 === 1;
});
console.log(newNumArr);

console

[1, 3, 5]

filterを使用することで配列をループさせながら、特定の条件のモノだけを取り出して扱うことができる。

おわりに

配列処理はReact開発でも頻繁に使用する方法です。まとめてみて初めて理解した部分もあり、使用しながら覚えていこうと思います。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！