千家信息网

js中如何实现赋值、浅拷贝和深拷贝

发表于:2024-10-25 作者:千家信息网编辑
千家信息网最后更新 2024年10月25日,这篇文章主要介绍js中如何实现赋值、浅拷贝和深拷贝,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、js内存js内存,或者说大部分语言的内存都分为栈和堆。基本数据类型的变量值分
千家信息网最后更新 2024年10月25日js中如何实现赋值、浅拷贝和深拷贝

这篇文章主要介绍js中如何实现赋值、浅拷贝和深拷贝,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

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中如何实现赋值、浅拷贝和深拷贝"这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

0