Array filter() 方法
大家應該對他很熟悉,是的就是過濾器,但是我對他還真是用的不多,
直到今天專案裡牽扯到一個數組更新頁面沒發生變化,想解決辦法的時候在別人的程式碼裡看到filter奔著嘗試的想法試一試 沒成想確實解決掉了,可能是我還是有些菜。
之前也不知道怎麼解決類似的問題,忘記了 ,但是今天既然用到它了就記錄一下 ,
我的這個問題是通過介面返回一個list操作的
var list = [ { a: '傻蛋', b: [ a1: xx, b2: xxx, c2: xxxx ], c: '笨蛋' }, { xx:xx } ] list = list.filter((i, index)=>{ xxxxxxx // 操作部分 return i })
我是要操作這個陣列每次觸發方法修改陣列的時候 頁面就沒監聽到這個陣列的變化故此採用這個方法
接下來就是相對應的概述以及示例
var ages = [32, 33, 16, 40]; function checkAdult(age) { return age >= 18; } ages.filter(checkAdult); 結果:32,33,40
定義和用法
filter() 方法建立一個新的陣列,新陣列中的元素是通過檢查指定陣列中符合條件的所有元素。
注意:filter() 不會對空陣列進行檢測。
注意:filter() 不會改變原始陣列。
語法:
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
引數:
callback
用來測試陣列的每個元素的函式。返回true
表示該元素通過測試,保留該元素,false
則不保留。它接受以下三個引數:
element
- 陣列中當前正在處理的元素。
index
可選- 正在處理的元素在陣列中的索引。
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
遍歷到它們那一刻的值。被刪除或從來未被賦值的元素不會被遍歷到。
示例:
篩選排除最小的值
//下例使用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']