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 jscroll模拟html元素滚动条
Dec 18 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
js实现加载更多功能实例
Oct 27 Javascript
详解js前端代码异常监控
Jan 11 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 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
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
php函数连续调用实例分析
2015/07/30 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
js 浏览器事件介绍
2012/03/30 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
windows下安装nodejs及框架express
2015/08/07 NodeJs
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
Python Queue模块详解
2014/11/30 Python
Django 外键的使用方法详解
2019/07/19 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
干部作风建设工作总结
2014/10/29 职场文书
晚会开幕词
2015/01/28 职场文书
大班下学期个人总结
2015/02/13 职场文书