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使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
js实现简单的无缝轮播效果
Sep 05 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 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
计数器详细设计
2006/10/09 PHP
php生成文件
2007/01/15 PHP
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
php修改时间格式的代码
2011/05/29 PHP
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
Python的Django框架中的Context使用
2015/07/15 Python
python验证码识别的示例代码
2017/09/21 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
关于Python数据结构中字典的心得
2017/12/04 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
商家认证委托书格式
2014/10/16 职场文书
2014年工会工作总结
2014/11/12 职场文书
教学督导岗位职责
2015/04/10 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书