關于js的find的基本用法

Array.prototype.find() 是 JavaScript 的一個數組方法,它被用來在數組中查找一個符合條件的元素。一旦找到第一個符合條件的元素, find() 會立即返回這個元素的值,否則返回 undefined。

以下是 find() 方法的基本語法:

arr.find(callback(element[, index[, array]])[, thisArg])

參數:
callback: 回調函數,在數組每個元素上執行,接受三個參數:

currentValue : 數組中正在處理的當前元素。
index (可選): 數組中正在處理的當前元素的索引。
array (可選): find() 方法被調用的數組。
thisArg (可選): 執行回調時用作 this 的對象。
返回值:
返回數組中第一個滿足所提供測試函數的元素的值,否則返回 undefined。

1.使用currentValue 參數:

// 例子1:尋找數組中第一個大于10的元素
let array = [5, 12, 8, 130, 44];
/**
我們傳給 find() 函數一個回調函數,該函數會對數組的每個元素進行測試。當找到第一個大于10的數時,find() 就立即返回這個數。
*/
let found = array.find(element => element > 10);console.log(found,'-----------found'); // 輸出: 12

在這里插入圖片描述
2.使用 currentValue 和 index 參數

/**
例子2:除了檢查元素是否大于10,我們還檢查其索引是否大于2。因此,find() 返回的是第一個在索引大于2且值大于10的元素。
*/
var array2 = [5, 12, 8, 130, 44];var found = array2.find(function(element, index) {return element > 10 && index > 2;
});console.log(found); // 130

3.使用 currentValue,index 和 arr 參數

/**
例子3:我們查找最后一個元素(索引等于數組長度減一)且該元素大于10的元素。因為44不滿足條件,所以返回 undefined。
*/var array3 = [5, 12, 8, 130, 44];var found = array3.find(function(element, index, arr) {return element > 10 && index === arr.length - 1;
});console.log(found); // undefined

4.其他

// 例子4:取出testData中與test對應的對象
const testData = ref([{id:1,name:'測試1'
},{id:2,name:'測試2'
},{id:3,name:'測試3'
},{id:4,name:'測試4'
},])const test = ref(testData.value[0].id) // 1
const findTest = testData.value.find((item)=> item.id == test.value)console.log(testData.value,'-----------testData');
console.log(test.value,'-----------test');//1
console.log(findTest,'-----------findTest'); // { id:1, name:'測試1' }

在這里插入圖片描述

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/166115.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/166115.shtml
英文地址,請注明出處:http://en.pswp.cn/news/166115.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

?LeetCode解法匯總1410. HTML 實體解析器

目錄鏈接: 力扣編程題-解法匯總_分享記錄-CSDN博客 GitHub同步刷題項目: https://github.com/September26/java-algorithms 原題鏈接:力扣(LeetCode)官網 - 全球極客摯愛的技術成長平臺 描述: 「HTML 實…

利用企業被執行人信息查詢API保障商業交易安全

前言 在當今競爭激烈的商業環境中,企業為了保障商業交易的安全性不斷尋求新的手段。隨著技術的發展,利用企業被執行人信息查詢API已經成為了一種強有力的工具,能夠幫助企業在商業交易中降低風險,提高合作的信任度。 企業被執行人…

如何使用 JavaScript 實現圖片上傳并轉換為 LaTeX 公式

在本教程中,我們將學習如何使用 JavaScript 創建一個上傳圖片的功能,并將所選圖片轉換為 LaTeX 公式。我們將使用 FileReader 對象來讀取圖片并將其轉換為 Base64 格式,然后利用 img2latex API 將其轉換為 LaTeX 公式。 1. HTML 結構 首先&…

SpringMVC日志追蹤筆記整理

新建logback-spring.xml <?xml version"1.0" encoding"UTF-8"?> <configuration><property name"PATH" value"./log/business"></property><appender name"STDOUT" class"ch.qos.logback…

linux進程調度(三)-進程終止

文章目錄 2.3 進程退出的幾種情況2.4 進程終止過程分析2.4.1 exit_notify函數2.4.1.1 forget_original_parent函數2.4.1.1.1 find_child_reaper函數2.4.1.1.2 find_new_reaper函數2.4.1.1.3 reparent_leader函數 2.4.1.2 do_notify_parent函數2.4.1.3 release_task函數 2.4.2 d…

GitHub桌面版

GitHub桌面版 一、GitHub 桌面版二、clone 倉庫三、更新倉庫 一、GitHub 桌面版 二、clone 倉庫 三、更新倉庫

穆桂英掛帥

《穆桂英掛帥》 作家&#xff0f;羅光記 穆桂英掛帥破敵&#xff0c; 威風凜凜立戰場。 鐵甲如云奔雷急&#xff0c; 英姿颯爽傲寒霜。 烽火連天戰鼓擂&#xff0c; 旌旗翻飛壯心驚。 刀光劍影映紅日&#xff0c; 豪情壯志天地驚。 風云變幻戰事急&#xff0c; 英勇穆桂英…

Azure Machine Learning - Azure可視化圖像分類操作實戰

目錄 一、數據準備二、創建自定義視覺資源三、創建新項目四、選擇訓練圖像五、上傳和標記圖像六、訓練分類器七、評估分類器概率閾值 八、管理訓練迭代 在本文中&#xff0c;你將了解如何使用Azure可視化頁面創建圖像分類模型。 生成模型后&#xff0c;可以使用新圖像測試該模型…

溫馨提示!辦理流量卡千萬不要填寫別人的身份證信息,切記!

可以用別人的身份證辦理流量卡嗎&#xff1f;是很多朋友都比較關注的一個問題&#xff0c;在這里明確的告訴大家一下&#xff0c;當然是不可以的。 ?  不管你是在線下營業廳辦理&#xff0c;還是在線上申請&#xff0c;都是需要提供本人的證件信息才能辦理&#xff1a; 1、…

TIDB拓撲結構

TiDB Server&#xff1a;SQL層&#xff0c;負責接受客戶端的連接&#xff0c;執行SQL解析和優化&#xff0c;最終生成分布式執行計劃。TiDB Server為無狀態的&#xff0c;可增加節點負載均衡。 PD (Placement Driver) Server&#xff1a;整個TiDB集群的元信息管理模塊&#xf…

【超詳細】手搓一個微信日記本

&#x1f380; 文章作者&#xff1a;二土電子 &#x1f338; 關注公眾號獲取更多資料&#xff01; &#x1f438; 期待大家一起學習交流&#xff01; 這里對之前的微信記事本小程序進行了重新編寫&#xff0c;增加了更加詳細的步驟描述&#xff0c;將全部圖片都改成了本地圖…

用EasyAVFilter將網絡文件或者本地文件推送RTMP出去的時候發現CPU占用好高,用的也是vcodec copy呀,什么原因?

最近同事在用EasyAVFilter集成在EasyDarwin中做視頻拉流轉推RTMP流的功能的時候&#xff0c;發現怎么做CPU占用都會很高&#xff0c;但是視頻沒有調用轉碼&#xff0c;vcodec用的就是copy&#xff0c;這是什么原因呢&#xff1f; 我們用在線的RTSP流就不會出現這種情況&#x…

SSM個性化旅游管理系統開發mysql數據庫web結構java編程計算機網頁源碼eclipse項目

一、源碼特點 SSM 個性化旅游管理系統是一套完善的信息系統&#xff0c;結合springMVC框架完成本系統&#xff0c;對理解JSP java編程開發語言有幫助系統采用SSM框架&#xff08;MVC模式開發&#xff09;&#xff0c;系統具有完整的源代碼和數據庫 &#xff0c;系統主要采用B…

raid磁盤陣列

在單機時代&#xff0c;采用單塊磁盤進行數據存儲和讀寫的方式&#xff0c;由于尋址和讀寫的時間消耗&#xff0c;導致I/O性能非常低&#xff0c;且存儲容量還會受到限制。另外&#xff0c;單塊磁盤極其容易出現物理故障&#xff0c;經常導致數據的丟失。此時&#xff0c;RAID技…

Java設計模式

&#x1f648;作者簡介&#xff1a;練習時長兩年半的Java up主 &#x1f649;個人主頁&#xff1a;程序員老茶 &#x1f64a; ps:點贊&#x1f44d;是免費的&#xff0c;卻可以讓寫博客的作者開心好久好久&#x1f60e; &#x1f4da;系列專欄&#xff1a;Java全棧&#xff0c;…

新材料制造ERP用哪個好?企業應當如何挑選適用的

有些新材料存在特殊性&#xff0c;并且在制造過程中對車間、設備、工藝、人員等方面提出更高的要求。還有些新材料加工流程復雜&#xff0c;涉及多種材料的請購、出入庫、使用和管理等環節&#xff0c;解決各個業務環節無縫銜接問題是很多制造企業面臨的管理難題。 新材料制造…

牙科診所小程序開發案例

一、背景&#xff1a; 針對傳統口腔醫療領域中口腔診所推廣難,紙質信息保存難等問題&#xff0c;設計并開發了基于微信小程序實現口腔服務助手平臺。為了給人們提供便捷&#xff0c;快速的預約方式&#xff0c;提高社會人群對口腔健康的關注力度。通過微信小程序互聯網技術&…

文旅虛擬人IP:數字時代的傳統文化推薦官

近幾年&#xff0c;隨著文旅虛擬人頻“上崗”&#xff0c;虛擬人逐漸成為了文旅品牌的一種新穎的傳統文化傳播思路。 文旅品牌定制化推出虛擬人&#xff0c;本質原因是2023旅游業全面復蘇&#xff0c;各文旅玩法同質化現象嚴重&#xff0c;在這樣的境遇下&#xff0c;文旅品牌開…

OpenMLDB v0.8.4 診斷工具全面升級

新的v0.8.4版本中&#xff0c;我們對于診斷工具進行了全面系統化的升級&#xff0c;以提供更加完整和智能化的診斷報告&#xff0c;有助于高效排查 OpenMLDB 集群問題&#xff0c;大幅提升運維效率。 相比于之前的版本&#xff0c;新的診斷工具增添一鍵診斷功能&#xff0c;使…

首個央企量子云計算項目,中標!

6月29日&#xff0c;北京玻色量子科技有限公司&#xff08;簡稱“玻色量子”&#xff09;成功中標中國移動云能力中心“2023—2024年量子算法及光量子算力接入關鍵技術研究項目”&#xff0c;這是玻色量子繼與移動云簽訂“五岳量子云計算創新加速計劃”后&#x1f517;&#xf…