共计 1355 个字符,预计需要花费 4 分钟才能阅读完成。
导读 | js 数据类型主要分基本数据类型和引用数据类型。前者包括 Number,String 等,后者主要是 Object, 因此以下会针对不同的数据类型来分析, 需要的朋友可以参考一下 |
1、js 内存
js 内存,或者说大部分语言的内存都分为栈和堆。基本数据类型的变量值分配在栈上,引用数据类型的变量值分配在堆上,栈中只是存储具体堆中对象的地址。
2、赋值
对于基本数据类型,赋值操作是拷贝,即新旧变量不会相互影响。
var a = 1; | |
var b = a; | |
b = 2; | |
console.log(b); // 2 |
对于引用数据类型,赋值操作只是在栈中新增一个指向堆中对象的变量,即复制引用地址。新旧变量之间会互相影响,即在新变量上改变对象值,旧变量对应值也会改变。
var a = {name: "mike"}; | |
var b = a; | |
b.name = "jack"; | |
console.log(a); // {name: "jack"} |
3、浅拷贝
对于基本数据类型和不具有嵌套对象的数据,均是拷贝操作,新旧变量之间不会相互影响。
var a = {name: "mike"}; | |
var b = {}; | |
b.name = a.name; | |
b.name = "jack"; | |
console.log(a) // {name: "mike"} |
但是对于具有嵌套对象的数据,浅拷贝只拷贝第一层对象,深层次的值仍然是复制引用地址。
var a = { | |
name: "mike", | |
language: { | |
first: "english", | |
second: "chinese" | |
} | |
}; | |
var b = {}; | |
b.name = a.name; | |
b.name = "jack"; | |
b.language = a.language; | |
b.language.first = "japanese" | |
console.log(a) // {language : {first: "japanese", second: "chinese"}} |
js 实现浅拷贝,思想:遍历 target 的每个属性,将起属性名和值赋值给新变量。
如果你明白了赋值的含义,那么在代码的第四行,当此时的 target[key] 的值是对象的时候,通过赋值赋予新变量,本质上是复制引用数据类型在堆中的地址,就不难理解为什么浅拷贝对于是否是嵌套对象的有不同结果了。
function shallowCopy(target) {let result = {}; | |
for (const key in target) {result[key] = target[key]; | |
} | |
return result; | |
} |
4、深拷贝
深拷贝是完完全全的拷贝,新旧变量之间不会相互影响。
对于参数是否是对象有不同的处理方法,如果是对象,对于对象的每个属性和值赋值然后递归处理; 否则直接返回。
function clone(target) {if (typeof target === "object") { | |
// 判断是否是数组 | |
let result = Array.isArray(target)? [] : {}; | |
for (const key in target) {result[key] = clone(target[key]); | |
} | |
return result; | |
} else {return target;} | |
} |
到此这篇关于 js 中的赋值 浅拷贝和深拷贝详细的文章就介绍到这了
正文完
星哥玩云-微信公众号
