游乐游手机版
首页/前端开发/文章详情

如何在 JavaScript 中遍历二维数组并基于另一数组进行存在性标记

时间:2026-04-27 20:25
如何在 Ja vaScript 中遍历二维数组并基于另一数组进行存在性标记 本文介绍如何高效地遍历一个包含货币代码与数值的二维数组,根据另一个货币代码数组判断每个条目是否匹配,并在原数组每项末尾追加 1(存在)或 0(不存在)。 本文介绍如何高效地遍历一个包含货币代码与数值的二维数组,根据另一个货币

如何在 Ja vaScript 中遍历二维数组并基于另一数组进行存在性标记

本文介绍如何高效地遍历一个包含货币代码与数值的二维数组,根据另一个货币代码数组判断每个条目是否匹配,并在原数组每项末尾追加 1(存在)或 0(不存在)。

本文介绍如何高效地遍历一个包含货币代码与数值的二维数组,根据另一个货币代码数组判断每个条目是否匹配,并在原数组每项末尾追加 1(存在)或 0(不存在)。

如何在 Ja vaScript 中遍历二维数组并基于另一数组进行存在性标记

处理结构化数据时,一个常见的需求是为数据打上“标签”。比如,你手头有一组币种汇率数据,像 `[["USD", 1.0], ["EUR", 0.92]]` 这样的二维数组,现在需要根据一个目标货币列表,给每条记录快速标上“是否在目标列表中”。这个操作看似简单,但选对方法,能让你代码的效率和可读性都上一个台阶。

接下来,我们看看两种在 Ja vaScript 中实现此功能的专业方案:一种是生成新数组(推荐,更安全、更符合函数式理念),另一种是直接修改原数组。每种方案都有其适用场景,理解背后的权衡是关键。

✅ 方案一:使用 map() 创建新数组(推荐)

首选方案是利用 `Array.prototype.map()` 方法。它的好处是生成全新的数组,不触碰原始数据,这避免了因副作用引发的潜在 bug,也让逻辑更清晰、更易于测试。配合 ES6 的解构语法和一些小技巧,一行代码就能搞定。

const a = [
  ["AED", 1],
  ["AFN", 22.08086],
  ["ALL", 27.171554],
  ["AMD", 105.058803],
  ["ANG", 0.487406],
  ["AOA", 227.493716],
  ["ARS", 95.308373],
  ["AUD", 0.420237],
  ["AWG", 0.487406],
  ["AZN", 0.462914],
  ["BAM", 0.490727],
  ["BBD", 0.544588]
];
const b = ["AED", "AFN", "AMD"];

const result = a.map(([code, ...rest]) => [code, ...rest, +b.includes(code)]);
console.log(result);
// 输出:[["AED",1,1],["AFN",22.08086,1],["ALL",27.171554,0],...,["BBD",0.544588,0]]
  • `([code, ...rest])`:这里用解构提取每个子数组的首个元素(货币代码)和其余所有值,写法非常简洁。
  • `b.includes(code)`:判断当前货币代码是否存在于数组 `b` 中,返回 `true` 或 `false`。
  • `+` 运算符:这里有个小技巧,在布尔值前加一个 `+` 号,能将其快速转换为数字 1 (`true`) 或 0 (`false`)。这种写法比 `Number()` 或三元表达式 `? 1 : 0` 更简短,性能上也略优。

✅ 方案二:使用 forEach() 就地修改(谨慎使用)

在某些特定情况下,比如你希望复用原数组的引用(在 Vue 的响应式系统中,直接修改可能更高效),或者出于内存考虑不希望产生新数组,可以使用 `forEach()` 直接修改。

a.forEach(item => item.push(+b.includes(item[0])));

⚠️ 需要注意什么?

立即学习“Ja va免费学习笔记(深入)”;

  • 这个操作会直接改变原始数组 `a`。如果代码其他地方还依赖 `a` 的原始结构,就可能引发难以预料的问题。
  • 尤其在 React 的 state 或 Vuex 的 store 这类受控状态中,直接修改是大忌。稳妥的做法是先进行深拷贝,例如 `[...a.map(x => [...x])]`,然后再操作副本。
  • 性能上,`b.includes()` 是线性查找。如果 `b` 这个目标数组很大(比如超过一百个元素),每次查找都会遍历一遍,开销不小。这时,一个简单的优化是预先把 `b` 转换成 `Set`:
const bSet = new Set(b); // 构建一次,多次查询
// 后续使用 bSet.has(code) 替代 b.includes(code)

这样一来,查找复杂度就从 O(n) 降到了近乎 O(1),在处理大规模数据时效果显著。

? 总结

  • 首选方案`map() + 解构 + +includes()`。这套组合拳表达力强,遵循不可变数据原则,代码清晰且易于维护,兼容主流的 ES6+ 环境。
  • 避免手动 `for` 循环:虽然可行,但代码冗长且容易出错,现代 Ja vaScript 的声明式方法几乎总能提供更好的选择。
  • 牢记不可变性:在绝大多数场景下,生成新数组都比修改原数组更安全。这是一个重要的编程实践。
  • 性能锦囊:当作为参照的数组规模较大时,务必记得将其转为 `Set` 来提升匹配效率。

掌握以上两种方法,你就能游刃有余地应对各类需要对多维数组进行条件标记的场景,无论是汇率映射、权限校验,还是配置开关,都能写出既高效又健壮的代码。

来源:https://www.php.cn/faq/2301571.html
上一篇h1到h6怎么合理使用_标题层级最佳实践【技巧】 下一篇CSS如何制作加载中的转圈动画_通过旋转关键帧实现效果
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
HTML双英雄图精准居中与并排对齐实战指南
前端开发 · 2026-07-04

HTML双英雄图精准居中与并排对齐实战指南

本文详解如何使用CSS Flexbox将两个英雄图在页面中水平居中、等高对齐,并保持50px间距,解决justify-content align-items单独作用于子元素无效的问题。 想让两个视觉冲击力十足的英雄图在首页并排居中,是提升首屏吸引力的经典设计。但很多开发者都踩过同一个坑:直接在 `

Flexbox实现div水平垂直居中的方法
前端开发 · 2026-07-04

Flexbox实现div水平垂直居中的方法

使用 Flexbox 实现 div 的水平垂直居中,推荐在父容器上设置 display: flex,并配合 justify-content: center(控制主轴居中)与 align-items: center(控制交叉轴居中),同时确保父容器拥有明确高度,例如 min-height: 100vh

React循环中正确管理多个独立Modal实例的方法
前端开发 · 2026-07-04

React循环中正确管理多个独立Modal实例的方法

在 React 开发中,我们常常会遇到这样的场景:需要在一个列表循环里渲染多个弹窗(Modal)。如果处理不当,点击任何一个按钮,都会导致所有的弹窗同时打开或关闭,这显然不是我们想要的效果。问题的根源在于状态管理:当多个 Modal 实例共享同一份控制其显示隐藏的状态时,它们的行为就被捆绑在了一起。

鼠标滚动切换图片与7秒无操作自动轮播完整教程
前端开发 · 2026-07-04

鼠标滚动切换图片与7秒无操作自动轮播完整教程

本文介绍如何结合鼠标滚轮交互与定时器机制,实现图片在用户滚动时手动切换、7秒无操作后自动轮播的双重功能,并提供可复用、多实例支持的现代化 JavaScript 解决方案。 在网页开发中,图片轮播组件虽然常见,但许多实现方案在用户体验上仍存遗憾。例如,完全依赖用户滚动切换的轮播,当用户停止操作专注查看

输入新城市自动清除旧天气数据实现方法
前端开发 · 2026-07-04

输入新城市自动清除旧天气数据实现方法

本文详解如何借助 JavaScript 在用户切换查询城市时,自动清空先前展示的天气信息,避免新旧数据混杂叠加,从而优化单页应用的交互体验。 在基于 OpenWeather API 打造天气查询工具时,很多开发者都会遇到一个颇为棘手的小问题:用户查完一个城市后,紧接着输入另一个城市名称,页面上新旧天