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

本文主要是介绍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 来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

这篇关于Array find() 方法如何在 JavaScript 中工作的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！