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

首页

前端开发

热心网友

转载

2026-04-27

如何在 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

免责声明：游乐网为非赢利性网站，所展示的游戏/软件/文章内容均来自于互联网或第三方用户上传分享，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系youleyoucom@outlook.com。

上一篇：h1到h6怎么合理使用_标题层级最佳实践【技巧】下一篇：CSS如何制作加载中的转圈动画_通过旋转关键帧实现效果