zoukankan      html  css  js  c++  java
  • JavaScript数组方法--filter、find、findIndex

    继续数组方法,今天应该到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
      }
      

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

  • 相关阅读:
    Asp.Net页面导入和导出到EXCEL
    ASP.NET打包安装的制作方法
    asp.net生成高质量缩略图通用函数(c#代码),支持多种生成方式
    aspx页面Repeater嵌套Repeater
    JAVASCRIPT校验大全
    SQL语句导入导出大全
    从DataView中生成Excel报表的方案
    用ajax实现dropdownlist多级联动实例
    ASP.NET结合存储过程写的通用搜索分页程序
    C#程序调用外部程序
  • 原文地址:https://www.cnblogs.com/zhuhuoxingguang/p/10591841.html
Copyright © 2011-2022 走看看