浅探js深拷贝和浅拷贝

2018-11-10 admin

对象和数组的拷贝对我来说一直都是一个比较模糊的概念,一直有点一知半解,但是在实际工作中又偶尔会涉及到,有时候还会一不小心掉坑里,不知道大家有没有同样的感受,因此,准备对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/a/1190000016970483

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-45084.html

文章标题:浅探js深拷贝和浅拷贝

相关文章
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"&gt...
2017-02-17
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
typeof、instanceof和contructor的区别
typeof:以字符串的形式返回变量的原始类型,typeof在两种情况下会返回"undefined":一个变量没有被声明的时候,和一个变量的值是undefined的时候,注意,typeof null也会返回object,...
2015-11-12
回到顶部