js深度克隆的几种方法

Pluser 发布于2019-08-26 10:22 / 2452人阅读

摘要：方法一老老实实敲代码法迭代法，适用于所有方法二利用将对象序列化字符串，再使用来反序列化还原对象缺点如果里面有时间对象，则后再的结果，时间将只是字符串的形式。简而言之，第一层实现了深度拷贝，后续层次还是浅拷贝

方法一

老老实实敲代码法（迭代法，适用于所有）

function deepClone(obj) {
    let newObj = Array.isArray(obj) ? [] : {}
    if (obj && typeof obj === "object") {
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                newObj[key] = (obj && typeof obj[key] === "object") ? deepClone(obj[key]) : obj[key];
            }
        }
    } 
    return newObj
}
const newObj = deepClone(oldObj));

方法二

利用JSON.stringify 将js对象序列化（JSON字符串），再使用JSON.parse来反序列化(还原)js对象

const newObj = JSON.parse(JSON.stringify(oldObj));

缺点：

如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式。而不是时间对象；

如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象；

如果obj里有function，Symbol 类型，undefined，则序列化的结果会把函数或 undefined丢失；

如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null

JSON.stringify()只能序列化对象的可枚举的自有属性，例如如果obj中的对象是有构造函数生成的，则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor；

方法三

const newObj = Object.assign([],oldObj);

缺点

Object.assign只对顶层属性做了赋值，完全没有继续做递归之类的把所有下一层的属性做深拷贝。

简而言之，第一层实现了深度拷贝，后续层次还是浅拷贝

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

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

js对象详解(JavaScript对象深度剖析，深度理解js对象)

摘要：对象详解对象深度剖析，深度理解对象这算是酝酿很久的一篇文章了。用空构造函数设置类名每个对象都共享相同属性每个对象共享一个方法版本，省内存。 js对象详解(JavaScript对象深度剖析，深度理解js对象) 这算是酝酿很久的一篇文章了。 JavaScript作为一个基于对象(没有类的概念)的语言，从入门到精通到放弃一直会被对象这个问题围绕。平时发的文章基本都是开发中遇到的问题和对...

CatalpaFlat 2019-08-22 11:12 评论0 收藏0
javascript设计模式与开发实践（二）- 封装和原型模式

摘要：对象会记住它的原型给对象提供了一个名为的隐藏属性，某个对象的属性默认会指向它的构造器的原型对象，即。我们通过代码来验证再来实际上，就是对象跟对象构造器的原型联系起来的纽带切记这句话，对未来理解原型链很有帮助。封装封装数据在许多语言的对象系统中，封装数据是由语法解析来实现的，这些语言也许提供了 private、public、protected 等关键字来提供不同的访问权限。例如：j...

luxixing 2019-08-22 15:05 评论0 收藏0
【前端芝士树】浅拷贝、深拷贝以及Object.assign()的作用、克隆对象、复制数组

摘要：前端芝士树浅拷贝深拷贝以及的作用首先还是得回到的基本数据类型。值类型深拷贝数值布尔值字符串。它接受任意数量的源对象，主要作用就是枚举它们的所有属性并分配给。【前端芝士树】浅拷贝、深拷贝以及Object.assign()的作用首先还是得回到Javascript的基本数据类型。值类型[深拷贝]：数值Num、布尔值Boolean、字符串String、null、undefined。基本...

ccj659 2019-08-23 16:14 评论0 收藏0
【转】JavaScript 对象的深度克隆

摘要：在聊以下简称深度克隆之前，我们先来了解一下中对象的组成。克隆或者拷贝分为种浅度克隆深度克隆。浅度克隆基本类型为值传递，对象仍为引用传递。该文转载自http://www.cnblogs.com/zichi/p/4568150.html，有部分修改。在聊JavaScript（以下简称js）深度克隆之前，我们先来了解一下js中对象的组成。在 js 中一切实例皆是对象，具体分为原始类型 ...

JowayYoung 2019-08-19 17:43 评论0 收藏0
如何深度克隆一个对象

摘要：如何深度克隆一个对象在我们日常工作中经常会遇到需要去克隆一个对象比如多个地方用到的公共的图表基本参数的配置相信很多人会想到用和方法去克隆一个对象，这个可以明确告诉大家这些都是些不靠谱的浅度克隆。如何深度克隆一个对象在我们日常工作中经常会遇到需要去克隆一个对象比如多个地方用到的公共的图表基本参数的配置相信很多人会想到用 Object.assign, JSON.stringify 和...

TIGERB 2019-08-22 16:15 评论0 收藏0