js深度合并两个数组对象的实现

 更新时间:2022年12月03日 10:13:46   作者:CahierX  
这篇文章主要介绍了js深度合并两个数组对象的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

js深度合并两个数组对象

js合并两个数组对象, 如果a中含有b,则b的值覆盖a的值 如果a中不含有b 则b的值新增到a

MergeRecursive(obj1, obj2) {
    // 合并两个数组
    for (var p in obj2) {
      if (obj1[p] === undefined) { // 如果obj1没有p 直接把obj2的p加入
        obj1[p] = obj2[p]
      }
      try {
        if (obj2[p].constructor === Object) {
          obj1[p] = common.MergeRecursive(obj1[p], obj2[p])
        } else {
          if (typeof obj1[p] === 'object') {
            for (let i = 0; i < obj2[p].length; i++) {
              if (typeof obj2[p][i] === 'object') { // 数组里面的数据也是数组对象 则进行查找重复并赋值
                if (obj1[p][i] === undefined) { // 如果obj1中没有obj2的属性就把obj2的属性push到1里
                  obj1[p].push(obj2[p][i])
                } else {
                  common.uniq(obj1[p][i], obj2[p][i])
                }
              } else {
                obj1[p] = obj2[p] // 数组 但是里面的数据是普通类型 直接赋值
              }
            }
          } else {
            obj1[p] = obj2[p] // 普通类型有直接赋值 obj1没有的就创建并赋值
          }
        }
      } catch (e) {
        console.log(e)
      }
    }
    return obj1
  },
  uniq(obj1, obj2) {
    // 查找重复并obj2的值赋给obj1
    Object.keys(obj1).forEach(key => {
      if (typeof obj1[key] === 'object') {
        try {
          if (key in obj2) { // 确保obj2有obj1的key 不然会导致失败
            common.uniq(obj1[key], obj2[key])
          }
        } catch (err) {
          obj1 = obj2
        }
      } else {
        if (key in obj2) {
          obj1[key] = obj2[key]
        }
        Object.keys(obj2).forEach(obj2key => { // 把obj2中有的obj1中没有的添加进去
          if (!(obj2key in obj1)) {
            obj1[obj2key] = obj2[obj2key]
          }
        })
      }
    })
  },

关于数组对象的深浅合并

数组对象的深浅合并

  • 浅合并:只会把没有冲突的属性合并上,对于有冲突的属性,后者会完全覆盖前者的属性值,且只会合并第一层
  • 深合并:对于有冲突的属性,会把将两个属性值进行合并,而不是简单的让谁覆盖谁
function deepMearge(obj, target={}) {
    // target 替换 obj
    let p = {}; // 是为了调用 Object.prototype.toSring方便
    for(let key in target) {
      let isA = p.toString.call(obj[key]) === '[object Object]',
          isB = p.toString.call(target[key]) === '[object Object]';
      if(isA && isB) {
        obj[key] = deepMearge(obj[key], target[key])
      } else if(Array.isArray(obj[key]) && Array.isArray(target[key])){
        // Array.from 方法可以把一个类数组对象转为数组
        obj[key] = Array.from(new Set(obj[key].concat(target[key]))
        )
      } else {
        obj[key] = target[key];
      }
    }
    return obj;
  }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • js获取域名的方法

    js获取域名的方法

    这篇文章主要介绍了js获取域名的方法,涉及window.location中常见方法的使用技巧,需要的朋友可以参考下
    2015-01-01
  • 微信小程序云开发之新手环境配置

    微信小程序云开发之新手环境配置

    这篇文章主要为大家详细介绍了微信小程序云开发之新手环境配置,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • TypeScript与JavaScript项目里引入MD5校验和

    TypeScript与JavaScript项目里引入MD5校验和

    这篇文章主要介绍了TypeScript与JavaScript项目里引入MD5校验和,MD5校验和可以用于验证网络文件传输的完整性以及防止文件被人篡改。下文我们就一起来学习TypeScript与JavaScript项目里引入MD5校验和_MD5校验,需要的朋友可以参考一下
    2022-02-02
  • layui复选框的全选与取消实现方法

    layui复选框的全选与取消实现方法

    今天小编就为大家分享一篇layui复选框的全选与取消实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS 中的 Event Loop 是什么你真的懂

    JS 中的 Event Loop 是什么你真的懂

    Event Loop,简单翻译就是 事件循环,是 JS 语言下实现运行时的一个机制,这篇文章主要介绍了JS 中的 Event Loop 的基本知识,需要的朋友可以参考下
    2022-06-06
  • 详解JavaScript作用域 闭包

    详解JavaScript作用域 闭包

    这篇文章主要介绍了JavaScript作用域 闭包的相关资料,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • javaScript封装的各种写法

    javaScript封装的各种写法

    这篇文章主要介绍了javaScript封装的各种写法,通过列举优缺点和使用场景详细介绍了几种封装的格式,需要的朋友可以参考下
    2017-08-08
  • 浅析微信小程序自定义日历组件及flex布局最后一行对齐问题

    浅析微信小程序自定义日历组件及flex布局最后一行对齐问题

    这篇文章主要介绍了微信小程序自定义日历组件及flex布局最后一行对齐问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-10-10
  • window.onbeforeunload方法在IE下无法正常工作的解决办法

    window.onbeforeunload方法在IE下无法正常工作的解决办法

    下面的代码可以做到不管用户是点击了关闭,或者是在任务栏关闭、点击后退、刷新、按F5键,都可以检测到用户即将离开的消息。
    2010-01-01
  • JavaScript实现继承的4种方法总结

    JavaScript实现继承的4种方法总结

    这篇文章主要介绍了JavaScript实现继承的4种方法总结,本文给出了原型链继承、构造继承、实例继承、拷贝继承等实现JS继承的方法,需要的朋友可以参考下
    2014-10-10

最新评论