JS從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù)的方法
下面小編給大家介紹基于js如何從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù)。具體方法如下所示：
在一般情況下,我們會(huì)要求后端在列表的時(shí)候輸出一堆列表的JSON數(shù)據(jù)給我們,然后我們把這堆數(shù)據(jù)循環(huán),就能在前端上顯示列表了.
而我們?cè)趦?nèi)容頁的時(shí)候,則要求輸出一個(gè)內(nèi)容頁的JSON數(shù)據(jù)給我們,我們就可以做內(nèi)容頁了.
但是,有時(shí)候,數(shù)據(jù)并不是特別復(fù)雜,我們可能需要從列表的數(shù)據(jù)中指定其中的單條數(shù)據(jù).怎么做呢?
標(biāo)準(zhǔn)答案,find方法
var json = [{"id":1,"name":"張三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"}];
如上所示,json是一個(gè)典型的列表數(shù)據(jù).我如何指定找到ID=1的這條數(shù)據(jù)呢?
var data = json.find(function(e){return e.id == 1});
console.log(data);
通過這樣的回調(diào)函數(shù),就能找到列表數(shù)據(jù)中的單條數(shù)據(jù)了.
這段代碼用了一個(gè)find方法,并且使用了一個(gè)回調(diào)函數(shù).很優(yōu)雅的解決了這個(gè)問題.下面,我將給出我的原始方案.
我的方案,for循環(huán)
上面的find方法是我通過搜索引擎找到的解決方法,點(diǎn)擊此處: 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)遍歷,找到和條件一致的內(nèi)容,然后返回它即可.
以上內(nèi)容是小編給大家介紹的JS從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù)的方法，希望對(duì)大家有所幫助！
相關(guān)文章
javascript之鎖定表格欄位...2007-06-06
前端url拼接參數(shù)格式&?用&和??=拼接方法實(shí)例
在一些情況下需要直接往url上拼接請(qǐng)求參數(shù),下面這篇文章主要給大家介紹了關(guān)于前端url拼接參數(shù)格式&?用&和??=拼接的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
js中字符替換函數(shù)String.replace()使用技巧
js中字符替換函數(shù)String.replace()使用技巧，字符替換經(jīng)常用的到。2011-08-08
關(guān)于對(duì)TypeScript泛型參數(shù)的默認(rèn)值理解
泛型可以理解為寬泛的類型,通常用于類和函數(shù),下面這篇文章主要給大家介紹了關(guān)于對(duì)TypeScript泛型參數(shù)默認(rèn)值的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
微信小程序判斷手機(jī)號(hào)是否合法的實(shí)例代碼
我們?cè)谖⑿判〕绦蜷_發(fā)的時(shí)候,手機(jī)號(hào)的驗(yàn)證是經(jīng)常需要操作的,那么如何驗(yàn)證手機(jī)號(hào)呢?這篇文章主要給大家介紹了關(guān)于微信小程序判斷手機(jī)號(hào)是否合法的相關(guān)資料,需要的朋友可以參考下2021-09-09
基于邏輯運(yùn)算的簡單權(quán)限系統(tǒng)(實(shí)現(xiàn)) JS 版
基于邏輯運(yùn)算的簡單權(quán)限系統(tǒng)(實(shí)現(xiàn)) JS 版...2007-03-03
今天小編就為大家分享一篇淺談layer彈出層按鈕顏色修改方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)輪播圖指示器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
微信小程序在text文本實(shí)現(xiàn)多種字體樣式
這篇文章主要介紹了微信小程序在text文本實(shí)現(xiàn)多種字體樣式,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了JavaScript函數(shù)的使用教程，JavaScript函數(shù)是被設(shè)計(jì)為執(zhí)行特定任務(wù)的代碼塊。JavaScript函數(shù)會(huì)在某代碼調(diào)用它時(shí)被執(zhí)行。文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07