成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Array.prototype.find()用法簡介

aaron / 1071人閱讀

摘要：用法簡介方法會(huì)返回滿足條件的第一個(gè)元素，如果沒有，則返回開發(fā)背景實(shí)際開發(fā)中，經(jīng)常會(huì)要求實(shí)現(xiàn)搜索功能。比如，根據(jù)姓名用戶等可以標(biāo)明用戶唯一身份的字段值，搜索出對(duì)應(yīng)的某一條用戶數(shù)據(jù)等等。

用法簡介：

find()方法會(huì)返回滿足條件的第一個(gè)元素，如果沒有，則返回undefined

var arr = [1, 2, 3, 4, 5];
var above5 = arr.find(ele => ele > 5);
var below5 = arr.find(ele => ele < 5);
console.log(above5); // undefined
console.log(below5); // 1
開發(fā)背景：

實(shí)際開發(fā)中，經(jīng)常會(huì)要求實(shí)現(xiàn)搜索功能。比如，根據(jù)姓名/用戶id等可以標(biāo)明用戶唯一身份的字段值，搜索出對(duì)應(yīng)的某一條用戶數(shù)據(jù)等等。

實(shí)現(xiàn)思路：

通常的實(shí)現(xiàn)思路是，先遍歷所有數(shù)據(jù)，然后根據(jù)用戶輸入的唯一的字段值，找出用戶想要的那一條數(shù)據(jù)，然后展示在頁面上。

代碼示例： 
假設(shè)根據(jù)用戶名查找某一個(gè)用戶
let input_user_name = "tom" // 假設(shè)用戶在輸入框中輸入的用戶名

const users = [ // 假設(shè)后端返回的所有數(shù)據(jù)
  { id: 123, name: "dave", age: 23 },
  { id: 456, name: "chris", age: 22 },
  { id: 789, name: "bob", age: 21 },
  { id: 101, name: "tom", age: 25 },
  { id: 102, name: "tim", age: 20 }
]

我之前的寫法是:

let userSearched 

users.forEach(user => {
  if (user.name === input_user_name) {
    userSearched = user
  }
})

在了解了ES6中的Array.prototype.find()之后，我重寫了之前的代碼：

let userSearched = users.find(user => user.name === input_user_name)

只需一行代碼搞定！

參考文檔：

Array.prototype.find() | MDN

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94749.html

相關(guān)文章

  • 數(shù)組方法find、filter、findIndex簡介

    摘要：方法，意思為過濾，同樣接收一個(gè)回調(diào)函數(shù)，該方法的使用場(chǎng)景是查找數(shù)組內(nèi)符合指定條件的所有元素。 前言 ES6提供了很多新的API，數(shù)組對(duì)象的尤為實(shí)用，但是如果我們沒有在相對(duì)應(yīng)的開發(fā)環(huán)境下，很難對(duì)這些API有深入的了解，畢竟實(shí)踐出真知。 find、filter、findIndex這三個(gè)方法都是對(duì)于數(shù)組的查找，其中返回的值略微相關(guān)，所以在這里做一個(gè)介紹。 Array.prototype.fi...

    Yangder 評(píng)論0 收藏0

  • JavaScript數(shù)組迭代（遍歷）方法

    摘要：正文和中新增的的數(shù)組迭代方法如下其中，是新增的，其余都是新增的。指數(shù)組后，返回過濾后的新數(shù)組。它的參數(shù)跟方法是一樣的所有數(shù)組成員依次執(zhí)行回調(diào)函數(shù)，直到找出第一個(gè)返回值為的成員，然后返回該成員。 前言 ES5和ES6中新增了不少東西，對(duì)于數(shù)組而言，新增了不少迭代方法，讓我們可以拋棄for循環(huán)，更方便的寫JS代碼。 正文 ES5和ES6中新增的的數(shù)組迭代方法如下： forEach map...

    light 評(píng)論0 收藏0

  • 初探ES6(1)...

    摘要：和用法與類似，都是變量的聲明，但是具有塊級(jí)作用域。首先，當(dāng)你聲明一個(gè)變量的時(shí)候，必須要初始化。將一個(gè)類數(shù)組對(duì)象和或可遍歷對(duì)象轉(zhuǎn)換成真正的數(shù)組不會(huì)改變?cè)袑?duì)象，返回一個(gè)新的數(shù)組。 直接進(jìn)入正題吧，盡量關(guān)于ES6的知識(shí)點(diǎn)都能涉及到。 let const let 和 const 用法與 var 類似，都是變量的聲明，但是let具有塊級(jí)作用域。那是什么概念呢？看下面的例子。 for(va...

    duan199226 評(píng)論0 收藏0

  • Day07 - Array Cardio 中文指南二

    摘要：中文指南二作者簡介是推出的一個(gè)天挑戰(zhàn)。完整中文版指南及視頻教程在從零到壹全棧部落。第七天的練習(xí)是接著之前中文指南一的練習(xí)，繼續(xù)熟練數(shù)組的方法，依舊沒有頁面顯示效果，所以請(qǐng)打開瀏覽器的面板進(jìn)行調(diào)試運(yùn)行。 Day07 - Array Cardio 中文指南二 作者：?liyuechun 簡介：JavaScript30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個(gè)...

    Forest10 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<