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 相关文章推荐
JavaScript的9个陷阱及评点分析
May 16 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
javascript中new关键字详解
Dec 14 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 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
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
php-fpm中max_children的配置
2019/03/15 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
js静态作用域的功能。
2006/12/25 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
vue实现拖拽效果
2019/12/23 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python的另外几种语言实现
2015/01/29 Python
Python魔法方法详解
2019/02/13 Python
Python换行与不换行的输出实例
2020/02/19 Python
python GUI模拟实现计算器
2020/06/22 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
四风对照检查剖析材料
2014/10/07 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
结婚司仪主持词
2015/06/29 职场文书
python 实现的截屏工具
2021/05/08 Python