JS深拷贝实现的三种方法

对象的深拷贝

会另外创建一个一模一样的对象，新对象和原对象不共享内存，修改新对象不会影响原对象

1. 递归

    function deepClone(obj){//      定义一个变量 并判断是数组还是对象var objClone = Array.isArray(obj) ? [] : {};if(obj && typeof obj === "object" && obj != null){ // 判断obj存在并且是对象类型的时候 因为null也是object类型，所以要单独做判断for(var key in obj){  // 循环对象类型的objif(obj.hasOwnProperty(key)){  // 判断obj中是否存在key属性if(obj[key] && typeof obj[key] === "object"){  //  判断如果obj[key]存在并且obj[key]是对象类型的时候应该深拷贝，即在堆内存中开辟新的内存objClone[key] = deepClone(obj[key]);}else{  //  否则就是浅复制objClone[key] = obj[key];}}}}return objClone;}var a = {name:"key1",eat:["苹果","香蕉"]}b = deepClone(a);
//    console.log(b);a.eat = ["苹果","香蕉","橙子"];console.log(a);  //  {name:"key1",eat:["苹果","香蕉","橙子"]}console.log(b)   //  {name:"key1",eat:["苹果","香蕉"]}

递归运行效率低，次数过多的话容易造成栈溢出。

2. JSON的parse和stringify方法

function deepClone(obj){//        console.log(obj);
//        console.log(typeof obj);var _obj = JSON.stringify(obj);  //  对象转成字符串
//        console.log(_obj);
//        console.log(typeof _obj);var objClone = JSON.parse(_obj); //  字符串转成对象
//        console.log(objClone);
//        console.log(typeof objClone);return objClone;}var a = [0,1,[2,3],4];b = deepClone(a)a[0] = 6;a[2][0] = 7;console.log(a);   //  [6,1,[7,3],4]console.log(b);   //  [0,1,[2,3],4]

3. Jquery的$.extend

var a = [0,1,[2,3],4];b = $.extend(true,[],a);a[0] = 1;a[2][0] = 7;console.log(a);   //  [1,1,[7,3],4];console.log(b);   //  [0,1,[2,3],4];//$.extend参数：
//第一个参数是布尔值，是否深复制
//第二个参数是目标对象，其他对象的成员属性将被附加到该对象上
//第三个及以后的参数是被合并的对象

JS深拷贝实现的三种方法相关推荐

JS下载文件的三种方法
因为公司后端忙得无法给批量下载的api,就我们前端自己把多张图片打包成zip下载,zip打包我们用的是jszip,下面是js实现下载的三种方法: 利用HTML download 属性 var a = ...
JS截取字符串的三种方法详解
本文详细讲解了JS截取字符串的三种方法,文中通过示例代码介绍的非常详细.对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 JS提供三个截取字符串的方法,分别是:slice(),subst ...
JS数组添加元素的三种方法
JS数组添加元素的三种方法 1.push() 方法可以向数组末尾添加一个或多个元素,并且返回新的长度语法:arr.push(element1,element2,element3,····) 参数概 ...
js清空数组的三种方法
JavaScript中清空数组的三种方式 js清空数组的方法 1.splice函数 arrayObject.splice(index,howmany,element1,.....,elementX) ...
js去空格的三种方法
2019独角兽企业重金招聘Python工程师标准>>> 方法一: 个人认为最好的方法.采用的是正则表达式,这是最核心的原理. 其次.这个方法使用了JavaScript 的protot ...
JS实现上传图片的三种方法并实现预览图片功能
在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面: 另一种思路是,直接在本地 ...
html怎么创建数组,js创建数组的三种方法 JS数组去重的几种常见方法
JS数组有哪几种定义方式? js 里创建一个数组那几种方式有什么区别吗?a = new Array(); b = []; 性能问题吗?? function clear(arr) { // 1 如何获 ...
java js 截取字符串,js截取字符串的三种方法
JS提供三个截取字符串的方法,分别是:slice(),substring()和substr(),它们都可以接受一个或两个参数: var stmp = "rcinn.cn";使用一个 ...
原生js绑定事件的三种方法
// 绑定事件// 行内绑定// 选择元素绑定事件// 事件监听有三个参数('什么事件','函数','true或false')true(事件捕获) false(事件冒泡)document.query ...

JS深拷贝实现的三种方法

对象的深拷贝

1. 递归

2. JSON的parse和stringify方法

3. Jquery的$.extend

JS深拷贝实现的三种方法相关推荐

最新文章

热门文章