type函数

首先我们要实现一个getType函数对元素进行类型判断,直接调用Object.prototype.toString 方法。

function getType(obj){
//tostring会返回对应不同的标签的构造函数
var toString = Object.prototype.toString;
var map = {
'[object Boolean]' : 'boolean',
'[object Number]' : 'number',
'[object String]' : 'string',
'[object Function]' : 'function',
'[object Array]' : 'array',
'[object Date]' : 'date',
'[object RegExp]' : 'regExp',
'[object Undefined]': 'undefined',
'[object Null]' : 'null',
'[object Object]' : 'object'
};
if(obj instanceof Element) {
return 'element';
}
return map[toString.call(obj)];
}

深拷贝(deepClone)

对于一个引用类型,如果直接将它赋值给另一个变量,由于这两个引用指向同一个地址,这时改变其中任何一个引用,另一个都会受到影响。当我们想复制一个对象并且切断与这个对象的联系,就要使用深拷贝。对于一个对象来说,由于可能有多层结构,所以我们可以使用递归来解决这个问题

function deepClone(data){
var type = getType(data);
var obj;
if(type === 'array'){
obj = [];
} else if(type === 'object'){
obj = {};
} else {
//不再具有下一层次
return data;
}
if(type === 'array'){
for(var i = 0, len = data.length; i < len; i++){
obj.push(deepClone(data[i]));
}
} else if(type === 'object'){
for(var key in data){
obj[key] = deepClone(data[key]);
}
}
return obj;
}

对于function类型,这里是直接赋值的,还是共享一个内存值。这是因为函数更多的是完成某些功能,有个输入值和返回值,而且对于上层业务而言更多的是完成业务功能,并不需要真正将函数深拷贝。

广度优先遍历

上面是使用递归来进行深拷贝,显然我们可以使用树的广度优先遍历来实现

//这里为了阅读方便,只深拷贝对象,关于数组的判断参照上面的例子
function deepClone(data){
var obj = {};
var originQueue = [data];
var copyQueue = [obj];
//以下两个队列用来保存复制过程中访问过的对象,以此来避免对象环的问题(对象的某个属性值是对象本身)
var visitQueue = [];
var copyVisitQueue = [];
while(originQueue.length > 0){
var _data = originQueue.shift();
var _obj = copyQueue.shift();
visitQueue.push(_data);
copyVisitQueue.push(_obj);
for(var key in _data){
var _value = _data[key]
if(typeof _value !== 'object'){
_obj[key] = _value;
} else {
//使用indexOf可以发现数组中是否存在相同的对象(实现indexOf的难点就在于对象比较)
var index = visitQueue.indexOf(_value);
if(index >= 0){
// 出现环的情况不需要再取出遍历
_obj[key] = copyVisitQueue[index];
} else {
originQueue.push(_value);
_obj[key] = {};
copyQueue.push(_obj[key]);
}
}
}
}
return obj;
}

JSON

深拷贝对象还有另一个解决方法,在对象中不含有函数的时候,使用JSON解析反解析就可以得到一个深拷贝对象

js实现深拷贝的更多相关文章

  1. JS 中深拷贝的几种实现方法

    JS 中深拷贝的几种实现方法1.使用递归的方式实现深拷贝 //使用递归的方式实现数组.对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是 ...

  2. js原生深拷贝

    /*****************************************************************************************/ 原生js实现深拷 ...

  3. 一篇文章彻底说清JS的深拷贝/浅拷贝

    一篇文章彻底说清JS的深拷贝and浅拷贝 这篇文章的受众 第一类,业务需要,急需知道如何深拷贝JS对象的开发者. 第二类,希望扎实JS基础,将来好去面试官前秀操作的好学者. 写给第一类读者 你只需要一 ...

  4. js的深拷贝和浅拷贝

    一.数组的深浅拷贝 在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致 ...

  5. 从JS的深拷贝与浅拷贝到jq的$.extend()方法

    一.堆内存与栈内存 堆和栈都是内存中划分出来的用来存储的区域,栈为自动分配的内存空间,它由系统自动释放,堆为动态分配的内存,大小不定也不会自动释放. 二.js基本数据类型与引用类型的不同 基本数据类型 ...

  6. JS中深拷贝数组、对象、对象数组方法

    我们在JS程序中需要进行频繁的变量赋值运算,对于字符串.布尔值等可直接使用赋值运算符 “=” 即可,但是对于数组.对象.对象数组的拷贝,我们需要理解更多的内容. 首先,我们需要了解JS的浅拷贝与深拷贝 ...

  7. JS中深拷贝数组、对象、对象数组方法(转载)

    我们在JS程序中需要进行频繁的变量赋值运算,对于字符串.布尔值等可直接使用赋值运算符 “=” 即可,但是对于数组.对象.对象数组的拷贝,我们需要理解更多的内容. 首先,我们需要了解JS的浅拷贝与深拷贝 ...

  8. JS实现深拷贝的几种方法

    引 如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力. 此篇文章中也会简单阐述到栈 ...

  9. JS实现深拷贝,浅拷贝的方法

    在 JS 中,函数和对象都是浅拷贝(地址引用):其他的,例如布尔值.数字等基础数据类型都是深拷贝(值引用). 深拷贝 JSON.parse(JSON.stringify(src)):这种方法有局限性, ...

  10. js引用类型深拷贝、浅拷贝方法封装

    引用类型的深拷贝.浅拷贝在前端领域一直是个很重要的知识点,不仅在业务中频繁使用,也是面试官们喜欢考的的知识点之一.本篇将封装引用类型的深拷贝.浅拷贝方法,并解决在封装过程中出现的问题. 一.浅拷贝 浅 ...

随机推荐

  1. 【原创】官方文档-hive 启动命令

    [一起学Hive]之十六-Hive的WEB页面接口-HWI Apache Hive 管网 hive metrics hive常用命令整理 Hive学习之HiveServer2服务端配置与启动 启动hi ...

  2. 1127 ZigZagging on a Tree

    题意:中序序列+后序序列构建二叉树,之字形输出其层序序列. 思路:在结点的数据域中额外增加一个layer表示结点所在的层次,并定义vector<int> zigzag[maxn]存放最终结 ...

  3. Java微信公众平台开发(四)--回复消息的分类及实体的创建

    转自:http://www.cuiyongzhi.com/post/42.html 前面有说道对接收到微信服务器消息后对消息的分类,当时主要分为普通消息和事件消息,这里我们要讲述的是我们在给用户回复的 ...

  4. 3.使用Maven构建Web项目

    转自:https://blog.csdn.net/m261030956/article/details/46481837 从网上查了一些资料,才算明白(也就是怎么操作吧),怎么使用Maven构建一个W ...

  5. Lecture Sleep(前缀和)

    Your friend Mishka and you attend a calculus lecture. Lecture lasts n minutes. Lecturer tells ai the ...

  6. C#操作SQLIte数据。

    using System; using System.Data; using System.Text.RegularExpressions; using System.Xml; using Syste ...

  7. arm上sd卡热插拔问题的解决:

    首先,保证sd卡驱动是完好,但是sd卡却无法热插拔或者无法识别. 刚开始我的板子上,sd是能够读取的,但是却不支持热插拔,看了几天sd驱动,找到了问题的原因,是驱动中硬件引脚相关设置的问题,具体根绝个 ...

  8. IIS设置Access-Control-Allow-Origin

    打开iis,找到“HTTP响应标头”点进去, 在右侧可以看到添加,然后添加如下标头即可Access-Control-Allow-Headers:Content-Type, api_key, Autho ...

  9. 关于使用sessionStorage报SecurityError错误的问题

    localStorage 永久保存 不同页面和标签页可以共享 关闭浏览器不会清除 sessionStorage 会话保存 不同页面和标签页不能共享 关闭浏览器会清除 遇到的问题:在firefox中报S ...

  10. SpringBoot16 MockMvc的使用、JsonPath的使用、请求参数问题、JsonView、分页查询参数、JsonProperty

    1 MockMvc的使用 利用MockMvc可以快速实现MVC测试 坑01:利用MockMvc进行测试时应用上下文路径是不包含在请求路径中的 1.1 创建一个SpringBoot项目 项目脚手架 1. ...