js对象合并与数组合并综合应用举例

 更新时间:2023年11月14日 10:07:53   作者:江城开朗的豌豆  
这篇文章主要给大家介绍了关于js对象合并与数组合并综合应用举例的相关资料,本文将介绍常见的JS对象合并和数组合并方法,帮助读者更好地理解和运用这些方法,需要的朋友可以参考下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

前言

在 JavaScript 中,对象和数组都是非常常见的数据结构,它们可以用来存储和操作数据。有时候我们需要将两个对象或数组合并在一起,以便更好地进行操作。本文将会介绍如何在 JavaScript 中合并对象和数组。

合并对象

在 JavaScript 中,可以使用 Object.assign() 方法将两个或多个对象合并成一个对象。这个方法接受一个目标对象和一个或多个源对象作为参数,它会将所有源对象的属性复制到目标对象中。如果有重复的属性名,则后面的属性值会覆盖前面的属性值。

例如:

1
2
3
4
5
6
7
var obj1 = { a: 1, b: 2 };
var obj2 = { b: 3, c: 4 };
var obj3 = { c: 5, d: 6 };
 
var result = Object.assign({}, obj1, obj2, obj3);
 
console.log(result); // 输出 { a: 1, b: 3, c: 5, d: 6 }

在上面的代码中,我们使用 Object.assign() 方法将 obj1、obj2 和 obj3 合并成一个新的对象 result。由于 obj2 和 obj3 中都有属性 b 和 c,所以最终的结果中属性 b 和 c 的值分别是 3 和 5。

合并数组

在 JavaScript 中,可以使用 concat() 方法将两个或多个数组合并成一个数组。这个方法不会改变原来的数组,而是返回一个新的数组,新的数组包含了原来的数组和新加入的数组中的所有元素。

例如:

1
2
3
4
5
6
7
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [7, 8, 9];
 
var result = arr1.concat(arr2, arr3);
 
console.log(result); // 输出 [1, 2, 3, 4, 5, 6, 7, 8, 9]

在上面的代码中,我们使用 concat() 方法将 arr1、arr2 和 arr3 合并成一个新的数组 result。由于没有重复的元素,所以最终的结果中包含了所有的元素。

综合应用

有时候我们需要将对象和数组合并在一起,以便更好地进行操作。可以将数组中的每个元素都转换成一个对象,然后使用 concat() 方法将两个数组合并成一个数组,最后使用 Object.assign() 方法将数组中的所有对象合并成一个对象。

例如:

1
2
3
4
5
6
7
8
var arr = [1, 2, 3];
var obj = { a: 4, b: 5 };
 
var result = Object.assign.apply(null, arr.map(function(item) {
  return { [item]: item };
}).concat(obj));
 
console.log(result); // 输出 { 1: 1, 2: 2, 3: 3, a: 4, b: 5 }

在上面的代码中,我们首先使用 map() 方法将数组 arr 中的每个元素都转换成一个对象,对象的属性名和属性值都是元素本身。然后使用 concat() 方法将转换后的对象数组和对象 obj 合并成一个数组。最后使用 Object.assign() 方法将数组中的所有对象合并成一个对象。

附:JavaScript 合并数组对象中某个相同值(数组对象合并)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 假设有以下对象数组
const arr = [
  { id: 1, value: 'A' },
  { id: 2, value: 'B' },
  { id: 3, value: 'A' },
  { id: 4, value: 'C' },
  { id: 5, value: 'B' }
];
 
// 使用 reduce 方法进行属性合并
const mergedArr = arr.reduce((acc, obj) => {
  const foundObj = acc.find(item => item.value === obj.value);
  if (foundObj) {
    foundObj.ids.push(obj.id); // 将相同属性的 id 添加到 ids 数组中
  } else {
    acc.push({ value: obj.value, ids: [obj.id] }); // 创建新的对象
  }
  return acc;
}, []);
 
console.log(mergedArr);

输出结果为

[
  { value: 'A', ids: [1, 3] },
  { value: 'B', ids: [2, 5] },
  { value: 'C', ids: [4] }
]

总结

JavaScript 中的对象和数组可以使用 Object.assign() 方法和 concat() 方法进行合并。这些方法非常灵活和强大,可以满足我们各种不同的需求。在实际开发中,我们会经常使用到它们,希望本文能对你有所帮助。

到此这篇关于js对象合并与数组合并综合应用的文章就介绍到这了,更多相关js对象合并数组合并内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/qq_48652579/article/details/129959686

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • JS设计模式之数据访问对象模式的实例讲解

    JS设计模式之数据访问对象模式的实例讲解

    下面小编就为大家带来一篇JS设计模式之数据访问对象模式的实例讲解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • js兼容标准的表格变色效果

    js兼容标准的表格变色效果

    符合标准的表格变色的js代码
    2008-06-06
  • 整理Javascript函数学习笔记

    整理Javascript函数学习笔记

    整理Javascript函数学习笔记,之前一系列的文章是跟我学习Javascript,本文就是进一步学习Javascript函数,希望大家继续关注
    2015-12-12
  • JS 在数组插入字符的实现代码(可参考JavaScript splice() 方法)

    JS 在数组插入字符的实现代码(可参考JavaScript splice() 方法)

    在数组插入字符,添加数组,删除数组可以用slice自带的方法。操作比较方便,这个代码是作者通过push与shift方法实现,只能是个思路,但不推荐这样的方法。
    2009-12-12
  • JavaScript实现瀑布流图片效果

    JavaScript实现瀑布流图片效果

    这篇文章主要为大家详细介绍了JavaScript实现瀑布流图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • js Dialog 实践分享

    js Dialog 实践分享

    在我们的WebApp项目中,Dialog是个不可或缺的元素,很多页面操作都通过Dialog来进行,今天我们就Dialog显示数据、提交数据做进一步分析
    2012-10-10
  • Javascrip实现文字跳动特效

    Javascrip实现文字跳动特效

    这篇文章主要介绍了Javascrip实现文字跳动特效的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • js实现简单选项卡功能

    js实现简单选项卡功能

    这篇文章主要为大家详细介绍了使用JS实现简单的选项卡功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • Swiper.js实现移动端元素左右滑动

    Swiper.js实现移动端元素左右滑动

    这篇文章主要为大家详细介绍了Swiper.js实现移动端元素左右滑动 ,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • JS XMLHttpRequest原理与使用方法深入详解

    JS XMLHttpRequest原理与使用方法深入详解

    这篇文章主要介绍了JS XMLHttpRequest原理与使用方法,结合实例形式深入分析了JS XMLHttpRequest相关原理、使用方法及操作注意事项,需要的朋友可以参考下
    2020-04-04

最新评论