美文网首页前端直通车
Array.prototype.find()用法简介

Array.prototype.find()用法简介

作者: zhouqichao | 来源:发表于2018-05-05 15:14 被阅读21次

用法简介:

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)

只需一行代码搞定!

参考文档:

  1. Array.prototype.find() | MDN

相关文章

  • Array.prototype.find()用法简介

    用法简介: find()方法会返回满足条件的第一个元素,如果没有,则返回undefined 开发背景: 实际开发中...

  • Semaphore 原理简介和使用

    Semaphore实现共享锁 简介 DEMO了解其用法 Semaphore实现互斥锁 简介 DEMO了解其用法 S...

  • GCD用法简介

    GCD用法 GCD Dispatch Queue介绍 苹果官方对GCD的说明:开发者要做的只是定义想执行的任务并追...

  • Postman用法简介

    Postman用法简介-Http请求模拟工具 在我们平时开发中,特别是需要与接口打交道时,无论是写接口还是用接口,...

  • Markdown用法简介

    记录基本的用法,大部分从网上摘取,纯粹用语个人学习记录,几本上可以搞定一般的编辑功能,如果需要全面掌握,请参考官方...

  • pydoc用法简介

    python中pydoc模块可以从python代码中获取docstring,然后生成帮助信息。 纯文本帮助 win...

  • pydoc用法简介

    转发:https://www.jianshu.com/p/af8eabb43cb8 python中pydoc模块可...

  • SPI用法简介

    spi是Service Provider Interface的缩写。使用spi技术可以通过修改配置的方式,更换程序...

  • curl 用法简介

    [TOC] 简介 curl is a tool to transfer data from or to a ...

  • setTimeout用法简介

    setTimeout运行原理 先观察以下代码 上述代码的结果是: 以上结果表明几个现象: 1.定时任务在非定时任务...

网友评论

    本文标题:Array.prototype.find()用法简介

    本文链接:https://www.haomeiwen.com/subject/xexerftx.html