Array find() 方法如何在 JavaScript 中工作

介绍

JavaScript 数组 find() 方法从满足回调函数中写入的条件的数组返回值。

句法，

arr.find(callbackFunction)

let callbackFunction = (elem, index, arr)=>{
    console.log(elem)
    console.log(index)
    console.log(arr)
}

//OR

arr.find((elem, index, arr)=>{
    console.log(elem)
    console.log(index)
    console.log(arr)
})

将为数组 arr 的每个元素调用回调函数。在哪里，

elem -- 当前正在执行回调函数的数组 arr 的当前元素。

index -- 当前正在执行回调函数的数组元素的当前索引。

arr -- 调用 find() 方法的整个数组。

让我用一个简单的例子来解释这一点。

示例 1

const arr = [1,12,3,100,21,0] 
let result = arr.find((elem)=>{ return elem > 3 })
console.log(result) //12 

示例 2

const arr = [1,12,3,100,21,0] 
let result = arr.find((elem)=>{ return elem == 30 })
console.log(result) //undefined 

上例中方法返回的输出find()将为12.

我们从上面的例子中观察到什么？为每个元素执行此回调函数，find()方法返回满足回调函数中编写的条件的第一个值。如果没有值满足回调函数中写入的条件，undefined将被返回。

一旦find()返回了一些东西，回调函数的执行就会在那个点停止（所以从上面的例子 1 来看，它不会在索引 1 之后执行循环）。

find() 什么时候有用

假设我们有一个大的 JSON 数据，并且您有一个搜索功能并且您想要过滤掉该搜索的第一次出现。

var data=[ {country_name:"India",code:"IN"}, {country_name:"United States",code:"US"}, {country_name:"United Kingdom",code:"UK"}, {country_name:"India",code:"IN"}];
//assume someone searched for India 
let result = data.find(d=>d.country_name=="India")
//output will be 
console.log(result) // {country_name: 'India', code: 'IN'} 

但是使用 find() 你会得到 India 第一次出现的输出，它位于索引 0 而不是索引 3，

所以，如果你想得到所有满足条件的值，你最好使用 filter() 方法而不是 find() 方法。如果满足条件，请确保 filter() 将返回一个数组。

 var data=[
    {country_name:"India",code:"IN"},
    {country_name:"United States",code:"US"},
    {country_name:"United Kingdom",code:"UK"},
    {country_name:"India",code:"IN"}];

//assume someone searched for India
let result = data.filter(d=>d.country_name=="India")

//output will be
console.log(result) // [{country_name: 'India', code: 'IN'},{country_name:"India",code:"IN"}]

还有一些需要注意的地方

find() 方法不会改变（或更改）调用它的数组。但是提供给callbackFunction的函数可以。如果是这样，则在第一次调用 callbackFn 之前设置 find 处理的元素。所以：

find()1.callbackFn 不会访问任何在调用开始后添加到数组arr 中的元素。

let arr = [1,2,5,4,3,6,7,8,9]
let op = arr.find(e=>{ arr.length=0 return e==1; })
console.log(op) //undefined

2.分配给数组arr已经访问过的索引的元素，或者分配给数组arr范围之外的索引的元素，将不会被callbackFunction访问。

let arr = [1,2,5,4,3,6,7,8,9]
let op = arr.find((e, index)=>{ 
if(index==2) { 
    arr[0]=10 } 
    return e == 10;
}) 
console.log(op) //undefined 

3.如果数组 arr 的一个现有的、未访问的元素被 callbackFunction 改变，它传递给 callbackFunction 的值将是find()访问该元素索引时的值。

let arr = [1,2,5,4,3,6,7,8,9]
let op = arr.find(e=>{ 
    arr[8]=90 
    return e == 90; 
}) 
console.log(op) //90

4.使用 delete 运算符从数组 arr 中删除的元素仍然会被访问。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
let op = arr.find((e,i,a)=>{ 
    console.log(e) 
    console.log(i) 
    console.log(a)
    if(i==0){ 
        delete myarr[2] 
        console.log(arr) // [1, 2, empty, 5, 6, 7, 8, 9] }
        return e == 3 
    }) 
console.log(op) // undefined 

在这里，在使用 delete 运算符删除索引 2 处的元素后，我们可以看到索引 3 的值将变为空，并且在遍历数组时仍然会访问索引 3 并将打印

console.log(e) //undefined 
console.log(i) //2 
console.log(a) //[1, 2, empty, 5, 6, 7, 8, 9]

因此没有值为 3 的元素，行 console.log(op) 将打印undefined

让我们再看看 JavaScript 的 Array 方法的几个方法，它们的工作方式有点类似于find()method，

1. 一些（）
2. 每一个（）

这两个的语法与find()but 相同，some 和 every 根据回调函数的条件返回布尔值

1. some()：遍历所有数组元素并检查条件，如果任何元素满足回调函数的条件则some()返回 true，否则返回 false。

2. every() 遍历所有数组元素并检查条件，如果所有元素都满足回调函数的条件，则every()返回 true，否则返回 false。

标签：JavaScript,函数,编程语言,Object,编程,Node, function
来源：