JS专题之深浅拷贝

ASCH 发布于2019-08-23 15:07 / 1684人阅读

摘要：在之前的文章专题之数据类型和类型检测中我有讲过，中的数据类型分为两种，基本数据类型和引用数据类型，基本数据类型是保存在栈的数据结构中的是按值访问，所以不存在深浅拷贝问题。

前言

在开发过程中，偶尔会遇到这种场景，拿到一个数据后，你打算对它进行处理，但是你又希望拷贝一份副本出来，方便数据对比和以后恢复数据。

那么这就涉及到了 JS 中对数据的深浅拷贝问题，所谓深浅拷贝，浅拷贝的意思就是，你只是复制了对象数据的引用，并没有把内存里的值另外复制一份，那么深拷贝就是把值完整地复制一份新的值。

在之前的文章《JS专题之数据类型和类型检测》中我有讲过，JS 中的数据类型分为两种，基本数据类型和引用数据类型，基本数据类型是保存在栈的数据结构中的,是按值访问，所以不存在深浅拷贝问题。

而比如对象，数组，函数，正则，时间对象这些都是引用数据类型，是保存在堆中的。所以，引用数据类型的复制，是内存地址的传递，并没有拷贝出一份新的数据。

那么深拷贝，浅拷贝的区别是什么呢？先给结论：

操作拷贝之后的数据不会影响到原数据的值拷贝，就是深拷贝，反正，有影响则为浅拷贝。

一、应用场景

日常开发中，JS 拷贝大多会在 数据保存，数据比对，数据同步 时出现，所以，当你在这些场景的时候，要记得里面隐藏有一个数据深浅拷贝的问题。

二、浅拷贝

我们来看一下浅拷贝：

function clone(origin) {
    var result = {};
        for (var prop in origin) {
            if (origin.hasOwnProperty(prop)) {
                result[prop] = origin[prop];
            }
        }
        return result;
}

var jay = {
    name: "jayChou",
    age: 40,
    family: {
        wife: "Quinlivan"
    }
}

var otherJay = clone(jay);

otherJay.age = 18;
otherJay.family.wife = "otherGirl";

console.log(jay); 
// 
// {
//   name: "jayChou",
//   age: 40,  // 没被改变
//   family: {
//     wife: "otherGirl"  // 同时被改变，说明是同一个引用
//   }
// }

console.log(otherJay);

// 
// {
//   name: "jayChou",
//   age: 18,
//   family: {
//     wife: "otherGirl"  // 被改变了
//   }
// }

我们发现，首先，浅拷贝不是直接赋值，浅拷贝新建了一个对象，然后将源对象的属性都一一复制过来,复制的是值，而不是引用。

我们知道，对象都是按地址引用进行访问的，浅拷贝的复制只复制了第一层的属性，并没有递归将所有的值复制过来，所以，操作拷贝数据，对原数据产生了影响，故而为浅拷贝。

进而，那些可以直接返回原数组的方法就可以简单实现数组和对象浅拷贝。

// 1、 数组浅拷贝 - slice
function shallowCopy1(origin) {
    return origin.slice();
}

// 2、 数组浅拷贝 - concat
function shallowCopy2(origin){
    return origin.concat();
}

// 3、 数组浅拷贝 - 遍历
function shallowCopy3(origin){
  var result = [];
  for(var i = 0; i < origin.length; i++) {
    result.push(origin[i]);
  }
  return result;
}


// 4、 对象浅拷贝 - Object.assign
function shallowCopy4(origin) {
    return Object.assign({},origin)
}

// 5、 对象浅拷贝 - 扩展运算符
// 扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中
function shallowCopy5(origin) {
    return {
        ...origin
    }
}

Object.assign 的拷贝，假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值。MDN 有相应的实例和解释。

二、深拷贝

深拷贝就完整复制数据的值（而非引用），目的在于避免拷贝后数据对原数据产生影响。

目前深拷贝的实现方法主要有递归复制，JSON 正反序列化:

// 1. 深拷贝 - JSON 正反序列化
// 缺点就是无法拷贝 undefined、function、symbol 这类特殊的属性值。
function deepClone1(origin) {
    return JSON.parse(JSON.stringify(arr));
}

// 2. 深拷贝 - 递归;
function deepClone2(origin) {
  const result = origin.constructor === Array ? [] : {};
  for (let keys in origin) {
    // 不遍历原型链上的属性
    if (origin.hasOwnProperty(keys)) {
      if (origin[keys] && typeof origin[keys] === "object") {
        // 如果值是对象，就递归一下, 区分是一般对象还是数组对象
        result[keys] = origin[keys].constructor === Array ? [] : {};
        // 如果是引用数据类型，会递归调用
        result[keys] = deepClone(origin[keys]);
      } else {
        // 如果不是，就直接赋值
        result[keys] = origin[keys];
      }
    }
  }
  return result;
}

JS 的深拷贝的应用，需要根据你的使用场景进行使用，首先是有无必要深拷贝，其次是数据类型，是否直接使用 JSON 的 API 其实就可以。

JS 深浅拷贝在日常开发中使用频率还是较高的，其中考察的知识点，主要在于：

1、是否遇到过深浅拷贝的问题，里面有什么坑
2、是否了解 JS 的数据类型，数据在计算机中的存储机制
3、是否了解数组、对象的一些常用的 API
4、jquery、lodash、underscore 的相关工具函数使用

总结

深浅拷贝主要考察了开发者对 JS 数据类型的了解，数组，对象常用方法的特点和应用，递归函数的封装。

春节快乐！  
写于大年三十，不写文章浑身不舒服~

云服务器 GPU云服务器深浅拷贝深浅 js拷贝内存数据库专题页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101529.html

JavaScript专题之深浅拷贝

摘要：专题系列第六篇，讲解深浅拷贝的技巧和以及实现深浅拷贝的思路前言拷贝也是面试经典呐数组的浅拷贝如果是数组，我们可以利用数组的一些方法比如返回一个新数组的特性来实现拷贝。所以我们可以看出使用和是一种浅拷贝。 JavaScript 专题系列第六篇，讲解深浅拷贝的技巧和以及实现深浅拷贝的思路前言拷贝也是面试经典呐！数组的浅拷贝如果是数组，我们可以利用数组的一些方法比如：slice、co...

RancherLabs 2019-08-21 11:47 评论0 收藏0
JavaScript专题系列文章

摘要：专题系列共计篇，主要研究日常开发中一些功能点的实现，比如防抖节流去重类型判断拷贝最值扁平柯里递归乱序排序等，特点是研究专题之函数组合专题系列第十六篇，讲解函数组合，并且使用柯里化和函数组合实现模式需求我们需要写一个函数，输入，返回。 JavaScript 专题之从零实现 jQuery 的 extend JavaScritp 专题系列第七篇，讲解如何从零实现一个 jQuery 的 ext...

Maxiye 2019-08-21 17:57 评论0 收藏0
复习Javascript专题（四）：js中的深浅拷贝

摘要：基本数据类型的复制很简单，就是赋值操作，所以深浅拷贝也是针对，这类引用类型数据。它会抛弃对象的。另外，查资料过程中还看到这么一个词结构化克隆算法还有这一篇资料也有参考，也写得比较详细了的深浅拷贝基本数据类型的复制很简单，就是赋值操作，所以深浅拷贝也是针对Object，Array这类引用类型数据。浅拷贝对于字符串来说，是值的复制，而对于对象来说则是对对象地址的复制；而深拷贝的话，它不...

MobService 2019-08-23 13:40 评论0 收藏0
JavaScript专题系列20篇正式完结！

摘要：写在前面专题系列是我写的第二个系列，第一个系列是深入系列。专题系列自月日发布第一篇文章，到月日发布最后一篇，感谢各位朋友的收藏点赞，鼓励指正。写在前面 JavaScript 专题系列是我写的第二个系列，第一个系列是 JavaScript 深入系列。 JavaScript 专题系列共计 20 篇，主要研究日常开发中一些功能点的实现，比如防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里...

sixleaves 2019-08-21 17:15 评论0 收藏0
javascript之深浅拷贝

摘要：为何写最近在研究深浅拷贝，找了很多资料，感觉不是很满意，所以自己就整理了一份。深拷贝如果给放到新的内存中，将的各个属性都复制到新内存里，就是深拷贝。安全的值是指能够呈现为有效格式的值。参考文档冴羽的专题之深浅拷贝深拷贝与浅拷贝的实现为何写：最近在研究深浅拷贝，找了很多资料，感觉不是很满意，所以自己就整理了一份。废话不多说，我们来一起复习一下吧，也希望留下您宝贵意见。何为深浅拷贝？...

LMou 2019-08-26 11:34 评论0 收藏0