JavaScript:根据ID匹配并为数组对象添加新属性

javascript:根据id匹配并为数组对象添加新属性

本文介绍了如何使用 JavaScript 遍历包含 genre_ids 数组的电影对象数组,并根据 genres 数组中的 ID 匹配结果,为每个电影对象添加一个新的 genres 属性,该属性包含匹配到的 genre 名称数组。同时,可以选择删除原有的 genre_ids 属性。

实现方法

假设我们有两个数组:movies 和 genres。movies 数组中的每个对象都有一个 genre_ids 属性,它是一个包含数字 ID 的数组。genres 数组是一个包含对象,每个对象都有 id 和 name 属性的数组。我们的目标是遍历 movies 数组,并为每个电影对象添加一个 genres 属性,该属性是一个包含匹配到的 genre 名称的数组。

以下代码展示了如何实现这个目标:

const genres =  [    { id: 28, name: 'Action' },    { id: 12, name: 'Adventure' },    { id: 16, name: 'Animation' },    { id: 35, name: 'Comedy' },    { id: 80, name: 'Crime' },    { id: 99, name: 'Documentary' },    { id: 18, name: 'Drama' },    { id: 10751, name: 'Family' },    { id: 14, name: 'Fantasy' },]const movies = [ {    genre_ids: [ 16, 18, 12, 14 ],    title: 'Suzume',  }]movies.forEach((movie) => {  movie.genres = movie.genre_ids.map(    (id) => genres.find((genre) => id === genre.id).name  );  delete movie.genre_ids; // 可选:删除 genre_ids 属性});console.log(movies);

代码解释:

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

movies.forEach((movie) => { … }): 使用 forEach 方法遍历 movies 数组,对每个 movie 对象执行回调函数。

movie.genres = movie.genre_ids.map(…): 为当前 movie 对象创建一个新的 genres 属性。这个属性的值是通过 map 方法将 movie.genre_ids 数组中的每个 ID 转换为对应的 genre 名称而得到的。

(id) => genres.find((genre) => id === genre.id).name: map 方法的回调函数。它接受一个 id 作为参数,并使用 genres.find() 方法在 genres 数组中查找 id 与 genre.id 相等的对象。找到后,返回该对象的 name 属性。

delete movie.genre_ids: 可选步骤。删除每个 movie 对象中原有的 genre_ids 属性。如果需要保留 genre_ids 属性,可以省略此行代码。

输出结果:

执行上述代码后,movies 数组将变为:

[  {    "title": "Suzume",    "genres": [      "Animation",      "Drama",      "Adventure",      "Fantasy"    ]  }]

注意事项

确保 genres 数组中的每个对象都包含 id 和 name 属性,且 id 属性的值与 movies 数组中 genre_ids 数组中的值类型一致(都是数字)。如果 genres 数组中没有找到与 genre_ids 中 ID 匹配的项,genres.find() 方法将返回 undefined。在这种情况下,上面的代码会报错。为了避免这种情况,可以添加一个检查,确保 genres.find() 方法返回的值不是 undefined。例如:

movies.forEach((movie) => {  movie.genres = movie.genre_ids.map(    (id) => {      const genre = genres.find((genre) => id === genre.id);      return genre ? genre.name : null; // 或者其他默认值,比如 'Unknown'    }  );  delete movie.genre_ids;});

总结

本文提供了一种使用 JavaScript 根据 ID 匹配并为数组对象添加新属性的方法。通过使用 forEach、map 和 find 方法,我们可以轻松地遍历数组,查找匹配项,并根据匹配结果创建新的属性。这种方法可以应用于各种场景,例如将 ID 转换为名称、将代码转换为描述等等。记住,根据实际需求调整代码,并添加必要的错误处理,以确保代码的健壮性和可靠性。

以上就是JavaScript:根据ID匹配并为数组对象添加新属性的详细内容,更多请关注创想鸟其它相关文章!

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

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
动态链接文件下载:解决跨域与标签download属性失效问题
上一篇 2025年12月20日 19:33:20
动态链接文件下载:解决跨域重定向与程序化下载方案
下一篇 2025年12月20日 19:33:32

相关推荐

  • Java向上转型中可变参数方法调用的行为解析:重载与编译时绑定的深层机制

    Java向上转型中可变参数方法调用的行为解析:重载与编译时绑定的深层机制Java向上转型中可变参数方法调用的行为解析:重载与编译时绑定的深层机制Java向上转型中可变参数方法调用的行为解析:重载与编译时绑定的深层机制Java向上转型中可变参数方法调用的行为解析:重载与编译时绑定的深层机制

    本文深入探讨Java中向上转型、方法重载与可变参数(varargs)的交互机制。通过具体代码示例,详细解释了在向上转型场景下,为何编译器会基于引用变量的编译时类型来解析方法调用,即使子类存在看似更匹配的重载方法。核心在于方法重载是编译时决策,而可变参数在重载解析中具有较低的优先级。理解这些机制对于编…

    2026年9月25日 • 用户投稿
    000
  • Groovy编程:在HTTP请求头中传递授权令牌的实践指南

    Groovy编程:在HTTP请求头中传递授权令牌的实践指南Groovy编程:在HTTP请求头中传递授权令牌的实践指南Groovy编程:在HTTP请求头中传递授权令牌的实践指南Groovy编程:在HTTP请求头中传递授权令牌的实践指南

    本教程详细介绍了如何在Groovy中通过HTTP请求头发送授权令牌,以实现对RESTful API的安全访问。针对用户在Groovy中模拟curl -H ‘Authorization: token …’命令时遇到的常见问题,本文提供了基于java.net.URL和…

    2026年9月25日 • 用户投稿
    900
  • uc浏览器如何阻止网页自动播放视频_UC浏览器禁止视频自动播放设置

    uc浏览器如何阻止网页自动播放视频_UC浏览器禁止视频自动播放设置uc浏览器如何阻止网页自动播放视频_UC浏览器禁止视频自动播放设置uc浏览器如何阻止网页自动播放视频_UC浏览器禁止视频自动播放设置uc浏览器如何阻止网页自动播放视频_UC浏览器禁止视频自动播放设置

    1、可通过UC浏览器设置关闭自动播放:进入设置→网站管理→媒体自动播放,选择关闭;2、启用省流加速模式减少视频自动加载;3、使用隐私模式浏览限制脚本执行,阻止视频自动播放。 如果您在使用UC浏览器浏览网页时,遇到视频自动播放影响阅读体验的情况,可以通过调整浏览器设置来禁止此行为。自动播放功能通常由浏…

    2026年9月25日 • 用户投稿
    600
  • 通过索引访问 LinkedHashMap 的值

    通过索引访问 LinkedHashMap 的值通过索引访问 LinkedHashMap 的值通过索引访问 LinkedHashMap 的值通过索引访问 LinkedHashMap 的值

    通过索引访问 LinkedHashMap 的值 本文将探讨如何比较两个 LinkedHashMap 中具有相同键的值,并提供一种有效的解决方案。LinkedHashMap 是一种可以保持插入顺序的 Map 实现,但它并不支持像 List 那样通过索引直接访问元素。因此,当我们需要比较两个 Linke…

    2026年9月25日 • 用户投稿
    1200
  • 通过索引获取 LinkedHashMap 的值?解决方案与最佳实践

    通过索引获取 LinkedHashMap 的值?解决方案与最佳实践通过索引获取 LinkedHashMap 的值?解决方案与最佳实践通过索引获取 LinkedHashMap 的值?解决方案与最佳实践通过索引获取 LinkedHashMap 的值?解决方案与最佳实践

    本文旨在解决如何比较两个 LinkedHashMap 中具有相同键(chargeTypeName)的值的问题。由于 LinkedHashMap 本身不支持通过索引直接访问,文章将探讨如何利用流(Stream)和分组(Grouping)等技术,有效地找出两个 LinkedHashMap 中键相同的值对…

    2026年9月25日 • 用户投稿
    100
  • 使用 Jackson 进行复杂类的自定义反序列化

    使用 Jackson 进行复杂类的自定义反序列化使用 Jackson 进行复杂类的自定义反序列化使用 Jackson 进行复杂类的自定义反序列化使用 Jackson 进行复杂类的自定义反序列化

    本文介绍了如何使用 Jackson 库对包含复杂嵌套类的 JSON 字符串进行自定义反序列化。通过 ObjectMapper 的 readValue 方法可以实现简单场景下的自动反序列化。针对需要定制化处理的场景,可以结合 ObjectMapper 和自定义反序列化器来实现更灵活的反序列化逻辑,并提…

    2026年9月25日 • 用户投稿
    1000
  • p5.js WebGL性能优化:首帧渲染耗时长的原因与对策

    p5.js WebGL性能优化:首帧渲染耗时长的原因与对策p5.js WebGL性能优化:首帧渲染耗时长的原因与对策p5.js WebGL性能优化:首帧渲染耗时长的原因与对策p5.js WebGL性能优化:首帧渲染耗时长的原因与对策

    在使用p5.js的WEBGL渲染模式时,首次调用image()函数渲染图片或p5.Graphics对象通常会比后续调用耗时显著增加。这主要是因为第一次渲染时,p5.js需要将图像数据从CPU内存上传到GPU的纹理内存中,涉及内存分配和数据复制,这是一个相对耗时的过程。后续调用由于纹理已被缓存,可以直…

    2026年9月25日 • 用户投稿
    800
  • sublime怎么配置eslint进行js校验_sublime集成ESLint代码检查配置

    sublime怎么配置eslint进行js校验_sublime集成ESLint代码检查配置sublime怎么配置eslint进行js校验_sublime集成ESLint代码检查配置sublime怎么配置eslint进行js校验_sublime集成ESLint代码检查配置sublime怎么配置eslint进行js校验_sublime集成ESLint代码检查配置

    首先安装SublimeLinter和SublimeLinter-eslint插件,确保系统或项目中已安装ESLint;通过npx eslint –init生成配置文件;插件会自动调用项目内的eslint,若未识别可手动设置executable路径;保存JavaScript文件时即可实时显…

    2026年9月25日 • 用户投稿
    100
  • Java 8 使用 Stream API 扁平化嵌套 Map 并提取首个元素

    Java 8 使用 Stream API 扁平化嵌套 Map 并提取首个元素Java 8 使用 Stream API 扁平化嵌套 Map 并提取首个元素Java 8 使用 Stream API 扁平化嵌套 Map 并提取首个元素Java 8 使用 Stream API 扁平化嵌套 Map 并提取首个元素

    本文将详细介绍如何使用 Java 8 的 Stream API 将一个嵌套的 Map 结构进行扁平化处理,并从中提取所需的数据。 具体来说,我们将把 Map<Integer, Map<String, List>> 转换为 Map,其中新 Map 的键是原内部 Map 的键,值…

    2026年9月25日 • 用户投稿
    1300
  • 修改 Android KeyStore 中 KeyPair 的用途

    修改 Android KeyStore 中 KeyPair 的用途修改 Android KeyStore 中 KeyPair 的用途修改 Android KeyStore 中 KeyPair 的用途修改 Android KeyStore 中 KeyPair 的用途

    本文档介绍了如何在 Android KeyStore 中修改现有 KeyPair 的用途,使其支持密钥协商 (Key Agreement) 操作。通过示例代码展示了如何利用 KeyStore.setEntry 方法在 Android 13 (API 33) 及以上版本中导入 KeyPair 并设置所…

    2026年9月25日 • 用户投稿
    700
  • 并发处理共享列表并收集结果的方案

    并发处理共享列表并收集结果的方案并发处理共享列表并收集结果的方案并发处理共享列表并收集结果的方案并发处理共享列表并收集结果的方案

    本文旨在介绍如何利用 Java 并行流高效地处理大型列表,尤其是在每个元素的处理过程耗时较长的情况下。并行流能够将列表分割成多个子任务,并在多个线程上并发执行,从而显著提升处理速度。但同时,并发编程也带来了共享资源同步的问题,需要谨慎处理。 使用并行流并发处理列表 假设我们有一个 Foo 类,其 p…

    2026年9月25日 • 用户投稿
    100
  • 高效并发处理共享列表与结果收集的Java教程

    高效并发处理共享列表与结果收集的Java教程高效并发处理共享列表与结果收集的Java教程高效并发处理共享列表与结果收集的Java教程高效并发处理共享列表与结果收集的Java教程

    本文介绍了如何利用Java并发特性,特别是并行流(Parallel Streams),来高效处理共享列表,并将处理结果进行收集。针对耗时操作,通过将列表分割成子列表,并利用并行流并发执行,可以显著提高处理效率。同时,强调了在并发环境下对共享资源进行同步的重要性,并提供了收集处理结果的示例代码。 在处…

    2026年9月25日 • 用户投稿
    100
  • 使用并行流并发处理共享列表并收集结果

    使用并行流并发处理共享列表并收集结果使用并行流并发处理共享列表并收集结果使用并行流并发处理共享列表并收集结果使用并行流并发处理共享列表并收集结果

    本文将探讨如何高效地并发处理共享列表,并收集处理结果。在处理大量数据时,将任务分解为多个子任务并行执行可以显著提高效率。Java 8引入的并行流(Parallel Streams)为我们提供了一种简洁而强大的方式来实现这一目标。 并行流简介 并行流是Java 8 Stream API的一个特性,它允…

    2026年9月25日 • 用户投稿
    500
  • 如何在微服务之间共享静态数据

    如何在微服务之间共享静态数据如何在微服务之间共享静态数据如何在微服务之间共享静态数据如何在微服务之间共享静态数据

    微服务架构的本质决定了微服务之间无法直接共享静态变量。正如上面摘要所说,每个微服务都是一个独立的进程,拥有自己的内存空间,静态变量只在其所属的进程内有效。试图在一个微服务中访问另一个微服务的静态变量,就像试图在一个独立的Java程序中访问另一个程序的变量一样,是不可能的。 微服务架构的独立性 微服务…

    2026年9月25日 • 用户投稿
    100
  • FineReport与.NET集成要点

    FineReport与.NET集成要点FineReport与.NET集成要点FineReport与.NET集成要点FineReport与.NET集成要点

    1、FineReport(FR)与.NET项目的集成主要涵盖三个核心部分,如上图所示。 2、报表发布是集成过程中的关键步骤之一。 3、需要注意的是,FR报表工程本质上是基于Java的Servlet应用,无法由IIS直接解析处理,因此必须将其部署在支持Servlet规范的Web应用服务器(如Tomca…

    2026年9月25日 • 用户投稿
    200
  • 如何在微服务之间共享静态数据?

    如何在微服务之间共享静态数据?如何在微服务之间共享静态数据?如何在微服务之间共享静态数据?如何在微服务之间共享静态数据?

    在微服务架构中,各个服务都是独立的部署单元,拥有各自的内存空间。如同上述摘要所述,直接通过静态变量在不同的微服务之间共享数据是不可能的。 试图在一个微服务中设置静态变量的值,然后在另一个微服务中访问它,将会得到 null 或初始值,而不是之前设置的值。 这不是 Spring Boot 特有的问题,而…

    2026年9月25日 • 用户投稿
    100
  • Micronaut中动态数据结构的类型安全验证策略

    Micronaut中动态数据结构的类型安全验证策略Micronaut中动态数据结构的类型安全验证策略Micronaut中动态数据结构的类型安全验证策略Micronaut中动态数据结构的类型安全验证策略

    本文探讨了在Micronaut应用中,如何有效处理具有动态属性和类型依赖验证的类。通过引入多态接口、特化实现类以及自定义Jackson反序列化器,我们能够实现对复杂动态数据结构的类型安全解析与精细化验证,确保数据完整性和业务规则的正确执行。 动态数据结构的验证挑战 在现代微服务架构中,经常会遇到需要…

    2026年9月25日 • 用户投稿
    1000
  • sublime怎么让不同类型文件使用不同的缩进设置 _sublime不同文件缩进设置方法

    sublime怎么让不同类型文件使用不同的缩进设置 _sublime不同文件缩进设置方法sublime怎么让不同类型文件使用不同的缩进设置 _sublime不同文件缩进设置方法sublime怎么让不同类型文件使用不同的缩进设置 _sublime不同文件缩进设置方法sublime怎么让不同类型文件使用不同的缩进设置 _sublime不同文件缩进设置方法

    Sublime Text 可根据不同文件类型自动应用缩进设置,通过语法专属配置实现。1. 打开文件后点击右下角语法名称,选择 Open Syntax Specific Settings;2. 在配置文件中设置 tab_size 和 translate_tabs_to_spaces,如 Python …

    2026年9月25日 • 用户投稿
    100
  • Hibernate/Spring Boot中复合主键与多对多关联的实现指南

    Hibernate/Spring Boot中复合主键与多对多关联的实现指南Hibernate/Spring Boot中复合主键与多对多关联的实现指南Hibernate/Spring Boot中复合主键与多对多关联的实现指南Hibernate/Spring Boot中复合主键与多对多关联的实现指南

    本教程详细阐述了在Spring Boot和Hibernate框架中,如何优雅地处理具有附加属性的多对多关系,特别是当连接表需要复合主键时。我们将通过构建一个用户电影评分系统为例,深入探讨@EmbeddedId、@Embeddable以及@OneToMany、@ManyToOne等JPA注解的实际应用…

    2026年9月25日 • 用户投稿
    100
  • sublime的goto symbol in project功能怎么用_sublime Goto Symbol in Project使用方法

    sublime的goto symbol in project功能怎么用_sublime Goto Symbol in Project使用方法sublime的goto symbol in project功能怎么用_sublime Goto Symbol in Project使用方法sublime的goto symbol in project功能怎么用_sublime Goto Symbol in Project使用方法sublime的goto symbol in project功能怎么用_sublime Goto Symbol in Project使用方法

    使用快捷键Ctrl+Shift+R(Win/Linux)或Cmd+Shift+R(Mac)可快速调用Goto Symbol in Project功能,通过搜索符号名称跳转到函数、类等定义位置,支持模糊匹配与实时过滤,需确保项目已添加至侧边栏且语法包正确安装以保证索引识别效果。 Sublime Tex…

    2026年9月25日 • 用户投稿
    200

发表回复

登录后才能评论
关注微信