js 对象合并 的几种方法

最新推荐文章于 2024-04-24 18:43:25 发布
最新推荐文章于 2024-04-24 18:43:25 发布
阅读量9.4k 收藏 1
点赞数
分类专栏： 前端开发 JavaScript 文章标签： webview elementui 拓扑学
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kouhunzhe/article/details/122466328
版权 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>对象合并</title>
  </head>

  <body>
    <script>
        defaultObj = {name: "张山",type: "admin",sex: 1,school: "清华大学",info: {  id: "123456",  password: "******",  nickname: "sunny",  email: "sunny@123.com",},addr: ["朝阳区1","朝阳区1-1","朝阳区2-1"],age: 23,};
        optionsObj = {name: "李斯",type: "admin",sex: 1,school: "北京大学",info: {  id: "111111",  password: "*****",  nickname: "dfghk",  phone: "13260011186",},addr: ["朝阳区2"],age: 44,work: "北京",};
        var mergeObj = {}

        
        defaultObj = {name: "张山",type: "admin",sex: 1,school: "清华大学",info: {  id: "123456",  password: "******",  nickname: "sunny",  email: "sunny@123.com",},addr: ["朝阳区1","朝阳区1-1","朝阳区2-1"],age: 23,};
        optionsObj = {name: "李斯",type: "admin",sex: 1,school: "北京大学",info: {  id: "111111",  password: "*****",  nickname: "dfghk",  phone: "13260011186",},addr: ["朝阳区2"],age: 44,work: "北京",};
        mergeObj = {}
        console.group("------初始值------");
        console.log("defaultObj", JSON.stringify(defaultObj));
        console.log("optionsObj", JSON.stringify(optionsObj));
        console.log("mergeObj", JSON.stringify(mergeObj));
        console.groupEnd("------end------");

        mergeObj = {}
        defaultObj = {name: "张山",type: "admin",sex: 1,school: "清华大学",info: {  id: "123456",  password: "******",  nickname: "sunny",  email: "sunny@123.com",},addr: ["朝阳区1","朝阳区1-1","朝阳区2-1"],age: 23,};
        optionsObj = {name: "李斯",type: "admin",sex: 1,school: "北京大学",info: {  id: "111111",  password: "*****",  nickname: "dfghk",  phone: "13260011186",},addr: ["朝阳区2"],age: 44,work: "北京",};
        mergeObj = { ...defaultObj, ...optionsObj };
        console.group("------使用...合并对象|||mergeObj = { ...defaultObj, ...optionsObj }------");
        console.log("defaultObj", JSON.stringify(defaultObj));
        console.log("optionsObj", JSON.stringify(optionsObj));
        console.log("mergeObj", JSON.stringify(mergeObj));
        console.groupEnd("------end------");


        mergeObj = {}
        defaultObj = {name: "张山",type: "admin",sex: 1,school: "清华大学",info: {  id: "123456",  password: "******",  nickname: "sunny",  email: "sunny@123.com",},addr: ["朝阳区1","朝阳区1-1","朝阳区2-1"],age: 23,};
        optionsObj = {name: "李斯",type: "admin",sex: 1,school: "北京大学",info: {  id: "111111",  password: "*****",  nickname: "dfghk",  phone: "13260011186",},addr: ["朝阳区2"],age: 44,work: "北京",};
        mergeObj = Object.assign(defaultObj, optionsObj);
        console.group("------使用Object.assign合并对象|||mergeObj = Object.assign(optionsObj, defaultObj);------");
        console.log("defaultObj", JSON.stringify(defaultObj));
        console.log("optionsObj", JSON.stringify(optionsObj));
        console.log("mergeObj", JSON.stringify(mergeObj));
        console.groupEnd("------end------");


        // 遍历赋值法 
        // 代码逻辑：
        // 循环对象n中的每一个对应属性。
        // 确认对象n中存在该属性
        // 确认对象o中不存在该属性
        var extend=function(o,n){
            for (var p in n){
                if(n.hasOwnProperty(p) && (!o.hasOwnProperty(p) ))
                    o[p]=n[p];
            }
            return o
        };
        mergeObj = {}
        defaultObj = {name: "张山",type: "admin",sex: 1,school: "清华大学",info: {  id: "123456",  password: "******",  nickname: "sunny",  email: "sunny@123.com",},addr: ["朝阳区1","朝阳区1-1","朝阳区2-1"],age: 23,};
        optionsObj = {name: "李斯",type: "admin",sex: 1,school: "北京大学",info: {  id: "111111",  password: "*****",  nickname: "dfghk",  phone: "13260011186",},addr: ["朝阳区2"],age: 44,work: "北京",};
        mergeObj = extend(optionsObj, defaultObj);
        console.group("------使用遍历赋值法合并对象------");
        console.log("defaultObj", JSON.stringify(defaultObj));
        console.log("optionsObj", JSON.stringify(optionsObj));
        console.log("mergeObj", JSON.stringify(mergeObj));
        console.groupEnd("------end------");


        function deepMerge(obj1, obj2) {
            let key;
            for (key in obj2) {
                // 如果target(也就是obj1[key])存在，且是对象的话再去调用deepMerge，否则就是obj1[key]里面没这个对象，需要与obj2[key]合并
                obj1[key] =
                obj1[key] && obj1[key].toString() === "[object Object]"
                    ? deepMerge(obj1[key], obj2[key])
                    : (obj1[key] = obj2[key]);
            }
            return obj1;
        }
        mergeObj = {}
        defaultObj = {name: "张山",type: "admin",sex: 1,school: "清华大学",info: {  id: "123456",  password: "******",  nickname: "sunny",  email: "sunny@123.com",},addr: ["朝阳区1","朝阳区1-1","朝阳区2-1"],age: 23,};
        optionsObj = {name: "李斯",type: "admin",sex: 1,school: "北京大学",info: {  id: "111111",  password: "*****",  nickname: "dfghk",  phone: "13260011186",},addr: ["朝阳区2"],age: 44,work: "北京",};
        mergeObj = deepMerge(defaultObj, optionsObj);
        console.group("------使用deepMerge合并对象------");
        console.log("defaultObj", JSON.stringify(defaultObj));
        console.log("optionsObj", JSON.stringify(optionsObj));
        console.log("mergeObj", JSON.stringify(mergeObj));
        console.groupEnd("------end------");


    </script>
  </body>
</html>

 

jlhejs
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JavaScript 对象合并
忧郁的蛋的专栏
01-26 1万+
最后需要提醒的是，在合并对象时如果键值相同的对象属性类型不同，例如一个为字符串类型，一个为数值类型，会覆盖之前的属性，因此需要根据项目需求做出相应的处理。此外，如果需要对合并对象的属性进行特殊处理，例如合并对象的属性值是一个数组，需要合并成一个新数组，可以使用 Array.concat() 方法。此外，如果需要对合并对象的属性值进行进一步的处理，如去重、排序等，可以使用 Array.filter()、Array.sort() 等方法。这里使用了扩展运算符，可以将一个对象的属性解构到另一个对象中。
如何在js中合并对象
qq_42880714的博客
07-29 4976
如何在js中合并对象
多个对象合并的3种的简单方式，替换同key名的值
最新发布
lin_s_c的博客
04-24 315
如果要用深拷贝的小伙伴可以用lodash第三方库（https://www.lodashjs.com/docs/lodash.merge）这方法会改变对象 object, 不会改变[sources]，sources里面的子对象也可以被拷贝到。若属性名相同，后面的属性会覆盖前面属性，对象和数组合并，数组会被转成对象，再被合并。两个或多个对象需要合并，并且有相同的key时，用后面对象的value值。这个方法是浅拷贝，则拷贝了对象的引用（也就是修改的话会影响到原对象）该方法不会改变对象a，不会改变对象b。
js 对象合并 与数组合并
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
04-04 3010
在上面的代码中，我们首先使用 map() 方法将数组 arr 中的每个元素都转换成一个对象，对象的属性名和属性值都是元素本身。这个方法接受一个目标对象和一个或多个源对象作为参数，它会将所有源对象的属性复制到目标对象中。可以将数组中的每个元素都转换成一个对象，然后使用 concat() 方法将两个数组合并成一个数组，最后使用 Object.assign() 方法将数组中的所有对象合并成一个对象。这个方法不会改变原来的数组，而是返回一个新的数组，新的数组包含了原来的数组和新加入的数组中的所有元素。
JS 合并数组的三大方式
m0_49515138的博客
02-23 1376
如果您想知道一种在JavaScript中合并数组的好方法，那么请记住使用扩展操作符进行合并。在数组字面量中写入两个或更多带有扩展操作符…const all = […heros, …villains] 创建一个合并了heroes和villains数组的新数组。数组字面量中合并数组的顺序很重要:合并数组中的项按照数组在字面量中出现的顺序插入。或者使用另一种方法array.concat()方法不会改变调用它的数组，而是返回一个具有合并结果的新数组。
js对象遍历和合并
weixin_47027269的博客
02-10 1167
对象遍历 对象{键：值} object.keys()会返回对象中键的数组 object.values()会返回对象中值的数组 Object.entries() 是返回一个给定对象自身可枚举属性的键值对数组 var var obj = {a:1,b:2,c:4}; //目标对象 console.log("索引"+Object.keys(obj)); console.log("价值"+Object.values(obj)); console.log("entries输出"+Object.ent
js 删除数组的几种方法小结
10-26
在JavaScript中，删除数组元素的方法主要有以下几种，这些方法各有优缺点，适用于不同的场景。 1. `delete` 方法： ```javascript var arr = ['a', 'b', 'c']; delete arr[1]; ``` 使用 `delete` 方法会将指定...
JS实现倒序输出的几种常用方法示例
10-17
下面我们将详细探讨几种常用的方法，并结合实例分析其工作原理。 1. **通过`split()`和数组的逆序输出** 这种方法首先将数字或字符串转化为数组，然后利用数组的逆序特性进行输出。例如： ```javascript var num...
JS下高效拼装字符串的几种方法比较与测试代码
10-29
以下介绍几种高效的方法： 1. **使用数组的`join()`方法**： 在JavaScript中，数组的`join()`方法用于将数组的所有元素合并为一个字符串。在需要拼接大量字符串时，可以先将每个子字符串添加到数组中，最后再用`...
javascript Array对象使用小结
10-29
虽然在概念上，数组是一段线性分配的内存，通过整数索引访问元素，但在JavaScript中，数组实际上是一种特殊的对象。JavaScript的数组允许通过数字或字符串作为属性名来访问元素，这使得它们比传统的数组更为灵活，但...
bootstrap table实现合并单元格效果
10-17
总结起来，Bootstrap Table 提供的 `mergeCells` 方法为开发者提供了一种方便的方式来合并表格单元格，以适应各种数据展示需求。通过理解和运用这一功能，你可以创建更符合业务需求和用户体验的表格展示。
JS实现合并json对象的方法
10-19
主要介绍了JS实现合并json对象的方法,涉及javascript递归调用与json格式数据遍历的相关操作技巧,需要的朋友可以参考下
js合并两个对象的方法
热门推荐
weixin_33971205的博客
04-16 3万+
1 对象的合并 1.1 $.extend() var obj1= {'a': 1}; var obj2= {'b': 1}; var c = $.extend(obj1, obj2); 复制代码console.log(obj1); // {a: 1, b: 1} obj1已被修改 复制代码//或者 <br>var obj3 = $.extend({}, obj1, obj2) &lt...
对象的合并
weixin_42413651的博客
07-21 622
Object.assign(); Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 语法 Object.assign(target, ...sources) target     目标对象。 sources     源对象。 描述 如果目标对象中的属性具有相同的键，则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属...
jq 两个对象合并_js中合并对象的方法
weixin_36431157的博客
12-23 1013
合并对象的方法1、网上摘抄的深度合并/***如果target(也就是FirstOBJ[key])存在，*且是对象的话再去调用deepObjectMerge，*否则就是FirstOBJ[key]里面没这个对象，需要与SecondOBJ[key]合并*/functiondeepObjectMerge(FirstOBJ,SecondOBJ){//深度合并对象for(varkeyin...
JS合并对象
wang_swa99er的博客
02-18 1570
JS合并对象 Object.assign 合并对象 【注】将所有传入的对象，都合并到第一个对象中，属性被后续参数中具有相同属性的其他对象覆盖。 /* 浅拷贝 改变obj3 f的值的时候，obj1里的f也被修改了(obj1拷贝了obj3 f的地址) */ var obj1 = { a: 10, b: 10 } var obj2 = { b: 20, c: 30 } var obj3 = { d: 40, f: ["hello","worl
js jquery 数组的合并 对象的合并
weixin_34191845的博客
10-26 625
转载自:http://www.cnblogs.com/xingxiangyi/p/6416468.html 1 数组合并 1.1 concat 方法 1 2 3 4 vara=[1,2,3],b=[4,5,6]; varc=a.concat(b); console.log(c);// 1,2,3,4,5,6 console.log(...
js对象的合并
MYG_G
04-29 4717
js对象的合并 问题情况：将2个或2个以上对象（object{…}）中的属性进行合并，即最后合并为一个object{…}。 解决办法：Object.assign 方法 <script> let data = {name: 'mm', id: '1'}; let data1 = {type: '类型', height: 180}; Object.assign(d...
js中对象合并的方法
07-28
在JavaScript中，有几种方法可以合并对象。 一种方法是使用Lodash库中的merge()方法。这个方法可以将两个或多个对象的属性合并到一个新对象中。例如： ```javascript const obj1 = { a: 1, b: 2 }; const obj2 = { b: 3, c: 4 }; const obj3 = _.merge(obj1, obj2); console.log(obj3); // { a: 1, b: 3, c: 4 } ``` 这个方法会将相同属性名的值进行合并，如果属性值是对象，则会递归合并。 另一种方法是使用Object.assign()方法。这个方法可以将多个对象的属性合并到一个目标对象中。例如： ```javascript const obj1 = { a: \[1, 2\] }; const obj2 = { a: \[3, 4\] }; const obj3 = Object.assign({}, obj1, { a: obj1.a.concat(obj2.a) }); console.log(obj3); // { a: \[1, 2, 3, 4\] } ``` 这个方法会将相同属性名的值进行替换，如果属性值是数组，则会将数组合并成一个新数组。 还有一种方法是使用jQuery库中的extend()函数。这个函数可以将一个或多个对象的内容合并到目标对象中。例如： ```javascript $.extend(obj1, obj2); // 浅拷贝 $.extend(true, obj1, obj2); // 深拷贝 ``` 这个函数可以进行浅拷贝或深拷贝，根据第一个参数的值来决定。浅拷贝只会复制对象的引用，而深拷贝会递归复制对象的所有属性。 所以，在JavaScript中，你可以使用Lodash的merge()方法、Object.assign()方法或jQuery的extend()函数来合并对象的属性。 #### 引用[.reference_title] - *1* *2* [JavaScript 对象合并](https://blog.csdn.net/lwf3115841/article/details/128763470)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [js中对象合并方法整理](https://blog.csdn.net/u011127019/article/details/126195487)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值