ES6 find / findIndex 底层详解

ES6 同时被 2 个专栏收录
28 篇文章 0 订阅
24 篇文章 0 订阅

1.作用

ES6 提供了 find 以及 findIndex 方法,可以让我们在数据中根据条件找出需要的项。

二者原理相同,都接受一个回调函数。只是一个返回 符合条件的数据,一个返回符合条件的数据下标

// find 
var a = [
  { id: 1, name:'张三' },
  { id: 2, name:'王五' }
]
    
var data =  a.find(function (item) {
  return item.id === 1
})

data // {id: 1, name: "张三"}

// findIndex
var a = [
  { id: 1, name:'张三' },
  { id: 2, name:'王五' }
]
    
var data =  a.find(function (item) {
  return item.id === 2
})

data // 1

下面来用原生实现一下

// findIndex
let a = [
  { id: 1, name:'张三' },
  { id: 2, name:'王五' }
]
    
Array.prototype.newFindIndex = function(callback) {
  for(let i = 0; i < this.length; i++) {
    if(callback(this[i], i)) {
  	  return i
    }
  }
}
let res = a.newFindIndex(function (item) {
  return item.id === 1
})
res // 0

// find
let a = [
  { id: 1, name:'张三' },
  { id: 2, name:'王五' }
]
    
Array.prototype.newFind = function(callback) {
  for(let i = 0; i < this.length; i++) {
    if(callback(this[i], i)) {
  	  return this[i]
    }
  }
}
let res = a.newFind(function (item) {
  return item.id === 1
})
res // { id: 1, name:'张三' }
  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

评论 1 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:护眼 设计师:闪电赇 返回首页

打赏作者

pspxuan

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值