0

0

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

花韻仙語

花韻仙語

发布时间:2025-10-08 10:13:00

|

230人浏览过

|

来源于php中文网

原创

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免费学习笔记(深入)”;

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

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

    uBrand
    uBrand

    一站式AI品牌创建平台,在线品牌设计,AI品牌策划,智能品牌营销;uBrand帮助创业者轻松打造个性品牌!

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

  4. 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 转换为名称、将代码转换为描述等等。记住,根据实际需求调整代码,并添加必要的错误处理,以确保代码的健壮性和可靠性。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

76

2025.12.04

golang map内存释放
golang map内存释放

本专题整合了golang map内存相关教程,阅读专题下面的文章了解更多相关内容。

75

2025.09.05

golang map相关教程
golang map相关教程

本专题整合了golang map相关教程,阅读专题下面的文章了解更多详细内容。

36

2025.11.16

golang map原理
golang map原理

本专题整合了golang map相关内容,阅读专题下面的文章了解更多详细内容。

61

2025.11.17

java判断map相关教程
java判断map相关教程

本专题整合了java判断map相关教程,阅读专题下面的文章了解更多详细内容。

42

2025.11.27

数据库Delete用法
数据库Delete用法

数据库Delete用法:1、删除单条记录;2、删除多条记录;3、删除所有记录;4、删除特定条件的记录。更多关于数据库Delete的内容,大家可以访问下面的文章。

276

2023.11.13

drop和delete的区别
drop和delete的区别

drop和delete的区别:1、功能与用途;2、操作对象;3、可逆性;4、空间释放;5、执行速度与效率;6、与其他命令的交互;7、影响的持久性;8、语法和执行;9、触发器与约束;10、事务处理。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

213

2023.12.29

undefined是什么
undefined是什么

undefined是代表一个值或变量不存在或未定义的状态。它可以作为默认值来判断一个变量是否已经被赋值,也可以用于设置默认参数值。尽管在不同的编程语言中,undefined可能具有不同的含义和用法,但理解undefined的概念可以帮助我们更好地理解和编写程序。本专题为大家提供undefined相关的各种文章、以及下载和课程。

5397

2023.07.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

8

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号