ES 6のフィルタ方法:filter()

filter()メソッドは、提供された関数によって実装されるテストのすべての要素を含む新しい配列を作成します.

var arr = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

constnewArr = arr.filter(arrItem => word.length > 6);

console.log(newArr); //["exuberant", "destruction", "present"]

構文

var newArray = arr.filter(
  callback(element[, index[, array]])[, thisArg]
)

パラメータ

callback:コールバック関数

element:arr配列で処理中のデータ

index:elementの下付き

array:filterを呼び出す配列自体、オプション

thisArg:callbackを実行する場合、thisの値に使用されます.

を選択できます.

は、テストに合格した新しい要素からなる値の配列を返し、テストに合格しない場合は空の配列を返します.

は、filterが配列内の各要素に対してcallback関数を呼び出し、callbackがtrueまたはtrueに等価な値を返すすべての要素を用いて新しい配列を作成することを記述する.callbackは、割り当てられたインデックスでのみ呼び出され、削除されたインデックスまたは割り当てられていないインデックスでは呼び出されません.callbackでテストされていない要素はスキップされ、新しい配列には含まれません.callbackが呼び出されると、要素の値、要素のインデックス、遍歴された配列自体がfilterにthisArgのパラメータを提供すると、callbackが呼び出されたときのthisの値として使用されます.そうでなければ、callbackのthis値は、非厳格モードではグローバルオブジェクトとなり、厳格モードではundefinedとなる.callback関数が最終的に観測したthis値は、通常の関数で見られる「this」の規則に基づいて決定される.filterは元の配列を変更せず、フィルタされた新しい配列を返します.filterが巡回する要素範囲は、callbackが最初に呼び出される前に決定された.filterが呼び出された後に配列に追加された要素は、filterによって遍歴されない.既に存在する要素が変更された場合、callbackに入力された値は、filterがその瞬間にわたる値である.削除された要素または割り当てられていない要素は、遍歴されません.

例JSONの無効なエントリをフィルタリングする次の例では、filter()を使用して、id以外の要素を持つjsonを作成します.

var arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }
];

var invalidEntries = 0;

function isNumber(obj) {
  return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);
}

function filterByID(item) {
  if (isNumber(item.id) && item.id !== 0) {
    return true;
  } 
  invalidEntries++;
  return false; 
}

var arrByID = arr.filter(filterByID);

console.log('Filtered Array
', arrByID); 
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

console.log('Number of Invalid Entries = ', invalidEntries); 
// Number of Invalid Entries = 5

配列中の検索の例では、filter()を使用して、検索条件に基づいて配列内容をフィルタリングする.

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
function filterItems(query) {
  return fruits.filter(function(el) {
      //toLowerCase: 
      //indexOf: 。
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}
console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

Polyfill filterがECMA-262規格第5版に追加されたため、実装環境によってはサポートされていない.この問題は、filterをサポートしていない実装環境で使用できるスクリプトの先頭に次のコードを挿入して解決できます.このアルゴリズムはECMA−262第5版で指定されたアルゴリズムであり、fn.callがFunction.prototype.callの初期値に等価であり、Array.prototype.pushがその初期値を有すると仮定する.

if (!Array.prototype.filter){
  Array.prototype.filter = function(func, thisArg) {
    'use strict';
    if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
        throw new TypeError();

    var len = this.length >>> 0,
        res = new Array(len), // preallocate array
        t = this, c = 0, i = -1;
    if (thisArg === undefined){
      while (++i !== len){
        // checks to see if the key was set
        if (i in this){
          if (func(t[i], i, t)){
            res[c++] = t[i];
          }
        }
      }
    }
    else{
      while (++i !== len){
        // checks to see if the key was set
        if (i in this){
          if (func.call(thisArg, t[i], i, t)){
            res[c++] = t[i];
          }
        }
      }
    }

    res.length = c; // shrink down array to proper size
    return res;
  };
}