map/filter/find

map/filter/find

mapは配列に対して使う

基本の構文

var array =[配列データ]
array.map(コールバック関数)

実際の処理

以下の処理では、関数resultの引数に、無名関数を渡し、その中でarrayの配列各々の数値に2倍する処理を行っている。

mapメソッドのmapはマッピングの意味。

マッピングイメージ

mapメソッドの特徴

コールバック関数では、引数に渡せる関数は一つだけだったが、mapメソッドでは複数渡せる。

配列. map(function(第一引数、第二引数、第二引数){
    処理・・・
	});

この場合、

関数valueが、valueの値を。

関数indexがindex番号を。

関数arrayが配列ごと

それぞれconsole.logとして出力する。そしてそれが、
”あ、い、う、え、お”で5回分出力される

valueとは値のことなので、value→あ

indexとはindex番号、配列の何番目なのかを示す番号なので index→0

arrayとは配列そのもののことなので、array→[’あ’ , ’い’ , ’う’ , ’え’ , ’お’]

その繰り返しが『あ、い、う、え、お』の計5回分くりかえされる

mapメソッドの特徴2

配列に対して渡したオブジェクトにもmapメソッドを使う事ができる。

const names = [
  {firstName:"inoue",lastName:"nobuhide"},
  {firstName:"tanaka",lastName:"tarou"}
]
const fullNames =names.**map**((name)=>{
  return name.firstName + name.lastName;
})
console.log(fullNames);

結果

条件に一致したものだけを取り出す(奇数)

var numbers =[1,4,7,12];

var result =numbers.filter(function(value){
  return value % 2=== 1;
})
console.log(result);

結果

配列の中から特定の文字列を取り出す

var fruits = ["apple","orange","lemmon",""];

var favFruits = fruits.filter(function(value){
  return value === "orange";
})

console.log(favFruits)

結果

findメソッド

基本の構文

const scores =[10,25,30,34,50];
const result =scores.find((score)=>{
  return score > 20;
})
console.log(result)

結果：25

filterとの違い

mapとfileterの違いは以下です、

mapは配列の中から条件に合う最初の値を見つけて取ってくるのに対し、

filterは全ての合致する値を取ってきます。

find

filter