本文旨在讲解如何使用 JavaScript 匹配两个数组中的 ID，并根据匹配结果在一个数组的对象中创建新的属性。我们将通过一个电影类型匹配的示例，详细介绍实现步骤，并提供可直接运行的代码示例，帮助开发者快速掌握该技巧。
在实际开发中，我们经常会遇到需要根据 ID 关联两个数组的情况。例如，一个数组包含电影信息，其中包含电影类型 ID 列表，另一个数组包含所有电影类型及其对应的 ID。我们需要根据电影类型 ID，将电影类型名称添加到电影信息中。
以下是一个实现此功能的 JavaScript 教程：
实现步骤
立即学习“Java免费学习笔记（深入）”；
循环遍历电影数组： 使用 forEach 方法遍历包含电影信息的数组。
创建新的 genres 属性： 在每个电影对象中创建一个新的 genres 属性，用于存储匹配到的电影类型名称。
映射 genre_ids 数组： 使用 map 方法遍历电影对象中的 genre_ids 数组。
查找匹配的类型 ID： 在 genres 数组中使用 find 方法查找与当前 genre_id 匹配的类型对象。
返回类型名称： 如果找到匹配的类型对象，则返回其 name 属性（即类型名称）。
(可选)删除 genre_ids 属性： 如果不再需要 genre_ids 属性，可以使用 delete 运算符将其从电影对象中删除。
代码示例
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;});console.log(movies);
代码解释
genres 数组包含电影类型 ID 和名称的对应关系。movies 数组包含电影信息，每个电影对象都有一个 genre_ids 属性，其中包含电影类型 ID 的列表。forEach 方法遍历 movies 数组，对每个电影对象执行以下操作：movie.genre_ids.map(…) 使用 map 方法遍历 genre_ids 数组，将每个 ID 转换为对应的类型名称。genres.find((genre) => id === genre.id).name 使用 find 方法在 genres 数组中查找与当前 ID 匹配的类型对象，并返回其 name 属性。movie.genres = … 将类型名称列表赋值给电影对象的 genres 属性。delete movie.genre_ids 删除电影对象的 genre_ids 属性。console.log(movies) 打印修改后的 movies 数组。
注意事项
确保 genres 数组包含所有可能的 genre_ids 值。如果 genre_ids 中存在 genres 数组中没有的 ID，find 方法将返回 undefined，导致错误。可以使用条件判断来处理这种情况，例如：
movie.genres = movie.genre_ids.map((id) => { const genre = genres.find((genre) => id === genre.id); return genre ? genre.name : null; // 或者其他默认值});
find 方法返回的是第一个匹配的元素。如果 genres 数组中存在重复的 ID，只会返回第一个匹配的类型名称。
总结
通过以上步骤，我们可以轻松地根据 ID 匹配两个数组，并根据匹配结果在一个数组的对象中创建新的属性。这种方法在处理关联数据时非常有用，可以提高代码的可读性和可维护性。在实际应用中，可以根据具体需求进行适当的调整和优化。
以上就是JavaScript：根据ID匹配数组并创建新属性的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1527907.html
微信扫一扫 
支付宝扫一扫 
