Javascript的对象拷贝

时间: 2018-12-03阅读: 177标签: 对象

本篇文章将会说说Javascript中对象拷贝的多种方式,以及探究一下深拷贝和浅拷贝。

在开始之前,我先提一下一些基础知识:Javascript 的对象只是指向内存中某个位置的指针。这些指针是可变的,也就是说,它们可以重新被赋值。因此,单单复制这个指针的结果是,有两个指针指向内存中的同一块地址。

var foo = {
    a : "abc"
}
console.log(foo.a);
// abc

var bar = foo;
console.log(bar.a);
// abc

foo.a = "yo foo";
console.log(foo.a);
// yo foo
console.log(bar.a);
// yo foo

bar.a = "whatup bar?";
console.log(foo.a);
// whatup bar?
console.log(bar.a);
// whatup bar?    


如上面的例子可见,foo和bar对象都能根据对方的变化而变化。因此,在拷贝Javascript中的对象时,我们要根据实际使用情况,而做一些考虑。


浅拷贝

如果要操作的对象拥有的属性都是值类型,那么我们可以用扩展语法或者Object.assign(...)

var obj = { foo: "foo", bar: "bar" };
var copy = { ...obj };
// Object { foo: "foo", bar: "bar" }


var obj = { foo: "foo", bar: "bar" };
var copy = Object.assign({}, obj);
// Object { foo: "foo", bar: "bar" }


可以看到,上面的两个方法都可以把多个不同来源对象中的属性拷贝到一个目标对象中。

var obj1 = { foo: "foo" };
var obj2 = { bar: "bar" };
var copySpread = { ...obj1, ...obj2 };
// Object { foo: "foo", bar: "bar" }
var copyAssign = Object.assign({}, obj1, obj2);
// Object { foo: "foo", bar: "bar" }


上面方法的问题是,如果对象的属性本身也是对象,那么实际被拷贝的只是那些指针,也就是说,这跟执行 var bar = foo; 的效果是一样的,跟第一段代码的做法一样。

var foo = { a: 0 , b: { c: 0 } };
var copy = { ...foo };
copy.a = 1;
copy.b.c = 2;
console.dir(foo);
// { a: 0, b: { c: 2 } }
console.dir(copy);
// { a: 1, b: { c: 2 } }


深拷贝(有限制)

想要深拷贝一个对象,一个可用的解决方法是,先把对象序列化为字符串,然后再把它反序列化回来。

var obj = { a: 0, b: { c: 0 } };
var copy = JSON.parse(JSON.stringify(obj));


不幸的是,这个方法只在对象包含可序列化值,并且没有循环引用的时候有用。其中一个不可序列化的类型的就是日期对象 - 尽管它显示出来是字符串化的ISO格式,JSON.parse只会把它解析成为一个字符串,而不是日期类型

深拷贝 (少一点限制)

对于一些更复杂的情景,我们可以使用HTML5的一个新算法,叫做结构化克隆。不过,截至本篇文章发表为止,有些内置类型还是无法支持,但相比JSON.parse,它支持的类型要多的多:日期类型,正则表达式,Map,集合,二进制大对象,文件集合,图像数据,sparse函数和数组。 它还维护克隆对象的引用,使得他可以支持循环引用结构的拷贝,而这些在上面的序列化例子中是不支持的。

目前,没有直接调用结构化克隆的方法,但是有些新的浏览器特性,底层使用了这个算法。因此,深拷贝对象可能需要一系列的环境才能实现。

通过 MessageChannels: 这样做的原理是,借用通讯的一个特性中使用到的序列化算法。由于那个特性是基于事件的,所以这里的克隆也是一个异步操作。

class StructuredCloner {
  constructor() {
    this.pendingClones_ = new Map();
this.nextKey_ = 0;
const channel = new MessageChannel();
this.inPort_ = channel.port1;
this.outPort_ = channel.port2;
this.outPort_.onmessage = ({data: {key, value}}) => {
      const resolve = this.pendingClones_.get(key);
resolve(value);
this.pendingClones_.delete(key);
};
this.outPort_.start();
}

  cloneAsync(value) {
    return new Promise(resolve => {
      const key = this.nextKey_++;
this.pendingClones_.set(key, resolve);
this.inPort_.postMessage({key, value});
});
}
}

const structuredCloneAsync = window.structuredCloneAsync =
    StructuredCloner.prototype.cloneAsync.bind(new StructuredCloner);
const main = async () => {
  const original = { date: new Date(), number: Math.random() };
original.self = original;
const clone = await structuredCloneAsync(original);
// different objects:
  console.assert(original !== clone);
console.assert(original.date !== clone.date);
// cyclical:
  console.assert(original.self === original);
console.assert(clone.self === clone);
// equivalent values:
  console.assert(original.number === clone.number);
console.assert(Number(original.date) === Number(clone.date));
console.log("Assertions complete.");
};
main();


通过history对象API:history.pushState() 和history.replaceState() 都会给它们的第一个参数做一个结构化克隆!要注意的是,这个方法是同步的,操作浏览器历史这个操作速度不是非常快,如果频繁调用这个方法,会导致浏览器卡死。

const structuredClone = obj => {
  const oldState = history.state;
history.replaceState(obj, null);
const clonedObj = history.state;
history.replaceState(oldState, null);
return clonedObj;
};


通过 notification API: 当创建一个notification实例的时候,构造器为它相关的数据做了结构化克隆。需要注意的是,它会尝试向用户展示浏览器通知,但是,除非它接收到用户允许展示通知的请求,否则,它什么也不会做。一旦用户点击同意的话,notification 会立刻被关闭。

const structuredClone = obj => {
  const n = new Notification("", {data: obj, silent: true});
n.onshow = n.close.bind(n);
return n.data;
};



使用Node.js进行深拷贝

Node.js的8.0.0版本提供了一个 序列化 api 可以跟结构化克隆媲美. 不过这个API在本文发布的时候,还只是被认为是试验性的:

const v8 = require('v8');
const buf = v8.serialize({a: 'foo', b: new Date()});
const cloned = v8.deserialize(buf);
cloned.b.getMonth();


8.0.0版本以下的话,比较稳定的方法,可以考虑用 lodash的cloneDeep函数,它的思想也多少有点基于结构化克隆算法。


结论

总结一下,Javascript 中最好的对象拷贝的算法,很大程度上取决于使用环境,以及你需要拷贝的对象的类型。虽然lodash是最安全的泛型深拷贝函数,但是,如果你自己封装的话,可能可以得到效率更高的实现方法,以下就是一个简单的深拷贝,也同样适用于Date日期对象:

function deepClone(obj) {
  var copy;
// Handle the 3 simple types, and null or undefined
  if (null == obj || "object" != typeof obj) return obj;
// Handle Date
  if (obj instanceof Date) {
    copy = new Date();
copy.setTime(obj.getTime());
return copy;
}

  // Handle Array
  if (obj instanceof Array) {
    copy = [];
for (var i = 0, len = obj.length;
i < len;
i++) {
        copy[i] = deepClone(obj[i]);
}
    return copy;
}

  // Handle Function
  if (obj instanceof Function) {
    copy = function() {
      return obj.apply(this, arguments);
}
    return copy;
}

  // Handle Object
  if (obj instanceof Object) {
      copy = {};
for (var attr in obj) {
          if (obj.hasOwnProperty(attr)) copy[attr] = deepClone(obj[attr]);
}
      return copy;
}

  throw new Error("Unable to copy obj as type isn't supported " + obj.constructor.name);
}


就个人来说,我很期待可以随便使用结构克隆的那一天,让对象拷贝不再令人头疼。


原文链接: smalldata.tech 
翻译来源:https://www.zcfy.cc/article/copying-objects-in-javascript

 

history对象详解及单页面路由实现

history对象保存着用户的上网记录,从浏览器窗口打开的那一刻算起。出于安全的考虑,开发人员无法得知用户浏览过的URL。不过,借由用户访问过的页面列表,同样可以在不知道实际URL的情况下实现后退与前进

深入理解js对象中数据属性和访问器属性

创建对象的方式有两种:第一种,通过new操作符后面跟Object构造函数,第二种,对象字面量方式。两种方式创建出来的对象是一样的,有相同的属性和方法。这些属性内部都有描述其行为的属性描述符。

JS构造函数、原型对象、隐含参数this

解析器再调用函数每次都会向函数内部传递一个隐含的参数this,this指向的是一个对象(函数执行的上下文对象),使用工厂的方法创建对象:通过该方法可以大批量的创建对象,这样创建的对象使用的构造函数都是Object,无法区分多种不同类型的对象。

JS之BOM的几个对象

BOM(Browser Object Model)即浏览器对象模型。 BOM提供了独立于内容 而与浏览器窗口进行交互的对象; 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window;

FormData对象的使用

FormData类型是XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据提供便利。 作用:1.利用一些键值对来模拟一系列表单控件:即将form中的所有表单元素的name和value组装成一个queryString;2.异步上传二进制文件。

秒懂JS对象、构造器函数和原型对象之间的关系

学习JS的过程中,想要掌握面向对象的程序设计风格,对象模型(原型和继承)是其中的重点和难点,拜读了各类经典书籍和各位前辈的技术文章,感觉都太过高深,花费了不少时间才搞明白

js中Object.create vs new Function() 的区别

之前学习JavaScript 权威指南,说以后在JavaScript建立对象请使用Object.create() 尽量少使用 new Function() .这两个新建对象的方法到底有什么不同呢?new 方式实现方式,实际上是先新建了一个Object对象,再用这个对象继承至Base,最后再绑定this.

js中new的本质

用 var anObject = new aFunction() 形式创建对象的过程实际上可以分为三步: 第一步是建立一个新对象; 第二步将该对象内置的原型对象设置为构造函数prototype引用的那个原型对象; 第三步就是将该对象作为this参数调用构造函数,完成成员设置等初始化工作。

javascript Es5面向对象和 Es6面向对象

javascript es6之前的面向对象方法:一般使用构造函数来实现。通过ES6的class 类来创建结果和上面用构造函数创建的是一样的;当然里面也可以写方法 function;用构造函数本身 直接点 ▪ 上的 属性或者 function() 函数 叫静态属性或方法; 一般不会这样做;

js之global 全局对象 方法

global 作为js的全局对象,但其是无法直接访问的,但是在浏览器中浏览器是将这个对象当做是window对象的一部分,即Date 等Global的属性使用window.Date 可访问到

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯