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\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'];
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;
};
}
