Array.prototype.find()用法簡介

aaron 發布于2019-08-22 16:59 / 1062人閱讀

摘要：用法簡介方法會返回滿足條件的第一個元素，如果沒有，則返回開發背景實際開發中，經常會要求實現搜索功能。比如，根據姓名用戶等可以標明用戶唯一身份的字段值，搜索出對應的某一條用戶數據等等。

用法簡介：

find()方法會返回滿足條件的第一個元素，如果沒有，則返回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

開發背景：

實際開發中，經常會要求實現搜索功能。比如，根據姓名/用戶id等可以標明用戶唯一身份的字段值，搜索出對應的某一條用戶數據等等。

實現思路：

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

代碼示例：

假設根據用戶名查找某一個用戶

let input_user_name = "tom" // 假設用戶在輸入框中輸入的用戶名

const users = [ // 假設后端返回的所有數據
  { 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

云服務器 GPU云服務器使用簡介函數簡介基礎簡介簡介

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94749.html

數組方法find、filter、findIndex簡介

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

Yangder 2019-08-23 16:48 評論0 收藏0
JavaScript數組迭代（遍歷）方法

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

light 2019-08-20 17:34 評論0 收藏0
初探ES6(1)...

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

duan199226 2019-08-19 18:37 評論0 收藏0
Day07 - Array Cardio 中文指南二

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

Forest10 2019-08-20 18:18 評論0 收藏0