filter
定义
filter 为数组中的每个元素调用一次 callback 函数,并利用所有使得 "callback 返回 true 或 等价于 true 的值 的元素" 创建一个新数组.
var new_array = arr.filter(callback[, thisArg])
基础用法
let spread = [12, 5, 8, 130, 44]
let filtered = spread.filter(n => n >= 10)
console.log('filtered', filtered) // => [12, 130, 44]
进阶用法
数组对象的键名 / 键值的搜索
let users = [
{ 'user': 'barney', 'age': 36, 'active': true },
{ 'user': 'fred', 'age': 40, 'active': false },
{ 'user': 'ared', 'age': 24, 'active': false },
{ 'user': 'ered', 'age': 80, 'active': false },
{ 'abc': 'ered', 'age': 80, 'active': false }
]
var filtered = users.filter(n => n.age===40 || n.age===24)
console.log('filter后的键名', filtered) // => [{user: "fred", age: 40, active: false},{user: "ared", age: 24, active: false}]
高阶用法
数组去重
let spread = [12, 5, 8, 8, 130, 44,130]
let filtered = spread.filter((item, idx, arr) => {
return arr.indexOf(item) === idx;
})
console.log('数组去重结果', filtered)
数组中的空字符串删掉
let spread = ['A', '', 'B', null, undefined, 'C', ' ']
let filtered = spread.filter((item, idx, arr) => {
return item && item.trim()
})
console.log('数组中的空字符串删掉', filtered) // => ["A", "B", "C"]
一句话总结:充分利用 callback 返回 true 的特点当作 "过滤条件" 函数,生产新的数组
filter 的常用搭配
有条件筛选数组并生成新的数组
filter 与 map 的搭配使用 (可代替 for + continue 的使用)
代码演示: filter +map 写法
let arr = [{
gender: 'man',
name: 'john'
}, {
gender: 'woman',
name: 'mark'
}, {
gender: 'man',
name: 'jerry'
}]
// filter : 有条件的筛选
// 筛选出性别为男性的名字集合
let newArr = arr.filter(n => n.gender === 'man').map(item => {
return {
name: item.name
}
})
console.log('男性名字集合', newArr) // => [{name: 'john', {name: 'jerry']
for + continue 写法
let forArr = []
for (let i = 0; i < arr.length; i++) {
if (arr[i].gender === 'woman') continue let temp = {
name: arr[i].name
}
forArr.push(temp)
}
console.log('for循环过滤后的数组', forArr) // => [{name: 'john', {name: 'jerry']
以上是我个人的经验总结,如果对你的开发有帮助,欢迎点赞,如果觉得哪里出错了,欢迎指出,大家一起进步,共同成长~.~
来源: https://juejin.im/post/5a5f3eaf518825733201a6a7