JavaScript mapメソッドとfilterメソッド（おまけ: オブジェクトの生成）

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> オブジェクト編 vol.4 f:id:TomozQ:20201102231013j:plain

JavaScript備忘録 Vol.7

今回もJavaScriptの記事になっています。

map( )

例えばこんな配列があって

const prices = [100, 200, 300, 400];

この配列のそれぞれの金額を50円ずつ値上げして、別の配列にしたいとします。
その場合map( )を使うことで実現することができます。

配列.map( (引数) => { //関数
  //処理
})

このような書き方で実装していきます。

なので今回の場合は

const prices = [100, 200, 300, 400];

const updatedPrices = prices.map((price) =>{
  return price + 50;
});

console.log(updatedPrices);

f:id:TomozQ:20201102231629p:plain

このようにmapを用いることで配列の要素分、関数内の処理をしてくれます。

また、今回の場合は関数内でpricesの各要素に+50した値を返しているだけなので

const prices = [100, 200, 300, 400];

const updatedPrices = prices.map((price) => price + 50);

console.log(updatedPrices);

として、{ }・returnを省略することができます。

filter( )

filterは配列の中から条件に合う要素のみを取得し、別の配列として取得することができます。

例えば下記のような配列があるとします

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];

この中から2で割り切れる数字だけを抽出し、配列を作りたい場合

filter( )を使用します
書き方はmap( )と一緒です

配列.filter( (引数) => { //関数
  //処理
})

少しmap( )と違うが、処理内容はif文を用いて、条件に合ったものはtrue, そうでなものにはfalseを返すことでフィルターをかけることができる仕組みとなっています。

なので今回の場合は

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const evenNums = nums.filter((num) => {
  if(num % 2 === 0){
    return true;
  }else{
    return false;
  }
});

console.log(evenNums);

としてあげることで新たに配列を作ることができます。

f:id:TomozQ:20201102231638p:plain

また、こちらに関しても短縮した書き方があります。

今回の場合だと

条件式ではtrueの時にはtrue、falseの時にはfalseを返しているだけなので、
returnで条件式だけを返すようにします。

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const evenNums = nums.filter((num) => {
    return num % 2 === 0;
});

console.log(evenNums);

そうすると処理が1行になるので

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const evenNums = nums.filter(num => num % 2 === 0);

console.log(evenNums);

このように省略できるという仕組みですね。

オブジェクトの作成

さあ、ここへきてようやくオブジェクト編の核部分です！

これまでは配列を用意してその中に1つの値を持つ要素を格納してきました。

ここではいくつもの値を持っているオブジェクトという要素を見ていきます。

今までの配列はこんな感じですよね

const prices = [100, 200, 300, 400];

さらに、これに関連した商品の配列もあったとします。

商品の名前を持たせたいのでまずは定数の名前を変えてみますね

今回はfruitで、複数管理したいので複数形でfruitsとします。

const fruits = [orange, apple, grape, pineapple]

それ金額ぜんぜん見合ってない！てツッコミは無しにしましょう。

これ一つの配列にしたいなー

はい、オブジェクト作りましょう

作り方は簡単です

const fruits = [

];

まずは同じように配列の入れ物を用意します。

次に{ }内にそれぞれ要素を入れていきます。

const fruits = [
    {name: 'orange', price: 100},
    {name: 'apple', price: 200},
    {name: 'grape', price: 300},
    {name: 'pineapple', price: 400},
  ];
  
  console.log(fruits);