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


相关文章
|
5天前
|
存储 JSON 前端开发
JavaScript 进阶征途:解锁Function奥秘,深掘Object方法精髓
JavaScript 进阶征途:解锁Function奥秘,深掘Object方法精髓
|
2天前
|
JavaScript 前端开发 Java
JavaScript中的hasOwnProperty方法详解
JavaScript中的hasOwnProperty方法详解
|
3天前
|
JavaScript
|
3天前
|
Web App开发 JavaScript iOS开发
技术笔记:js数组定义和方法(包含ES5新增数组方法)
技术笔记:js数组定义和方法(包含ES5新增数组方法)
|
3天前
|
JavaScript BI
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
|
3天前
|
移动开发 JavaScript 前端开发
技术经验分享:JavaScript实现Date()——日期格式化的三种常用方法
技术经验分享:JavaScript实现Date()——日期格式化的三种常用方法
|
5天前
|
JavaScript 索引
JS数组常用方法总结,含ES6新方法,附示例代码
JS数组常用方法总结,含ES6新方法,附示例代码
|
2月前
|
JSON 前端开发 JavaScript
【面试题】JavaScript 深拷贝和浅拷贝 高级
【面试题】JavaScript 深拷贝和浅拷贝 高级
|
11天前
|
JSON JavaScript 前端开发
【JavaScript】JavaScript中的深拷贝与浅拷贝详解:基础概念与区别
JavaScript 中,理解数据拷贝的深浅至关重要。浅拷贝(如扩展运算符`...`、`Object.assign()`)仅复制对象第一层,共享内部引用,导致修改时产生意外联动。深拷贝(如自定义递归函数、`_.cloneDeep`或`JSON.parse(JSON.stringify())`)创建独立副本,确保数据隔离。选择哪种取决于性能、数据独立性和资源需求。深拷贝虽慢,但确保安全;浅拷贝快,但需小心引用共享。在面试中,理解这些概念及其应用场景是关键。
17 4
【JavaScript】JavaScript中的深拷贝与浅拷贝详解:基础概念与区别
|
2月前
|
JSON JavaScript 前端开发
总结JavaScript中的深拷贝与浅拷贝
总结JavaScript中的深拷贝与浅拷贝