js中数组find⽅法的使⽤和实现
js中数组find⽅法的使⽤和实现
find⽅法定义
find() ⽅法返回数组中满⾜传⼊函数条件的第⼀个元素的值。否则返回 undefined。
find⽅法语法
arr.find(callback(element [, index[, selfArr]]) {} [, thisArg])
find⽅法参数
callback
在数组每⼀项上执⾏的函数，接收 3 个参数：
（1）element
当前遍历到的元素。
（2）index可选
当前遍历到的索引。
（3）array可选
调⽤find⽅法的数组本⾝。
thisArg可选
执⾏callback回调时⽤作this 的对象。
find⽅法返回值
数组中第⼀个满⾜所传⼊callback函数的元素的值，否则返回 undefined。
详细描述
find⽅法对数组中的每⼀项元素执⾏⼀次 callback 函数，直⾄有⼀个 callback 返回 true。当到了这样⼀个元素后，该⽅法会⽴即返回这个元素的值，否则返回 undefined。
注意 callback 函数会为数组中的每个索引调⽤即从 0 到 length - 1，⽽不仅仅是那些被赋值的索引。（这点是区别于map和fliter等等⽅法的）
callback函数带有3个参数：当前元素的值、当前元素的索引，以及数组本⾝。
如果提供了 thisArg参数，那么它将作为每次 callback函数执⾏时的this ，如果未提供，则使⽤ undefined。（this指向取决于this的指向规则）
find⽅法不会改变原数组。
在第⼀次调⽤ callback函数时会确定元素的索引范围，因此在 find⽅法开始执⾏之后添加到数组的新元素将不会被 callback函数访问到。如果数组中⼀个尚未被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到，但是其值已经是undefined了。
使⽤⽰例
查询⼤于3的元素
let arr = [0, 1, , , 4]
const reasult = arr.find((m, index) => {
console.log({m, index})
return m > 3
})
console.log(reasult)
// {m: 0, index: 0}
// {m: 1, index: 1}
// {m: undefined, index: 2}
// {m: undefined, index: 3}javascript全局数组
// {m: 4, index: 4}
// // 4  [0, 1, empty × 2, 4]
上述代码结果返回⼤于3的第⼀个元素。根据打印结果可以看出原数组⾥⾯的空值也会进⾏callback函数调⽤，最后返回callback返回值为true的那个原数组中的元素。原数组arr没有任何改变。
获取数组中的对象
let arr2 = [
{
name: 'kat'
},
{
name: 'dog'
}
]
const reasult2 = arr2.find((element, index) => {
console.log({element, index})
return element.name === 'kat'
})
console.log(reasult2)
// {element: {name: "kat"}, index: 0}
// {name: "kat"}
上述代码返回原数组中name为 ‘kat’的对象。下⾯来模拟实现⾃⼰的find⽅法；
思路步骤
1、将myFind⽅法挂到数组的原型上
2、获取原数组的长度
3、利⽤call⽅法调⽤并改变callback函数的this
4、判断acllback函数的返回值，返回当前元素
实现代码
Find = function(callback, thisArg) {
let length = this.length
for (let index = 0; index < length; index++) {
if (callback.call(thisArg, this[index], index, this)) return this[index]
}
}
测试验证
Find = function(callback, thisArg) {
let length = this.length
for (let index = 0; index < length; index++) {
if (callback.call(thisArg, this[index], index, this)) return this[index]      }
}
let arr = [0, 1, , , 4]
const reasult = Find((element, index) => {
console.log({element, index})
return element > 3
})
console.log(reasult, arr)
// {m: 0, index: 0}
// {m: 1, index: 1}
/
/ {m: undefined, index: 2}
// {m: undefined, index: 3}
// {m: 4, index: 4}
// 4  [0, 1, empty × 2, 4]
let arr2 = [
{
name: 'kat'
},
{
name: 'dog'
}
]
const reasult2 = Find((element, index) => {
console.log({element, index})
return element.name === 'kat'
})
console.log(reasult2)
// {element: {name: "kat"}, index: 0}
// {name: "kat"}
从打印结果可以看，验证结果和原⽅法⼀致。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。