javascriptのよく使う配列処理と使える小技

javascriptの配列処理って結構奥が深いですよね。
今回は、javascriptの配列処理で使えるいくつかのパターンと小技について紹介していきます。
実行内容は、jsonからデータを取得した際に使える内容となっており、今回使うjsonデータのサンプルは以下です。
このサンプルを用いて、javascriptの配列処理の説明をしていこうと思います。

{
  "users": [
    {
      "id": "1234",
      "name": "taro",
      "frends": [
        {
          "id": "2222",
          "name": "ziro"
        }
      ]
    },
    {
      "id": "4444",
      "name": "hana",
      "frends": [
        {
          "id": "6666",
          "name": "ken"
        }
      ]
    }
  ]
}

配列操作で定数名：dataを使用するので以下のように定数を作成しておきます。

    const json = 
    {
      "users": [
        {
          "id": "1234",
          "name": "taro",
          "frends": [
            {
              "id": "2222",
              "name": "ziro"
            }
          ]
        },
        {
          "id": "4444",
          "name": "hana",
          "frends": [
            {
              "id": "6666",
              "name": "ken"
            }
          ]
        }
      ]
    }

    const data = json.users;

配列処理1:find

条件に一致するデータを1件返します。

サンプル：

    const findData = data.find(item => {
      return item.id === "1234";
    });
    console.log('find', findData);
    // 実行結果
    {
      id: "1234",
      name: "taro",
      frends: [
        id: "2222",
        name: "ziro"
      ]
    }

注意点：
条件に一致する値を全て取り出すのではなく、最初にヒットした値のみを取り出します。
そのため、以下のようにidが"1234"のデータが2件あったとしても、取得される値は、最初にヒットするid="1234"、name=taroだけで、hanaのデータは取得されません。

{
  "users": [
    {
      "id": "1234",
      "name": "taro"
    },
    {
      "id": "1234",
      "name": "hana"
    }
  ]
}

配列処理2:filter

条件に一致するデータを全て返します。

サンプル：

    const filterData = data.filter(item => {
      return item.id === "1234";
    });
    console.log('filter', filterData);
    // 実行結果
    {
      id: "1234",
      name: "taro",
      frends: [
        id: "2222",
        name: "ziro"
      ]
    }

ちなみに以下のように一行でも書けます。

    const filterData = data.filter(item => item.id === "1234");

補足：
findだと最初にヒットするデータ1件だけ取得しますが、filterの場合は条件に一致するデータ全て取得できます。仮にid="1234"のデータが2件以上あれば、全て取得できますよってことです。

配列処理3:forEach

配列の要素を順番に取り出していきます。

    data.forEach(item => {
      console.log(item);
    });
    // 実行結果
    1回目：{id: '1234', name: 'taro'}
    2回目：{id: '4444', name: 'hana'}

配列処理4:map

指定した条件をもとに新しい配列を作成します。

    const mapData = data.map(item => {
      return item.id;
    });
    console.log('map', mapData); // ["1234", "4444"]

こちらも一行で記載できます。

    const mapData2 = data.map(item => item.id);
    console.log('map2', mapData2); // ["1234", "4444"]

指定したオブジェクトのキーで新しい配列の作成も可能です。

    const mapData3 = data.map(item => {
      return {
        id: item.id,
        name: item.name
      }
    });
    console.log('map3', mapData3);
    // 実行結果
    {id: '1234', name: 'taro'}
    {id: '4444', name: 'hana'}

小技1:includes

配列の要素に一致する値があればtrueを返し、一致するデータがなければfalseを返します。

    const date = ["0201", "0202", "0203"];
    const isDate = date.includes("0201");
    console.log('isDate', isDate); //true

    const date = ["0201", "0202", "0203"];
    const isDate = date.includes("0204");
    console.log('isDate', isDate); // false

小技2:push

配列に要素を追加します。

    const pushData = ["taro", "hana"];
    pushData.push("ken");
    console.log('pushData', pushData); // ["taro", "hana", "ken"]

jsonデータに新たにデータを追加する場合は、以下のように書けます。

    data.push({
      id: "3333",
      name: "hiro",
      frends: [
        {
          id: "7777",
          name: "kaori"
        }
      ]
    });
    console.log('data', data);
    // 実行結果
    {id: '1234', name: 'taro', frends: [{...}]}
    {id: '4444', name: 'hana', frends: [{...}]}
    {id: '3333', name: 'hiro', frends: [{...}]}

小技3:length

配列の要素数を取得します。

    const length = data.length;
    console.log('length', length); // 2

小技4:配列の先頭または末尾を削除

配列の先頭要素を削除する場合：

    const array1 = ["taro", "hana", "ken"];
    array1.shift();
    console.log('array', array1); // ["hana", "ken"]

要素の先頭のtaroが削除されます。

配列の末尾要素を削除する場合：

    const array2 = ["taro", "hana", "ken"];
    array2.pop();
    console.log('array2', array2); // ["taro", "hana"];

要素の末尾kenが削除されます。

小技5:配列から指定要素を削除

filterを使って、指定要素を削除できます。

    const array3 = ["taro", "hana", "ken"];
    const newArray1 = array3.filter(item => item !== "hana");
    console.log('array3', newArray1); // ["taro", "ken"];

実行結果は、hana以外のデータを取得します。

小技6:forEach内で数量計算する

    const sumData = [10, 20, 30];
    let sum = 0;
    sumData.forEach(item => {
      sum += item;
    });
    console.log('sum', sum); // 60