数组合并和对象合并方法

已于 2023-12-27 12:03:00 修改
阅读量427 收藏 7
点赞数 7
分类专栏： 前端开发 文章标签： javascript
于 2023-12-27 12:02:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55477902/article/details/135240790
版权
文章讲述了在项目开发中，如何处理下拉框选中参数变化时，同步更新相关节点属性的问题，使用了Object.assign()进行对象合并，并讨论了数组合并的不同方法如扩展运算符和concat()，以及在对象合并时属性覆盖的特性。
摘要由CSDN通过智能技术生成

写作背景：项目中有一个下拉框，选中时会带出一个参数数组，渲染成列表，某个节点中也包含该选项的一些参数数据，当下拉框中的参数在后台发生了变化时，比如增加一个参数或者减少一个参数，那对应这个节点的属性也要保持和当前下拉框所属参数一致，只是值为空。
具体数据如下：

const selectObjParams = {
  "agv": "",
  "chargeStationId": "",
  "maxChargeCurrent": "",
  "maxChargeVoltage": "",
  "chargeLevel": ""
};

const nodeParams = {
  "agv": "[#context.node.1661135994559-03#]",
  "chargeStationId": "[#param.chargeStationId#]",
  "maxChargeCurrent": "",
  "maxChargeVoltage": ""
};
//将两个对象合并
let resObj = {
...nodeParams,
...selectObjParams
}

对象合并

  1. 扩展运算符
  2. Object.assign()
let resObj=Object.assign({},selectObjParams,nodeParams);
//输出
{agv: '[#context.node.1661135994559-03#]', chargeStationId: '[#param.chargeStationId#]', maxChargeCurrent: '', maxChargeVoltage: '', chargeLevel: ''}

数组合并

  1. 扩展运算符合并
let arr1=['aa','bb','cc'];
let arr2=['aa','dd'];[...arr1,...arr2]
//输出
['aa', 'bb', 'cc', 'aa', 'dd']
  1. concat()方法合并

数组对象合并

当对象属性有相同的时候，会覆盖

arr1=[{name:'a',age:18},{name:'b',age:10},{name:'c',age:8}];
arr2=[{name:'dd',school:'xr'},{school:'xs'}];
let newArr=arr1.map((item,index)=>{
    return {...item,...arr2[index]}
});
```![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/366e3f29c05f4257995c22ca65c9500c.png)
向阳花自开
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详解JavaScript中的数组合并方法和对象合并方法
10-18
在JavaScript中，数组合并和...总之，JavaScript提供了多种数组合并和对象合并的方法，开发者可以根据具体需求选择合适的方式。在处理复杂的对象结构时，尤其要注意深拷贝和浅拷贝的区别，以免出现预期之外的副作用。
php多维数组合并类.zip
07-11
在这个场景中，"php多维数组合并类" 是一个专为处理多维数组合并而设计的工具，它可以帮助开发者更高效地整合和操作这些复杂的数据。 多维数组的合并通常涉及到两种情况：一是将多个多维数组合并为一个更大的多维...
合并两个对象
change_fate的博客
02-09 259
// 现有两个对象： const obj1 = { students: { lingxuan: { name: 'lingxuan', addr: 'guangzhou' } } } const obj2 = { students: { lingxuan: { mobile: '1823430****' } }, teachers: { sam: { name: 'sam' } } }
javascript合并两个对象
CallMeKongkong的博客
01-18 5966
var a ={"name":"kobe"}; var b= {"age":20}; var c = Object.assign(a,b); //a={"name":"kobe","age":20} //c={"name":"kobe","age":20} var a = {"name": "kobe"}; var b = undefined; var c =
JavaScript之合并两个对象为数组对象、根据uniCode获取字符、生成随机数、向下取整、fromCharCode、Math、floor、random、push
软件毕设协助及软件开发、智慧电子模块、计算机科技、软件开发、硬件开发、程序员、写代码、工程师、互联网、物联网、技术栈、程序、编程、IT。
03-19 2115
JavaScript之合并两个对象为数组对象、根据uniCode获取字符、生成随机数、向下取整、fromCharCode、Math、floor、random、push
数组对象合并
weixin_41470109的博客
11-22 187
相同属性a 合并对象并整合；
对象合并
我不是安徒生的博客
07-20 6217
在项目的开发过程中，我们可能会遇到这样的需求：将两个对象合并成一个对象，然后在进行数据的处理，那么在js中，人如何合并对象呢？ 举一个最简单的栗子： 假设现在有两个对象： var obj1 = { name:'张三' }; var obj2= { age:18 }; 我们想要得到obj3 = {name:’张三’,age:18}; 方法一：使用JQuery的extend方法 $.ext...
数组合并类.zip
07-11
"数组合并类"提供了一种面向对象的解决方案，它封装了数组合并的常用操作，可能包括但不限于以下功能： 1. **多数组合并**：类库可能包含一个方法，允许传入任意数量的数组作为参数，并一次性进行合并，简化代码...
JavaScript如何把两个数组对象合并过程解析
10-16
在数组合并的情况下，扩展运算符会将一个数组的所有元素添加到另一个数组的末尾。 但是，当我们尝试将两个数组对象合并时，直接使用扩展运算符并不能达到预期效果，因为这只会简单地将一个数组的所有对象追加到另一...
前端合并两个对象
qq_41885295的博客
04-12 3717
方法一：ES6中的对象拓展运算符，可用于合并两个对象 方法二：​​​​​​​Object.assign(target, source_1, ···)。用于将源对象的所有可枚举属性复制到目标对象中。
合并对象的方法
YHLSunshine的博客
05-31 1万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 总结 提示：这里对文章进行总结： 例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。 ...
ES6 对象合并
TianXuab的博客
08-05 2880
在 JavaScript 中，可以使用不同的方法来合并对象的属性。这样可以将两个或多个对象的属性合并到一个新的对象中。这些只是对象合并的一些常见应用场景，实际上在开发中，你可能会遇到更多不同的情况。无论你使用哪种方法，都能够将多个对象的属性合并到一个新的对象中，从而实现对象合并的操作。在前端应用中，状态管理是一个重要的概念。它将每个对象的属性展开到新对象中，从而实现合并的效果。方法接受一个目标对象和一个或多个源对象，并将源对象的属性合并到目标对象中。对象合并不仅可以合并顶层属性，还可以合并嵌套的对象属性。
jQ extend将多个对象的内容合并到一个对象中
cominglately的博客
10-11 6796
语法: 将多个对象合并到一个对象中，后面的相同属性的值覆盖前面的 jQ.extend([true,] target,[obj1, ...[objn]])   备注: a. 主要用在使用$.fn 构造新的jQ插件的时候 b.会更改掉target 的内容  所以target 一般都是使用{} 空对象来代替 c. 第一个可选参数是是否使用递归,  这里不可以传false，     
javascript基础学习系列一百一十三：合并对象
m0_68635815的博客
02-24 226
或多个源对象作为参数，然后将每个源对象中可枚举（Object.propertyIsEnumerable()返回 true）和自有（Object.hasOwnProperty()返回 true）属性复制到目标对象。对每个符合条件的属性，这个方法会使用源对象上的[[Get]]取得属性的值，然后使用目标。如果多个源对象都有相同的属性，则使用最后一个复制的值。此外，从源对象访问器属性取得的值，比如获取函数，会作为一个静态值赋给目标对象。更具体地说，就是把源对象所有的本地属性一起复制到目标对象上。
合并对象 3 种方式
热门推荐
taoqidejingling的博客
11-26 1万+
合并对象有 2 种方式：扩展运算符、Object.assign()；扩展运算符和 Object.assign() 里面的元素是原始数据类型时，属于深拷贝；当里面的元素是引用数据类型时，属于浅拷贝；Object.is() 判断2个值是否相等属于严格比较；
合并对象的常见方法
小草莓的博客
07-06 174
如果合并的对象中有同名属性，则后面的属性值会覆盖前面的属性值。
对象合并的五种方法
Debug的博客
04-22 6991
Object.assign（） 同名属性会被覆盖 Object.assign种第一个值是目标对象，第二个值是源对象 const obj1={a:"1",b:"2"} const obj2={b:"3",c:"4"} const result = Object.assign(obj1,obj2) console.log(result) //a:1 b:3 c:4 obj1中b的值被后面传入的obj2的值给覆盖掉了 扩展运算符 同名属性会被覆盖 使用…扩展运算符合并对象obj1对象在前和在后最后
多个对象合并的3种的简单方式，替换同key名的值
最新发布
lin_s_c的博客
04-24 456
如果要用深拷贝的小伙伴可以用lodash第三方库（https://www.lodashjs.com/docs/lodash.merge）这方法会改变对象 object, 不会改变[sources]，sources里面的子对象也可以被拷贝到。若属性名相同，后面的属性会覆盖前面属性，对象和数组合并，数组会被转成对象，再被合并。两个或多个对象需要合并，并且有相同的key时，用后面对象的value值。这个方法是浅拷贝，则拷贝了对象的引用（也就是修改的话会影响到原对象）该方法不会改变对象a，不会改变对象b。
js之对象的合并
丁哒哒的博客
01-14 2304
let aWithOverrides = { ...a, x: 1, y: 2 }; let aWithOverrides = { ...a, ...{ x: 1, y: 2 } }; let x = 1, y = 2, aWithOverrides = { ...a, x, y }; let aWithOverrides = Object.assign({}, a, { x: 1, y: 2 });
js多层对象数组 合并_JS对象数组合并去重？
05-31
可以使用JavaScript的reduce()和concat()方法来合并多层对象数组。以下是一个示例代码，它将合并具有相同ID属性的对象，并将它们的数量相加： ```javascript const arr1 = [{id: 1, name: 'A', count: 2}, {id: 2, name: 'B', count: 3}]; const arr2 = [{id: 1, name: 'A', count: 4}, {id: 3, name: 'C', count: 1}]; const mergedArr = [...arr1, ...arr2].reduce((acc, curr) => { const index = acc.findIndex(item => item.id === curr.id); if (index === -1) { return [...acc, curr]; } else { acc[index].count += curr.count; return acc; } }, []); console.log(mergedArr); // Output: [{id: 1, name: 'A', count: 6}, {id: 2, name: 'B', count: 3}, {id: 3, name: 'C', count: 1}] ``` 如果要合并多层对象数组，可以使用递归来处理每个子数组。以下是一个示例代码： ```javascript const arr1 = [{id: 1, children: [{id: 2, name: 'A', count: 2}]}, {id: 3, name: 'B', count: 3}]; const arr2 = [{id: 1, children: [{id: 2, name: 'A', count: 4}]}, {id: 4, name: 'C', count: 1}]; function mergeArrays(arr1, arr2) { const mergedArr = [...arr1, ...arr2].reduce((acc, curr) => { const index = acc.findIndex(item => item.id === curr.id); if (index === -1) { return [...acc, curr]; } else if (curr.children) { acc[index].children = mergeArrays(acc[index].children, curr.children); return acc; } else { acc[index].count += curr.count; return acc; } }, []); return mergedArr; } const result = mergeArrays(arr1, arr2); console.log(result); // Output: [{id: 1, children: [{id: 2, name: 'A', count: 6}]}, {id: 3, name: 'B', count: 3}, {id: 4, name: 'C', count: 1}] ``` 这个示例代码中，mergeArrays()函数使用递归来处理每个子数组，直到没有子数组为止。在每个子数组中，它再次使用reduce()方法来合并具有相同ID属性的对象。如果当前对象具有子数组，则递归处理该子数组。否则，它将增加当前对象的数量。最终，该函数将返回合并后的数组。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值