JavaScript深拷贝（js深拷贝，JavaScript递归函数，实现深拷贝）-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaScript深拷贝（js深拷贝，JavaScript递归函数，实现深拷贝）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

简述：JavaScript的深拷贝和浅拷贝大家都比较熟悉，今天来分享下深拷贝，就是使用该函数时，会复制拷贝一份该数据，修改该数据属性，不会改变原有数据，就是把复制的对象所引用的对象全都复制了一遍，具体实现如下；

1、定义拷贝对象；

var oldObj = {
  name: "张三",
  age: 18,
  colors: ["skyblue", 'plum', "pink"],
  status: {
    hobby: "study",
  }
}

2、定义递归函数deepClone()，实现深拷贝，方便调用；

function deepClone(obj) {
  //判断传进来的参数类型不是对象数组 或者是null时 直接返回
  if (typeof obj !== "object" || obj == null) {
    return obj
  }
  //定义返回值
  let result;
  // 判断传进来的数据类型 是数组/对象 就给result一个数组/对象
  if (obj instanceof Array) {
    result = []
  } else {
    result = {}
  }
  //循环遍历方便拷贝
  for (let key in obj) {
    //判读自有属性
    if (obj.hasOwnProperty(key)) {
      //函数递归实现深层拷贝
      result[key] = deepClone(obj[key])
    }
  }
  //返回出去
  return result
}

//优化
function deepClone(obj) {
  //判断传进来的参数类型不是对象数组 或者是null时 直接返回
  if (typeof obj !== "object" || obj == null) {
    return obj
  }
  //定义返回值result
  // 判断传进来的数据类型 是数组/对象 就给result一个数组/对象
  let result = Array.isArray(obj) ? [] : {};
  //循环遍历方便拷贝
  for (let key in obj) {
    //判读自有属性
    if (obj.hasOwnProperty(key)) {
      //函数递归实现深层拷贝
      result[key] = deepClone(obj[key])
    }
  }
  //返回出去
  return result
}

2.1、obj instanceof Array 和 Array.isArray(obj)都是检测对象是否是一个数组的方法，更多判断数组的方法，详见

判断数组的7种方法https://blog.csdn.net/weixin_65793170/article/details/127082200?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167901515816800222886256%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=167901515816800222886256&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-2-127082200-null-null.blog_rank_default&utm_term=%E6%95%B0%E7%BB%84&spm=1018.2226.3001.4450

3、调用函数，实现递归深拷贝；

const newObj = deepClone(oldObj);
//检验拷贝结果
newObj.name = "李四";
newObj.status.hobby = "敲代码";
newObj.colors[2] = "purple";
console.log("oldObj", oldObj);
console.log("newObj", newObj);

3.1、输出结果，未改变原有嵌套层级较深的数据，递归函数，深拷贝成功；

js深拷贝,vue,js,vscode,javascript,vue.js,前端

4、具体使用，可以直接在项目中新建js文件导出该方法，然后引入使用，方便实现数据深拷贝：

1、导出：export function deepClone(obj) { ... }

2、引入：import { deepClone } from "../utils/clone.js"；

3、使用：const data = deepClone(this.obj)        console.log(data);

方便了很，哈哈，点赞收藏呀(●'◡'●)......文章来源地址https://www.toymoban.com/news/detail-613586.html

到了这里，关于JavaScript深拷贝（js深拷贝，JavaScript递归函数，实现深拷贝）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！