JavaScript中Object值合并方法详解


Posted in Javascript onDecember 22, 2017

前言:在日常开发工作中我们可能会遇到js中对象中所有值的复制工作,也有可能是通过electron开发客户端,改版时候面临到的设置合并问题。那么本文将对此做一个简要解决方案的叙述。

介绍:比如有obj1, obj2,我们需要将obj1中的所有与obj2中相同字段相同深度的值copy给obj2,并且需要保持obj2字段结构不变,调用一下方法即可(采用ES6写法)。

代码:

/**
     * 将src中的数据copy到dist中,并保留dist的结构
     * @param src
     * @param dist
     */
    copyValue(src, dist) {
      if (!src || typeof(src) !== 'object' || typeof(dist) !== 'object'){
        return ;
      }

      let keys = Object.keys(dist)
      if (keys && keys.length > 0 && isNaN(keys[0])){
        keys.forEach(key => {
          let value = dist[key]
          let srcVal = src[key]

          // 判断是不是对象,如果是则继续遍历,不是则开始赋值或忽略
          if (value !== undefined && typeof(value) === 'object' && srcVal && typeof(srcVal) === 'object' && srcVal[0] === undefined){
            copyValue(srcVal, value)
          } else if (value !== undefined && srcVal && typeof(value) == typeof (srcVal)){
            // 如果源数据存在,并且类型一致,则开始赋值
            dist[key] = src[key]
          }
        })
      }

    },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
浅析javascript函数表达式
Feb 10 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
Vue 自定义指令功能完整实例
Sep 17 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
Angular简单验证功能示例
Dec 22 #Javascript
Angular实现的table表格排序功能完整示例
Dec 22 #Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 #Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 #Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 #Javascript
js读取本地文件的实例
Dec 22 #Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 #Javascript
You might like
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
php操作MongoDB类实例
2015/06/17 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
python妙用之编码的转换详解
2017/04/21 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
python 删除非空文件夹的实例
2018/04/26 Python
python实现抖音视频批量下载
2018/06/20 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
单身旅行者的单身假期:Just You
2018/04/08 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
大学新生欢迎词
2014/01/10 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
先进个人总结范文
2015/02/15 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs