2021.10.28
配列の便利なメソッドforEach/map/filter(Javascript)
いろんな場面で使われるであろう配列の処理。ここでマスターしておきたい！
①forEach:ざっくり言うと、配列内の要素一つずつ順番に処理を行うよ！
書き方のルールは、
|
forEach(function(value,index,array){ ここに処理; }); ★引数のvalueは配列内の各値、indexは番号、arrayは配列のこと ※必ず全要素に処理が実行されます。特定の要素をスキップはできません。 |
forEachを使って、値を取り出してみます。
せっかくなので、文章にしてみました。
|
const countries = [“Japan”, “Russia”, “USA”, “Australia”];
countries.forEach(function (value, index) {
console.log(`${value}は${index}番目です。`);
});
★実行結果は
Japanは0番目です。
Russiaは1番目です。 USAは2番目です。 Australiaは3番目です。 ※バッククォートは「shift + @」で打てます。
|
②map:ざっくり言うと、配列内の要素一つずつ順番に処理を
行い、新たな配列を返してくれる。
書き方のルールは、
|
map(function(value,index,array){ ここに処理; }); ★mapには返り値があるのが最大の特徴。 返り値として返ってきた配列をさらに操作できるよ。 |
元の配列要素に×3をした新たな配列を作ります。
|
const numbers = [1, 2, 3, 4];
const newNumbers = numbers.map(function (value) {
return value * 3;
});
console.log(newNumbers);
★実行結果は (4) [3, 6, 9, 12]
|
③filter:ざっくり言うと元の配列要素にある条件を課して、
その条件に合った新たな配列を返してくれる。
書き方のルールは、
|
filter(function(value,index,array){ ここに処理; }); |
3で割り切れる新しい配列を作ります。
|
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const newNumbers = numbers.filter(function (value) {
return value % 3 === 0;
});
console.log(newNumbers);
★実行結果は (3) [3, 6, 9]
|
実際にどこで使うのかは今の段階では分かりませんが
いずれ役に立つことを信じています！
＼SHARE／
カテゴリー:
タグ:
