js中关于Array.filter()方法的使用

732 阅读1分钟

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 测试的元素会被跳过,不会被包含在新数组中。 filter 不会改变原数组,它返回过滤后的新数组。

实例

  • 获取一个数组中的偶数
let arr = [1,2,3,4,5,6,7,8,9,10];
let newArr = arr.filter(value => {
  return value % 2 === 0
})
console.log(newArr) //输出 [2,4,6,8,10]
  • 获取数组中数值小于10的值
let arr = [10,20,8,5,9,30,60]
let newArr = arr.filter(value => {
  return value < 10
})
console.log(newArr1) //[8, 5, 9]
  • filter函数对数组对象的处理
 //获取年龄小于18的学生信息
    let studentInfos = [
      {name:"张三",age:18},
      {name:"李四",age:16},
      {name:"王五",age:15},
      {name:"赵柳",age:17},
      {name:"田七",age:20},
      {name:"王甜甜",age:19}
    ]
    let newInfos = studentInfos.filter(value => {
      return value.age < 18
    })
    console.log(newInfos);  //输出 [ {name:"李四",age:16}, {name:"王五",age:15}, {name:"赵柳",age:17}]
  • 手写一个filter函数
 Array.prototype.myFilter = function(fn,thisValue){
      if(typeof fn !== 'function'){
        throw new Error("fn不是一个函数")
      }
      if([null,undefined].includes(this)){
        throw new Error(`this 是null 或者 undefined`)
      }
      let arr = Object(this)
      let filterArr = [];
      for(let i in arr){
        if(fn.call(thisValue,arr[i],i,arr)){
          filterArr.push(arr[i])
        }
      }
      return filterArr;
    }
    let arr2 = [1,23,4,56,7,8,9];
    let newArr2 = arr2.myFilter(value => {
      return value < 10
    })
    console.log(newArr2) //[1, 4, 7, 8, 9]

今天就到这里了,总结这些东西主要是加深印象,帮助自己更好的学习和理解filter函数,同时也希望对你们有所帮助。谢谢!