深拷贝deepClone详解

最新推荐文章于 2024-06-11 17:58:29 发布

低码艺术家

最新推荐文章于 2024-06-11 17:58:29 发布

阅读量1.2k

点赞数 3

文章标签： javascript 前端 json

本文链接：https://blog.csdn.net/becarchal/article/details/125365655

版权

在上一篇已经讲了深复制和浅复制的区别，就是引用复制和值复制的区别。见数组。

基本数据类型的特点：数据直接存储在栈(stack)内存中
引用数据类型的特点：在栈中存储的是该对象引用，真实的数据存放在堆内存里

# 实现方式一：借助JSON方法，不能深拷贝函数

JSON.stringify()：用于将 JavaScript 值转换为 JSON 字符串 JSON.parse()：用于将一个 JSON 字符串转换为对象。

let arr1 = [{ value: 1}, { value: 2}, 'str'];
let arr2 = JSON.parse(JSON.stringify(arr1));
arr1[0].value = 3;
console.log(arr1) 
console.log(arr2)

# 实现方式二：手写函数实现

要深拷贝实现值复制，就是不得不判断值的类型（getType见类型判断的几种方式），以进一步选择赋值方式。核心思想：递归遍历数组、对象做值复制

非引用复制，直接赋值
引用赋值，遍历递归赋值

const deepClone = (data) => {
  let type = getType(data);
  let tempValue;
  if(!(type === 'array' || type === 'object')) return data;
  if(type === 'array') {
    tempValue = [];
    data.forEach((item) => {
      tempValue.push(deepClone(item));
    })
    return tempValue;
  } else if(type === 'object') {
    tempValue = {};
    for(const key in data) {
      if (data.hasOwnProperty(key)) {
        tempValue[key] = deepClone(data[key]);
      }
    }
    return tempValue;
  }
}

虽然大概意思实现了，但是在生产环境建议使用underscore或lodash，他们考虑了更加完整的情况，比如function、Map、Set的处理等。

附加浅拷贝的实现方式

Object.assign
Array.prototype.concat
Array.prototype.slice

本文地址：

https://confluence.uuyang.cn/universal/data-structure/faq/deep-clone.html

参考

underscore的实现 https://github.com/jashkenas/underscore
lodash的实现 https://github.com/lodash/lodash
https://zhuanlan.zhihu.com/p/56741046

相关文章推荐

低码艺术家

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
深拷贝deepClone详解

在上一篇已经讲了深复制和浅复制的区别，就是引用复制和值复制的区别。见数组。JSON.stringify()：用于将 JavaScript 值转换为 JSON 字符串 JSON.parse()：用于将一个 JSON 字符串转换为对象。# 实现方式二：手写函数实现要深拷贝实现值复制，就是不得不判断值的类型（getType见类型判断的几种方式），以进一步选择赋值方式。核心思想：递归遍历数组、对象做值复制虽然大概意思实现了，但是在生产环境建议使用underscore或lodash，他们考虑了更加完整的情况，比
复制链接

扫一扫