何となくで使うのではなく、しっかりと理解しようと思い改めて整理しました。
Array.prototype.forEach()
forEach は、全ての要素に対して関数を一度ずつ実行する。
map や filter とは異なり新しい配列は生成しない。
// 配列の要素の合計を計算する
let sum = 0;
const list = [10, 20, 30, 40];
list.forEach(param => {
sum += param;
});
console.log(sum);
> 100
Array.prototype.forEach() - JavaScript | MDN
Array.prototype.map()
map は、全ての要素に対して関数を一度ずつ実行し、返り値(return)からなる新しい配列を生成する。
filter とは異なり、実行対象となる配列の数(before)と、新たに生成された配列の数(after)は変わらない。
また、生成された配列の値には関数実行時の返り値(return)が格納される。
// 配列の全ての要素に10を乗算した配列を返す
const before = [10, 20, 30, 40];
const after = before.map(param => {
return param * 10;
});
console.log(before);
> [10, 20, 30, 40]
console.log(after);
> [100, 200, 300, 400]
Array.prototype.map() - JavaScript | MDN
Array.prototype.filter()
filter は、全ての要素に対して関数を一度ずつ実行し、戻り値(return)で true を返した要素からなる新しい配列を生成する。
map とは異なり true を返した要素のみの配列を返し、生成された配列の値には実行時の要素の値が格納される。
// 配列の要素が20で割り切れるものだけを抽出する
const before = [10, 20, 30, 40];
const after = before.filter(param => {
return ((param % 20) === 0);
});
console.log(after);
> [20, 40]
Array.prototype.filter() - JavaScript | MDN
Array.prototype.find()
find は、 true を返す要素が見つかるまで、要素に対して一度ずつ関数を実行する。
true を返した要素の値を返す。
// 配列の要素が20で割り切れるものだけを抽出する
const before = [10, 20, 30, 40];
const after = before.filter(param => {
return ((param % 20) === 0);
});
console.log(after);
> 20
Array.prototype.find() - JavaScript | MDN
Array.prototype.some()
some は、 true を返す要素が見つかるまで、要素に対して一度ずつ関数を実行する。
true を返す要素が見つかると、 true を返す。
// 要素に一つでも20以上の値があればtrueを返す
const list = [10, 20, 30, 40];
const retVal = list.some(param => {
console.log(param);
return (param >= 20);
});
> 10
> 20
console.log(retVal);
> true
Array.prototype.some() - JavaScript | MDN
Array.prototype.every()
every は、false を返す要素が見つかるまで、要素に対して一度ずつ関数を実行する。
false を返す要素が見つかると、 false を返す。
// 要素に一つでも20以下の値があればfalseを返す
const list = [40, 30, 20, 10];
const retVal = list.every(param => {
console.log(param);
return (param > 20);
});
> 40
> 30
> 20
console.log(retVal);
> false
Array.prototype.every() - JavaScript | MDN
スプレッド演算子(spread operator)について
上記では配列に対しての操作を例に出しましたが、スプレッド演算子を使うことで配列以外のオブジェクトも同様に処理することが可能となります。
例えば、下記のようなHTML文書のリスト要素からテキストのみの配列を作成しようとする場合はこのようになります。
<div class="sample">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</div>
const elms = document.querySelectorAll('.sample li');
const retVal = [...elms].map(elm => {
return elm.textContent;
});
console.log(retVal);
> ["list1", "list2", "list3"]
詳しい使い方は Mozilla Developer Network を参照してください。
