mapメソッドとは？
既存の配列を加工して新しい配列を作成するためのメソッドです。
構文
|
1 2 3 |
let 新しい配列 = 配列.map(function(配列の要素){ return 配列の要素の値; }); |
ポイント
- 既存の配列の内容を変えずに新しい配列に格納してくれます。
forEachとの違い
コールバック関数の中で必ずreturnをします。returnをした値が新しい配列の新しい要素の一つになります。
用途
- 大量に項目があるオブジェクトの中から表示に必要な特定の項目のみ抽出して使いたいと言った場合に使います。
例
計算結果を元に新しい配列を作る
|
1 2 3 4 5 |
let nums = [1,2,3]; let squared = nums.map(function(num){ return num * num; }); squared; //[1,4,9] |
オブジェクトから特定の要素を抜き出し配列を作る。
|
1 2 3 4 5 6 7 8 |
let cats = [ { name:'太郎',kind:'三毛猫' }, { name:'花子',kind:'ペルシャ猫' } ] let kinds = cats.map(function(cat){ return cat.kind; }); kinds; //['三毛猫','ペルシャ猫'] |
filterメソッドとは？
用途
一覧表示されているデータの中から特定のデータを抽出したい場合等に使います。
構文
|
1 2 3 |
配列.filter(function(配列の要素){ return true(新しい配列の要素)/false(配列の要素からは除外) }); |
例
オブジェクトの配列から条件に合うオブジェクトのみ抽出する。
|
1 2 3 4 5 6 7 8 9 |
let cats = [ { name:'太郎',kind:'三毛猫' }, { name:'花子',kind:'ペルシャ猫' }, { name:'次郎',kind:'三毛猫' } ] let kinds = cats.filter(function(cat){ return cat.kind === '三毛猫'; }); kinds; //[{"name":"太郎","kind":"三毛猫"},{"name":"次郎","kind":"三毛猫"}] |
findメソッドとは？
配列から最初に見つかった要素を値として返します。
用途
- サーバーからAPIで取得した一覧データから一意の特定のデータを抽出するために使用します。
例
|
1 2 3 4 5 |
let animals = ['犬','猫','ライオン'] let pet = animals.find(function(animal){ return animal === '犬'; }); pet; //犬 |
reduceメソッド
構文
|
1 2 3 4 5 |
let numbers = [1,2,3,5]; 配列.reduce(function(「計算結果」,配列の要素){ return 次のループの「計算結果」の値; },「計算結果」の初期値) |
例
数字の計算をする場合
|
1 2 3 4 5 |
let numbers = [1,2,3,5]; numbers.reduce(function(sum,number){ return sum + number; },0) //11 |
配列を構築する場合
mapでも同様のことをもっと簡潔にできますが、reduceでも実装可能です。
|
1 2 3 4 5 6 7 8 9 10 |
let cats = [ { name:'太郎',kind:'三毛猫' }, { name:'花子',kind:'ペルシャ猫' }, { name:'次郎',kind:'三毛猫' } ] let kinds = cats.reduce(function(arr,cat){ arr.push(cat.kind); return arr; },[]); kinds; //["三毛猫","ペルシャ猫","三毛猫"] |
この記事へのコメントはありません。