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 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
jQuery 前的按键判断代码
Mar 19 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 Javascript
vuex的使用步骤
Jan 06 Vue.js
通过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 Ajax中文乱码问题解决方法
2009/02/27 PHP
php的大小写敏感问题整理
2011/12/29 PHP
PHP实现的简单缓存类
2015/07/29 PHP
jquery的键盘事件修改代码
2011/02/24 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
js 开发之autocomplete="off"在chrom中失效的解决办法
2017/09/28 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
Python 25行代码实现的RSA算法详解
2018/04/10 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
pandas 选择某几列的方法
2018/07/03 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
Python缓存技术实现过程详解
2019/09/25 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
温泉秘密:Onsen Secret
2020/07/06 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
网络工程师的自我评价
2013/10/02 职场文书
生物技术专业毕业生求职信范文
2013/12/14 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书