前端面试题17(js快速检索方法详解)

在这里插入图片描述
在前端JavaScript中,快速检索数据通常涉及到数组或对象的搜索。这里我会介绍几种常见的快速检索方法,并提供相应的代码示例。

1. 数组的findfindIndex方法

  • find: 返回数组中满足条件的第一个元素的值。
  • findIndex: 返回数组中满足条件的第一个元素的索引。
const array = [5, 12, 8, 130, 44];// 使用find查找值为130的元素
const foundValue = array.find(element => element === 130);
console.log(foundValue); // 输出: 130// 使用findIndex查找值为130的元素的索引
const foundIndex = array.findIndex(element => element === 130);
console.log(foundIndex); // 输出: 3

2. 对象的键值对检索

  • 直接访问: 如果你知道键名,可以直接通过键名获取值。
  • Object.keys/Object.values/Object.entries: 可以用来遍历对象的键、值或键值对进行检索。
const obj = {name: "Alice", age: 30, job: "Engineer"};// 直接访问
console.log(obj.name); // 输出: Alice// 遍历键值对查找
for(const [key, value] of Object.entries(obj)) {if(value === "Engineer") {console.log(`Key for 'Engineer' is: ${key}`);}
}

3. 二分查找(适用于已排序数组)

二分查找是一种在有序数组中查找特定元素的高效算法,其时间复杂度为O(log n)。

function binarySearch(sortedArray, target) {let left = 0;let right = sortedArray.length - 1;while (left <= right) {const mid = Math.floor((left + right) / 2);if (sortedArray[mid] === target) {return mid; // 找到目标值,返回索引} else if (sortedArray[mid] < target) {left = mid + 1; // 调整左边界} else {right = mid - 1; // 调整右边界}}return -1; // 没有找到目标值
}const sortedArray = [1, 3, 5, 7, 9];
const target = 5;
const index = binarySearch(sortedArray, target);
console.log(index !== -1 ? `Found at index: ${index}` : "Not found");

4. 使用Set进行唯一性检查

Set是ES6引入的一种新的数据结构,类似于数组,但成员的值都是唯一的,可以用来快速判断一个元素是否存在于集合中。

const uniqueValues = new Set([1, 2, 3, 4, 5]);console.log(uniqueValues.has(3)); // 输出: true
console.log(uniqueValues.has(6)); // 输出: false

以上就是一些前端JavaScript中常用的快速检索方法,根据具体需求选择合适的方法可以提高代码的效率和可读性。

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

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

相关文章

【mindspore进阶】02-ResNet50迁移学习

Mindspore 应用&#xff08;2&#xff09;ResNet50迁移学习 在实际应用场景中&#xff0c;由于训练数据集不足&#xff0c;所以很少有人会从头开始训练整个网络。普遍的做法是&#xff0c;在一个非常大的基础数据集上训练得到一个预训练模型&#xff0c;然后使用该模型来初始化…

张量分解(2)——张量运算(内积、外积、直积、范数)

&#x1f345; 写在前面 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;这里是hyk写算法了吗&#xff0c;一枚致力于学习算法和人工智能领域的小菜鸟。 &#x1f50e;个人主页&#xff1a;主页链接&#xff08;欢迎各位大佬光临指导&#xff09; ⭐️近…

MATLAB贝叶斯线性回归模型案例

采用辛烷值数据集“spectra_data.mat”&#xff08;任意数据集均可&#xff09;&#xff0c;介绍贝叶斯线性回归模型的构建和使用流程。 运行结果如下&#xff1a; 训练集预测精度指标如下: 训练集数据的R2为: 1 训练集数据的MAE为: 0.00067884 训练集数据的RMSE为: 0.0008893…

STM32点灯闪烁

stm32c8t6引脚图 开发板引脚图 GPIO端口的每个位可以由软件分别配置成 多种模式。 ─ 输入浮空 ─ 输入上拉 ─ 输入下拉 ─ 模拟输入 ─ 开漏输出 ─ 推挽式输出 ─ 推挽式复用功能 ─ 开漏复用功能 配置GPIO端口步骤&#xff1a;开启时钟->使用结构体设置输出模式…

水仙花数算法

一、水仙花的传说 希腊神话故事 传说希腊神话里&#xff0c;美少年纳西索斯&#xff08;Narcissus&#xff09;是希腊最俊美的男子&#xff0c;无数的少女对他一见倾心&#xff0c;可他却自负地拒绝了所有的人。这当中包括美丽的山中仙女伊可&#xff08;Echo&#xff09;。伊可…

分享一些提升效率的办公、学习神器!

分享一些提升效率的办公、学习神器&#xff01; 文章目录 分享一些提升效率的办公、学习神器&#xff01; 一、 ✅ 文件搜索工具 Everything&#xff1a;1.1 Everything 主要功能&#xff1a;1.2 Everything 下载地址&#xff1a; 二、 ✅ 文件压缩解压工具 7 - Zip&#xff1a…

AI免费英语学习在线工具:Pi;gpt;其他大模型AI 英语学习智能体工具

1、pi(强烈推荐&#xff1a;可以安卓下载使用) https://pi.ai/talk &#xff08;网络国内使用方便&#xff09; 支持实时聊天与语音对话 2、chatgpt&#xff08;强烈推荐&#xff1a;可以安卓下载使用) https://chat.openai.com/ &#xff08;网络国内使用不方便&#xf…

C++初学者指南-4.诊断---valgrind

C初学者指南-4.诊断—Valgrind Valgrind&#xff08;内存错误检测工具&#xff09; 检测常见运行时错误 读/写释放的内存或不正确的堆栈区域使用未初始化的值不正确的内存释放&#xff0c;如双重释放滥用内存分配函数内存泄漏–非故意的内存消耗通常与程序逻辑缺陷有关&#xf…

Halcon 背景网格产品刮伤缺陷检测

* 关闭窗口 dev_close_window ()*关闭程序计数器,图形变量更新,窗口图形更新 dev_update_off ()*设置图像路径 Path : lcd/mura_defects_blur_*读取一张图像 read_image (Image, Path 01)*获取图像大小 get_image_size (Image, Width, Height)*创建一个新窗体 dev_open_window…

Apache Seata应用侧启动过程剖析——注册中心与配置中心模块

本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 Apache Seata应用侧启动过程剖析——注册中心与配置中心模块 前言 在Seata的应用侧&#xf…

强化训练:day13(牛牛冲钻五、最长无重复子数组、重排字符串)

文章目录 前言1. 牛牛冲钻五1.1 题目描述1.2 解题思路1.3 代码实现 2. 最长无重复子数组2.1 题目描述2.2 解题思路2.3 代码实现 3. 重排字符串3.1 题目描述3.2 解题思路3.3 代码实现 总结 前言 1. 牛牛冲钻五   2. 最长无重复子数组   3. 重排字符串 1. 牛牛冲钻五 1.1 题…

llama2阅读: logits是什么?

Logits是一个在深度学习中&#xff0c;几乎一直都有的概念&#xff0c;它意味着模型unnormalized final scores. 然后你可以通过softmax得到模型针对你class的概率分布。 而在llama2的代码中&#xff0c;同样有logits的使用&#xff0c;那么针对llama2&#xff0c;logits的作用…

Sequelize 操作 MySQL 数据库

安装 npm install --save sequelize安装驱动程序&#xff1a; npm install --save mysql2连接到数据库 要连接到数据库,必须创建一个 Sequelize 实例. 这可以通过将连接参数分别传递到 Sequelize 构造函数或通过传递一个连接 URI 来完成&#xff1a; const {Sequelize} re…

Canal架构以及使用规范

Canal架构以及使用规范 一、Canal的作用 相关文档&#xff1a;GitHub - alibaba/canal: 阿里巴巴 MySQL binlog 增量订阅&消费组件 MySQL主备复制原理 MySQL master 将数据变更写入二进制日志( binary log, 其中记录叫做二进制日志事件binary log events&#xff0c;可…

Gitlab代码管理工具安装配置

前言&#xff1a; 没有真正的证书与域名建议使用httpip的方式在内网使用&#xff0c;不建议使用假的域名地址 一、安装前配置 #更改主机域名 hostnamectl set-hostname gitlab.dome.com bash #配置hosts 底部添加下面内容 vim /etc/hosts ############################ ip gi…

Stowaway搭建隧道打CFS内网靶场

目录 渗透带出主机阶段 先把我们的服务端上传到kali ​先把我们的客户端上传到目标机 客户端去连接我们的kali机端口去上线 出现admin&#xff0c;上线成功 detail相当于msf的sessions​ 和msf差不多功能&#xff0c;但是我们用它主要是搞隧道代理 抓发的 ​开启socks…

[终端安全]-4 移动终端之硬件架构安全

1 移动终端硬件架构 上图图展示了典型移动终端硬件架构&#xff0c;包括应用处理器&#xff08;AP&#xff09;、基带处理器&#xff08;BP&#xff09;以及各类共享组件和外设&#xff0c;所有组件通过AXI总线&#xff08;和APB桥&#xff09;连接在一起。以下分别介绍基于整…

HTML+CSS+JavaScript入门学习

目录 1. 前言2. HTML2.1 HTML简介2.2 HTML标签 3. CSS3.1 CSS知识整理及总结3.2 CSS之flex布局 4. JavaScript4.1 JavaScript知识整理及总结1-基础篇4.2 JavaScript知识整理及总结2-进阶篇 1. 前言 本文主要采用转载的形式&#xff0c;偶尔发现了一个比较不错的博客站点&#…

WPS+Python爬取百度之星排名

运行效果 手动拉取 https://www.matiji.net/exam/contest/contestdetail/146 如果手动查找&#xff0c;那么只能通过翻页的方式&#xff0c;每页10行&#xff08;外加一行自己&#xff09;。 爬取效果预览 本脚本爬取了个人排名和高校排名&#xff0c;可以借助WPS或MS Offi…

华为OSPF配置DR和BDR与指定DR

基础配置 <Huawei>sys #进入配置模式 Enter system view, return user view with CtrlZ. [Huawei]un in en #关闭报文弹窗 Info: Information center is disabled. [Huawei]sys R1 #设备名更改为R1 [R1]int g0/0/0 …