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と返ってきます。
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を使えば、コード数も少なくかけるので、あまり使うことはなさそうです。
配列を操作するときに使う関数をどんな場合のときに使うのかまとめてみました。