ES5、ES6深拷贝、浅拷贝

看这个文章之前，看一下这个作者的文档，讲了一下堆和栈、基本数据和引用数据，比较基础的一些东西：https://www.cnblogs.com/echolun/p/7889848.html

如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。

浅拷贝：复制对象的时候，只对第一层键值对进行独立的复制

简单的实现如下 es5

// 浅拷贝实现
function shadowCopy(target, source){
if( !source || typeof source !== 'object'){
return;}// 这个方法有点小trick，target一定得事先定义好，不然就不能改变实参了。// 具体原因解释可以看参考资料中 JS是值传递还是引用传递
if( !target || typeof target !== 'object'){
return;}  // 这边最好区别一下对象和数组的复制
for(var key in source){
if(source.hasOwnProperty(key)){target[key] = source[key];}}
}

es6

注意，在属性拷贝过程中可能会产生异常，比如目标对象的某个只读属性和源对象的某个属性同名，这时该方法会抛出一个 TypeError 异常，拷贝过程中断，已经拷贝成功的属性不会受到影响，还未拷贝的属性将不会再被拷贝。

注意， Object.assign 会跳过那些值为 null 或 undefined 的源对象。

Object.assign(target, ...sources)

var obj = { a: 1 };
var copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

深拷贝

递归属性遍历

es5

一般来说，在JavaScript中考虑复合类型的深层复制的时候，往往就是指对于Date、Object与Array这三个复合类型的处理。我们能想到的最常用的方法就是先创建一个空的新对象，然后递归遍历旧对象，直到发现基础类型的子节点才赋予到新对象对应的位置。不过这种方法会存在一个问题，就是JavaScript中存在着神奇的原型机制，并且这个原型会在遍历的时候出现，然后原型不应该被赋予给新对象。那么在遍历的过程中，我们应该考虑使用hasOenProperty方法来过滤掉那些继承自原型链上的属性：

function clone(obj) {var copy;// Handle the 3 simple types, and null or undefinedif (null == obj || "object" != typeof obj) return obj;// Handle Dateif (obj instanceof Date) {copy = new Date();copy.setTime(obj.getTime());return copy;}// Handle Arrayif (obj instanceof Array) {copy = [];for (var i = 0, len = obj.length; i < len; i++) {copy[i] = clone(obj[i]);}return copy;}// Handle Objectif (obj instanceof Object) {copy = {};for (var attr in obj) {if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);}return copy;}throw new Error("Unable to copy obj! Its type isn't supported.");
}

利用JSON深拷贝

对于一般的需求是可以满足的，但是它有缺点。下例中，可以看到JSON复制会忽略掉值为undefined以及函数表达式。

JSON.parse(JSON.stringify(obj));

ES5、ES6深拷贝、浅拷贝相关推荐

ES6 深拷贝_JS基本数据类型和引用数据类型的区别及深浅拷贝
1.栈(stack)和堆(heap) stack为自动分配的内存空间,它由系统自动释放:而heap则是动态分配的内存,大小也不一定会自动释放 2.数据类型 JS分两种数据类型: 基本数据类型:Numb ...
Js Array数组ES5/ES6常用方法
Js Array数组ES5/ES6常用方法 1.栈方法(先进后出) push():在数组的最后一项后追加值(参数:可以为多个值或数组) 返回:数组的长度,改变了原数组. var a=[1,2,3] a ...
java深拷贝和浅拷贝_Java 深拷贝浅拷贝与序列化
一.浅拷贝.深拷贝浅拷贝会对对象中的成员变量进行拷贝:如果是基本类型,拷贝的就是基本类型的值:如果属性是内存地址(引用类型),拷贝的就是内存地址 : 深拷贝,除了基本类型外,引用类型所引用的对象也会 ...
Java基础深拷贝浅拷贝
Java基础深拷贝浅拷贝非基本数据类型需要new新空间 class Student implements Cloneable{private int id;private String name ...
JavaScript get set方法 ES5 ES6写法
title: JavaScript get set方法 ES5/ES6写法 date: 2018-05-07 10:38:50 tags: 前端 categories: 前端网上鲜有get和set的 ...
原型模式与深拷贝浅拷贝
原型模式与深拷贝浅拷贝原型模式 Java中的原型模式简单的例子浅拷贝深拷贝效率比较 JMH测试样例测试结果原型模式用一个已经创建的实例作为原型,通过复制该原型对象来创建一个和原型相同或 ...
ES6深拷贝与浅拷贝
小感在前 React学习与开发过程要经历一个相当长的准备阶段,此前看阮一峰老师的文章中,他就特别提到这一点.但是,由于React框架或者说是一种优秀的前端架构实在太诱人,所以,掌握这项技术所涉及的技术 ...
ES6中展开运算符的深拷贝浅拷贝理解(ElementUI表格点击编辑，模态框内容与表格数据一起变的问题)
项目中遇到的问题: 在elementui中表格点击按钮传值的时候,通过bus中的$emit传对象,在弹出的模态框中用bus的$on接收对象,然后对传的对象进行改变,结果发现改变了原表格的数据. 然后就 ...
ES6 深拷贝_你别自以为是：ES6误区之 Object.assign()、const
文/北妈阅读本文需要 2.3分钟一很久没发技术文,今天北妈在新开一个技术系列:"别自以为是,1分钟走出JS常见误区",里面我会每期挑选几个常见基础属性,讲一讲里面最容易被人忽 ...

ES5、ES6深拷贝、浅拷贝

ES5、ES6深拷贝、浅拷贝相关推荐

最新文章

热门文章