[Javascript] 配列処理に便利な関数(Object.keys/values/entries/Array.concat/filter/reduce)

 Javascript や Node.js の出番が増えてきて、API などの配列を処理する機会が増えています。配列処理を行うときに便利な関数を紹介します。

  • Object.keys, Object.values, Object.entries
    オブジェクト型の内容{ name1: value1, name2: value2 }を配列にして処理します。Object.keys はキーのみ[name1, name2]、Object.values は値のみ[value1, value2]、Object.entries は両方を返します[[name1, value1], [name2, value2]]。
  • Array.concat
    配列を結合します。この関数は新しい配列をつくるため、配列のコピーをつくることもできます。今ある配列に何かしたい場合は push や shift を使います。
    const mergedArray = array1.concat(array2, array3)
    const copiedArray = originalArray.concat()
  • Array.filter
    配列を条件で絞ることができます。条件にクリアしたかどうかの判定は、コールバック関数の戻り値の true / false で判断します。コールバック関数の引数は、個別項目、そのインデックス、配列全体の順に渡されます。
    const filteredArray = [1, 2, 3, 4, 5, 6, 7].filter(function (_item, _index, _array) {
        // 奇数のみ抽出(2で割った余りがあるかどうか)
        return _item % 2;
    })
  • Array.reduce
    配列をひとつの結果に集約するときに使います。配列をオブジェクト型に変換するのに便利です。コールバック関数の引数は、結果格納用、個別項目、そのインデックス、配列全体を返します。また第三引数で初期値を設定します。初期値省略時は最初のループの戻りが初期値になりますが、後で見たときにわかりづらいので初期値を指定したほうがいいです。
    const result = [['a', 1], ['b', 2]].reduce(function (_result, _item, _index, _array) {
        // 配列[[key, value]] をオブジェクト型 {key:value} に変換
        _result[_item[0]] = _item[1];
        return _result;
    }, {})
  • Array.map
    配列から別の配列に変換するときに使います。オブジェクトの配列からそのプロパティのみを抽出するときに使えます。
    const res = [{a:1,b:10},{a:2,b:20}].map(function (_item, _index, _array) {
        // 個別項目のaプロパティのみ抽出した配列
        return _item.a;
    })
  • Array.sort
    配列を並び替えます。配列を生成しないで元の配列を変更します。この関数は昔からあり、コールバック関数の引数がそれぞれの比較対象項目(比較A、比較B)になっています。正の数と負の数で整列方向を決めます。呼び出される回数は整列評価の回数に依存するので不定です。
    const arr = [1,3,2,4,3,5,4,6,5,7,6,8,7,9,8,0];
    arr.sort(function (_a, _b) { return _a > _b ? 1 : -1 });
    // こちらでも上と同じ意味
    arr.sort(function (_a, _b) { return _a - _b });