讲师中心 微信公众号
AI工具推荐 视频效率加速

JavaScript:根据ID匹配数组并创建新的属性

梦静君_9517

梦静君_9517

发布时间:2025-10-08 08:48:39

|

546人浏览过

|

来源于php中文网

原创

javascript:根据id匹配数组并创建新的属性

本文介绍了如何使用 JavaScript 遍历包含 genre_ids 属性的电影数组,并根据 genres 数组中的 ID 匹配项,为每个电影对象添加一个 genres 属性,该属性包含匹配的 name 值数组。最后,可以选择删除原始的 genre_ids 属性。

实现步骤

假设我们有两个数组,一个是包含电影信息的 movies 数组,每个电影对象都有一个 genre_ids 属性,该属性是一个包含电影类型 ID 的数组。另一个是 genres 数组,包含所有可能的电影类型,每个类型都有 id 和 name 属性。

我们的目标是遍历 movies 数组,对于每个电影对象,根据其 genre_ids 属性,在 genres 数组中查找匹配的类型名称,并将这些名称存储在一个新的 genres 属性中。

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

示例代码

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 Maven Code Review
Java Maven Code Review

审查Java Maven项目(ZIP压缩包或GitLab仓库URL),检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载
  1. movies.forEach((movie) => { ... }): 使用 forEach 循环遍历 movies 数组,对每个电影对象执行操作。

  2. movie.genres = movie.genre_ids.map((id) => { ... }): 对于每个电影对象,使用 map 方法遍历其 genre_ids 数组。map 方法会返回一个新数组,其中包含对原始数组每个元素执行指定函数后的结果。

  3. genres.find((genre) => id === genre.id).name: 在 map 方法的回调函数中,使用 find 方法在 genres 数组中查找 id 与当前电影类型 ID 匹配的类型对象。 find 方法返回找到的第一个元素,然后我们访问其 name 属性,获取类型名称。

  4. delete movie.genre_ids: 可选步骤,使用 delete 运算符从电影对象中删除原始的 genre_ids 属性。

注意事项

  • 确保 genres 数组包含所有可能的电影类型,并且每个类型都有唯一的 id。
  • 如果 genre_ids 数组中的某个 ID 在 genres 数组中找不到匹配项,find 方法将返回 undefined,会导致错误。为了避免这种情况,可以在 find 方法后添加错误处理机制,例如使用条件判断或 try...catch 语句。
  • map 方法会返回一个新数组,因此 movie.genres 属性会被设置为包含匹配类型名称的新数组。
  • forEach 方法会直接修改原始的 movies 数组。

总结

通过使用 forEach、map 和 find 方法,我们可以方便地根据 ID 匹配数组,并创建新的属性。这种方法可以应用于各种场景,例如根据用户 ID 匹配用户信息,根据产品 ID 匹配产品信息等。掌握这种方法可以提高 JavaScript 编程效率。

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

相关专题

更多
java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

5924

2023.10.24

Go语言中的运算符有哪些
Go语言中的运算符有哪些

Go语言中的运算符有:1、加法运算符;2、减法运算符;3、乘法运算符;4、除法运算符;5、取余运算符;6、比较运算符;7、位运算符;8、按位与运算符;9、按位或运算符;10、按位异或运算符等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2644

2024.02.23

php三元运算符用法
php三元运算符用法

本专题整合了php三元运算符相关教程,阅读专题下面的文章了解更多详细内容。

1692

2025.10.17

php中foreach用法
php中foreach用法

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

718

2025.12.04

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

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

490

2025.09.05

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

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

323

2025.11.16

golang map原理
golang map原理

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

513

2025.11.17

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

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

263

2025.11.27

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

100

2026.09.30

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn