javascript深拷贝和浅拷贝以及实现方法(推荐)

简介: javascript深拷贝和浅拷贝以及实现方法(推荐)

深拷贝和浅拷贝的区别?

浅拷贝: 将原对象或原数组的引用直接赋给新对象,新数组,新对象/数组只是原对象的一个引用。

深拷贝: 创建一个新的对象和数组,将原对象的各项属性的“值”(数组的所有元素)拷贝过来,是“值”而不是“引用”。

为什么要用深拷贝?

我们希望在改变新的数组(对象)的时候,不改变原数组(对象)

一般是针对Array和Object类型数据的复制

20210710103132745.png

对象深拷贝方法

1.JSON的方式实现

function deepClone(obj) {
  let _obj = JSON.stringify(obj);
  return JSON.parse(_obj);
}

2.递归的方式实现深拷贝---推荐

function deepClone(obj){
  let objClone =  Array.isArray(obj) ? [] : {};
  if (obj && typeof obj === 'object') {
    for(let key in obj){
      if (obj[key] && typeof obj[key] === 'object'){
        objClone[key] = deepClone(obj[key]);
      }else{
        objClone[key] = obj[key]
      }
    }
  }
  return objClone;
}

3.通过Object.assign()拷贝---不推荐

function deepClone(obj){
   if(obj instanceof Object){
     return Object.assign({},obj);
   }else{
     return obj;
   }
}

 注意:Object.assign()并非真正意义上的深拷贝,因为如果被拷贝的对象层数超过1层,那么就无    法通过Object.assign()深拷贝,如下图

20210814223526631.png

数组深拷贝方法

1.concat(arr1, arr2,....)

function deepClone(arr){
   if(arr instanceof Array){
     return [].concat(arr);
   }else{
     return arr;
   }
}

2.slice(idx1, idx2)

参数可以省略

function deepClone(arr){
   if(arr instanceof Array){
     return arr.slice();
   }else{
     return arr;
   }
}

3.JSON的方式实现

1. function deepClone(arr) {
2. let _arr = JSON.stringify(arr),
3. return JSON.parse(_arr);
4. }

无论是对象还是数组,想必大家应该大部分用的都是JSON.parse(JSON.stringify(data))吧,虽有弊端,但不影响大部分使用😂。

多维数组深拷贝

function deepcopy(arr) {
   var out = [],i = 0,len = arr.length;
   for (; i < len; i++) {
       if (arr[i] instanceof Array){
           out[i] = deepcopy(arr[i]);
       }
       else out[i] = arr[i];
   }
   return out;
}

20210710101637255.png


相关文章
|
12天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
11天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
11天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
11天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
27 7
|
12天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
17天前
|
JavaScript 前端开发 Go
异步加载 JS 的方法
【10月更文挑战第24天】异步加载 JavaScript 是提高网页性能和用户体验的重要手段。通过使用不同的方法和技术,可以实现灵活、高效的异步加载 JavaScript。在实际应用中,需要根据具体情况选择合适的方法,并注意处理可能出现的问题,以确保网页能够正常加载和执行。
|
12天前
|
JavaScript 前端开发 开发者
|
Web App开发 JavaScript 前端开发
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
95 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
122 4