JavaScript专题之深浅拷贝

Question

JavaScript专题之深浅拷贝

mqyqingfeng opened this issue 7 years ago · 72 comments

mqyqingfeng commented 7 years ago

前言

拷贝也是面试经典呐！

数组的浅拷贝

如果是数组，我们可以利用数组的一些方法比如：slice、concat 返回一个新数组的特性来实现拷贝。

比如：

var arr = ['old', 1, true, null, undefined];

var new_arr = arr.concat();

new_arr[0] = 'new';

console.log(arr) // ["old", 1, true, null, undefined]
console.log(new_arr) // ["new", 1, true, null, undefined]

用 slice 可以这样做：

var new_arr = arr.slice();

但是如果数组嵌套了对象或者数组的话，比如：

var arr = [{old: 'old'}, ['old']];

var new_arr = arr.concat();

arr[0].old = 'new';
arr[1][0] = 'new';

console.log(arr) // [{old: 'new'}, ['new']]
console.log(new_arr) // [{old: 'new'}, ['new']]

我们会发现，无论是新数组还是旧数组都发生了变化，也就是说使用 concat 方法，克隆的并不彻底。

如果数组元素是基本类型，就会拷贝一份，互不影响，而如果是对象或者数组，就会只拷贝对象和数组的引用，这样我们无论在新旧数组进行了修改，两者都会发生变化。

我们把这种复制引用的拷贝方法称之为浅拷贝，与之对应的就是深拷贝，深拷贝就是指完全的拷贝一个对象，即使嵌套了对象，两者也相互分离，修改一个对象的属性，也不会影响另一个。

所以我们可以看出使用 concat 和 slice 是一种浅拷贝。

数组的深拷贝

那如何深拷贝一个数组呢？这里介绍一个技巧，不仅适用于数组还适用于对象！那就是：

var arr = ['old', 1, true, ['old1', 'old2'], {old: 1}]

var new_arr = JSON.parse( JSON.stringify(arr) );

console.log(new_arr);

是一个简单粗暴的好方法，就是有一个问题，不能拷贝函数，我们做个试验：

var arr = [function(){
    console.log(a)
}, {
    b: function(){
        console.log(b)
    }
}]

var new_arr = JSON.parse(JSON.stringify(arr));

console.log(new_arr);

我们会发现 new_arr 变成了：

浅拷贝的实现

以上三个方法 concat、slice、JSON.stringify 都算是技巧类，可以根据实际项目情况选择使用，接下来我们思考下如何实现一个对象或者数组的浅拷贝。

想一想，好像很简单，遍历对象，然后把属性和属性值都放在一个新的对象不就好了~

嗯，就是这么简单，注意几个小点就可以了：

var shallowCopy = function(obj) {
    // 只拷贝对象
    if (typeof obj !== 'object') return;
    // 根据obj的类型判断是新建一个数组还是对象
    var newObj = obj instanceof Array ? [] : {};
    // 遍历obj，并且判断是obj的属性才拷贝
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = obj[key];
        }
    }
    return newObj;
}

深拷贝的实现

那如何实现一个深拷贝呢？说起来也好简单，我们在拷贝的时候判断一下属性值的类型，如果是对象，我们递归调用深拷贝函数不就好了~

var deepCopy = function(obj) {
    if (typeof obj !== 'object') return;
    var newObj = obj instanceof Array ? [] : {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
    }
    return newObj;
}

性能问题

尽管使用深拷贝会完全的克隆一个新对象，不会产生副作用，但是深拷贝因为使用递归，性能会不如浅拷贝，在开发中，还是要根据实际情况进行选择。

下期预告

难道到这里就结束了？是的。然而本篇实际上是一个铺垫，我们真正要看的是 jquery 的 extend 函数的实现，下一篇，我们会讲一讲如何从零实现一个 jquery 的 extend 函数。

专题系列

JavaScript专题系列目录地址：https://github.com/mqyqingfeng/Blog。

JavaScript专题系列预计写二十篇左右，主要研究日常开发中一些功能点的实现，比如防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里、递归、乱序、排序等，特点是研(chao)究(xi) underscore 和 jQuery 的实现方式。

如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。

xiehaitao0229 commented 5 years ago

Answer 1 · 2017-07-12T08:54:00.000Z

期待下一篇！！！

Answer 2 · 2017-07-13T09:43:17.000Z

养肥了再看一遍

Answer 3 · 2017-08-11T01:46:51.000Z

null应该特殊考虑一下吧，在深拷贝中，值为null会赋值一个空对象

Answer 4 · 2017-08-11T02:01:57.000Z

@yunlzhang 感谢指出，现在的 deepCopy 方法确实有这个问题

deepCopy({
        value: null
})

的值为：

{value: {}}

这篇的目的在于讲解深浅拷贝的概念以及深浅拷贝的思路，下一篇《JavaScript专题之从零实现jQuery的extend》才是讲解深浅拷贝的详细实现，在下一篇的 extend 方法就有对于 null 的处理~

Answer 5 · 2017-08-16T09:50:10.000Z

楼主对js的理解这么透彻，是怎么学的啊？

Answer 6 · 2017-08-17T04:06:26.000Z

@mengxin-FE javaScript 我还有很多地方需要研究，倒不算透彻，不过谢谢夸奖哈~ 如果说学习方法的话，就是确定一个要研究的主题，然后大量阅读该主题相关的文章，尽量保证每篇文章都能理解，如果不能理解，第二天再看一遍，直到看懂为止，如果可以的话，再写写文章，将学到的知识梳理出来，与大家分享~

Answer 7 · 2017-10-11T07:08:40.000Z

function deepClone (obj) {
  if (Array.isArray(obj)) {
    return obj.map(deepClone)
  } else if (obj && typeof obj === 'object') {
    var cloned = {}
    var keys = Object.keys(obj)
    for (var i = 0, l = keys.length; i < l; i++) {
      var key = keys[i]
      cloned[key] = deepClone(obj[key])
    }
    return cloned
  } else {
    return obj
  }
}

这样也可以

Answer 8 · 2017-10-11T07:18:29.000Z

@Tvinsh 确实可以，感谢分享哈~

Answer 9 · 2017-10-26T01:52:06.000Z

我从《你不知道的 JavaScript》一书看到，工具函数 JSON.stringify(..) 在将JSON对象序列化为字符串时也用到了 ToString 。请注意， JSON 字符串化并非严格意义上的强制类型转换，因为其中也涉及 ToString 的相关规则。
对大多数简单值来说， JSON 字符串化和果总是字符串：toString()的效果基本相同，只不过序列化的结

JSON.stringify( 42 ); // "42" 
JSON.stringify( "42" ); // ""42""（含有双引号的字符串） 
JSON.stringify( null ); // "null" 
JSON.stringify( true ); // "true"

所有安全的 JSON 值（JSON-safe）都可以使用 JSON.stringify(..) 字符串化。安全的 JSON 值是指能够呈现为有效 JSON 格式的值。

下面敲黑板划重点：

为了简单起见，我们来看看什么是不安全的 JSON 值。 undefined 、 function 、 symbol （ES6+）和包含循环引用（对象之间相互引用，形成一个无限循环）的对象都不符合 JSON 结构标准，支持 JSON 的语言无法处理它们。

JSON.stringify(..) 在对象中遇到 undefined 、 function 和 symbol 时会自动将其忽略，在数组中则会返回 null （以保证单元位置不变）。

例如：

JSON.stringify( undefined ); 
JSON.stringify( function(){} );
JSON.stringify( [1,undefined,function(){},4] ); 
JSON.stringify({ a:2, b:function(){} } );
// undefined // undefined
// "[1,null,null,4]"
// "{"a":2}"

对包含循环引用的对象执行 JSON.stringify(..) 会出错。
...

Answer 10 · 2017-10-26T05:05:27.000Z

@naihe138 非常感谢补充，o(￣▽￣)ｄ JSON.stringify 这部分确实写得太浅薄了。

Answer 11 · 2017-11-03T08:45:55.000Z

@mqyqingfeng

可以这样说吗？

=是浅拷贝

slice和concat如果拷贝基本类型元素的数组是深拷贝，否则是浅拷贝

Answer 12 · 2017-11-08T02:32:57.000Z

@veedrin 可以，只是不知道为什么，我觉得怪怪的，好像一般不会这样描述……

Answer 13 · 2017-11-09T09:36:45.000Z

请问深拷贝的时候遇到相互引用的情况怎么处理？

Answer 14 · 2017-11-09T11:33:28.000Z

@JHanLu 这个可以参照下一篇 extend 的实现方式 #33

Answer 15 · 2017-11-22T06:47:47.000Z

这个深拷贝问题很大，没有考虑dom对象，正则对象，时间对象

Answer 16 · 2017-11-24T08:53:38.000Z

@UNDERCOVERj 确实没有考虑这些场景，不过常遇到的场景都是普通对象的拷贝，这样的也够了~

Answer 17 · 2017-12-27T13:35:25.000Z

写的很清楚，谢谢楼主

Answer 18 · 2018-01-18T07:35:26.000Z

star一下以示支持

Answer 19 · 2018-02-09T15:56:27.000Z

深拷贝这样写应该会好点：

var deepCopy = function(obj) {
    if (obj === null || typeof obj !== 'object') return obj;
    ...
}

Answer 20 · 2018-03-16T03:50:53.000Z

Hi，你的深拷贝方法我觉得还是有点问题。如果遇到对象内嵌函数，typeof判断返回的是function，还是复制了指针而不是整个函数吧？可以看看下面代码理解我描述的问题

var arr = [function(){
    console.log(a)
}, {
    b: function(){console.log(b)
}], 
new_arr = deepCopy(arr);
arr[0] === new_arr[0] // true
new_arr[1].b === arr[1].b // true

by the way, 博主的基础真是扎实，佩服

Answer 21 · 2018-03-28T05:27:11.000Z

@ishowman 函数的复制是一个很难解决的问题呀，即使是 jQuery 的 extend 也没有去处理函数……

Answer 22 · 2018-04-18T13:52:58.000Z

浅拷贝：es6中有两种新方法
方法1：
` let [...spread]= [12, 5, 8, 130, 44];

//等同于：let spread = 浅克隆([12, 5, 8, 130, 44]) `

方法2：
Array.from(array)//创建一个新数组

Answer 23 · 2018-04-24T12:36:16.000Z

@youzaiyouzai666 感谢分享呀~ 这些都是 ES6 提供的很好的方法~

Answer 24 · 2018-04-24T13:33:10.000Z

博主你好，深拷贝中有个比较关键的点我认为是对象的循环引用，如果不做处理会导致无限循环，可以指点一下你的思路吗？

Answer 25 · 2018-04-25T02:38:22.000Z

@Fiv5 下一篇 #33 就涉及了深拷贝中的循环引用问题，不过处理的是

var a = {name : b};
var b = {name : a}
var c = extend(a, b);
console.log(c);

这种情况下导致的循环引用的问题，处理的思路是目标属性值和要复制的对象的属性值的引用是否相同，具体可以参见下一篇文章中的代码，对于本身就是循环引用的对象，正好评论中也有人提及了处理的方式，也可以参考一下~

Answer 26 · 2018-05-25T04:22:45.000Z

let a = {}
a = obj (手动滑稽)

Answer 27 · 2018-06-15T07:20:12.000Z

为什么这里递归调用就可以达到深拷贝呢？

Answer 28 · 2018-06-20T12:27:49.000Z

@A-birdFlyHigner 哈哈，你赢了 o(////▽////)q

Answer 29 · 2018-06-20T12:33:19.000Z

@Tzcodejs 嗯……我竟然不知道怎么回答……因为浅拷贝只能复制对象的一层属性，如果要复制更深层级的话，就需要用到递归吧……

Answer 30 · 2018-07-28T07:27:59.000Z

对于避免d归的深拷贝，我实现了一个：
原版
 改进1
改进2
主要还是类似_.eq，用了一个栈来保存已经 copy 过的 kv 对

Answer 31 · 2018-07-28T15:38:02.000Z

想请问下博主，为什么深拷贝那里for (var key in obj) 之后还需要一个判断if (obj.hasOwnProperty(key)) 呢

Answer 32 · 2018-09-05T13:15:06.000Z

真正的深拷贝

function deepClone(obj) {
var _toString = Object.prototype.toString;

    // null, undefined, non-object, function
    if (!obj || typeof obj !== 'object') {
        return obj;
        console.log("null, undefined, non-object, function");
    }

    // DOM Node
    if (obj.nodeType && 'cloneNode' in obj) {
        return obj.cloneNode(true);
        console.log("DOM Node");
    }

    // Date
    if (_toString.call(obj) === '[object Date]') {
        return new Date(obj.getTime());
        console.log("Date");
    }

    // RegExp
    if (_toString.call(obj) === '[object RegExp]') {
        var flags = [];
        if (obj.global) { flags.push('g'); }
        if (obj.multiline) { flags.push('m'); }
        if (obj.ignoreCase) { flags.push('i'); }
        // console.log("RegExp");
        return new RegExp(obj.source, flags.join(''));

    }

    var result = Array.isArray(obj) ? [] : {};
    // console.log(result);

    for (var key in obj) {
        result[key] = deepClone(obj[key]);

    }

    return result;
}

Answer 33 · 2018-09-06T13:59:12.000Z

@KingsonCheng 避免拷贝继承下来的属性.

Answer 34 · 2018-10-11T15:23:26.000Z

//其实，简单粗暴copy；只有，function不满足
 function deepCopy(obj) {
      return new Promise((resolve) => {
        const {port1, port2} = new MessageChannel();
        port2.onmessage = ev => resolve(ev.data);
        port1.postMessage(obj);
      });
    }

    deepCopy(obj).then((copy) => {           // 请记住`MessageChannel`是异步的这个前提！
        let copyObj = copy;
        console.log(copyObj, obj)
        console.log(copyObj == obj)
    });

Answer 35 · 2018-11-21T09:11:00.000Z

我给加了个深度参数不知道怎样无限递归好像会卡死

// 对对象进行深拷贝
// deepin表示拷贝深度 deepin<=1 表示浅拷贝 >1表示拷贝深度 不填表示递归到底
const deepCopy = (obj, deepin) => {
  let count = 0;
  if (deepin === undefined) {
    count = undefined;
  } else {
    count = deepin - 1;
  }
  if (count < 1) {
    return obj;
  } else {
    if (typeof obj !== "object") return;
    const newObj = obj instanceof Array ? [] : {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        newObj[key] =
          typeof obj[key] === "object" ? deepCopy(obj[key], count) : obj[key];
      }
    }
    return newObj;
  }
};

Answer 36 · 2019-01-15T14:50:58.000Z

// 创建指定深度广度的对象
function createData(deep = 0, breadth = 0) {
    const root = {}
    let pointer = root
    for (let i = 0; i < deep; i++) {
        pointer.data = {}
        pointer = pointer.data
        for (let j = 0; j < breadth && i === deep -1; j++) {
            pointer[j] = j
        }
    }
    return root
}
JSON.parse(JSON.stringify(createData(3000)))
 // Uncaught RangeError: Maximum call stack size exceeded
// 层级够深时,会报错，这个拷贝也是不安全的

Answer 37 · 2019-01-16T13:47:08.000Z

@rutingjin 为什么我的电脑是4800层？这个和电脑内存有关系吧

Answer 38 · 2019-01-25T07:46:54.000Z

cloneData = (data) => {
if (Object.prototype.toString.call(data) === "[object Array]") {
var _arr = [];
for (let item of data) {
_arr.push(cloneData(item))
}
return _arr;
}
if (Object.prototype.toString.call(data) === "[object Object]") {
var _obj = {};
for (let item in data) {
_obj[item] = cloneData(data[item])
}
return _obj;
}
return data;
}
let obj = cloneData({a:1,b:2,c:{name:'tom',age:'22'},d:[1,3,4,5,6]});
console.log(obj);

Answer 39 · 2019-01-25T09:08:50.000Z

@rutingjin 为什么我的电脑是4800层？这个和电脑内存有关系吧

有可能，同一个电脑硬件下，用chrome测试和node测试层数也不一样

Answer 40 · 2019-03-15T03:11:25.000Z

感谢~对基础有很好的了解作用。

Answer 41 · 2019-05-22T21:21:52.000Z

用 reduce 来个一行实现深拷贝的版本

const deepCopyObj = obj => Object.entries(obj).reduce((acc, [key, value]) => (
  typeof value === 'object' ? { ...acc, [key]: deepCopyFun(value) } : { ...acc, [key]: value }
), {})

const deepCopyArr = arr => arr.reduce((acc, cur) => (
  cur instanceof Array ? [...acc, deepCopyArr(cur)] : [...acc, cur]
), [])

Answer 42 · 2019-07-18T11:07:31.000Z

function getType(obj) {
return Object.prototype.toString.call(obj).slice(8, -1)
}
function BFSDeepClone(obj) {
if(typeof obj != 'object') return
let res = obj instanceof Array ? [] : {}
const origin = [obj]
const copy = [res]
while (origin.length) {
const _obj = origin.shift()
const copyObj = copy.shift()
Object.keys(_obj).forEach(k => {
const item = _obj[k]
if (getType(item) === 'Object' || getType(item) === 'Array') {
copyObj[k] = getType(item) === 'Object' ? {} : []
origin.push(item)
copy.push(copyObj[k]) //相当于引用res>>>[k]的值
}else {
copyObj[k] = item
}
})
}
return res
}

广度遍历实现深拷贝😄

Answer 43 · 2019-07-23T04:36:25.000Z

浅拷贝也可以用var newObj = Object.assign({}, obj)

Answer 44 · 2019-08-21T16:25:02.000Z

var x = {
    a : {
        e : 6
    },
    b : 2,
    arr : [1,2,3],
    fun : function(){
        return 8
    }
}
function clone(x){
    if(x.constructor === Object){
        var obj = {}
        for(var k in x){
            obj[k] = clone(x[k])
        }
        return obj
    }else if(x.constructor === Array){
        var arr = [];
        for (var i = 0; i < x.length; i++) {
            arr[i] = clone(x[i])
        }
        return arr
    }else {
        return x
    }
}
var y = clone(x)

Answer 45 · 2019-09-28T15:16:14.000Z

楼主大大，深度拷贝遇到循环引用怎么去解这个问题呢？

Answer 46 · 2019-10-16T11:51:28.000Z

楼主对js的理解这么透彻，是怎么学的啊？

你水平是有多低啊，说他透彻呵呵

Answer 47 · 2019-10-18T10:04:52.000Z

@cell617 你水平高，也没见你写个东西出来啊，键盘侠，就是你这种人(一般不怼人，忍不了)

Answer 48 · 2019-11-14T09:50:17.000Z

@KingsonCheng 避免拷贝继承下来的属性.

为啥要避免拷贝继承下来的属性？

Answer 49 · 2019-11-14T13:12:39.000Z

Date RegExp Error Promise Map Set... 写一个好的深拷贝好难呀

Answer 50 · 2019-11-14T13:26:15.000Z

@superwtt
function Person() {} Person.prototype = { name: 'hello' } var p = new Person(); for (var key in p) { console.log(key); //name } 就是这种情况，p只是Person的实例，for...in循环却能拿到Person原型上的name属性

Answer 51 · 2019-11-15T02:02:47.000Z

@superwtt
function Person() {} Person.prototype = { name: 'hello' } var p = new Person(); for (var key in p) { console.log(key); //name } 就是这种情况，p只是Person的实例，for...in循环却能拿到Person原型上的name属性

所以意思是，不想把原型上的属性也拷贝过来，指向拷贝这个对象上自己的属性对吧？

Answer 52 · 2020-02-29T10:48:23.000Z

感谢分享！

Answer 53 · 2020-06-22T07:58:59.000Z

这句可以优化
var newObj = obj instanceof Array ? [] : {};
可以这么写 var newObj = new obj.constructor
我还想问下，如果里面好几个元素都是一样的，请问怎么优化？遇到面试官问了。。

Answer 54 · 2020-07-13T14:26:50.000Z

@mqyqingfeng

可以这样说吗？

=是浅拷贝

slice和concat如果拷贝基本类型元素的数组是深拷贝，否则是浅拷贝
并不能这么说 浅拷贝和赋值不能混为一谈 之所以需要深浅拷贝是因为赋值时候如果遇到引用类型时候两个变量直接会相互影响所以是为了解决这一现象而采取的方案

赋值：

基本数据类型：赋值，赋值之后两个变量互不影响
引用数据类型：赋址，两个变量具有相同的引用，指向同一个对象，相互之间有影响（为了解决这种场景）

Answer 55 · 2020-07-19T13:36:35.000Z

这句可以优化
var newObj = obj instanceof Array ? [] : {};
可以这么写 var newObj = new obj.constructor
我还想问下，如果里面好几个元素都是一样的，请问怎么优化？遇到面试官问了。。

请问你所说的，好几个元素都是一样的，是什么意思？我所理解的，如果是数组，即使值一样，但它们的 index 不一样吧？如果是对象，即使它们的值一样，但它们的 key 不一样吧？

是指将多个对象/数组拷贝合并到一个对象/数组中的情况吗？不是单单地对一个数组/对象进行深/浅拷贝。

Answer 56 · 2020-07-22T06:19:19.000Z

//其实，简单粗暴copy；只有，function不满足
 function deepCopy(obj) {
      return new Promise((resolve) => {
        const {port1, port2} = new MessageChannel();
        port2.onmessage = ev => resolve(ev.data);
        port1.postMessage(obj);
      });
    }

    deepCopy(obj).then((copy) => {           // 请记住`MessageChannel`是异步的这个前提！
        let copyObj = copy;
        console.log(copyObj, obj)
        console.log(copyObj == obj)
    });

postMessage应该也能实现

Answer 57 · 2020-08-25T06:14:37.000Z

为什么还要用hasOwnProperty判断一下啊

Answer 58 · 2020-09-14T07:42:27.000Z

if (typeof obj !== 'object') return;
是不是return obj比较好

Answer 59 · 2020-10-02T12:14:15.000Z

function deepClone(obj) {
  function isObject(o) {
    return typeof o === "object" && o !== null;
  }

  if (!isObject(obj)) {
    throw new Error("非对象");
  }

  const newObj = obj instanceof Array ? [] : {};

  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      const cur = obj[key];
      newObj[key] = isObject(cur) ? deepClone(cur) : cur;
    }
  }

  return newObj;
}

Answer 60 · 2020-12-08T03:35:17.000Z

为什么还要用hasOwnProperty判断一下啊

因为for in 不仅遍历对象自身属性，还会遍历继承的inumerable 属性，这里只拷贝自身属性。

Answer 61 · 2020-12-08T15:19:10.000Z

为什么没有人说递归深拷贝有缺点的： 1. 栈溢出、2. 尾递归优化、3. 动态规划来解决.

Answer 62 · 2021-01-04T09:03:01.000Z

大佬深拷贝没考虑环么？

Answer 63 · 2021-01-06T07:27:46.000Z

有两个问题

typeof obj[key] === 'object' 无法判断null的情况
如果拷贝的是类的实例对象方法无法拷贝并且输出的对象的类型是Object而不是class
var deepCopy = function(obj) {
if (!(obj instanceof Object)) return obj;
var newObj = obj instanceof Array ? [] : Object.create(obj.proto);
for (var key of Object.getOwnPropertyNames(obj)) {
newObj[key] = obj[key] instanceof Object ? deepCopy(obj[key]) : obj[key];
}
return newObj;
}
进行了略微的修改，大佬你看看
文章写得很好,点个赞!

Answer 64 · 2021-02-08T04:03:08.000Z

深拷贝的实现中好像数组还是浅拷贝

Answer 65 · 2021-04-15T07:18:57.000Z

想咨询一下
var newObj = obj instanceof Array ? [] : {}; 这一句修改修改为：
var newObject = new obj.constructr(); 存在什么风险吗

Answer 66 · 2021-06-13T08:34:50.000Z

想咨询一下
var newObj = obj instanceof Array ? [] : {}; 这一句修改修改为：
var newObject = new obj.constructr(); 存在什么风险吗

严格意义上讲两个风险差不多，从原型链方面考虑：1. 开发者会存在修改 obj 的原型的情况，此时 instanceof 判断失效，constructor 同样不起作用 2. 基于前者，开发者还可以自定义原型、修改 constructor 变量指向等

能用 typeof 和 Object.prototype.toString.call() 就优先使用这两个

Answer 67 · 2021-08-30T03:08:57.000Z

完美深复制window.XMLHttpRequest这种类型的有啥办法吗？上面的方法丢失构造方法或者原型方法

Answer 68 · 2022-04-08T05:12:45.000Z

最新的浏览器可以使用 structuredClone API 来深拷贝了 structuredClone

浏览器兼容:


98 ✔	94 ✔	98 ✔	15.4 ✔	84 ✔

Answer 69 · 2023-03-16T02:39:14.000Z

处理循环引用的版本：

function deepClone(target, map = new WeakMap()) {
    if (map.has(target)) {
        return map.get(target)
    }

    // 特殊处理：正则、日期
    if (isRegExp(target) || isDate(target)) {
        return new target.constructor(target)
    }

    if (isObject(target)) {
        const cloneTarget = isArray(target) ? [] : {}
        map.set(target, cloneTarget)  // 缓存循环引用的拷贝结果
        for (const prop in target) {
            if (target.hasOwnProperty(prop)) {
                cloneTarget[prop] = deepClone(target[prop], map)
            }
        }
        return cloneTarget
    } else {
        return target
    }
}

拷贝函数，有两种写法貌似可以：

eval(target.toString())
// or
new Function(`return ${target.toString()}`)()

Answer 70 · 2024-03-10T14:06:51.000Z

hi，问下深拷贝中对于递归调用的怎么处理

Answer 71 · 2024-03-12T15:35:53.000Z

hi，问下深拷贝中对于递归调用的怎么处理

@ethanzhongyi 用 WeakMap 缓存已处理的对象