精华内容
下载资源
问答
  • find_findIndex-源码

    2021-02-15 10:45:55
    find_findIndex
  • js代码-js数组查找元素 findIndex() 方法,返回第一个匹配元素下标
  • 前端开发过程中对数据的遍历是非常常见的操作,在Vue.js中通过对数组下标遍历操作来进行相关逻辑处理的方法常用的有两种:some()和findIndex() ,二者都是通过遍历数组里面的id值来进行操作。本篇博文只介绍find...

    前端开发过程中对数据的遍历是非常常见的操作,在Vue.js中通过对数组下标遍历操作来进行相关逻辑处理的方法常用的有两种:some()和findIndex() ,二者都是通过遍历数组里面的id值来进行操作。本篇博文只介绍findIndex() 方法的使用,some()方法在这里不再多讲。

    一、findIndex() 方法的定义和使用原理

    1、findIndex() 方法返回的是传入的一个需求条件(函数)符合条件的数组的第一个元素位置;

    2、findIndex() 方法为数组中的每个元素都调用一次函数的执行:

    展开全文
  • js数组查找方法 find() findIndex() ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,今天继续讲讲数组查询方法,,这俩方法更加适合于数组。 没错,就是数组专用的方法 find(callback, thisVal) : ...

    js数组查找方法 find() findIndex()

    ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,今天继续讲讲数组查询方法,,这俩方法更加适合于数组。

    没错,就是数组专用的方法

    find(callback, thisVal) : 自动迭代,查找自己在数组中想要的成员,所有数据类型的成员都可以查找。第一个参数是回调函数,里面填写筛选的条件,第二个参数表示执行回调时用作this 的对象。(后面会详细解释第二个参数),这个方法有返回值,为符合条件的数组成员,需要相应的参数接收。如果没有符合条件的成员,就返回undefined(不返回)。

    let arr = ['usa', 'usb', 'usc', 'use']
    // 回调支持三个参数,分别为 当前迭代的成员,当前迭代成员的下标,迭代数组
    let res = arr.find((item, index, arr) => { 
        console.log(item, index, arr)
        return item === 'usc'
    }) 
    console.log(res)
    
    // ---------输出结果
    // 'usa' 0 ['usa', 'usb', 'usc', 'use']
    // 'usb' 1 ['usa', 'usb', 'usc', 'use']
    // 'usc' 2 ['usa', 'usb', 'usc', 'use']
    // 'usc'
    
    /* 也可以找对象 */
    let arr = [{name: 'kaiqisan', id: 10001}, {name: 'tom', id: 10002}, {name: 'jimy', id: 10003}, {name: 'john', id: 10004}]
    let res = arr.find(item => item.name === 'tom') // 箭头函数简写(只有箭头函数可以)
    console.log(res);
    
    // ----------输出结果 
    // {name: 'tom', id: 10002}
    

    这个方法的基本的使用方法已经讲清楚了,至于怎么使用, 就全靠大家的想象力了(不是),再根据实际的情况合理挑选这个方法。

    现在我们来详细讲一下这个第二个参数有什么左右,今天在搜集资料的时候,发现网上关于这个第二个参数的资料是少得可怜,只有MDN和菜鸟官网还勉强有简单的文字讲解,但是,光光有文字,没有例子,大伙看了还是会一知半解,即使理解了,也不会有太深的印象,今天我就简单说明一下这个第二个参数的工作原理把。

    经过实践之后,我发现这个参数是为了ES5语法准备的,因为ES5无法把callback书写成箭头函数,只能写成一般的函数,

    // ES6语法
    arr.find((item) => { 
        // xxx
    }) 
    
    // ES5语法
    arr.find(function(item) {
        // xxx
    })
    

    再看一眼我前面对第二个参数做出的表述----第二个参数表示执行回调时用作this 的对象,有时候,这个find方法会被直接使用于别的的函数内

    function app() {
        
        arr.find(function(item) {
        // xxx
    	})
    }
    

    首先,我们需要理解什么是this,这里就不详细展开解释,一句话来说就是 this的最终指向的是那个调用它的对象。在上面代码所示的情况下,如果您还是要执意在回调函数内使用this的话,由于find内部的回调函数并没有被哪个对象调用,所以它指向的是window,这可能会造成一些错误。所以第二个参数会指定一些您希望传入的并被find内部回调函数执行的参数。

    function app() {
        var arr = [{ uid: 1, name: 'kaiqisan' }, { uid: 2, name: 'tom' }, 
                   { uid: 3, name: 'john' }, { uid: 4, name: 'kitty' }]
        var res = arr.find(function(item) {
            return item.uid === this.uid // this.uid就是3
        }, {uid: 3})
        console.log(res)
    }
    app()
    // 结果为 { uid: 3, name: 'john' }
    

    当然这里只是举个例子,使用了静态的参数,大家在实际情况中,在第二个参数填入 this , 从而达到箭头函数的效果,自动继承了父元素的this指针。

    但是现在ES6都出来了,推荐大家直接使用箭头函数,避免更多的麻烦,需要注意的就是如果使用了ES6的箭头参数之后,再使用这个第二个参数的话,它就会失效,就是因为箭头函数自动帮您继承父对象的this指针了。这个第二个参数留给不得不使用ES5的时候使用(浏览器太辣鸡不支持ES6)

    findIndex(callback, thisVal): 和find方法唯一不同的就是这个方法返回的是数组符合条件的成员下标而不是符合条件的成员,如果没有符合条件的成员,就返回**-1**。

    let res = ['a', 'b', 'c'].findIndex(item => {
        return item === 'b'
    })
    console.log(res) // 1
    

    注意点

    上述俩方法只能查找数组成员,不能查找字符串的字符,否则必报错。字符串那么多查询方法,随便挑一个它不香吗?

    展开全文
  • 数组的find/findIndex详解

    千次阅读 2019-12-05 10:21:18
    find() 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。 find方法对数组中的每一项元素执行一次callback函数,直至有一个callback 返回true。当找到了这样一个元素后,该方法会立即返回这个...

    find() 

    • 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
    • find方法对数组中的每一项元素执行一次 callback 函数,直至有一个 callback 返回 true。当找到了这样一个元素后,该方法会立即返回这个元素的值,否则返回 undefined。
    • 注意 callback 函数会为数组中的每个索引调用即从 到 length - 1,而不仅仅是那些被赋值的索引,这意味着对于稀疏数组来说,该方法的效率要低于那些只遍历有值的索引的方法。
    • callback函数带有3个参数:当前元素的值、当前元素的索引,以及数组本身。
    • 如果提供了 thisArg参数,那么它将作为每次 callback函数执行时的this ,如果未提供,则使用 undefined。
    • find方法不会改变数组。
    var inventory = [
        {name: 'apples', quantity: 2},
        {name: 'bananas', quantity: 0},
        {name: 'cherries', quantity: 5}
    ];
    
    function findCherries(fruit) { 
        return fruit.name === 'cherries';
    }
    
    console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }
    var arr = [
        {name: 'fx', age: 18},
        {name: 'wfd', age: 19},
    ]
    var arrTest = arr.find((item, index, array) => {
        console.log('当前值:' + JSON.stringify(item), '当前值的索引' + index, '当前数组' + array)
        return item.age >= 18
    })
    console.log(arrTest)

    var arr = [
        {name: 'fx', age: 18},
        {name: 'wfd', age: 19},
    ]
    var arrTest = arr.find((item, index, array) => {
        console.log('当前值:' + JSON.stringify(item), '当前值的索引' + index, '当前数组' + array)
        return item.name === 'wfd'
    })
    console.log(arrTest)

    下面的例子展示了如何从一个数组中寻找质数(如果找不到质数则返回 undefined)

    function isPrime(element, index, array) {
      var start = 2;
      while (start <= Math.sqrt(element)) {
        if (element % start++ < 1) {
          return false;
        }
      }
      return element > 1;
    }
    
    console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
    console.log([4, 5, 8, 12].find(isPrime)); // 5

    当在回调中删除数组中的一个值时,当访问到这个位置时,其传入的值是 undefined:

    findIndex()

    • 返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
    • findIndex方法对数组中的每个数组索引0..length-1(包括)执行一次callback函数,直到找到一个callback函数返回真实值(强制为true)的值。
    • 如果找到这样的元素,findIndex会立即返回该元素的索引。
    • 如果回调从不返回真值,或者数组的length为0,则findIndex返回-1。
    • 与某些其他数组方法(如Array#some)不同,在稀疏数组中,即使对于数组中不存在的条目的索引也会调用回调函数。
    • 回调函数调用时有三个参数:元素的值,元素的索引,以及被遍历的数组。
    • 如果一个 thisArg 参数被提供给 findIndex, 它将会被当作this使用在每次回调函数被调用的时候。如果没有被提供,将会使用 undefined。findIndex不会修改所调用的数组。

    以下示例查找数组中素数的元素的索引(如果不存在素数,则返回-1)。

    function isPrime(element, index, array) {
      var start = 2;
      while (start <= Math.sqrt(element)) {
        if (element % start++ < 1) {
          return false;
        }
      }
      return element > 1;
    }
    
    console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
    console.log([4, 6, 7, 12].findIndex(isPrime)); // 2
    var arr = [
        {name: 'fx', age: 18},
        {name: 'wfd', age: 19},
    ]
    var arrTest = arr.findIndex((item, index, array) => {
        console.log('当前值:' + JSON.stringify(item), '当前值的索引' + index, '当前数组' + array)
        return item.name === 'wfd'
    })
    console.log(arrTest)

     

    展开全文
  • js数组的findIndex和indexOf对比

    万次阅读 2018-12-11 10:15:20
    findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。 findIndex() 方法为数组中的每个元素都调用一次函数执行: 当数组中的元素在测试条件时返回true时, findIndex() 返回符合条件的元素...

    findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。

    findIndex() 方法为数组中的每个元素都调用一次函数执行:

    • 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
    • 如果没有符合条件的元素返回 -1

    注意: findIndex() 对于空数组,函数是不会执行的。

    注意: findIndex() 并没有改变数组的原始值。

    代码实例:


    indexOf() 方法可返回数组中某个指定的元素位置。

    该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。

    如果在数组中没找到指定元素则返回 -1。

    代码实例:


    index

    / Production steps of ECMA-262, Edition 5, 15.4.4.14
    // Reference: http://es5.github.io/#x15.4.4.14
    if (!Array.prototype.indexOf) {
      Array.prototype.indexOf = function(searchElement, fromIndex) {
    
        var k;
    
        // 1. Let O be the result of calling ToObject passing
        //    the this value as the argument.
        if (this == null) {
          throw new TypeError('"this" is null or not defined');
        }
    
        var O = Object(this);
    
        // 2. Let lenValue be the result of calling the Get
        //    internal method of O with the argument "length".
        // 3. Let len be ToUint32(lenValue).
        var len = O.length >>> 0;
    
        // 4. If len is 0, return -1.
        if (len === 0) {
          return -1;
        }
    
        // 5. If argument fromIndex was passed let n be
        //    ToInteger(fromIndex); else let n be 0.
        var n = +fromIndex || 0;
    
        if (Math.abs(n) === Infinity) {
          n = 0;
        }
    
        // 6. If n >= len, return -1.
        if (n >= len) {
          return -1;
        }
    
        // 7. If n >= 0, then Let k be n.
        // 8. Else, n<0, Let k be len - abs(n).
        //    If k is less than 0, then let k be 0.
        k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
    
        // 9. Repeat, while k < len
        while (k < len) {
          // a. Let Pk be ToString(k).
          //   This is implicit for LHS operands of the in operator
          // b. Let kPresent be the result of calling the
          //    HasProperty internal method of O with argument Pk.
          //   This step can be combined with c
          // c. If kPresent is true, then
          //    i.  Let elementK be the result of calling the Get
          //        internal method of O with the argument ToString(k).
          //   ii.  Let same be the result of applying the
          //        Strict Equality Comparison Algorithm to
          //        searchElement and elementK.
          //  iii.  If same is true, return k.
          if (k in O && O[k] === searchElement) {
            return k;
          }
          k++;
        }
        return -1;
      };

    对比:

    1、findIndex()和indexOf方法实现都是通过循环遍历查找。

    2、findIndex()的应用场景要比indexOf广泛一些,可以查找大于等于小于,表达式可以随便写,indexOf就只能在第一层查找相等的值。

    3、findIndex()实际上相当于一个for循环,只不过找到了你不需要自己退出。

     

     

    展开全文
  • ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,...
  • find方法和 findIndex方法的使用

    千次阅读 2020-10-31 10:47:16
    find方法和findIndex方法都是用于查找数组中符合条件的元素,但是两者有细微的差别 find方法是通过判断条件返回符合条件的对象 // 定义一个数组,里面包含多个对象,通过find方法来查找满足条件的对象 var arr = ...
  • js 数组的find和findIndex

    千次阅读 2020-03-09 18:58:31
    array.find(function(currentValue, index, arr),thisValue) 参数 描述 function(currentValue, index,arr) 必需。数组每个元素需要执行的函数。函数参数: 参数 描述 current...
  • ES6数组方法find()、findIndex()的总结

    万次阅读 多人点赞 2020-04-22 13:21:19
    本文主要讲解ES6数组方法find()与findIndex(),关于JS的更多数组方法,可参考以下: ①JavaScript 内置对象之-Array ②ES5新增数组方法(例:map()、indexOf()、filter()等) ③ES6新增字符串扩张方法includes()、...
  • find()和findIndex()函数详解

    千次阅读 2020-07-30 16:48:12
    今天我在拿数组中的存在的某一项索引时,我用了filter(),结果折腾了半天还是没求出索引,结果询问同事,他说你直接用findIndex()就可以了,一语点醒梦中人,可能平时ES6的这些函数用的少,根本就想不起来用这个。...
  • 解决findindex、includes兼容ie方法附代码 前提:今天遇到兼容性问题,写了半天代码,在谷歌上测试没问题,然而被告知还要考虑IE的兼容! 瞬间爆炸,记得写了好多findIndex、includes 可怎么办,百度了好多解决办法...
  • vue中findIndex()

    千次阅读 2019-05-12 22:15:19
    var arr = [{id:1},{id:2}];//对象数组 ...arr.findIndex(function(value){//value是数组中的数组元素 return 条件(eg:value.id = 1) }); -----返回的是满足条件的第一个数组元素的下标 ...
  • js find方法和findIndex方法

    千次阅读 2019-12-22 10:20:05
    /*数组中,取出满足要求的第一个值*/ const myArr=[1,2,3,4,8,12]; var v1=myArr.find(value=>value>8); console.log(v1); ... var v2=myArr.find((value,index,arr)=>{ return ...
  • find()和findIndex()与indexOf()用法与区别

    千次阅读 2020-05-31 00:11:19
    findIndex()与indexOf()的区别与用法详解,findIndex比indexOf更强大一些,可以通过回调函数查找对象数组 1.find()方法arr.find(callback) 2. findIndex()方法: arr.findIndex(callback) 3. indexOf()方法arr.index...
  • Es6 find 和findIndex的区别

    千次阅读 2019-03-24 17:01:32
    find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧 ...
  • 查找数组 es5: let result let arr = [1, 2, 3, 4, 5] let findArr = arr.filter(item =>...find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。 let arr = [1, 2, 3,
  • js find(),findIndex()方法的使用

    千次阅读 2021-01-16 18:41:19
    1, find()方法用于查找数组中符合条件的第一个元素,如果没有符合条件的元素,则返回undefined let arr = [1,2,3,4,5]; let num = arr.find(item => item > 1);...let num = arr.findIndex(it
  • const list = ["a", "b", "c"]; let index = list.findIndex((x) => x == "b"); console.log(index); // 1
  • C#中List为什么要提供FindIndex和IndexOf两个方法? 这两个方法对比有什么优劣? ``` // 定义 public int FindIndex(Predicate<T> match); public int FindIndex(int startIndex, Predicate<T> match); ...
  • 数组查找索引 ES2015 安装 $ npm install --save ...与Array#findIndex() ,但将输入数组作为第一个参数。 Tidelift帮助维护人员实现开源的可持续发展,同时为公司提供帮助有关其依赖项的安全性,维护和许可的保证。
  • 数组实例的find() 和 findIndex()方法

    万次阅读 2018-01-23 17:39:07
    数组实例的find() 和 findIndex()方法 数组实例的find()方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员...
  • 数组的 find() 和 findIndex() 方法

    千次阅读 2019-04-21 19:13:09
    find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined。 indIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。
  • 1、find:给定条件,返回数组中第一个满足该条件的值,之后的值不再进行检测,当没有找到满足该条件的值时,返回undefined let arr = [ { name: '小明', sex: '男', age: 23 }, { name: ...
  • Js中的find,findIndex,indexof,includes

    千次阅读 2019-04-12 07:31:48
    js中的find,findIndex,indexof,includes都可以用来查找数组中的某一项,今天来对比一下. 测试代码地址 github.com/fanxuewen/e… 一、find find是用来查找满足条件的第一项,找到了就返回,找不到返回undefined.该...
  • es6 find()和findIndex()查找函数

    千次阅读 2019-04-03 21:03:52
    1. find() 用来查找目标元素,找到就返回该元素,找不到返回undefined. 查找回调函数,有三个参数 语法: ...2. findIndex() 用来查找目标元素,找到就返回元素的位置,找不到就返回-1。 查找回...
  • // findINdex遍历数组返回索引, // findINdex遍历数组返回数组索引, const i = state.list.findIndex(item => item.id === 1) list: [ { "id": 0, "info": "Racing car sprays burning fuel into crowd....
  • 学号:2019 4、使用FindIndex public int FindIndex(Predicate match) 找到学生姓名为“学生15”的序号 int result4 = list.FindIndex((Student s) => s.NAME == "学生15"); Console.WriteLine(@"序号:{0}", result...
  • Node.js学习 (十四)find()、findIndex()

    万次阅读 2019-04-16 11:12:34
    EcmaScript 6 新增方法,获取数据对象 find() 接收一个方法作为参数,方法内部返回一个条件 find() 会遍历所有的元素,执行你给定的带...findIndex() 原理一致,返回数据索引位置 示例演示: var users = [ {id: ...
  • find(返回符合传入测试(函数)条件的数组元素。) let list =[ {id: 4, pid: 3, menuName: "操作日志", menuLevel: 2, url: "/operatelogs"}, {id: 8, pid: 7, menuName: "富文本", menuLevel: 2, url: "/...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 457,256
精华内容 182,902
关键字:

findindex