JavaScript頻出メソッド

・目的

記憶定着のため、頻出メソッドの用法をアウトプットする。

・今回の対象メソッド

〇配列処理に使用するメソッド

filter/map/reduce

〇オブジェクト処理に使用するメソッド

Object.keys/Object.values/Object.entries

・対象メソッドの用例

〇filter

filterの引数にコールバック関数を渡し、コールバック関数で指定した条件を満たす対象配列の要素を格納した新しい配列を作成する。

    let menbar = [{Name: 'John', id: 25}, {Name: 'Jane', id: 30}, {id: 20}, {Name: 'Doe',id: 1}, {id: 22}]
    let unKnowns = menbar.filter(function (person) {
      if (!person.Name) { return true; }
    });
    console.log(unKnowns);
    // 表示データ　[ { id: 20 }, { id: 22 } ]

〇map

mapの引数にコールバック関数を渡し、コールバック関数の処理を実行し新しい配列を作成する。

    let data = [
      { キー: '001', 注文番号: '001', 発注者コード: '001' },
      { キー: '002', 注文番号: '002', 発注者コード: '002' },
      { キー: '003', 注文番号: '003', 発注者コード: '003' }
    ];
    
    const itemData = data.map((key) => {
      return {
        キー: key.キー,
        注文番号: key.注文番号,
        発注者コード: key.発注者コード,
        価格: 1000,
        数量: 2,
    }
    })
  
    console.log(itemData);
   // 表示するデータ　[ { キー: '001', 注文番号: '001', 発注者コード: '001', 価格: 1000, 数量: 2 }, { キー: '002', 注文番号: '002', 発注者コード: '002', 価格: 1000, 数量: 2 }, { キー: '003', 注文番号: '003', 発注者コード: '003', 価格: 1000, 数量: 2 } ]

〇reduce

reduceの引数にコールバック関数を渡し、コールバック関数の処理を対象配列の要素に対して実行し、単一の値を生産する。

　let data = [
　　{ id: '001', 注文番号: '100'},
　　{ id: '002', 注文番号: '200' },
　　{ id: '003', 注文番号: '300' }
    ];
  // 取得したいデータのidリスト作成
  const idList = await data.reduce((list, val) => {
    list.push(sanitize(val.id));
    return list;
  }, []);

  console.log(idList);
  // 表示データ　[ '001', '002', '003' ]

〇Object.keys

対象オブジェクト内のプロパティのキーを格納した配列を作成する。

 let mailData = {001 : {注文数量:1, 商品名:"商品A", 商品価格:1000}},{002 : {注文数量:2, 商品名:"商品B", 商品価格:2000 }};

 // 送信するデータがある場合にメール送信
  if (Object.keys(mailData).length > 0) {
    await send_mail(mailData, user);
  }
  console.log(Object.keys(mailData));
  // 表示データ　[001, 002]

〇Object.values

対象オブジェクト内のプロパティの値を格納した配列を作成する。

 let itemData = {001 : {注文数量:1, 商品名:"商品A", 商品価格:1000}},{002 : {注文数量:2, 商品名:"商品B", 商品価格:2000 }};

 // 登録データが存在する場合、商品データ登録
  if (Object.values(itemData).length > 0) {
    await registr_data(itemData, user);
  }
  console.log(Object.values(itemData));
  // 表示データ　[{商品名:商品A, 商品価格:1000, 注文数量:1}, {商品名:商品B, 商品価格:2000, 注文数量:2}]

〇Object.entries

対象オブジェクト内のプロパティを格納した配列を作成する。

 let itemData = {001 : {注文数量:1, 商品名:"商品A", 商品価格:1000}},{002 : {注文数量:2, 商品名:"商品B", 商品価格:2000 }};

 // 登録データが存在する場合、商品データ登録
  if (Object.entries(itemData).length > 0) {
    await registr_data(itemData, user);
  }

  console.log(Object.entries(mailData));
  // 表示データ　[ [ '001', { 注文数量: 1, 商品名: '商品A', 商品価格: 1000 } ], [ '002', { 注文数量: 2, 商品名: '商品B', 商品価格: 2000 } ] ]