JS的数据类型及深浅拷贝介绍

1、数据类型

JS分为两种数据类型:
基本数组类型: Number、String、Boolean、Null、Undefined、Symbol
引用数组类型:Object(JS中除了基本数据类型,其他都是对象。例如数组、函数、正则表达式等)

(1)基本数据类型(存放在栈中)

基本数据类型是指直接存放在栈中的简单数据段,数据大小确定,内存k空间可分配,按值存放和访问
注:栈(stack)和堆(heap)
stack为自动分配的内存空间,它由系统自动释放;而heap则是动态分配的内存,大小也不一定会自动释放

(2)引用数据类型(存放在堆内存中的对象)

引用数据类型是存放在堆内存里的对象,而指向堆内存值的引用也就是指针是存在栈内存中的。

2、浅拷贝

当我们使用对象拷贝时,如果属性是对象或者数组时,我们只是拷贝的数组或对象的引用地址,因此两者的属性值会指向同一个内存空间。实现数组的片浅拷贝使用concat、slice
这个两个是技巧类,如何实现一个浅拷贝呢?简单的思路是遍历对象,把属性和属性值都放在一个新的对象中
如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
var shallowCopy = function(obj) {
// 只拷贝对象
if (typeof obj !== 'object') return;
// 根据obj的类型判断是新建一个数组还是对象
var newObj = obj instanceof Array ? [] : {};
// 遍历obj,并且判断是obj的属性才拷贝
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = obj[key];
}
}
return newObj;
}
1
2
3
4
5
let a = { name: '123', obj: { name: '456' }}
const b = shallowCopy(a)
b.obj.name = '666'
console.log(b) // { name: '123', obj: { name: '666' } }
console.log(a) // { name: '123', obj: { name: '666' } }

这样如果改变b中的对象,a中的对象也会同时改变。

3、深拷贝

实现数组或对象的深拷贝,可以使用JSON.parse(JSON.stringify(obj))
如何手写一个深度拷贝呢?思路是通过递归调用拷贝函数

1
2
3
4
5
6
7
8
9
10
var deepCopy = function(obj) {
if (typeof obj !== 'object') return
var newObj = obj instanceof Array ? [] : {}
for (key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key]
}
}
return newObj
}
1
2
3
4
5
let a = { name: '123', obj: { name: '456' }}
const b = deepCopy(a)
b.obj.name = '666'
console.log(b) // { name: '123', obj: { name: '666' } }
console.log(a) // { name: '123', obj: { name: '456' } }

这样就实现了深度拷贝,当改变b中对象值时,a没有发生变化。


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!