浅探JavaScript深拷贝和浅拷贝

栏目: JavaScript · 发布时间: 6年前

内容简介：摘要：不知深浅很危险呐。对象和数组的拷贝对我来说一直都是一个比较模糊的概念，一直有点一知半解，但是在实际工作中又偶尔会涉及到，有时候还会一不小心掉坑里，不知道大家有没有同样的感受，因此，准备对js对象和数组拷贝一探究竟。提到js的对象和数组拷贝，大家一定会想深拷贝和浅拷贝，但是为什么会有深拷贝和浅拷贝呢？下面就让我简单介绍一下为什么拷贝会有深浅之分以及有什么区别？我们都知道js中有两种数据类型，一种是基本数据类型，一种是引用数据类型，基本数据类型是按值访问的，即在操作基本类型的变量时，是直接修改变量的值，

摘要：不知深浅很危险呐。

原文：浅探js深拷贝和浅拷贝
作者： william

对象和数组的拷贝对我来说一直都是一个比较模糊的概念，一直有点一知半解，但是在实际工作中又偶尔会涉及到，有时候还会一不小心掉坑里，不知道大家有没有同样的感受，因此，准备对js对象和数组拷贝一探究竟。提到js的对象和数组拷贝，大家一定会想深拷贝和浅拷贝，但是为什么会有深拷贝和浅拷贝呢？下面就让我简单介绍一下为什么拷贝会有深浅之分以及有什么区别？

原因及区别

我们都知道js中有两种数据类型，一种是基本数据类型，一种是引用数据类型，基本数据类型是按值访问的，即在操作基本类型的变量时，是直接修改变量的值，而引用数据类型的值是按引用访问的，什么叫按引用访问的呢?js的引用类型，也叫对象类型，是保存在内存中的，而在js中又无法直接操作内存中的对象，实际上操作的是对象的引用，因此在引用类型变量在进行复制操作时，并不是对对象值的直接复制，而是将对象的引用复制给了另一个变量，实际上变量指向的是同一个内存地址中对象的值，因此只要改变其中一个对象变量的值另外一个就会一起改变，这就是我们常说的浅拷贝。而在深拷贝中，会开辟一个新的内存地址用来存放新对象的值，两个对象对应两个不同的内存地址，修改一个对象并不会对另外一个对象产生影响。接下来就让我们更细致的探究js中的深浅拷贝。

浅拷贝

实现浅拷贝的方法有多种，让我们先来看看js中提供的几个自带方法实现浅拷贝的的例子：

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。注意：Object.assign()拷贝的是属性值，假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值，来看个例子：

var a = {a : 'old', b : { c : 'old'}}
var b = Object.assign({}, a)
b.a = 'new'
b.b.c = 'new'
console.log(a) // { a: 'old', b: { c: 'new' } }
console.log(b) // { a: 'new', b: { c: 'new' } }

如上面例子，当拷贝的源对象的属性值是一个对象时，拷贝的只是对象的引用值，因此当修改属性值的时候两个对象的属性值都会发生更新

Array.prototype.slice()方法提取并返回一个新的数组，如果源数组中的元素是个对象的引用，slice会拷贝这个对象的引用到新的数组，来看个例子：

var arr = ['a', 'b', {d: 'old'}]
var arr1 = arr.slice(1)
arr1[1].d = 'new'
console.log(arr[2].d) // new

如上例所示，但源数组中的元素是对象引用时，slice拷贝的是这个对象的引用，因此当修改其中一个的值时，两个数组中的值都会发生改变

Array.prototype.concat()用于合并多个数组，并返回一个新的数组，和slice方法类似，当源数组中的元素是个对象的引用，concat在合并时拷贝的就是这个对象的引用，来看个例子：

var arr1 = [{a: 'old'}, 'b', 'c']
var arr2 = [{b: 'old'}, 'd', 'e']
var arr3 = arr1.concat(arr2)
arr3[0].a = 'new'
arr3[3].b = 'new'
console.log(arr1[0].a) // new
console.log(arr2[0].b) // new

除了上述js中自带方法实现的浅拷贝外，我们自己如何简单实现一个浅拷贝呢？来看个例子：

function copy(obj) {
  if (!obj || typeof obj !== 'object') {
    return
  }

  var newObj = obj.constructor === Array ? [] : {}
  for (var key in obj) {
    newObj[key] = obj[key]
  }
  return newObj
}
var a = {b: 'bb', c: 'cc',  d: {e: 'ee'}}
var b = copy(a)
console.log(b) // { b: 'bb', c: 'cc', d: { e: 'ee' } }

实现一个浅拷贝，就是遍历源对象，然后在将对象的属性的属性值都放到一个新对象里就ok了，是不是很简单呢？

深拷贝

先来介绍一个做深拷贝最简单粗暴的方法JSON.stringify()和JSON.parse()的混合配对使用，相信大家对这两个方法都是非常熟悉的，来看个例子：

var obj = {a: {b: 'old'}}
var newObj = JSON.parse(JSON.stringify(obj))
newObj.a.b = 'new'
console.log(obj) // { a: { b: 'old' } }
console.log(newObj) // { a: { b: 'new' } }

上述例子可以看出，使用JSON.stringify()和JSON.parse()确实可以实现深拷贝，在新对象中修改对象的引用时，并不会影响老对象里面的值，那么，这么个方法是否就没有缺陷了呢？在JSON.stringify()做序列时，undefined、任意的函数以及symbol值，在序列化过程中会被忽略，这会在对象复制的时候导致什么后果呢？来看一个例子：

var obj = {a: {b: 'old'}, c:undefined, d: function () {}, e:  Symbol('')}
var newObj = JSON.parse(JSON.stringify(obj))
newObj.a.b = 'new'
console.log(obj) // { a: { b: 'old' }, c: undefined, d: [Function: d], e: Symbol() }
console.log(newObj) // { a: { b: 'new' } }

从例子中可以看到，当源对象中有undefine、function、symbol时，在序列化操作的时候会被忽略，导致拷贝生成的对象中没有对应属性及属性值。那么怎么自己去实现一个深拷贝呢？比较常见的方法就是通过递归，来看个例子：

function copy(obj) {
  if (!obj || typeof obj !== 'object') {
    return
  }
  var newObj = obj.constructor === Array ? [] : {}
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (typeof obj[key] === 'object') {
        newObj[key] = copy(obj[key])
      } else {
        newObj[key] = obj[key]
      }
    }
  }
  return newObj
}

var old = {a: 'old', b: {c: 'old'}}
var newObj = copy(old)
newObj.b.c = 'new'
console.log(old) // { a: 'old', b: { c: 'old' } }
console.log(newObj) // { a: 'old', b: { c: 'new' } }

通过对需要拷贝的对象的属性进行递归遍历，如果对象的属性不是基本类型时，就继续递归，知道遍历到对象属性为基本类型，然后将属性和属性值赋给新对象。

总结

以上对js深拷贝和浅拷贝做了简单的介绍，在深拷贝的实现上也只介绍了最简单的实现形式，并未考虑复杂情况以及相应优化，想要对深拷贝有更深入的了解，需要大家花时间去深入研究，或者可以关注我后续文章的动态。

这篇文章如果有错误或不严谨的地方，欢迎批评指正，如果喜欢，欢迎点赞收藏。

原文地址： https://segmentfault.com/u/liwenjie_59a4eecc51e6a

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和 Java 实时BUG监控。自从2016年双十一正式上线，Fundebug累计处理了8亿+错误事件，得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！

浅探JavaScript深拷贝和浅拷贝

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Designing Web Navigation

James Kalbach / O'Reilly Media / 2007-8-15 / USD 49.99

Thoroughly rewritten for today's web environment, this bestselling book offers a fresh look at a fundamental topic of web site development: navigation design. Amid all the changes to the Web in the pa......一起来看看《Designing Web Navigation》这本书的介绍吧!

码农工具

浅探JavaScript深拷贝和浅拷贝

原因及区别

浅拷贝

深拷贝

总结

关于Fundebug

Designing Web Navigation

JSON 在线解析

在线进制转换器

SHA 加密