继续数组方法,今天应该到filter了。

  • filter:filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 
    使用:
    var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
    const result = words.filter(word => word.length > 6);
    console.log(result);  
    仅仅从字面理解一下filter,就是过滤,怎么过滤呢?通过给定一个回调函数,过滤出来符合函数实现的元素。
    从示例中看,也就是说,需要过滤出来元素的单词长度大于6的所有元素。
    查看一下结果呢!

    语法:

    var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
    

      filter有两个参数,第一个就是回调函数,第二个参数与之前我们说到的some、every啊类似,基本上就就是数组函数只要提供了回调函数,都会有这么一个用于执行callback回调的this值。
      回调函数也是三个参数,就没什么可说的了,数组函数的所有回调函数都是这三个参数:元素element、索引index、数组本身array。
    来吧,开始重构:

    function filter(arr, fn, thisArg) {
      if (!(arr instanceof Array)) throw new Error("请确保第一个参数类型为数组")
      var results = []
      for (var i = 0; i < arr.length; i++) {
        if (fn.call(thisArg, arr[i], i, arr))
          results[results.length] = arr[i]
      }
      return results
    }
    

      是不是也真的没什么好神奇的?

  • find:find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
    使用:
    var array1 = [5, 12, 8, 130, 44];
    var found = array1.find(function(element) {
      return element > 10;
    });
    console.log(found);
    结果:

    其实依据我们之前介绍其他的数组方法所说的,很容易理解到,find方法也是提供一个回调函数,那么必然也有一个可选的用于回调函数的this值,他查找并返回的是第一个符合回调函数测试结果的元素。其他的并没有什么特殊之处。

    function find(arr, fn, thisArg) {
      if (!(arr instanceof Array)) throw new Error("请确保第一个参数类型为数组")
      for (var i = 0; i < arr.length; i++) {
        if (fn.call(thisArg, arr[i], i, arr)) {
          return arr[i]
        }
      }
      return undefined
    }  

      说到这里,自然而然的可以预料到,下一个函数必然是findIndex了,从字面上就可以理解到findIndex是干什么的了!而且有find在前,findIndex也真的没什么好说的了。

  • findIndex:findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
    简单说一下,find返回的是数组符合回调测试条件的第一个元素,findIndex返回的是符合回调测试条件的第一个元素的索引。
    function findIndex(arr, fn, thisArg) {
      if (!(arr instanceof Array)) throw new Error("请确保第一个参数类型为数组")
      for (var i = 0; i < arr.length; i++) {
        if (fn(thisArg, arr[i], i, arr)) {
          return i 
        }
      }
      return -1
    }
    

      看这两个重构的函数都没有他打区别,也就是一个元素,一个索引值而已。

posted on 2019-03-25 09:00  烛火星光  阅读(4104)  评论(0编辑  收藏  举报