由浅入深分析JS中基本数据类型和引用数据类型的区别

陈德立

1.  广义上JS的数据分类

js分为两种数据类型:

1.基本数据类型:Number,String,Null,Bollean,Undefined,Symbol(es6)

是否可以改变:否(基本数据类型重新赋值时会指向一个新的内存地址,旧的没有改变,这个后面可能会写专题文章说明✨)

数据存储的位置:栈内存(堆和栈也可能会单独开一篇文章✨)

2.引用数据类型:Array,Object,Function等(有人说JS中所有这些都为对象封装衍生,对象可以理解为储存在栈内存中的对对内存的引用指针,指针消失后可能会引发JS的垃圾回收机制✨)

是否可以改变:是

数据储存的位置:堆内存

2.  基本数据类型

const a = 10

let b = 10

let a = 20

image.png

3.  引用数据类型与浅拷贝

const obj1={a:123}

const obj2 = obj1 

const dataA = obj1.a

console.log(JSON.stringify(obj2))

obj2.b ="这是个obj2的b"

obj2.a=567

obj2.c={name:"name"}

console.log(JSON.stringify(obj1))

console.log(JSON.stringify(obj2))

console.log(dataA)

运行结果:

image.png

image.png

4.  深拷贝

当我们不希望被拷贝出来的对象继承到原对象指向的内存地址,就要进行深拷贝,这里使用递归来对对象内的每个属性进行重新赋值

const Copy=(obj)=>{
 if (!obj) {
 return obj
 }
 if (typeof obj!=="object") {
 return obj
 }
 if (obj.constructor===Date) {
 return new Date(obj)
 }
 const newObj=new obj.constructor() _//保持继承链_
 for (const key in obj) {
 if (obj.hasOwnProperty(key)) {
 const element = obj[key];
 newObj[key] = typeof element === "object" ? Copy(element) : element
 }
 }
 return newObj
}
const obj3 = Copy(obj1)
obj3.b="obj3"
console.log(JSON.stringify(obj3))
const array = Copy(["obj1", "obj2", "obj3"])
console.log(array)

接着运行以上代码得出结果

image.png

5.总结

1.基本数据类型和引用数据类型存储数据分别位于栈内存和堆内存

2.引用数据类型的结构会导致继承

3.深拷贝为将堆内存内的数据重新赋值

阅读 98

前端开发工程师

1 声望
0 粉丝
0 条评论
你知道吗?

前端开发工程师

1 声望
0 粉丝
宣传栏