JS浅拷贝和深拷贝原理与实现方法分析


Posted in Javascript onFebruary 28, 2019

本文实例讲述了JS浅拷贝和深拷贝原理与实现方法。分享给大家供大家参考,具体如下:

浅拷贝只会拷贝一层,深层的引用类型改变还是会受到影响。

深拷贝是所有内部的属性还有值都被拷贝了一份,不管深层的引用类型怎么改都不会受到影响。

浅拷贝的实现方式

1、自定义函数

function shallowClone (initalObj) {
   var obj = {};
   for ( var i in initalObj) {
    obj[i] = initalObj[i];
   }
   return obj;
}

2、ES6 的 Object.assign()

let newObj = Object.assign({}, obj);

3、ES6 的对象扩展

let newObj = {...obj};

深拷贝的实现方式

1、JSON.stringify 和 JSON.parse

JSON.stringify 把对象转换成字符串,再用 JSON.parse 把字符串转换成新的对象。

可以转成 JSON 格式的对象才能使用这种方法,如果对象中包含 function 或 RegExp 这些就不能用这种方法了。

let newObj = JSON.parse(JSON.stringify(obj));

2、jquery 和 zepto

jquery 和 zepto 里的 $.extend 方法可以用作深拷贝。

var $ = require('jquery');
var newObj = $.extend(true, {}, obj);

3、lodash

用 lodash 函数库提供的 _.cloneDeep 方法实现深拷贝。

var _ = require('lodash');
var newObj = _.cloneDeep(obj);

4. 自己封装

deepClone = (obj) => {
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
      // for...in 会把继承的属性一起遍历
      for(let key in obj){
        // 判断是不是自有属性,而不是继承属性
        if(obj.hasOwnProperty(key)){
          //判断ojb子元素是否为对象或数组,如果是,递归复制
          if(obj[key]&&typeof obj[key] ==="object"){
            objClone[key] = this.deepClone(obj[key]);
          }else{
            //如果不是,简单复制
            objClone[key] = obj[key];
          }
        }
      }
    }
    return objClone;
}

参考:https://3water.com/article/99013.htm

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
js实现小时钟效果
Mar 25 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 #Javascript
详解写好JS条件语句的5条守则
Feb 28 #Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 #Javascript
jQuery.parseJSON()函数详解
Feb 28 #jQuery
js获取form表单中name属性的值
Feb 27 #Javascript
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 #Javascript
jQuery each和js forEach用法比较
Feb 27 #jQuery
You might like
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
PHP写的求多项式导数的函数代码
2012/07/04 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
Python完全新手教程
2007/02/08 Python
python两种遍历字典(dict)的方法比较
2014/05/29 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
Python3.4解释器用法简单示例
2019/03/22 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
django ORM之values和annotate使用详解
2020/05/19 Python
python如何查看网页代码
2020/06/07 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
静态成员和非静态成员的区别
2012/05/12 面试题
酒店服务与管理毕业生求职信
2013/11/02 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
社区文明倡议书
2015/04/28 职场文书
使用Python解决图表与画布的间距问题
2022/04/11 Python
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技