Array.prototype.find()用法简介

aaron 发布于2019-08-22 16:59 / 904人阅读

摘要：用法简介方法会返回满足条件的第一个元素，如果没有，则返回开发背景实际开发中，经常会要求实现搜索功能。比如，根据姓名用户等可以标明用户唯一身份的字段值，搜索出对应的某一条用户数据等等。

用法简介：

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

服务器托管 idc机房托管使用简介函数简介基础简介简介

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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
Day07 - Array Cardio 中文指南二

摘要：中文指南二作者简介是推出的一个天挑战。完整中文版指南及视频教程在从零到壹全栈部落。第七天的练习是接着之前中文指南一的练习，继续熟练数组的方法，依旧没有页面显示效果，所以请打开浏览器的面板进行调试运行。 Day07 - Array Cardio 中文指南二作者：©liyuechun 简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个...

赵春朋 2019-08-05 11:43 评论0 收藏0