js - 浅拷贝和深拷贝

在项目中，经常会用到拷贝。

浅拷贝和深拷贝，相信大家都知道区别，但是怎么去实现呢？

我会分享一些项目中经常会用到的一些方法，然后再手写一个深/浅拷贝的方法。

1. Object.assign

相信这个很多人都用过，用过就知道，这个在微信端，ie11或更低版本的ie上并不支持。所以我们就抛弃了这种方法。

这种方法也只是浅拷贝，不能满足深拷贝的需求

2. 通过es6的扩展运算符...来实现浅拷贝

let a = {age: 1
}
let b = { ...a }
a.age = 2
console.log(b.age) // 1

通常，浅拷贝只能解决部分问题。所以我们来看看深拷贝。

3. JSON.parse(JSON.stringify(object))

这个方法在项目中用的挺多的。

let a = {age: 1,jobs: {first: 'FE'}
}
let b = JSON.parse(JSON.stringify(a))
a.jobs.first = 'native'
console.log(b.jobs.first) // FE

但是该方法有局限性：

会忽略 undefined
会忽略 symbol
不能序列化函数
不能解决循环引用的对象

自己实现一个深拷贝是很困难的，因为有很多便捷情况需要考虑。比如原型链，dom如何处理。所以我是根据项目实现的一个简易版的深、浅拷贝。

推荐一个库： lodash

    var isObject = function(obj) {return obj !== null && (typeof obj === "object" || typeof obj === "function")};var clone = function(obj, deep) {if (!isObject(obj)) {throw new Error(obj + " is not object");}var newObj;var cloneArray = function(item) {var newItem = [];var size = item.length;for (var i = 0; i < size; i++) {var vk = item[i];if (deep && isObject(vk)) {newItem[i] = clone(vk, deep);} else {newItem[i] = vk;}}return newItem;};var cloneObject = function(item) {var newItem = {};Object.keys(item).forEach(function(n) {var v = item[n];if (deep && isObject(v)) {newItem[n] = clone(v, deep);} else {newItem[n] = v;}});return newItem;};if (obj instanceof Array) {newObj = cloneArray(obj);return newObj;}newObj = cloneObject(obj);return newObj;}

测试代码：

    var obj1 = {a: 1,b: ["a", "b"]};var obj2 = {b: 2,c: obj1};var obj3 = clone(obj2, true);var obj4 = clone(obj2, false);obj1.b = ["a", "b", "c"];obj1.a = "2";console.log(obj3);console.log(obj4);

输出结果：

从结果可以看出：

深拷贝obj3的结果不会因为引用类型obj1的改变而改变

浅拷贝obj4的结果会因为引用类型obj1的改变而改变

转载于:https://www.cnblogs.com/thonrt/p/10334483.html

js - 浅拷贝和深拷贝相关推荐

关于js浅拷贝与深拷贝的理解
前端开发中,一般情况下,很少会去在意深拷贝与浅拷贝的关系. 大家知道,js变量有2种数据类型:基本类型和引用类型.基本类型的拷贝是将整个值完全拷贝一份的,也就是深拷贝.就是开辟了新的堆内存.所以基本类 ...
JS: 浅拷贝vs深拷贝 | 刷题打卡
1. 概念在JavaScript中,拷贝一般是指变量的复制过程. 对于简单类型,拷贝就是直接赋值的过程: 对于复杂类型,浅拷贝是指复制对象的引用地址的过程.如果修改了源对象的某个属性,由于引用相同, ...
js之浅拷贝和深拷贝
js数据类型主要分基本数据类型和引用数据类型.前者包括Number,String等,后者主要是Object,因此以下会针对不同的数据类型来分析,需要的朋友可以参考一下 1.js内存 js内存,或者说大 ...
说说JS中的浅拷贝与深拷贝
outline: 为什么要说JS中深拷贝与浅拷贝 JS对类型的分类 immutable与mutable 简单类型检测浅拷贝VS深拷贝为什么要说JS中深拷贝与浅拷贝近来在研读underscore的 ...
js 浅拷贝直接赋值_js 深拷贝 vs 浅拷贝
本文主要讲一下 js 的基本数据类型以及一些堆和栈的知识和什么是深拷贝.什么是浅拷贝.深拷贝与浅拷贝的区别,以及怎么进行深拷贝和怎么进行浅拷贝. 本文思维导图如下:本文思维导图堆和栈的区别其实深拷 ...
js 浅拷贝直接赋值_JS中实现浅拷贝和深拷贝的代码详解
(一)JS中基本类型和引用类型 JavaScript的变量中包含两种类型的值:基本类型值和引用类型值,在内存中的表现形式在于:前者是存储在栈中的一些简单的数据段,后者则是保存在堆内存中的一个对象. ...
js 浅拷贝直接赋值_浅析JavaScript解析赋值、浅拷贝和深拷贝的区别
一.赋值(Copy) 赋值是将某一数值或对象赋给某个变量的过程,分为: 1.基本数据类型:赋值,赋值之后两个变量互不影响 2.引用数据类型:赋**址**,两个变量具有相同的引用,指向同一个对象,相互之 ...
js 浅拷贝直接赋值_JS中的赋值、浅拷贝与深拷贝
作者:奚杰拷贝是写代码中经常使用的方法.浅拷贝与深拷贝是指拷贝的两种情况.本文将深入探究JS的赋值.浅拷贝与深拷贝. 数据类型在探究深拷贝与浅拷贝之前,我们先梳理一下JS的数据类型.在JavaSc ...
理清JS中的深拷贝与浅拷贝
作者:Manjula Dube译者:前端小智来源:Medium 为了保证的可读性,本文采用意译而非直译. 浅拷贝是对象的逐位复制.创建一个新对象,该对象具有原始对象中值的精确副本.如果对象的任何字段是 ...

js - 浅拷贝和深拷贝

js - 浅拷贝和深拷贝相关推荐

最新文章

热门文章