深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解

目录

深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解

一、引言:为什么要使用Array.find()

二、Array.find()的使用与技巧

1、基础语法

2、返回值

3、使用技巧

三、Array.find()的优势与实际应用案例

1、利用返回引用的优势修改数据

2、查找嵌套数据

 3、动态条件查找

四、总结


作者:watermelo37

涉及领域:Vue、SpingBoot、Docker、LLM、python等

---------------------------------------------------------------------

温柔地对待温柔的人,包容的三观就是最大的温柔。

---------------------------------------------------------------------

深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解

一、引言:为什么要使用Array.find()

        在 JavaScript 中,Array.find 是一个高效且易用的数组查找方法。和其他遍历方法(如 Array.forEach 和 Array.filter)相比,Array.find 不仅能更简洁地找到符合条件的第一个元素,还具有一个重要的性能优势:它返回的元素是原数组中的引用。通过这个引用,我们可以直接修改原数组中的特定元素,使得代码更加简洁和高效。

        可以说,但凡需要修改数组数据中任何一个特定的元素,都可以使用Array.find()来实现,而且比任何其他方法都要更简单便捷。

        举个例子,如果要将数据中名为“Bob”的人的role修改为“admin”。

        用循环是这样的:

// forEach循环
users.forEach(user => {if (user.name === 'Bob') {user.role = 'admin';}
});// for循环
for (let i = 0; i < users.length; i++) {if (users[i].name === 'Bob') {users[i].role = 'admin';break; // 找到后退出循环}
}

         炫技偏门一点的可以使用filter或map等:

// 使用map方法
const updatedUsers = users.map(user => {if (user.name === 'Bob') {return { ...user, role: 'admin' };}return user;
});
// 现在 updatedUsers 包含更新后的数据,原 users 数组不变// 使用filter方法
const updatedUsers = users.filter(user => {if (user.name === 'Bob') {return { ...user, role: 'admin' };}return user;
});
// 现在 updatedUsers 包含更新后的数据,原 users 数组不变

        但是使用find就会特别清爽,简洁,如果确定Bob这个人存在,if判断也不需要了,更简单:

const bob = users.find(user => user.name === 'Bob');
if (bob) {bob.role = 'admin';
}// 如果确定Bob存在
const bob = users.find(user => user.name === 'Bob');
bob.role = 'admin';

        本文将深入探讨 Array.find 的工作原理和优势,展示各种实用场景,帮助大家更好地掌握这个强大的数组处理工具。

二、Array.find()的使用与技巧

1、基础语法

        Array.find() 方法用于遍历数组,返回第一个符合条件的元素。如果没有找到符合条件的元素,则返回 undefined。以下是其基本语法:

const result = array.find(callback(element[, index[, array]])[, thisArg]);

        其中callback 是一个函数,接收三个参数:

  • element:当前遍历的元素。
  • index(可选):当前元素的索引。
  • array(可选):调用 find 方法的数组。

        thisArg 可选,用作 callback 的 this 值。

2、返回值

        如果查找到对应的元素且该元素为对象或数组,返回的就是原数据中该元素的引用值。此时修改该元素,就会同步修改原数据中该元素的对应数值。

        如果数组的元素不是对象或数组?那用Array.find()函数干什么?为什么不直接用Array.includes()呢?

3、使用技巧

        可以说使用Array.find()函数的目的,就是为了修改数组中某个对象/数组元素中的值。“find”的目的是“修改”。如果是其他情形还是其他的Array方法更好用。

三、Array.find()的优势与实际应用案例

1、利用返回引用的优势修改数据

        与其他数组处理方法不同,Array.find() 返回的是原数组中的元素引用。借助这一特性,我们可以直接修改找到的元素的内容,且修改会同步到原数组。这是最基础的用法。

        假设我们有一个用户列表,需要更新特定用户的属性,Array.find() 是一个理想的选择。

const users = [{ id: 1, name: 'Alice', role: 'user' },{ id: 2, name: 'Bob', role: 'user' },
];const userToUpdate = users.find(user => user.id === 2);
if (userToUpdate) {userToUpdate.role = 'admin';
}console.log(users);
// 输出:[{ id: 1, name: 'Alice', role: 'user' }, { id: 2, name: 'Bob', role: 'admin' }]

        在库存管理中,我们可以使用 Array.find() 查找特定商品,并直接更新其数量或价格等信息,避免创建新的数组。

const inventory = [{ sku: 'A1', name: 'Widget', quantity: 100 },{ sku: 'B2', name: 'Gadget', quantity: 50 },
];const item = inventory.find(i => i.sku === 'B2');
if (item) {item.quantity += 20; // 增加数量
}console.log(inventory);
// 输出:[ { sku: 'A1', name: 'Widget', quantity: 100 }, { sku: 'B2', name: 'Gadget', quantity: 70 } ]

        Array.find() 的这种行为在处理需要更新的数组对象时尤其方便。通过引用,我们可以避免创建新的数组,减少内存消耗,并提高性能。

2、查找嵌套数据

        Array.find()可以与递归函数结合,用于嵌套对象数组的查找。

const categories = [{id: 1,name: 'Electronics',subcategories: [{ id: 2, name: 'Laptops' },{ id: 3, name: 'Phones' },],},{id: 4,name: 'Clothing',subcategories: [{ id: 5, name: 'Men' },{ id: 6, name: 'Women' },],},
];function findCategory(categories, id) {for (const category of categories) {if (category.id === id) return category;if (category.subcategories) {const found = findCategory(category.subcategories, id);if (found) return found;}}return null;
}console.log(findCategory(categories, 3)); // 输出:{ id: 3, name: 'Phones' }

 3、动态条件查找

        我们可以通过组合条件动态使用 Array.find(),实现灵活的数据查找。

const employees = [{ id: 1, name: 'Alice', department: 'HR', status: 'active' },{ id: 2, name: 'Bob', department: 'IT', status: 'inactive' },{ id: 3, name: 'Charlie', department: 'Sales', status: 'active' },
];function findEmployee(criteria) {return employees.find(emp => {return Object.keys(criteria).every(key => emp[key] === criteria[key]);});
}console.log(findEmployee({ department: 'IT', status: 'inactive' }));
// 输出:{ id: 2, name: 'Bob', department: 'IT', status: 'inactive' }

四、总结

        Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。

        在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。

        只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

        其他热门文章,请关注:

        你真的会使用Vue3的onMounted钩子函数吗?Vue3中onMounted的用法详解

        极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图

        通过array.filter()实现数组的数据筛选、数据清洗和链式调用

        el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能

        TreeSize:免费的磁盘清理与管理神器,解决C盘爆满的燃眉之急

        Dockerfile全面指南:从基础到进阶,掌握容器化构建的核心工具

        在线编程实现!如何在Java后端通过DockerClient操作Docker生成python环境

        MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver

        JavaScript中闭包详解+举例,闭包的各种实践场景:高级技巧与实用指南

        干货含源码!如何用Java后端操作Docker(命令行篇)

        Idea启动SpringBoot程序报错:Port 8082 was already in use;端口冲突的原理与解决方案

        PDF预览:利用vue3-pdf-app实现前端PDF在线展示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/63771.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker 安装 Jenkins:2.346.3

准备&#xff1a;已安装Docker&#xff0c;已配置服务器安全组规则 1581 1、拉取镜像 [rootTseng ~]# docker pull jenkins/jenkins:2.346.3 2.346.3: Pulling from jenkins/jenkins 001c52e26ad5: Pull complete 6b8dd635df38: Pull complete 2ba4c74fd680: Pull complet…

在 Linux 和 Windows 操作系统下查询局域网IP

以下分别介绍在 Linux 和 Windows 操作系统下进行局域网 IP 查询的常用方法及相应代码示例&#xff1a; Linux 系统——查询局域网 IP 使用 ifconfig 命令&#xff08;较旧但常用方式&#xff0c;在多数 Linux 发行版中可用&#xff09; ifconfig 命令可以用来查看网络接口的配…

web 自动化 selenium

1、下载Chrome对应的driver版本 我的chrome是 131.0.6778.109&#xff0c;我下载的driver是131.0.6778.69&#xff08;想找一模一样的&#xff0c;但是没有&#xff09; https://googlechromelabs.github.io/chrome-for-testing/ chromedriver下载 2、配置Chrome deriver及 …

opencv实现元素的图片坐标定位

桌面应用程序的UI自动化&#xff0c;除了解析应用层级控件外&#xff0c;还可以通过图片定位获取目标元素位置&#xff0c;对其进行点击、双击、滚动等操作。 python可用opencv库操作图片。 opencv安装 sudo apt install python-opencv 图片比对 import cv2 import pyautog…

Datawhale AI 冬令营(第一期)定制你的第一个专属模型-学习笔记

最近我报名参加了Datawhale组织的主题为“动手学系列&#xff0c;人人都能应用的AI”的Datawhale AI冬令营&#xff08;第一期&#xff09;。 本次学习一共12天&#xff0c;从12月10日-12月21日&#xff0c;学习会包含【跑通速通手册】&#xff0c;【学习大模型微调&数据集…

异常安全重启运行机制:健壮的Ai模型训练自动化

文章目录 前言一、热力图主函数代码1、正规N图热力图运行代码2、重新迭代循环求解方法 二、中断重启继续推理或训练1、封装含参主函数2、终止重启进程管理方法1、终止启动源码2、源码解读 三、终止启动主函数源码解读1、终止启动源码2、源码解读关键点解析 四、完整代码Demo1、…

Spring项目中常用的配置(含yml和properties)

MyBatis和数据库配置相关 yml&#xff1a; spring:application:name: Test # Spring项目名称,记得修改datasource:url: jdbc:mysql://127.0.0.1:3306/test?characterEncodingutf8&useSSLfalse # test为数据库名,记得修改username: root # 数据库用户名,记得修改password…

Redis01

springbootredis 特点 1.高效性 2.支持多种数据结构 String,list,set,hash.zset 3.稳定性&#xff1a;持久化&#xff0c;主从复制&#xff08;集群&#xff09; 4.其他特性&#xff1a;支持过期时间&#xff0c;支持事务&#xff0c;消息订阅。 安装 1.下载安装包 redis官…

【Unity】Amplify Shader Editor

Amplify Shader Editor (ASE) Amplify Shader Editor&#xff0c;是一个功能强大的基于节点的着色器开发工具&#xff0c;允许开发者在 Unity 中轻松创建和管理复杂的 Shader。 主要功能和特点 基于节点的编辑器&#xff1a; • 提供直观的可视化界面&#xff0c;减少手写 Sh…

Elasticsearch使用(2):docker安装es、基础操作、mapping映射

1 安装es 1.1 拉取镜像 docker pull swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/library/elasticsearch:7.17.3 1.2 运行容器 运行elasticsearch容器&#xff0c;挂载的目录给更高的权限&#xff0c;否则可能会因为目录权限问题导致启动失败&#xff1a; docker r…

scroll-view 实现滑动显示,确保超出正常显示,小程序app,h5兼容

在uniapp 开开发的项目中&#xff0c;滑动操作是很多的 1.在插件市场使用了几款插件&#xff0c;但是都不太好用&#xff0c;要么是 显示的tab 过多&#xff0c;滑动到最后一个&#xff0c;当前显示那个跑左边显示不全&#xff0c;要么是滑动到最后一个后面的无法自动滑动&…

SpringBoot Maven快速上手

文章目录 一、Maven 1.1 Maven 简介&#xff1a;1.2 Maven 的核心功能&#xff1a; 1.2.1 项目构建&#xff1a;1.2.2 依赖管理&#xff1a; 1.3 Maven 仓库&#xff1a; 1.3.1 本地仓库&#xff1a;1.3.2 中央仓库&#xff1a;1.3.3 私服&#xff1a; 二、第一个 SpringBoot…

funcaptcha 验证码逆向协议通过,算法实现

声明 本文章中所有内容仅供学习交流&#xff0c;抓包内容、敏感网址、数据接口均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff0c;若有侵权&#xff0c;请联系我立即删除&#xff01;

【C语言】浮点数的原理、整型如何转换成浮点数

众所周知C语言中浮点数占四个字节&#xff0c;无论在32位或者64位机器上。不免会发出疑问四个字节是怎么计算出小数的呢&#xff1f;其实物理存放还是按照整型存放的。 IEEE 754 单精度浮点数格式 浮点数在计算机中是使用 IEEE 754 标准进行表示的。在 IEEE 754 标准中&#…

善于运用指针--函数与指针

文章目录 前言一、函数的指针二、函数指针运用 1函数名地址2指针变量调用函数3指向函数的指针变量做函数参数二、返回指针值的函数总结 前言 如果在程序中定义了一个函数&#xff0c;在编译时会把函数的源代码转换为可执行代码并分配一段空间。这段空间有一个起始地址&#xf…

美图撕掉蔡文胜标签

卖掉比特币的美图不投机了。 作者|周立青 编辑|杨舟 12月5日&#xff0c;比特币突破10万美元大关&#xff0c;曾花费1亿美元购入虚拟货币的美图宣布已出售所有加密货币。 美图在港交所发布公告称&#xff0c;自2024年11月起&#xff0c;公司已开始出售其持有的加密货币&…

图片底部空白缝隙解决法方案(CSS)

当我想实现一个垂直轮播图时&#xff0c;图片底部会出现一个空白缝隙导致切换轮播图片显示不完整。 这里可以用两个方法解决 一、给图片添加(垂直对齐)vertical-align:baseline|middle|top; vertical-align属性的值可以是 &#xff08;1&#xff09;关键字值:baseline|midd…

win11 恢复任务栏copilot图标, 亲测有效

1、修改C:\Windows\System32\IntegratedServicesRegionPolicySet.json&#xff0c;解除中国不能使用copilot的限制。 使用Notepad搜索copilot全文搜索&#xff0c;将下面两处的“CN,”删除&#xff0c;删除后如下&#xff1a; {"$comment": "Show Copilot on t…

计算机相关知识

前言 提醒&#xff1a; 文章内容为方便作者自己后日复习与查阅而进行的书写与发布&#xff0c;其中引用内容都会使用链接表明出处&#xff08;如有侵权问题&#xff0c;请及时联系&#xff09;。 其中内容多为一次书写&#xff0c;缺少检查与订正&#xff0c;如有问题或其他拓展…

鹦鹉的饮食偏好:探索多彩的食物世界

鹦鹉&#xff0c;作为聪明且迷人的鸟类&#xff0c;其饮食习性一直是鸟类爱好者关注的焦点。了解鹦鹉喜欢吃什么食物&#xff0c;对于确保它们的健康与幸福至关重要。 鹦鹉的食物种类丰富多样&#xff0c;首先是各类种子与谷物。例如&#xff0c;葵花籽富含脂肪和蛋白质&#…