Javascriptのfilterメソッド、mapメソッドについて

filterメソッド

条件に一致したものだけを抽出できる

var numbers = [3, 2, 4, 6, 1, 8, 6];

var result = numbers.filter(value => value < 3)

console.log(result);


//=> [2, 1]

filterメソッドは3つの引数を受け取ることができる

コールバックの引数	定義
value	配列の要素の値
index	配列要素の数値インデックス
array	要素を格納している配列オブジェクト

var numbers = [配列データ];

numbers.filter( function(value, index, array) {})

第２引数のオブジェクトについて

var stationeries = {
  'pencil': 100,
  'notebook': 80,
  'scissors': 250,
  'sticker': 150 
};

var tools = ['notebook', 'eraser', 'sticker', 'screw', 'paint'];

var result = tools.filter( function(value, index) {
  for (var stationery in this) {
    if (stationery === value) return value;
  }
}, stationeries) //第2引数にオブジェクトを指定

console.log(result);


//=> ["notebook", "sticker"]

第2引数にオブジェクトを指定すると、コールバック関数内のthisは呼び出しオブジェクトを参照する

mapメソッド

配列の順番通りに、各要素に対して一度ずつ呼び出して新しい配列を作る

var numbers = [1, 2, 3, 4];
var result = numbers.map(value => 2 * value)
console.log(result);


//=> [2, 4, 6, 8]

mapメソッドは3つの引数を受け取ることができる

コールバックの引数	定義
value	配列の要素の値
index	配列要素の数値インデックス
array	要素を格納している配列オブジェクト

var numbers = [配列データ];

numbers.map( function(value, index, array) {})

第２引数のオブジェクトについて

var stationeries = {
  'pencil': 100,
  'notebook': 80,
  'scissors': 250,
  'sticker': 150 
};

var tools = ['notebook', 'sticker'];

var result = tools.map( function(value, index) {
  for (var stationery in this) {
    if (stationery === value) return this[value];
  }
}, stationeries) //第2引数にオブジェクトを指定

console.log(result);


 //=> [80, 150]

第2引数にオブジェクトを指定すると、コールバック関数内のthisは呼び出しオブジェクトを参照する