javascript浅层克隆、深度克隆对比及实例解析


Posted in Javascript onFebruary 09, 2020

这篇文章主要介绍了javascript浅层克隆、深度克隆对比及实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

1、浅层克隆, (引用值改变, 两个都一起变)

var obj = {
        name : 'xiaoming',
        age : 12,
        children : ['mimi','lili','rokey']
      }
      var obj2 = {};

      function clone(origin, target) {
        var target = target || {};
         for(var prop in origin) {
           target[prop] = origin[prop];
         }
         return target;
      }

      clone(obj, obj2);

2、深度克隆 (只考虑数组和对象)

(1)判断是不是原始值

 (2)判断是数组还是对象 Object.prototype.toString.call([]) = '[object Array]' Object.prototype.toString.call({}) = '[object Object]'

(3)建立相应的数组和对象

(4)递归

function deepClone(origin, target) {
        var target = target || {},
          toStr = Object.prototype.toString,
          arrStr = '[object Array]';
        for(var prop in origin) {
          if(origin.hasOwnProperty(prop)) {   //判断是不是对象自带的属性
            if(origin[prop] !== 'null' && typeof(origin[prop]) == 'object') {
              if(toStr.call(origin[prop]) == arrStr) {
                target[prop] = [];
              }else {
                target[prop] = {};
              }
              deepClone(origin[prop], target[prop]);
            }else {
              target[prop] = origin[prop];
            }
          }
        }
        return target;
      }

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

Javascript 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
jquery实现网页定位导航
Aug 23 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
js实现图片懒加载效果
Jul 17 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 #Javascript
jQuery实现简单聊天室
Feb 08 #jQuery
jquery实现点击弹出对话框
Feb 08 #jQuery
jQuery实现简易聊天框
Feb 08 #jQuery
jquery添加div实现消息聊天框
Feb 08 #jQuery
js实现聊天对话框
Feb 08 #Javascript
jQuery实现聊天对话框
Feb 08 #jQuery
You might like
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
php显示页码分页类的封装
2017/06/08 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
代码生成器 document.write()
2007/04/15 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
python实现随机密码字典生成器示例
2014/04/09 Python
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
Python编程中的异常处理教程
2015/08/21 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
Django REST framework 视图和路由详解
2019/07/19 Python
Python关于反射的实例代码分享
2020/02/20 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
医院信息公开实施方案
2014/05/09 职场文书
护士节策划方案
2014/05/19 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
教师工作表现评语
2014/12/31 职场文书
小学课改工作总结
2015/08/13 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
JavaCV实现照片马赛克效果
2022/01/22 Java/Android