欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript对深拷贝与浅拷贝的基础了解

程序员文章站 2022-06-22 14:40:38
JavaScript浅拷贝与深拷贝首先要明白JavaScript的数据类型,栈内存与堆内存。JavaScript有两种数据类型1.基础数据类型(存于栈内存)2.引用数据类型(存于堆内存)基础数据类型:string、number、boolean、null、undefined引用数据类型:array、Object、Function了解基础后,看看深拷贝与浅拷贝的区别栈内存示例图:var name='Tom';//name变量的数据类型为stringvar age=18;//age变量...

JavaScript浅拷贝与深拷贝

首先要明白JavaScript的数据类型,栈内存与堆内存。

JavaScript有两种数据类型
1.基础数据类型(存于栈内存)
2.引用数据类型(存于堆内存)

基础数据类型stringnumberbooleannullundefined
引用数据类型arrayObjectFunction

了解基础后,看看深拷贝与浅拷贝的区别

栈内存示例图:
JavaScript对深拷贝与浅拷贝的基础了解

var name='Tom';//name变量的数据类型为string
var age=18;//age变量的数据类型为number
//string、number属于基本数据类型,所以存在栈内存中

堆内存示例图:
JavaScript对深拷贝与浅拷贝的基础了解

var name_Array=[1,2,3];//name_Array变量的数据类型为Array

//name_Object变量的数据类型为Object
var name_Object={
	name:'Amy'
}
//Array、Object属于引用数据类型,引用数据类型存与堆内存中

了解栈内存与堆内存的区别后,我们就看看浅拷贝与深拷贝

深拷贝:

我们先看看一段代码。

var you_name='Tom';
var my_name=you_name;
//you_name的数据类型为string,存在栈内存中

我们用图片看懂这段深拷贝的代码。
JavaScript对深拷贝与浅拷贝的基础了解

深拷贝我们可以得出总结:深拷贝的时候,拷贝的变量与被拷贝的变量不共享内存位置,都有自己独自的内存位置。

浅拷贝:

接下来我们看看浅拷贝,也是用代码看看。

var last_arr=[1,2,3];
var new_arr=last_arr;
//last_arr的数据类型为Array,存在与堆内存中

我们用图片看懂这段浅拷贝的代码
JavaScript对深拷贝与浅拷贝的基础了解
浅拷贝我们可以得出总结:浅拷贝中,拷贝的变量与被拷贝的变量是共享一个内存位置的。

浅拷贝的变量都是指向同一个内存,所以new_arr改变数组其中的元素后,last_arr的数组也会跟着改变。

var last_arr=[1,2,3];
var new_arr=last_arr;

new_arr[1]='A';
console.log(last_arr);
//输出[1,'A',3]
//new_arr改变了其中的元素,last_arr也跟着改变,因为new_arr与last_arr都指向同一个内存位置

本文地址:https://blog.csdn.net/qq_44849271/article/details/107489842

相关标签: JavaScript