javascript中浅拷贝和深拷贝的理解

最新推荐文章于 2024-07-15 14:11:16 发布
最新推荐文章于 2024-07-15 14:11:16 发布
阅读量77 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/bijiapo/p/5546527.html
版权

javascript中浅拷贝和深拷贝的理解

什么是拷贝？

简单地说就是复制，对数据的复制

浅拷贝：改变拷贝者的值，被拷贝者的值也会变化

深拷贝：改变拷贝者的值，被拷贝者的值不会变化

由于基本数据类型是存放在栈中，拷贝的就是自己本身，所以就是深拷贝

1：number

var a = 1;
b = a;
console.log(a);//1
console.log(b);//1
b = 2;
console.log(a);//1
console.log(b);//2

2:string

var a = "hello";
b = a;
console.log(a);//hello
console.log(b);//hello
b = "world";
console.log(a);//hello
console.log(b);//world

3:boolean

var a = true;
b = a;
console.log(a);//true
console.log(b);//true
b = false;
console.log(a);//true
console.log(b);//false

4:null

var a = null;
b = a;
console.log(a);//null
console.log(b);//null
b = "hello";
console.log(a);//null
console.log(b);//hello

5:undefined

var a = undefined;
b = a;
console.log(a);//undefined
console.log(b);//undefined
b = "hello";
console.log(a);//undefined
console.log(b);//hello

对于引用数据类型，通过复制的形式一般就是浅拷贝

6：Array浅拷贝

复制的只是引用，a和b在栈中是不同的值，但二者在堆中是同一块区域

var a = [1,2,3];
b = a;
console.log(a);//[1,2,3]
console.log(b);//[1,2,3]
b[1] = 4;
console.log(a);//[1,4,3]
console.log(b);//[1,4,3]

7：Array深拷贝

复制的不仅是引用，还有引用值，堆中也未b开辟了一块空间

8：Array深拷贝slice(0)

var a = [1,2,3];
b = a.slice(0);
console.log(a);//[1,2,3]
console.log(b);//[1,2,3]
b[1] = 4;
console.log(a);//[1,2,3]
console.log(b);//[1,4,3]

9：Array深拷贝concat()

var a = [1,2,3];
b = a.concat();
console.log(a);//[1,2,3]
console.log(b);//[1,2,3]
b[1] = 4;
console.log(a);//[1,2,3]
console.log(b);//[1,4,3]

10：Array深拷贝deepCopy()

var a = [1,2,3];
b = [];
deepCopy(a,b)
console.log(a);//[1,2,3]
console.log(b);//[1,2,3]
b[1] = 4;
console.log(a);//[1,2,3]
console.log(b);//[1,4,3]

function deepCopy(arr1,arr2){
    for(var i = 0,L = arr1.length;i<L;i++){
        arr2[i] = arr1[i]
    }
}

11：上面三种方法只针对一位数组，对于多维数组有局限性

12：Array多维数组深拷贝deepCopy()

var a = [[1,2,3,4],5,6];
b = [];
deepCopy(a,b)
console.log(a);//[ [ 1, 2, 3, 4 ], 5, 6 ]
console.log(b);//[ [ 1, 2, 3, 4 ], 5, 6 ]
b[0][1] = 7;
b[1] = 8;
console.log(a);//[ [ 1, 7, 3, 4 ], 5, 6 ]
console.log(b);//[ [ 1, 7, 3, 4 ], 8, 6 ]

function deepCopy(arr1,arr2){
    for(var i = 0,L = arr1.length;i<L;i++){
        arr2[i] = arr1[i]
    }
}

13：Array多维数组深拷贝slice(0)

var a = [[1,2,3,4],5,6];
b = a.slice(0)
console.log(a);//[ [ 1, 2, 3, 4 ], 5, 6 ]
console.log(b);//[ [ 1, 2, 3, 4 ], 5, 6 ]
b[0][1] = 7;
b[1] = 8;
console.log(a);//[ [ 1, 7, 3, 4 ], 5, 6 ]
console.log(b);//[ [ 1, 7, 3, 4 ], 8, 6 ]

14：Array多维数组深拷贝concat()

var a = [[1,2,3,4],5,6];
b = a.concat()
console.log(a);//[ [ 1, 2, 3, 4 ], 5, 6 ]
console.log(b);//[ [ 1, 2, 3, 4 ], 5, 6 ]
b[0][1] = 7;
b[1] = 8;
console.log(a);//[ [ 1, 7, 3, 4 ], 5, 6 ]
console.log(b);//[ [ 1, 7, 3, 4 ], 8, 6 ]

15：Array多维数组深拷贝deepCopy()优化处理

var a = [[1,2,3,[7,8]],5,6];
b = [];
deepCopy(a,b)
console.log(a);//[ [ 1, 2, 3, [ 7, 8 ] ], 5, 6 ]
console.log(b);//[ [ 1, 2, 3, [ 7, 8 ] ], 5, 6 ]
b[0][1] = 7;
b[0][3][1] = 9;
b[1] = 8;
console.log(a);//[ [ 1, 2, 3, [ 7, 8 ] ], 5, 6 ]
console.log(b);//[ [ 1, 7, 3, [ 7, 9 ] ], 8, 6 ]

function deepCopy(arr1,arr2){
    var tempArr = [];
    for(var i = 0,L = arr1.length;i<L;i++){
        if(arr1[i] instanceof Array){
            deepCopy(arr1[i],tempArr);
            arr2[i] = tempArr
        }else {
            arr2[i] = arr1[i];
        }
    }
}

16:对象浅拷贝

var a = {name:"zyb",age:23};
var b = a;
console.log(a)//{ name: 'zyb', age: 23 }
console.log(b);//{ name: 'zyb', age: 23 }

a.name = "lisi";
console.log(a)//{ name: 'lisi', age: 23 }
console.log(b);//{ name: 'lisi', age: 23 }

17：对象深拷贝

var a = {name:"zyb",age:23};
var b = new Object();

b.name = a.name;
b.age = a.age;
console.log(a)//{ name: 'zyb', age: 23 }
console.log(b);//{ name: 'zyb', age: 23 }

a.name = "lisi";
console.log(a)//{ name: 'lisi', age: 23 }
console.log(b);//{ name: 'zyb', age: 23 }

18：对象深拷贝：内嵌对象

var a = {name:"zyb",age:23,list:{
    goods:"篮球",
    detail:"运动是好的"
}};
var b = new Object();

b.name = a.name;
b.age = a.age;
b.list = a.list;
console.log(a)//{ name: 'zyb', age: 23, list: { goods: '篮球', detail: '运动是好的' } }
console.log(b);//{ name: 'zyb', age: 23, list: { goods: '篮球', detail: '运动是好的' } }

a.name = "lisi";
a.list.goods = "足球";
console.log(a)//{ name: 'lisi', age: 23, list: { goods: '足球', detail: '运动是好的' } }
console.log(b);//{ name: 'zyb', age: 23, list: { goods: '足球', detail: '运动是好的' } }

19：对象深拷贝deepCopy()

var a = {name:"zyb",age:23};
var b = deepCopy(a);

console.log(a)//{ name: 'zyb', age: 23 }
console.log(b);//{ name: 'zyb', age: 23 }

a.name = "lisi";

console.log(a)//{ name: 'lisi', age: 23 }
console.log(b);//{ name: 'zyb', age: 23 }

function deepCopy(obj){
    var result = {};
    for(var key in obj){
        if(obj.hasOwnProperty(key)){
            result[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
    }
    return result;
}

20：对象深拷贝deepCopy()：内嵌对象

var a = {name:"zyb",age:23,list:{
    goods:"篮球",
    detail:"运动是好的"
}};
var b = deepCopy(a)

console.log(a)//{ name: 'zyb', age: 23, list: { goods: '篮球', detail: '运动是好的' } }
console.log(b);//{ name: 'zyb', age: 23, list: { goods: '篮球', detail: '运动是好的' } }

a.name = "lisi";
a.list.goods = "足球";
console.log(a)//{ name: 'lisi', age: 23, list: { goods: '足球', detail: '运动是好的' } }
console.log(b);//{ name: 'zyb', age: 23, list: { goods: '篮球', detail: '运动是好的' } }

function deepCopy(obj){
    var result = {};
    for(var key in obj){
        if(obj.hasOwnProperty(key)){
            result[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
    }
    return result;
}

21:jquery中对数组的拷贝

var a = [1,2,3];
var b = $.extend([],a);
console.log(a)//[1,2,3]
console.log(b)//[1,2,3]
b.push(4)
console.log(a)//[1,2,3]
console.log(b)//[1,2,3,4]

22:jquery中对对象的拷贝1

var a = {a1:1,a2:2,a3:3};
var b = $.extend({},a);
console.log(a)//{a1:1,a2:2,a3:3}
console.log(b)//{a1:1,a2:2,a3:3}
b.b4 = 4
console.log(a)//{a1:1,a2:2,a3:3}
console.log(b)//{a1:1,a2:2,a3:3,b4:4}

23:jquery中对对象的拷贝2

var a = {a1:1,a2:2,a3:3};
var b = $.extend({b0:0},a);
console.log(a)//{a1:1,a2:2,a3:3}
console.log(b)//{b0:0,a1:1,a2:2,a3:3}
b.b4 = 4
console.log(a)//{a1:1,a2:2,a3:3}
console.log(b)//{b0:0,a1:1,a2:2,a3:3,b4:4}

24:jquery中对对象的拷贝3

var a = {a1:1,a2:2,a3:3};
var c = {c1:1,c2:2,c3:3};
var b = $.extend({b0:0},a,c);
console.log(a)//{a1:1,a2:2,a3:3}
console.log(b)//{a1:1,a2:2,a3:3,b0:0,c1:1,c2:2,c3:3}
b.b4 = 4
console.log(a)//{a1:1,a2:2,a3:3}
console.log(b)//{a1:1,a2:2,a3:3,b0:0.b4:4,c1:1,c2:2,c3:3}

转载于:https://www.cnblogs.com/bijiapo/p/5546527.html

weixin_30784141
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 中的浅拷贝和深拷贝
Eiwen的博客
04-08 321
一.前言 每一个前端的 JavaScript 之路不一定是由《JavaScript 高级程序设计》开启的，但是每一位前端都一定被“按值传递”和“按引用传递”这两个概念坑过。现在你我应该都很清楚，在 JavaScript 中的object类型是按引用传递的，但是在函数参数中，所有参数都是按值传递的。 我们今天要谈的东西，就起源于object型数据的复制与再操作，简单来说，就是我们今天的主题：对象的浅...
javascript深拷贝、浅拷贝和循环引用深入理解
10-18
JavaScript中的深拷贝和浅拷贝是编程中常见的概念，主要涉及到对象和数组的复制。在JavaScript中，数据类型分为基本数据类型（如Number、String、Boolean等）和引用数据类型（如Object、Array等）。基本类型直接存储...
数组复制
halibote330的博客
08-03 262
push function copyArray(arr){ var result = []; for(var i = 0; i < arr.length; i++){ result.push(arr[i]); } return result; } var obj1=[1,2,3]; var obj2=copyArray(obj1); cons
浅拷贝与深拷贝
weixin_55252478的博客
08-24 93
\
JavaScript中的浅拷贝和深拷贝
ICanWin_lll的博客
10-08 337
浅拷贝是对象的逐位复制。创建一个新对象，该对象具有原始对象中值的精确副本。如果对象的任何字段是对其他对象的引用，则只复制引用地址，即，复制内存地址。默认情况下：引用类型（object）都是浅拷贝简单理解：对于对象来说，就是对最外层数据的拷贝，如果对象只有一层，则相当于深拷贝，如果对象有多层，即某个属性为引用数据类型，则拷贝的是该引用类型在堆中的地址，不会在内存创建一个新的对象。
js中的浅拷贝与深拷贝
jiangjunyuan168的博客
02-10 2956
在前端开发中的过程中我们经常要接触到浅拷贝与深拷贝的问题， 下面就对浅拷贝与深拷贝的概念、区别以及其有哪种实现方法来做一个简单的说明。 概念 浅拷贝： 浅拷贝是指，一个新的对象对原始对象的属性值进行精确地拷贝，如果拷贝的是基本数据类型，拷贝的就是基本数据类型的值，如果是引用数据类型，拷贝的就是内存地址。如果其中一个对象的引用内存地址发生改变，另一个对象也会发生变化。 深拷贝： 深拷贝相对浅拷贝而言，如果遇到属性值为引用类型的时候，它新建一个引用类型并将对应的值复制给它，因此对象获得的一个新的引用类型而不是一
javascript中的深拷贝与浅拷贝
王工头的博客
01-26 279
javascript中的深拷贝与浅拷贝 欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~ 声明：参考文章：http://www.cnblogs.com/Chen-XiaoJun/p/6217373.html 看这个深拷贝和浅拷贝之前，先要对javascript中不同数据类型之间的传值有一定的了解 javascript中不同数据类型之间的传值 javascript中数据...
理解javascript中浅拷贝和深拷贝
The_upside_of_down的博客
11-01 144
首先，我们要知道javascript的数据类型。 javascript有两种数据类型，基础数据类型和引用数据类型。 基础数据类型：保存在栈内存中的简单数据段，有undefined，boolean，number，string，null。 引用数据类型：Array，对象，Function保存在堆内存空间中。 如图所示： a1 = 0;a2 = 'this is str';a3 = n...
javaScript中浅拷贝和深拷贝的区别
休息休息夏的博客
04-23 111
浅谈javaScript中浅拷贝和深拷贝的区别 基本类型和引用类型 在开始讲解JavaScript的深拷贝和浅拷贝之前，先要认识JavaScript的两种基本数据类型。一种是基本类型（值类型），另外一种是引用类型。其中基本类型包括undefined、null、number、string和boolean，这几种类型在内存中都有固定的大小和空间。引用类型包括object，这种值的大小不固定，可以动态添加属性和方法，而基本类型则不可以。 基本类型的值保存在内存中的栈中，而引用数据类型的值保存在内存中的堆中，在栈内
通俗易懂讲解JavaScript深拷贝和浅拷贝
Einstellung的博客
10-30 1715
基本类型和引用类型 在开始讲解JavaScript的深拷贝和浅拷贝之前，先要认识JavaScript的两种基本数据类型。一种是基本类型（值类型），另外一种是引用类型。其中基本类型包括undefined、null、number、string和boolean，这几种类型在内存中都有固定的大小和空间。引用类型包括object，这种值的大小不固定，可以动态添加属性和方法，而基本类型则不可以。 基本类型的值保存在内存中的栈中，而引用数据类型的值保存在内存中的堆中，在栈内存中保存着指向堆内存的指针。如果此时你对栈或者堆
JavaScript深入理解系列：深拷贝与浅拷贝
qq_18599727的博客
04-15 426
导读 在平时工作中或者面试中都会接触到对数据的复制，下面来实现一个比较完整的功能，提供全部思路，下面直接进入正文。 定义 回顾一下JavaScript中存在两大数据类型： 基本数据类型：String、Number、Boolean、Null、Undefined、Symbol（ES6 引入了一种新的原始数据类型，表示独一无二的值） 引用数据类型：Object（Array、Function、RegExp、Date…） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uEI
Javascript 浅拷贝、深拷贝的实现代码
10-30
总结来说，浅拷贝和深拷贝是JavaScript中处理对象复制的关键概念，它们在处理复杂数据结构时尤为重要，特别是在需要保持原始数据不变性的场景下。了解和掌握这两种拷贝方式，能够帮助开发者更好地理解和控制对象之间...
javascript深拷贝和浅拷贝详解
10-20
在JavaScript中，深拷贝和浅拷贝是两种不同的复制对象或数组的方式，它们在处理复杂数据结构时尤其重要，因为它们决定了原数据和副本之间的关联关系。本文将详细解释这两种拷贝的区别以及如何实现它们。 **一、数组...
JavaScript对象的浅拷贝与深拷贝实例分析
12-03
JavaScript中的对象拷贝是编程中... 总之，理解JavaScript中的浅拷贝和深拷贝非常重要，因为它们直接影响到对象的复制行为和数据的独立性。在实际开发中，选择适当的拷贝策略可以避免意外的副作用，确保程序的正确性。
javascript 关于赋值、浅拷贝、深拷贝的个人理解
10-16
在JavaScript中，理解和掌握赋值、浅拷贝、深拷贝是至关重要的，尤其是在处理复杂数据结构时。以下是对这些概念的详细解释： 1. **栈内存与堆内存** - **栈内存** 主要用于存储基本数据类型（如Number, String, ...
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 410
原生WebSocket： new WebSocket。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 190
vue 自定义滚动条同步拖动（移动端）
vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex
最新发布
weixin_73582152的博客
07-15 261
Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。单线程。
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
huanghm88的专栏
07-11 701
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
浅拷贝和深拷贝，深拷贝怎么实现的
08-25
浅拷贝和深拷贝是在对象拷贝过程中常用的概念。 浅拷贝只会拷贝对象的一层属性，即将原始对象的属性值复制到目标对象，如果属性是引用类型，那么拷贝的是引用而不是实际的对象。这意味着，如果修改了原始对象的属性...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值