首頁 > web前端 > js教程 > 深入理解JavaScript中filter()方法(附程式碼)

深入理解JavaScript中filter()方法(附程式碼)

yulia
發布: 2018-09-14 15:46:42
原創
3317 人瀏覽過

這篇文章帶給大家的內容是JavaScript中filter()方法,在JavaScript中也被廣泛應用,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

filter() 方法建立一個新陣列, 其包含透過所提供函數實現的測試的所有元素。

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
登入後複製

語法

var array = arr.filter(function(item,index,array){})
// 一般都传一个参数
登入後複製

傳回值

一個新的通過測試的元素的集合的數組,如果沒有通過測試則傳回空數組

描述

filter 為數組中的每個元素呼叫一次回呼函數,並利用所有使得回調傳回true 或等價於true 的值的元素會建立一個新數組。回呼函數只會在已經賦值的索引上被調用,對於那些已經被刪除或從未被賦值的索引不會被調用。那些沒有通過回呼函數測試的元素會被跳過,不會被包含在新數組中。

filter 遍歷的元素範圍在第一次呼叫回呼函數之前就已經確定了。在呼叫 filter 之後被加入到陣列中的元素不會被 filter 遍歷到。如果已經存在的元素被改變了,則他們傳入回呼函數的值是 filter 遍歷到它們那一刻的值。被刪除或從來未被賦值的元素不會被遍歷到。 (如有不懂請看之前寫的forEach 方法)

範例

篩選排除掉所有的小值

//下例使用 filter 创建了一个新数组,该数组的元素由原数组中值大于 10 的元素组成。
function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]
登入後複製

過濾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\n', 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'];
/**
 * 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']
//如果输入的字母是不相连的,那么久得不到你想要的结果
console.log(filterItems('al'));// []
// 输出结果为空
登入後複製

filter方法一般都是用來過濾和篩選。

如果在某些環境下filter方法不被支持,那麼請訪問mdn網站來解決問題MDN Array.prototype.filter()方法。

以上是深入理解JavaScript中filter()方法(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板