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 相关文章推荐
js过滤数组重复元素的方法
Sep 05 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
js实现贪吃蛇小游戏
Oct 29 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 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
paypal即时到账php实现代码
2010/11/28 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
vue组件生命周期详解
2017/11/07 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
Python文件和目录操作详解
2015/02/08 Python
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
解决python 找不到module的问题
2020/02/12 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
债务纠纷委托书
2014/08/30 职场文书
六五普法宣传标语
2014/10/06 职场文书
感谢信格式范文
2015/01/22 职场文书
内勤岗位职责范本
2015/04/13 职场文书
小学生反邪教心得体会
2016/01/15 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS