javascript二维数组和对象的深拷贝与浅拷贝实例分析


Posted in Javascript onOctober 26, 2019

本文实例讲述了javascript二维数组和对象的深拷贝与浅拷贝。分享给大家供大家参考,具体如下:

这篇文章主要为大家详细介绍了js实现数组和对象的深浅拷贝,

1.浅拷贝: 将原对象或原数组的引用直接赋给新对象,新数组,新对象/数组只是原对象的一个引用

2.深拷贝: 创建一个新的对象和数组,将原对象的各项属性的“值”(数组的所有元素)拷贝过来,是“值”而不是“引用”

JavaScript的数据类型分为原始数据类型和对象类型。二者在内存中存放的方式不同,导致了其赋值时差异。分别举个栗子

var x = 1;
var y = x; //y获得了和x同样的值
y = 2;
console.log(x); // 1
var m = [1,2]; //m存放的是指向[1,2]这个数组对象的引用地址
var n = m; //n也获得 [1,2]数组对象的引用地址
n[0] = 3;
console.log(m); //[3,2]
var m = [1,2]; //m存放的是指向[1,2]这个数组对象的引用地址
var n = m; //n也获得 [1,2]数组对象的引用地址
m[0] = 4;
console.log(n); //[4,2]

原始数据类型赋值时,不会相互影响; 而对象类型,给的是 原数据的引用地址,所以新旧数据会互相影响,

什么是深拷贝?

顾名思义,浅拷贝就是流于表面的拷贝方式;当属性值为对象类型时,只拷贝了对象数据的引用,导致新旧数据没有完全分离,还会互相影响。eg:

//测试数据
var array1 = ['a',1,true,{name:'lei',age:18}];
//concat() slice() 实现深拷贝
var array2 = array1.concat()
//修改拷贝后的数据
array2[0] = 'b';   //array1[0]是原始数据类型 所以是直接赋值的
array2[3].name = 'zhang'; //array1[3]是对象数据类型 所以拷贝的是对象的引用,其实还是和原数组使用同一对象
console.log(array1); // ['a',1,true,{name:'zhang',age:18}]

什么是浅拷贝

上面的  array.concat()或者array.slice() 是特殊的实现数组深拷贝的方式。直接复制也是浅烤贝

var array1 = ['a',1,true,{name:'lei',age:18}];
var temp = array1;
temp[3].name = "hanmeimei";
console.log(array1[3].name)//hanmeimie

深拷贝及其实现

从浅拷贝解释可以明白,深拷贝就是 ‘完全'拷贝,拷贝之后新旧数据完全分离,不共用对象类型的属性值,不互相影响。

实现方式:

取巧方式 JSON.parse(JSON.stringify(Obj))  

var test = [1,'a',{name:'lei',age:18}];
var copy1 = JSON.parse(JSON.stringify(test)); //特殊方式
console.log(copy1);
copy1[2].name = 'zhang'
console.log(test); //[1,'a',{name:'lei',age:18}] 未受到影响

注意:这种方式不能深拷贝有属性值为函数的对象,

实现深拷贝

已经实现了浅拷贝,思考下应该是对 对象类型属性值赋值时,导致的没有完全分离,所以要修改下 拷贝对象类型属性值的方式,对它再调用一次深拷贝,这样就实现了深拷贝,如下:

//实现深拷贝
function deepCopy( target ){
   if(typeof target !== 'object') return ;//判断目标类型,来创建返回值
   var newObj = target instanceof Array ? [] : {};
   for(var item in target){ //只复制元素自身的属性,不复制原型链上的
     if(target.hasOwnProperty(item)){
      newObj[item] = typeof target[item] == 'object' ? deepCopy(target[item]) : target[item] //遍历判断属性值类型
     }
   }
   return newObj
}
//测试------------------------------------------------------
var test = [1,'a',{name:'hanmeimei',age:18}];
var copy2 = deepCopy(test);
copy2[2].name = 'lilei'
console.log(test); ////[1,'a',{name:'hanmeimei',age:18}] 未受到影响

二维数组深度拷贝简单实现

function deepcopyArr(arr) {
   var outarr = [],len = arr.length;
   for (var i=0; i < len; i++) {
      outarr[i]=new Array();
      for(var j=0;j<arr[i].length;j++){
       outarr[i][j]=arr[i][j];
      }
   }
   return outarr;
}
function deepClone (obj) {
  if (typeof obj !== 'object') {
    return obj;
  }
  if (!obj) { // obj 是 null的情况
    return obj;
  }
  if (obj instanceof Date) {
    return new Date(obj);
  }
  if (obj instanceof RegExp) {
    return new RegExp(obj);
  }
  if (obj instanceof Function) {
    return obj;
  }
  let newObj;
  if (obj instanceof Array) {
    newObj = [];
    for(let i = 0, len = obj.length; i < len; i++){
        newObj.push(deepClone(obj[i]));//递归操作嵌套对象
     }
     return newObj;
  }
  newObj = {};
  for(let key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (typeof obj[key] !== 'object') {
        newObj[key] = obj[key];
      } else {
        newObj[key] = deepClone(obj[key]);//递归操作嵌套对象
      }
    }
  }
  return newObj;
}
//基本数据类型/引用数据类型深度克隆完整代码

后续完善。。。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 Javascript
Layui数据表格之单元格编辑方式
Oct 26 #Javascript
layui表格设计以及数据初始化详解
Oct 26 #Javascript
LayUi数据表格自定义赋值方式
Oct 26 #Javascript
layui实现数据表格自定义数据项
Oct 26 #Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 #Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 #Javascript
js前端如何写一个精确的倒计时代码
Oct 25 #Javascript
You might like
缓存技术详谈―php
2006/12/14 PHP
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
php 显示指定路径下的图片
2009/10/29 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
php中opendir函数用法实例
2014/11/15 PHP
php显示时间常用方法小结
2015/06/05 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
桥梁工程专业求职信
2014/04/21 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
可可西里观后感
2015/06/08 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
Vue h函数的使用详解
2022/02/18 Vue.js