JavaScript中Array的filter函數(shù)怎么使用

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

描述

filter為數(shù)組中的每個(gè)元素調(diào)用一次callback函數(shù)，并利用所有使得callback返回 true 或等價(jià)于 true 的值的元素創(chuàng)建一個(gè)新數(shù)組。callback只會(huì)在已經(jīng)賦值的索引上被調(diào)用，對(duì)于那些已經(jīng)被刪除或者從未被賦值的索引不會(huì)被調(diào)用。那些沒有通過(guò)callback 測(cè)試的元素會(huì)被跳過(guò)，不會(huì)被包含在新數(shù)組中。

理解

filter不會(huì)改變?cè)瓟?shù)組，它返回過(guò)濾后的新數(shù)組。

filter遍歷的元素范圍在第一次調(diào)用callback之前就已經(jīng)確定了。在調(diào)用filter之后被添加到數(shù)組中的元素不會(huì)被filter遍歷到。如果已經(jīng)存在的元素被改變了，則他們傳入callback的值是filter遍歷到它們那一刻的值。被刪除或從來(lái)未被賦值的元素不會(huì)被遍歷到。

示例

過(guò)濾長(zhǎng)度大于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創(chuàng)建了一個(gè)新數(shù)組，該數(shù)組的元素由原數(shù)組中值大于 10 的元素組成。

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

使用filter()根據(jù)搜索條件來(lái)過(guò)濾數(shù)組內(nèi)容

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']

據(jù)搜索條件來(lái)過(guò)濾數(shù)組內(nèi)容

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']

原生實(shí)現(xiàn)

filter 被添加到 ECMA-262 標(biāo)準(zhǔn)第 5 版中，因此在某些實(shí)現(xiàn)環(huán)境中不被支持。可以把下面的代碼插入到腳本的開頭來(lái)解決此問題，該代碼允許在那些沒有原生支持 filter 的實(shí)現(xiàn)環(huán)境中使用它。該算法是 ECMA-262 第 5 版中指定的算法，假定 fn.call 等價(jià)于 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;
  };
}

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