手撸一个JS深拷贝函数

EscapedDog 发布于2019-08-26 18:36 / 1218人阅读

摘要：深拷贝概念并不新鲜，但是真正要真正理解原理还是有点难度的。这也是语言精粹之一吧。

JS深拷贝概念并不新鲜，但是真正要真正理解原理还是有点难度的。这也是JS语言精粹之一吧。

例子

let a = {
    name: "demo",
    age: 18
};

let b = a;
b.name = "demo1";

console.log(a); // 输出 {name: "demo1", age: 18}
console.log(b); // 输出 {name: "demo1", age: 18}

因为JS对于对象的赋值使用的是浅拷贝，其中一个实例变量的赋值会影响到所有指向该对象的变量

解决方案

粗暴好使的 JSON.parse(JSON.stringify)，缺点: 丢失成员函数

Object.assign，缺点：只有第一级深拷贝，子级对象依旧是浅拷贝，例子如下：

let a = {name:{demo:"1"}};
let b = Object.assign({}, a);
console.log(a); // 输出 {name:{demo:"1"}}
console.log(b); // 输出 {name:{demo:"1"}}
b.name.demo = "2";
console.log(a); // 输出 {name:{demo:"2"}}
console.log(b); // 输出 {name:{demo:"2"}}

　手动实现原理

遍历待拷贝对象

判断当前值类型，如果是object类型且不是null(null也是object)，则递归调用拷贝函数

如果当前值类型时null或者非object类型，直接return，退出本次递归

编码实现

function deepCopy(obj) {
    let result = obj;
    if(typeof obj === "object" && obj !== null) {
        result = Object.prototype.toString.call(obj) === "[object Array]" ? []: {};
        for(let prop in obj) {
            result[prop] = deepCopy(obj[prop]);
        }
    }
    return result;
}

验证一下：

let a = {name:{demo:"1"}};
let b = deepCopy(a);
console.log(a); // 输出 {name:{demo:"1"}}
console.log(b); // 输出 {name:{demo:"1"}}
b.name.demo = "2";
console.log(a); // 输出 {name:{demo:"1"}}
console.log(b); // 输出 {name:{demo:"2"}}

更多精彩内容尽在我的博客一键直达

GPU云服务器云服务器 js如何清除一个函数深拷贝深拷贝和浅拷贝 javascript深拷贝

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110283.html

2019前端基础面试秘籍（更新于5.13）

摘要：防抖函数分为非立即执行版和立即执行版。返回值如果有元素被删除返回包含被删除项目的新数组。返回值的新长度。颠倒数组中元素的顺序语法参数无返回值颠倒后的新数组。如果为负值，表示倒数。停止填充位置默认为返回值返回当前数组。77777777777777777777777777777777777777777777777777777777777777777777777777 showImg(https:...

levy9527 2019-05-23 17:35 评论0 收藏0
一篇文章彻底说清JS的深拷贝/浅拷贝

摘要：一篇文章彻底说清的深拷贝浅拷贝这篇文章的受众第一类业务需要急需知道如何深拷贝对象的开发者。这篇文章分享的目的更多还是希望用一篇文章整理清楚深浅拷贝的含义递归实现思路以及小伙伴们如果使用了这种黑科技一定要清楚这样写的优缺点。一篇文章彻底说清JS的深拷贝and浅拷贝这篇文章的受众第一类,业务需要,急需知道如何深拷贝JS对象的开发者。第二类,希望扎实JS基础,将来好去面试官前秀操作...

J4ck_Chan 2019-08-01 18:22 评论0 收藏0
一篇文章彻底说清JS的深拷贝/浅拷贝

摘要：一篇文章彻底说清的深拷贝浅拷贝这篇文章的受众第一类业务需要急需知道如何深拷贝对象的开发者。这篇文章分享的目的更多还是希望用一篇文章整理清楚深浅拷贝的含义递归实现思路以及小伙伴们如果使用了这种黑科技一定要清楚这样写的优缺点。一篇文章彻底说清JS的深拷贝and浅拷贝这篇文章的受众第一类,业务需要,急需知道如何深拷贝JS对象的开发者。第二类,希望扎实JS基础,将来好去面试官前秀操作...

lakeside 2019-08-22 13:48 评论0 收藏0
一篇文章彻底说清JS的深拷贝/浅拷贝

摘要：一篇文章彻底说清的深拷贝浅拷贝这篇文章的受众第一类业务需要急需知道如何深拷贝对象的开发者。这篇文章分享的目的更多还是希望用一篇文章整理清楚深浅拷贝的含义递归实现思路以及小伙伴们如果使用了这种黑科技一定要清楚这样写的优缺点。一篇文章彻底说清JS的深拷贝and浅拷贝这篇文章的受众第一类,业务需要,急需知道如何深拷贝JS对象的开发者。第二类,希望扎实JS基础,将来好去面试官前秀操作...

big_cat 2019-08-29 14:12 评论0 收藏0
js中的浅拷贝深拷贝深入理解

摘要：举个例子来说明一下什么是浅拷贝什么是深拷贝浅拷贝得出的结果可以看出是浅拷贝非对象的属性值一个改变不影响另一个的值对象属性是引用赋值所以一个改变会影响另一个的改变出现这种情况的本质是对象是按引用赋值的深拷贝指的是拷贝一个对象，改变一个值不影响举个例子来说明一下什么是浅拷贝什么是深拷贝浅拷贝 var x = { a: 1, b: {f: { g: 1 ...

lastSeries 2019-08-21 16:43 评论0 收藏0