• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

js中的赋值 浅拷贝和深拷贝详细

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言:

在学习下面文章前我们简单了解一下的内存的知识,以下先简要提一下

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中的赋值 浅拷贝和深拷贝详细的文章就介绍到这了,更多相关js中的赋值 浅拷贝和深拷贝内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vue中的attribute和property的具体使用及区别发布时间:2022-02-05
下一篇:
JavaScript的基础语法和数据类型详解发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap