javascriptの配列を操作するときに使う関数(map, filter, some, every, forEach etc...)

JavaScriptで配列を操作するときに、個人的に迷ったことがあります。
それは、どの関数を使うのかです。

主に、使用する関数は
・map
・filter
・some
・every
・forEach
であるが、これはどんなタイミングで使うのが望ましいのか個人的見解を書いていこうと思います。

配列は

const array = [
  { id: 0, test: 'あいうえお'},
  { id: 1, test: 'かきくけこ'},
  { id: 2, test: 'さしすせそ'},
  { id: 3, test: 'たちつてと'},
  { id: 4, test: 'なにぬねの'},
];

とします。

map

mapは参照する配列から新たに配列を参照します。

例えば、arrayの各要素に

  isSelected: false

というプロパティと値を加えたいときとかです。

  const newArray = array.map(el =>{
    const originData = el;
    originData.isSelected = false
  });

と処理を書くと、

出力結果

[
  { id: 0, test: 'あいうえお', isSelected: false, },
  { id: 1, test: 'かきくけこ', isSelected: false, },
  { id: 2, test: 'さしすせそ', isSelected: false, },
  { id: 3, test: 'たちつてと', isSelected: false, },
  { id: 4, test: 'なにぬねの', isSelected: false, },
];

というように、新たに配列が生成されます。

filter

filterは配列の中から条件を満たすものだけを取り出して新たに配列を作成します。

例えば、arrayの各要素から、idが2以上のものを取り出して新たに配列を作成したときとかです。

  const newArray = array.filter(el => el.id >= 2);

と処理を書くと、

出力結果

[
  { id: 2, test: 'さしすせそ'},
  { id: 3, test: 'たちつてと'},
  { id: 4, test: 'なにぬねの'},
]

というように、新たに条件を満たす配列が生成されます。

some

someは配列の中から条件を満たすものがあった場合に、boolean型の返り値を返します。

例えば、arrayの各要素の中に、プロパティ「text」の値が「さしすせそ」のものがあるかどうかをチェックしたいとかです。

  console.log(array.some(el => el.text === 'さしすせそ'));

と処理を書くと、

出力結果

true

というように、boolean型の値が帰ってきます。(この場合は、3番目の要素のtextが「さしすせそ」なのでtrueが返ってきます。)

every

everyは配列の中の要素が指定した条件全てを満たすかどうかをチェックして、Boolean型の値を返します。

例えば、arrayからmapによって新たにisSelectedのプロパティを追加して作成した

const newArray = [
  { id: 0, test: 'あいうえお', isSelected: false, },
  { id: 1, test: 'かきくけこ', isSelected: false, },
  { id: 2, test: 'さしすせそ', isSelected: true, },
  { id: 3, test: 'たちつてと', isSelected: false, },
  { id: 4, test: 'なにぬねの', isSelected: false, },
];

という配列があったとして、(ここでは何かしらの処理が起こって、一つだけ、isSelectedがtrueに変わっていたとします。)

  console.log(newArray.every(el => !el.isSelected));

と処理を書くと、

出力結果

false

と返ってきます。

sort

sortは配列の前後を比較し、配列の順序を並び替えます。 同様にnewArrayをidの大きい順に並べたい場合、

newArray.sort((a, b) => a.id > b.id)

と記述すると、

出力結果

[
  { id: 4, test: 'なにぬねの', isSelected: false, },
  { id: 3, test: 'たちつてと', isSelected: false, },
  { id: 2, test: 'さしすせそ', isSelected: true, },
  { id: 1, test: 'かきくけこ', isSelected: false, },
  { id: 0, test: 'あいうえお', isSelected: false, },
]

と返ってきます。
ちなみに、sortにおける、aはn番目の要素、bはn+1番目の要素です。

forEach

forEachは配列全てを参照します。 参照しつつやりたいことがあれば、なにか処理を加えます。 あくまで参照するだけです。

console.log([
  { id: 0, test: 'あいうえお', isSelected: false, },
  { id: 1, test: 'かきくけこ', isSelected: false, },
  { id: 2, test: 'さしすせそ', isSelected: true, },
  { id: 3, test: 'たちつてと', isSelected: false, },
  { id: 4, test: 'なにぬねの', isSelected: false, },
].forEach(el => el)
);

と書いても、

出力結果

undefined

と返ってきてしまいます。
(試しにこのコードを検証ツールのConsoleタブで入力してみてください。undefinedが返ってきます。)

forEachは配列の各値を参照するだけですので、配列を返す等の処理がありません。

mapでやったようなarrayの各要素にisSelcted: falseという値を加えたければ、

const newArray = [];

newArray.forEach(el => {
  const originData = el;
  originData.isSelected = false;
  newArray.push(originData);
});

というように,別で空の配列を用意した上で書かないといけませんし、filterも同様に、idが2以上のもののみだけを取り出したいとき、

const newArray = [];

newArray.forEach(el => el.id < 2 ? newArray.push(el) : null);

というように書かないといけません。

これらのように、forEachは今やmapやfilterを使えば、コード数も少なくかけるので、あまり使うことはなさそうです。

配列を操作するときに使う関数をどんな場合のときに使うのかまとめてみました。