JavaScript中Array的filter函數怎么使用

這篇文章主要介紹“JavaScript中Array的filter函數怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“JavaScript中Array的filter函數怎么使用”文章能幫助大家解決問題。

描述

filter為數組中的每個元素調用一次callback函數，并利用所有使得callback返回 true 或等價于 true 的值的元素創建一個新數組。callback只會在已經賦值的索引上被調用，對于那些已經被刪除或者從未被賦值的索引不會被調用。那些沒有通過callback 測試的元素會被跳過，不會被包含在新數組中。

理解

filter不會改變原數組，它返回過濾后的新數組。

filter遍歷的元素范圍在第一次調用callback之前就已經確定了。在調用filter之后被添加到數組中的元素不會被filter遍歷到。如果已經存在的元素被改變了，則他們傳入callback的值是filter遍歷到它們那一刻的值。被刪除或從來未被賦值的元素不會被遍歷到。

示例

過濾長度大于6的

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

使用filter創建了一個新數組，該數組的元素由原數組中值大于 10 的元素組成。

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

使用filter()根據搜索條件來過濾數組內容

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * Array filters items based on search criteria (query)
 */
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}
console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

據搜索條件來過濾數組內容

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * Array filters items based on search criteria (query)
 */
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}
console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

原生實現

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;
  };
}

關于“JavaScript中Array的filter函數怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。