JS從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù)的方法
更新時間：2016年06月02日 09:52:55 作者：FungLeo
這篇文章給大家介紹基于js如何從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù)，非常實用，實現(xiàn)方案也很簡單，需要的朋友可以參考下
下面小編給大家介紹基于js如何從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù)。具體方法如下所示：
在一般情況下,我們會要求后端在列表的時候輸出一堆列表的JSON數(shù)據(jù)給我們,然后我們把這堆數(shù)據(jù)循環(huán),就能在前端上顯示列表了.
而我們在內容頁的時候,則要求輸出一個內容頁的JSON數(shù)據(jù)給我們,我們就可以做內容頁了.
但是,有時候,數(shù)據(jù)并不是特別復雜,我們可能需要從列表的數(shù)據(jù)中指定其中的單條數(shù)據(jù).怎么做呢?
標準答案,find方法
var json = [{"id":1,"name":"張三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"}];
如上所示,json是一個典型的列表數(shù)據(jù).我如何指定找到ID=1的這條數(shù)據(jù)呢?
var data = json.find(function(e){return e.id == 1});
console.log(data);
通過這樣的回調函數(shù),就能找到列表數(shù)據(jù)中的單條數(shù)據(jù)了.
這段代碼用了一個find方法,并且使用了一個回調函數(shù).很優(yōu)雅的解決了這個問題.下面,我將給出我的原始方案.
我的方案,for循環(huán)
上面的find方法是我通過搜索引擎找到的解決方法,點擊此處: Array.prototype.find() .而我的原始解決方案如下:
var json = [{"id":1,"name":"張三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"}];
var data = getJsonById(2,json);
function getJsonById(id,data){
for (var i = 0; i < data.length; i++) {
if (data[i].id==id) {
return data[i];
}
};
}
原理非常簡單.通過循環(huán)遍歷,找到和條件一致的內容,然后返回它即可.
以上內容是小編給大家介紹的JS從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù)的方法，希望對大家有所幫助！
相關文章
本文主要介紹了原生js實現(xiàn)新聞列表展開/收起全文功能的知識要點、注意事項以及完整代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要為大家介紹了從延遲處理解析JavaScript惰性編程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要給大家介紹了關于Javascript中click與blur事件順序的相關資料，文中介紹的非常詳細，對大家學習或者使用Javascript中的click與blur事件具有一定的參考學習價值，需要的朋友可以下面來一起看看吧。2017-04-04
這篇文章主要介紹了js實現(xiàn)文本框寬度自適應文本寬度的方法,可實現(xiàn)根據(jù)文本框內容動態(tài)改變寬度的功能,涉及javascript動態(tài)操作頁面元素屬性的技巧,需要的朋友可以參考下2015-08-08
這篇文章主要為大家介紹了Aptos?SDK交互實現(xiàn)過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
JavaScript實現(xiàn)輪播圖方法(邏輯清晰一看就懂)
這篇文章主要給大家介紹了關于JavaScript實現(xiàn)輪播圖方法的相關資料,JS輪播圖的實現(xiàn)核心是使用JavaScript來控制圖片的切換和顯示,配合HTML和CSS完成布局和樣式設置,文中介紹的方法邏輯清晰一看就懂,需要的朋友可以參考下2023-12-12
無縫滾動改進版，封裝成函數(shù)，同時支持上下左右無縫滾動。2012-12-12
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)各種運動之復合運動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了有關JavaScript Promises異步問題詳解的相關資料,需要的朋友可以參考下2015-11-11
在IE下，我們可以輕松使用以下代碼來實現(xiàn)設置主頁 但在firefox我們需要做的更多2008-09-09