JavaScript数组替换:如何根据第二个数组的值匹配并替换第一个数组中的数据?

javascript数组替换:如何根据第二个数组的值匹配并替换第一个数组中的数据?

JavaScript数组数据匹配替换详解

本文介绍如何使用JavaScript高效地比较和替换两个数组中的数据。 具体问题是:根据第二个数组(arr2)的值,匹配并替换第一个数组(arr1)中特定字段(sk.value)的数据。

问题场景

假设我们有两个数组:

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

arr1:

let arr1 = [  {    sk: [      { name: '数据1', value: '200' },      { name: '数据2', value: '300' },      { name: '数据3', value: '400' },    ],  },  {    sk: [      { name: '数据5', value: '500' },      { name: '数据6', value: '600' },      { name: '数据7', value: '700' },    ],  },];

arr2:

let arr2 = {  name: '数据555',  val: [200, 300, 500],};

目标是:如果arr1.sk.value的值存在于arr2.val中,则将对应的arr1.sk.name替换为arr2.name。

解决方案

以下JavaScript代码实现了该功能:

let result = arr1.map(item => {  if (item.sk && item.sk.length > 0) {    item.sk = item.sk.map(k => {      if (arr2.val.includes(parseInt(k.value))) {        return { ...k, name: arr2.name };      }      return k;    });  }  return item;});

代码说明

这段代码使用了嵌套的map()方法:

外层map()遍历arr1中的每个对象。if (item.sk && item.sk.length > 0) 检查item.sk是否存在且不为空,避免错误。内层map()遍历每个对象中的sk数组。arr2.val.includes(parseInt(k.value)) 检查k.value (转换为整数) 是否存在于arr2.val中。return { ...k, name: arr2.name }; 使用展开语法(...k)创建新的对象,并更新name属性。return k; 如果value不在arr2.val中,则保持原样。

结果

执行后,result数组将变为:

[  {    sk: [      { name: '数据555', value: '200' },      { name: '数据555', value: '300' },      { name: '数据3', value: '400' },    ],  },  {    sk: [      { name: '数据555', value: '500' },      { name: '数据6', value: '600' },      { name: '数据7', value: '700' },    ],  },];

关键步骤总结

使用map()方法高效遍历数组。使用includes()方法进行值匹配。使用展开语法(...)创建新的对象并更新属性,避免修改原数组。添加空数组检查避免错误。

这个改进后的解决方案更简洁、高效,并且避免了潜在的错误。 它也更符合函数式编程的思想,避免了直接修改原数组。

以上就是JavaScript数组替换:如何根据第二个数组的值匹配并替换第一个数组中的数据?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1502637.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 00:53:34
Iframe跨域访问子页面LocalStorage失败怎么办?
下一篇 2025年12月20日 00:53:50

相关推荐

  • Java加密输出长度优化:应对API 100字符限制的策略与实践

    Java加密输出长度优化:应对API 100字符限制的策略与实践Java加密输出长度优化:应对API 100字符限制的策略与实践Java加密输出长度优化:应对API 100字符限制的策略与实践Java加密输出长度优化:应对API 100字符限制的策略与实践

    本文探讨在Java中实现文本加密时,如何应对输出密文长度不超过100字符的严格限制。我们将深入理解加密算法的本质,分析其非压缩特性及额外开销,并提供一系列实用的优化策略,包括前置数据压缩、最小化加密开销、高效密文表示以及协议层面的分段传输,旨在帮助开发者在满足安全需求的同时,符合特定的API长度约束…

    2026年9月26日 • 用户投稿
    000
  • 为什么视频流媒体需要特定编码格式?

    为什么视频流媒体需要特定编码格式?为什么视频流媒体需要特定编码格式?为什么视频流媒体需要特定编码格式?为什么视频流媒体需要特定编码格式?

    视频流媒体需特定编码格式,因其能高效压缩原始视频数据并确保跨设备兼容。编码格式通过去除冗余信息,在保证画质前提下显著降低码率,提升传输效率。H.264、H.265、AV1等标准支持自适应比特率(ABR)流媒体,实现不同网络条件下流畅播放。同时,编码格式影响画质表现、色彩深度、HDR支持及音频优化,兼…

    2026年9月26日 • 用户投稿
    000
  • 苹果激活日期怎么看

    苹果激活日期怎么看苹果激活日期怎么看苹果激活日期怎么看苹果激活日期怎么看

    要查看 Apple 设备的激活日期:通过 Apple 支持网站输入设备序列号。使用 iPhone 或 iPad 的“设置”应用程序,转到“通用”>“关于”。对于 Mac,在终端中输入命令:“system_profiler SPHardwareDataType | grep Activation…

    2026年9月26日 • 用户投稿
    000
  • 在淘宝遇到售卖假货的情况应如何申诉处理?申诉时需要提供哪些材料?申诉正确的步骤。

    在淘宝遇到售卖假货的情况应如何申诉处理?申诉时需要提供哪些材料?申诉正确的步骤。在淘宝遇到售卖假货的情况应如何申诉处理?申诉时需要提供哪些材料?申诉正确的步骤。在淘宝遇到售卖假货的情况应如何申诉处理?申诉时需要提供哪些材料?申诉正确的步骤。在淘宝遇到售卖假货的情况应如何申诉处理?申诉时需要提供哪些材料?申诉正确的步骤。

    在淘宝这个庞大的电商环境中购物,虽然大多数时候我们能体验到便利与实惠,但有时也不可避免地会遇到售卖假货的问题。这不仅侵犯了消费者的合法权益,也扰乱了正常的市场秩序。一旦发现所购商品为假货,我们不应选择沉默,而应主动维权、及时申诉。那么,在淘宝上遭遇售假时该如何进行申诉?又需要准备哪些材料呢?掌握这些…

    2026年9月26日 • 用户投稿
    000
  • Debian如何回收日志文件

    Debian如何回收日志文件Debian如何回收日志文件Debian如何回收日志文件Debian如何回收日志文件

    Debian系统的日志文件通常存储在/var/log目录下。为了有效管理这些日志文件,避免占用过多磁盘空间,您可以采用以下方法进行清理或压缩: 方法一:使用logrotate工具 Debian系统内置了logrotate工具,它能够自动管理日志文件的轮转、压缩和删除。其配置文件位于/etc/logr…

    2026年9月26日 • 用户投稿
    000
  • 《绝地潜兵2》新更新Into the Unjust将于9月2日上线

    《绝地潜兵2》新更新Into the Unjust将于9月2日上线《绝地潜兵2》新更新Into the Unjust将于9月2日上线《绝地潜兵2》新更新Into the Unjust将于9月2日上线《绝地潜兵2》新更新Into the Unjust将于9月2日上线

    Arrowhead Game Studios正式公布,其热门多人合作射击游戏《绝地潜兵2》即将迎来重磅更新——“Into the Unjust”,该更新定于9月2日正式上线,将带来全新的虫巢地图及其他丰富内容,备受玩家期待。 ·“Into the Unjust”更新亮点一览: 新增以攻占米尼德组织总…

    2026年9月26日 • 用户投稿
    100
  • Yii框架的常见错误与解决办法

    在开发web应用程序时,yii框架是一个非常流行的选择。但是与任何技术一样,使用yii框架时,您可能会遇到一些常见错误。在本文中,我们将介绍yii框架的一些常见错误以及解决办法。 数据库连接错误 这可能是Yii框架中最常见的错误之一。错误消息通常是:“数据库连接失败”或类似消息。这个错误通常是由于数…

    用户投稿 2026年9月26日
    000
  • thinkphp5中如何判断是否为ajax请求

    thinkphp5中如何判断是否为ajax请求thinkphp5中如何判断是否为ajax请求thinkphp5中如何判断是否为ajax请求thinkphp5中如何判断是否为ajax请求

    打开thinkphp5的项目文件。 为这个程序添加注释内容。 立即学习“PHP免费学习笔记(深入)”; 相关推荐:《ThinkPHP教程》 新建一个方法isajax。 引入request对象。 PatentPal专利申请写作 AI软件来为专利申请自动生成内容 13 查看详情 通过isAax方法判断是…

    2026年9月26日 • 用户投稿
    000
  • 在哪里查看iCloud储存空间_iCloud储存空间查看方法与入口介绍

    在哪里查看iCloud储存空间_iCloud储存空间查看方法与入口介绍在哪里查看iCloud储存空间_iCloud储存空间查看方法与入口介绍在哪里查看iCloud储存空间_iCloud储存空间查看方法与入口介绍在哪里查看iCloud储存空间_iCloud储存空间查看方法与入口介绍

    iCloud同步变慢通常因存储接近上限,可通过iPhone、iPad、Mac、Windows或iCloud.com查看使用情况。1、在iOS设备中进入“设置”-“Apple ID”-“iCloud”-“管理储存空间”查看各应用占用;2、在Mac上通过“系统设置”-“Apple ID”-“iCloud…

    2026年9月26日 • 用户投稿
    000
  • windows提示“无法定位程序输入点”是什么原因 “无法定位程序输入点”的原因及解决方法

    windows提示“无法定位程序输入点”是什么原因 “无法定位程序输入点”的原因及解决方法windows提示“无法定位程序输入点”是什么原因 “无法定位程序输入点”的原因及解决方法windows提示“无法定位程序输入点”是什么原因 “无法定位程序输入点”的原因及解决方法windows提示“无法定位程序输入点”是什么原因 “无法定位程序输入点”的原因及解决方法

    首先检查程序与系统的兼容性,尝试设置兼容模式运行;接着安装或修复Microsoft Visual C++ Redistributable;更新Windows系统以获取最新DLL支持;使用sfc /scannow修复系统文件或手动注册缺失DLL;最后重新安装问题程序以确保完整性。 如果您在运行某个程序…

    2026年9月26日 • 用户投稿
    000
  • MySQL数据库中性别字段应该使用什么数据类型?

    MySQL数据库中性别字段应该使用什么数据类型?MySQL数据库中性别字段应该使用什么数据类型?MySQL数据库中性别字段应该使用什么数据类型?MySQL数据库中性别字段应该使用什么数据类型?

    在MySQL数据库中,性别字段通常可以使用ENUM类型来存储。ENUM是一种枚举类型,它允许我们在一组预定义的值中选择一个作为字段的值。在表示性别这样一个固定且有限的选项时,ENUM是一个很好的选择。 让我们来看一个具体的代码示例: 假设我们有一个名为”users”的表,其中…

    2026年9月26日 • 用户投稿
    200
  • sublime怎么清除最近打开的文件历史_sublime删除历史记录的方法

    sublime怎么清除最近打开的文件历史_sublime删除历史记录的方法sublime怎么清除最近打开的文件历史_sublime删除历史记录的方法sublime怎么清除最近打开的文件历史_sublime删除历史记录的方法sublime怎么清除最近打开的文件历史_sublime删除历史记录的方法

    答案:清除Sublime Text最近文件历史需删除或编辑Session.sublime_session文件。首先根据系统进入Local目录,找到Session.sublime_session文件;关闭Sublime后可直接删除该文件或用文本编辑器清空”recent_files&#822…

    2026年9月26日 • 用户投稿
    100
  • 线性代数中的满射:它与“满秩”有何关系?

    线性代数中的满射:它与“满秩”有何关系?线性代数中的满射:它与“满秩”有何关系?线性代数中的满射:它与“满秩”有何关系?线性代数中的满射:它与“满秩”有何关系?

    满射与满秩的关系取决于矩阵维度:当行数m≤列数n时,满秩(rank=min(m,n)=m)等价于满射(rank=m);当m>n时,满秩(rank=n)无法满足满射(需rank=m),故不等价。 线性代数中,一个线性变换如果是“满射”,意味着它的像(输出空间)能够完全覆盖其协同域。而矩阵的“满秩…

    2026年9月26日 • 用户投稿
    100
  • thinkphp模块不存在怎么解决

    thinkphp模块不存在怎么解决thinkphp模块不存在怎么解决thinkphp模块不存在怎么解决thinkphp模块不存在怎么解决

    thinkphp模块不存在怎么解决? 解决方案: 1.在applicationCommonController目录下添加“EmptyBaseController.class.php”文件。     <?php/***@Author:HTL*@Email:Huangyuan413026@163.…

    2026年9月26日 • 用户投稿
    000
  • GitLab在Debian中的最佳实践

    在debian系统中安装和配置gitlab时,遵循以下最佳实践可以帮助确保系统的稳定性、安全性和高效性: 安装前的准备工作 更新系统包: sudo apt-get update 安装必要的依赖项: sudo apt-get install -y curl openssh-server ca-cert…

    2026年9月26日
    000
  • 如何查看苹果激活日期年月日

    如何查看苹果激活日期年月日如何查看苹果激活日期年月日如何查看苹果激活日期年月日如何查看苹果激活日期年月日

    苹果激活日期可通过以下方式查询:通过「iPhone 激活」网站,输入序列号或 IMEI/MEID。通过 iTunes 连接设备,在「概述」选项卡中查看激活日期。通过苹果支持网站,输入序列号后查看购买日期,即激活日期。 如何查看苹果激活日期年月日 方法一:通过「iPhone 激活」网站 前往苹果的「i…

    2026年9月26日 • 用户投稿
    000
  • Android应用中Activity间文件路径传递与PDF加载指南

    Android应用中Activity间文件路径传递与PDF加载指南Android应用中Activity间文件路径传递与PDF加载指南Android应用中Activity间文件路径传递与PDF加载指南Android应用中Activity间文件路径传递与PDF加载指南

    本文旨在解决Android应用中通过Intent在Activity间传递文件路径时常见的NullPointerException问题,尤其是在加载PDF文件场景。我们将深入分析导致此错误的原因,并提供两种安全有效的解决方案:使用getAbsolutePath()传递字符串路径,或利用Serializ…

    2026年9月26日 • 用户投稿
    1300
  • php数据库如何删除记录 php数据库DELETE操作的安全规范

    使用预处理语句可防止SQL注入,确保删除操作安全;应验证用户输入、检查ID合法性,避免直接拼接参数;通过权限校验确认数据归属,防止越权删除;建议采用软删除或二次确认机制,避免误删;DELETE必须包含WHERE条件,禁止无条件删除整表;结合事务与日志审计提升安全性。 在PHP中操作数据库删除记录时,…

    2026年9月26日
    000
  • LINUX的swap分区有什么用_LINUX下swap分区的作用与配置详解

    答案:Linux通过swap分区扩展内存,缓解内存不足问题。首先查看swap状态,使用swapon –show和free -h命令;若无足够swap,可用fallocate创建4G swap文件,设置权限为600,格式化为swap并启用;为实现开机自动挂载,需将/swapfile non…

    2026年9月26日
    100
  • 抖音店铺体验分什么时候更新?抖音店铺体验分没了怎么恢复

    抖音电商市场蓬勃发展,越来越多的商家纷纷加入其中。抖音店铺体验分作为衡量商家服务质量的重要指标,对商家在抖音平台的生存和发展至关重要。许多商家对于抖音店铺体验分的更新规律并不了解,导致无法及时调整经营策略。本文将带您揭秘抖音店铺体验分的更新规律,助力商家精准把握提升时机。 一、抖音店铺体验分更新规律…

    2026年9月26日
    100

发表回复

登录后才能评论
关注微信