JavaScript 深浅拷贝的原理和实现

于 2022-11-02 17:16:38 发布
阅读量160 收藏 1
点赞数 2
分类专栏： JavaScript 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Millionyearsonly/article/details/127633545
版权

简介

为了巩固一下身为前端开发小菜鸟必备的脸面，从而让脸皮更加厚实一些，在这条道路活的更加滋润一些，故此开始整理一些JavaScript（脸面）使用的一些基础细节。
欢迎各位大牛莅临指导，从而让我在加厚脸皮的道路上走的更远，从而可以用脸皮挡子弹，挡导弹，挡核弹，然后无敌。哈哈哈！
今天探究一下深浅拷贝的原理和实现。

浅拷贝的原理和实现

  • 浅拷贝的原理

    通过创建一个新的对象，来接受需要复制或者引用的对象值。如果对象属性是基本数据类型，则直接复制基本类型的值给新对象；如果对象属性是引用数据类型，则复制的是内存中的地址给新对象，这时复制的地址指向的对象是具有共享性的，当其他地方修改该地址指向的对象后，新创建的对象中复制的地址所指向的对象也是会同步变化的。

  • 浅拷贝的实现

    • Object.create()

      语法： Object.create(proto) // proto: 新创建对象的原型对象。
      Object.create(proto, propertiesObject) // propertiesObject：如果该参数被指定且不为 undefined，则该传入对象的自有可枚举属性（即其自身定义的属性，而不是其原型链上的枚举属性）将为新创建的对象添加指定的属性值和对应的属性描述符。

      let a = {
    name: 'niu',
    age: 18,
    sex: 'gril',
    sym: Symbol(1),
    list: [
        1, 2, 3, 4
    ],
    obj: {
        car: 'BMW',
        hourse: 'large hourse'
    },
    say() {
        console.log('I am saying')
    }
 }
 a.pointer = a;
 Object.defineProperty(a, 'test', {
    value: 'testValue',
    enumerable: false
 })
 let b = Object.create(a)
 a.name = 'jiao'
 a.obj.car = 'bieke'
 console.log(a)
 console.log(b)

      在这里插入图片描述
      通过上述代码可以得出，使用Object.create方法可以：

      • 源对象作为目标对象的原型对象，可以通过原型链访问到源对象的属性和方法；
      • 当源对象改变自身的属性或者方法的时候，两者都是同步更改的，从而验证了源对象仅仅只是目标对象的原型对象，它们之间仅仅只是引用的关系。

    • Object.assign()

      语法：Object.assign(target, …sources)，该方法的第一个参数是拷贝的目标对象，后面的参数是拷贝的来源对象（可以是多个来源）。

      let a = {
    name: 'niu',
    age: 18,
    sex: 'gril',
    sym: Symbol(1),
    list: [
        1, 2, 3, 4
    ],
    obj: {
        car: 'BMW',
        hourse: 'large hourse'
    },
    say() {
        console.log('I am saying');
    }
 }
 let b = {
    eat() {
        console.log('I am eating')
    },
    age: 20
 }
 a.pointer = a;
 Object.defineProperty(b, 'test', {
    value: 'testValue',
    enumerable: false
 })
 let c = Object.assign({}, a, b); 
 a.name = 'jiao'
 a.list.push(5)
 console.log(a) 
 console.log(b)   
 console.log(c)

      在这里插入图片描述

      从上面的代码中可以看到，当修改了对象a的name属性值为’jiao‘时，并不影响对象c的name属性，然而当在对象a的list属性中push了一个新的元素后，对象c的list属性也发生了改变。对象c将对象a的sym属性成功的进行了拷贝，而对于对象b的test属性无法拷贝，从而证实了Object.assign方法实现了我们想要的结果。同时使用该方法的时候需要注意以下几点：

      • 它不会拷贝对象的继承属性；
      • 它不会拷贝对象的不可枚举属性；
      • 他可以拷贝对象的Symbol属性。

    • 扩展运算符方式

      使用js的扩展运算符，在构造对象的同时完成浅拷贝的功能。
      语法：let cloneObj = {…obj1, …, …objX};
      let cloneArr = […arr1, …, …arrX]。

       let a = {
    name: 'niu',
    age: 18,
    sex: 'gril',
    sym: Symbol(1),
    list: [
        1, 2, 3, 4
    ],
    obj: {
        car: 'BMW',
        hourse: 'large hourse'
    },
    say() {
        console.log('I am saying');
    }
 }
 let b = {
    eat() {
        console.log('I am eating')
    },
    age: 20
 }
 Object.defineProperty(b, 'test', {
    value: 'testValue',
    enumerable: false
 })
 let c = {...a, ...b};
 console.log(b)
 console.log(c)
 a.name = 'jiao'
 a.list.push(5)  

let d = [1, 2, 3, {
    name: 'niu'
 }, 4]
let e = [4, 5, 6, 7, 8, 9, {
    sex: 'boy'
}]
let f = [...d, ...e];
f[0] = 10;
d[3].name = 'jiao';
e[6].sex = 'girl'
console.log(d)
console.log(e)
console.log(f)

      在这里插入图片描述

      主要不同的地方在于使用语法的不同，其他地方同Object.assign方法类似，都具有相同的缺陷。

    • slice方法拷贝数组

      slice方法具有局限性，它仅仅只针对数组类型，返回一个新的数组对象，不会改变原数组对象。
      语法：arr.slice(begin, end)。

       let a = [1, 2, 3, {
    name: 'niu'
 }, 4]
 let b = a.slice();
 b[0] = 10;
 a[3].name = 'jiao';
 console.log(a)
 console.log(b)

      输出结果
      通过对比发现使用slice方法，对数组中的基本数据类型进行了赋值操作，对数组中的引用数据类型进行了赋址操作，符合浅拷贝的要求。同时也暴露出浅拷贝的限制-它只能拷贝一层对象，如果存在对象的多层嵌套，那么浅拷贝就无能无力了。

    • concat方法拷贝数组

      concat方法同slice方法一样，具有局限性，它也是仅仅只针对数组类型，返回一个新的数组对象，不会改变原数组对象。
      语法： let newArr = arr.concat(arr1, arr2，…，arrX)

       let a = [1, 2, 3, {
    name: 'niu'
 }, 4]
 let b = [4, 5, 6, 7, 8, 9, {
    sex: 'boy'
 }]
let c = [].concat(a, b)
c[0] = 10;
a[3].name = 'jiao';
b[6].sex = 'girl'
console.log(a)
console.log(b)
console.log(c)

      在这里插入图片描述

    • 原生实现一个浅拷贝

      • 对基本数据类型做一个赋值操作；
      • 对引用数据类型开辟一个新的存储，并且拷贝一层对象属性。
      // 浅拷贝
function shallowClone(obj) {
    if (typeof obj === 'object' && obj !== null) {
        let properties = Object.getOwnPropertyNames(obj)
        let target = Array.isArray(obj) ? [] : {}
        for (let i = 0; i < properties.length; i++) {
            target[properties[i]] = obj[properties[i]];
        }
        return target
    } else {
        return obj
    }
}

let a = {
    name: 'niu',
    sex: 'boy',
    age: 18,
}
Object.defineProperty(a, 'weight', {
    value: 60,
    enumerable: false
})
let b = [1,2,3,4,5,6]
console.log(shallowClone(a)) // {age: 18, name: 'niu', sex: 'boy', weight: 60}
console.log(shallowClone(b)) // [1,2,3,4,5,6]

深拷贝的原理和实现

  • 深拷贝的原理

    将一个对象从内存中完整的拷贝出来一份给目标对象，并在堆内存中开辟出一个全新的空间去存储新的对象。新对象的修改不会影响原对象，两者实现真正的分离。

  • 深拷贝的实现

    • JSON.stringify方法（简略版）

      将一个对象序列化为JSON字符串，并将对象里面的内容转变为字符串；最后再用 JSON.parse() 的方法将JSON 字符串生成一个新的对象。

      class Animal {
    constructor() {
        this.name = 'name'
    }
    listen() {
        console.log('I am listening')
    }
}
let a = {
    name: 'niu',
    sex: 'boy',
    age: 18,
    say() {},
    u: undefined,
    sym: Symbol(),
    date: new Date(),
    reg: new RegExp(/\d/),
    num: NaN,
    num1: Infinity,
    num2: -Infinity     
}
Object.defineProperty(a, 'weight', {
    value: 60,
    enumerable: false
})
a.__proto__ = new Animal();

function deepClone(target) {
    return JSON.parse(JSON.stringify(target))
}
let b = deepClone(a);
a.name = 'jiao';
console.log(a);
console.log(b);

      在这里插入图片描述

      • 拷贝的对象的值中如果有函数、undefined、symbol 这几种类型，经过 JSON.stringify 序列化之后的字符串中这个键值对会消失；

      • 拷贝 Date 引用类型会变成字符串；

      • 无法拷贝不可枚举的属性；

      • 无法拷贝对象的原型链；

      • 拷贝 RegExp 引用类型会变成空对象；

      • 对象中含有 NaN、Infinity 以及 -Infinity，JSON 序列化的结果会变成 null；

      • 无法拷贝对象的循环应用，即对象成环 (obj[key] = obj)。

    • 手写递归实现（基础版）

      
// 递归实现深拷贝
function deepClone(source) {
    // 基本数据类型
    if (typeof source !== 'object' || !source) {
        return source
    }
    // 数组 || 对象
    let target = Array.isArray(source) ? [] : {} 
    for (let i in source) {
        target[i] = deepClone(source[i]);
    }
    return target
 }

class Animal {
    constructor() {
        this.name = 'name'
    }
    listen() {
        console.log('I am listening')
    }
}

let a = {
    name: 'niu',
    sex: 'boy',
    age: 18,
    say() {
        console.log('I am saying')
    },
    u: undefined,
    sym: Symbol(1),
    arr: [1,2,3,4,5],
    arr1: new Array(5).fill(1),
    date: new Date(),
    err: new Error(),
    reg: new RegExp(/\d/),
    num: NaN,
    num1: Infinity,
    num2: -Infinity     
}
Object.defineProperty(a, 'weight', {
    value: 60,
    enumerable: false
})
a.__proto__ = new Animal();

const b = deepClone(a);
console.log(a)
console.log(b)

      在这里插入图片描述

      通过上图可以得出，基础版并不能兼顾所有的情况，它存在下述的问题：

      • 它只是针对普通的引用数据类型做递归复制，而对于Date、RegExp、Error、FormData 这样的引用类型并不能正确地拷贝；
      • 无法复制不可枚举的属性；
      • 无法拷贝源对象的原型链；
      • 无法拷贝对象的循环应用，即对象成环 (obj[key] = obj)。

    • 手写递归实现（改进版）

      // 递归实现深拷贝
function deepClone(source, hash = new WeakMap()) {
    let _toString = Object.prototype.toString
    // 基本数据类型
    if (typeof source !== 'object' || !source) {
        return source
    }
    // DOM Node
    if (source.nodeType && 'cloneNode' in source) {
        return source.cloneNode(true)
    }
    // Date
    if (_toString.call(source) === '[object Date]') {
        return new Date(source.getTime())
    }
    // RegExp
    if (_toString.call(source) === '[object RegExp]') {
        const flags = [];
        if (source.global) flags.push('g')
        if (source.multiline) flags.push('m')
        if (source.ignoreCase) flags.push('i')
        return new RegExp(source.source, flags.join(''))
    }
    // Error
    if (_toString.call(source) === '[object Error]') {
        return new Error(source.message)
    }
    // ... Map对象 Set对象等都需要重新生成一个新的实例返回

    // 循环引用通过weakMap解决
    if (hash.has(source)) {
        return hash.get(source)
    }
    // 获取source对象的所有自身属性的描述符
    let own = Object.getOwnPropertyDescriptors(source)
    // 继承原型链
    let target = Object.create(Object.getPrototypeOf(source), own)
    hash.set(source, target);
    for (let key of Reflect.ownKeys(source)) {
        target[key] = deepClone(source[key], hash)
    }
    return target
 }

class Animal {
    constructor() {
        this.name = 'name'
    }
    listen() {
        console.log('I am listening')
    }
}
let a = {
    name: 'niu',
    sex: 'boy',
    age: 18,
    say() {
        console.log('I am saying')
    },
    u: undefined,
    sym: Symbol(1),
    arr: [1,2,3,4,5],
    arr1: new Array(5).fill(1),
    date: new Date(),
    err: new Error('错误了'),
    reg: new RegExp(/\d/),
    num: NaN,
    num1: Infinity,
    num2: -Infinity,
    pointer: {
        name: 'jiao',
        sex: 'girl',
        list: [1,2,3,4,5, {a: 6}],
        obj: {
            b: 'b',
            c: 'c'
        }
    }     
}
Object.defineProperty(a, 'weight', {
    value: 60,
    enumerable: false
})
a.__proto__ = new Animal();

const b = deepClone(a);
a.pointer.name = 'jiaojiao'
console.log(a)
console.log(b)

      在这里插入图片描述
      针对上面的问题，通过下述方法去进行解决：

      • 针对遍历对象的不可枚举属性，通过使用Reflect.ownKeys() 返回一个由目标对象自身的属性键组成的数组， 结合Object.getOwnPropertyDescriptors()方法返回所有属性的属性值以及属性描述信息进行处理；
      • 当参数为RegExp、Error、Date等类型时，直接生成一个新的实例进行返回；
      • 拷贝对象的原型链则是通过Object.create创建一个新的对象，并继承传入原对象的原型链处理；
      • 使用weakMap类型作为hash表，去检测是否循环引用，如果存在循环，则直接返回weakMap存储的值。
万年唯一
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 深浅拷贝原理
qiuqiudongdong的博客
01-24 1132
1：数据类型： ① 基本数据类型：Number、string、null、undefined、boolean ② 引用数据类型： Object =>{object、Array、Function} 2：栈(stack)、堆(heap)： ① 基本数据类型是直接存储在栈中的数据，栈的存取速度比堆要快，存在栈中的数据大小是确定的 问：为什么基本数据类型存储在栈中？ 存储结构不一样，引用数据类型一般占空间大 答：(http://www.javashuo.com/article/p-gkhlbedc-gg.htm
js 浅拷贝和深拷贝原理
qq_43344133的博客
08-03 484
js 浅拷贝和深拷贝原理 拷贝，从字面意思上解释即为将原有的东西，复制一份出来；在代码中，我们如何解释呢？ 在代码中，拷贝分为了两种形式：一种是浅拷贝，一种是深拷贝。 什么是浅拷贝 通俗的讲：就是把父对象的内容，全部拷贝给子对象。然而，实际上是，子对象只获得了父对象的一个内存地址。那么，子对象改变值，父对象的值也会被篡改。 浅拷贝 ---- 此拷贝会改变原有值 1.赋值拷贝 var p = ...
js中深浅拷贝的实现方式(含图解原理)
weixin_42467467的博客
05-15 1819
关于赋值，浅拷贝，深拷贝 提前熟知： 栈内存（stack）：会自动分配的内存空间，它由系统自动释放 堆内存（heap）：动态分配的内存及大小，不一定会自动释放 基本数据类型：String, Number, Boolean, undefined, null, Symbol 引用数据类型：Object, Array, Function 在JS中，数据类型分为基本数据类型和引用数据类型两种，对于基本数据类型来说，它的值直接存储在栈内存中，而对于引用类型来说，它在栈内存中仅仅存储了一个引用，而真正的数据存储在堆
JavaScript的堆栈原理，浅拷贝与深拷贝
coding
12-22 275
两者都是存放临时数据的地方 堆：先进先出；一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收 栈：先进后出；就像一个桶，由编译器自动分配释放 ，存放函数的参数值，局部变量的值等 缓存问题： 栈使用的是一级缓存， 他们通常都是被调用时处于存储空间中，调用完毕立即释放。 堆则是存放在二级缓存中，生命周期由虚拟机的垃圾回收算法来决定（并不是一旦成为孤儿对象就能被回收）。所以调用这...
javaScript中的深拷贝和浅拷贝的原理和实现方式
qq_44472790的博客
05-26 344
1.首先要清楚，深拷贝和浅拷贝只是在引用数据类型（obj,Function,Array等）中才会有区别，基本数据类型不适用。 基本数据类型：Boolean Null Undefined Number String Symbol (ES6) BigInt (ES10) 引用数据类型：object、array、function 2.为什么不适用呢？这里涉及到栈和堆的存储问题。 我们知道，基本数据类型的值都是在栈中，而引用数据类型在栈中存储的的只是地址，而值是存储是在堆中；引用数据类型的值都是通过栈中的地址找
详解JavaScript的内存空间、赋值和深浅拷贝
10-17
在JavaScript中，理解和掌握内存管理，特别是深浅拷贝的原理，能够帮助我们编写更高效、更可控的代码，避免不必要的副作用和错误。在实际开发中，合理使用深拷贝和浅拷贝能够有效地优化性能，尤其是在处理复杂数据...
详解js中的对象的深浅拷贝
01-08
了解深浅拷贝的原理和实现方式对于优化JavaScript代码性能、避免意外的副作用以及更好地理解对象的引用特性至关重要。在实际开发中，根据具体情况选择合适的拷贝策略，可以避免不必要的内存开销，提高代码质量。
note:更加杂乱的个人笔记
08-03
得让子弹飞一会儿分门别类类型类型种类类型的判断类型的转换数据的深浅拷贝原型和原型链prototype和__proto__执行上下文栈、变量对象、作用域链、this执行上下文闭包变量提升v8垃圾回收call、apply、bind原理及实现...
weijinsuo:面试作业
05-09
5. 深浅拷贝：掌握Object.assign()、JSON.parse(JSON.stringify())、展开运算符（...）和自定义函数实现对象的浅拷贝和深拷贝。 三、JavaScript实际应用 1. DOM操作：理解DOM（文档对象模型），熟悉DOM节点的操作...
lanius-assessment:后端开发面试评估
03-16
4. 深浅拷贝：理解Object.assign、JSON.parse(JSON.stringify())以及手动实现拷贝的方法和区别。 5. 错误处理：理解try...catch语句，学会自定义错误和异常处理。 三、Node.js后端开发： 1. Express框架：Express是...
js 浅拷贝 和 深拷贝
青蛙king的博客
11-19 2217
目录 一、浅拷贝与深拷贝的关系 1、基本类型 2、引用数据类型——对象（object） （1）、对象的浅拷贝 （2）、对象的深拷贝 二、对象的浅拷贝的实现 1、ES6中的Object.assign方法实现对象的浅拷贝 2、直接赋值法实现对象的浅拷贝 三、对象的深拷贝的实现 1、ES6中的扩展运算符（...）实现对象的深拷贝 2、用JSON对象的parse和stringify方...
JS对象的深浅拷贝
qq_45560350的博客
08-05 2356
js对象的深浅拷贝
js深浅拷贝（原理简单解读与方法总结）
qq_42471343的博客
02-28 1519
需要懂的基础知识 堆栈 stack 栈 ，由自动分配的内存空间，由系统自动释放 heap 堆 ，动态分配的内存，堆存数据随机存放 将指针指向栈内存 js数据类型 基本数据：变量与值都是在栈中 引用数据，就是变量存在栈，但是值是对象，这个是保存在堆内存中的 基本数据类型：undefined、null、boolean、number、string，这些类型按值访问，可以操作保存在变量中的实际值 引用数据类型：object、array、function、date对象等，大概就是一个对象可以由多个值组成
ES6中的扩展运算符拷贝问题以及常用的深浅拷贝方法
weixin_43799793的博客
02-23 2354
ES6中数组和对象的扩展运算符拷贝问题以及常用的深浅拷贝方法 在ES6中新增了扩展运算符可以对数组和对象进行操作。有时候会遇到数组和对象的拷贝，可能会用到扩展运算符。那么这个扩展运算符到底是深拷贝还是浅拷贝呢？ 一.、使用扩展运算符拷贝 首先是下面的代码。 let a = [1,2,3]; let b = [...a]; a == b // false 结果是false，这是很容易知道的，毕竟这个赋值操作符是有区别的。接下来将数组的值进行改变，又会怎样呢； let a = [1,2,3]; let b =
JS浅拷贝和深拷贝详解
磷火的博客
02-21 2132
简单的来说就是，在有指针的情况下，浅拷贝只是增加了一个指针指向已经存在的内存，而深拷贝就是增加一个指针并且申请一个新的内存，使这个增加的指针指向这个新的内存，采用深拷贝的情况下，释放内存的时候就不会出现在浅拷贝时重复释放同一内存的错误！ 在js中，对于非基本类型数据（普通对象或数组），浅拷贝只是拷贝了内存地址，子类属性指向父类属性的内存地址，而子类修改后父类也会被修改 看程序
js浅复制与深复制的原理
02-14 1642
试想这样一种场景，自己编写了一个js插件，调用插件时参数是以对象的形式传入的，插件也有自己的默认值，当运行的时候就涉及到传入参数和默认值的合并，即用到对象的深复制和浅复制。浅复制假设有两个对象var objA = { a: 'aa', b: 'bb' }; var objB = {};现在想把对象A的值复制给B，由于对象A的两个值都是原始类型，用浅复制即可function copy(sub,
js中的浅拷贝和深拷贝（原理及方法）
codingWeb的博客
04-26 3282
浅拷贝和深拷贝介绍： 浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用（地址） 深拷贝拷贝多层，每一级别的数据都会拷贝 Object.assign(target,...sources) es6新增方法可以浅拷贝 浅拷贝不能拷贝高级数据类型的原因： 浅拷贝原理： 只是拷贝一层 var obj = { id: 1, name: 'andy', ...
js中的深拷贝，浅拷贝原理是什么？
weixin_43912756的博客
08-20 1134
javascript中的原始类型和引用类型，以及函数按值传参
js深度拷贝（克隆）与浅度拷贝（克隆）原理及应用
热门推荐
sunshine的博客
08-22 1万+
如果你想真正自己理解和运用深度克隆的话，首先必须要了解的就是js中的原始值和应用值，以及它们的储存位置及方式。这里简单的说一下，原始值呢是存储在栈里的，而且存储的是变量的实际值。引用值存储在堆里，且存储的是一个指针，该指针指向内存中的某个位置，该位置存储变量的实际值。 浅度拷贝 var a = 2 ; var a_copy = a ; a_copy = 3; console.log(a); ...
JavaScript中实现深浅拷贝的方法
最新发布
03-23
JavaScript中实现深浅拷贝的方法： 浅拷贝： 1. Object.assign(target, ...sources)：将所有可枚举属性的值从一个或多个源对象复制到目标对象，返回目标对象。 2. 扩展运算符(...)：将一个对象的所有可枚举属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值