关于js拷贝对象的问题

在使用vue的时候遇到一个需求需要备份一个多维数组对象,用了好几种方法得到的结果都是相互连带影响的,无法做到在修改原数组的基础上,copy出一份为改动过的原数据,看了下网上各路大仙的套路,还是不能深信,还是自己动手看看最好了。

首先是例子1,假如是一个单纯简单的数组对象:

// ------------情况1------------
    var arr = [0,1,2,3];

    var arr1 = arr;
    var arr2 = arr.slice(0);
    var arr3 = JSON.parse(JSON.stringify(arr));

    arr.push(4);
    console.log(arr1);
    console.log(arr2);
    console.log(arr3);

结果是这样:

可以看到后两者很好的满足了我们的需求,没有收到影响。

然后是例子2,这是一个相对复杂的多维对象。

 1 // ------------情况2------------
 2     var obj = [
 3         { a:‘0‘},
 4         { b:‘1‘},
 5         { c:‘2‘},
 6         {
 7             d:[
 8                 { e:‘3‘},
 9                 { f:‘4‘},
10                 { g:‘5‘},
11             ]
12         },
13     ];
14     var copy1 = obj;
15     var copy2 = obj.slice(0);
16     var copy3 = JSON.parse(JSON.stringify(obj));
17
18     obj[3].d[2][‘h‘] = ‘6‘;
19     console.log(copy1);
20     console.log(copy2);
21     console.log(copy3);

结果如图:

结果就有不同了,发现前两种方式都发生了改变,这是因为slice(),contact() 这类类似的方法只能对简单的数组对象进行拷贝,如果其中包含对象,就无法随人愿了,还是第三种坚挺;

因为,就js来说不管是array对象,json对象,其本身是引用类型,是指向其地址的,运用JSON解析成非引用类型的字符串变量,再反解析回来,所以结果令人满意,当然如果是像

php这种拥有&引用符号的,那就不用担心这个问题了。

时间: 2024-12-29 23:21:12

关于js拷贝对象的问题的相关文章

js:对象的创建(为prototype做铺垫)

/** *在js中并不存在类,所以可以直接通过Object来创建对象,但是使用这种方式创建有一 *弊端:由于没有类的约束,无法实现对象的重复利用,并且没有一种规范约定,在操作时容易带来问题. */ var person = new Object(); person.name = "octopus"; person.age = 25; person.say = function(){ alert(this.name+","+this.age); } json:json

js学习对象创建

Object.extend = function(destination, source) {for (var property in source) {    destination[property] = source[property];}return destination;} Prototype 对Object类进行的扩展主要通过一个静态函数Object.extend(destination, source)实现了JavaScript中的继承. 从语义的角度,Object.extend

夺命雷公狗—angularjs—23—copy拷贝对象

copy这在angularjs中是一个拷贝对象的方法: <!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script>

深入 js 深拷贝对象

前言 对象是 JS 中基本类型之一,而且和原型链.数组等知识息息相关.不管是面试中,还是实际开发中我们都会碰见深拷贝对象的问题. 顾名思义,深拷贝就是完完整整的将一个对象从内存中拷贝一份出来.所以无论用什么办法,必然绕不开开辟一块新的内存空间. 通常有下面两种方法实现深拷贝: 迭代递归法 序列化反序列化法 我们会基于一个测试用例对常用的实现方法进行测试并对比优劣: let test = { num: 0, str: '', boolean: true, unf: undefined, nul:

js中对象的浅拷贝和深拷贝的区别

js中对象的浅拷贝和深拷贝的区别 浅度拷贝:复制一层对象的属性,并不包括对象里面的为引用类型的数据,当改变拷贝的对象里面的引用类型时,源对象也会改变. 深度拷贝:重新开辟一个内存空间,需要递归拷贝对象里的引用,直到子属性都为基本类型.两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性. 数据的类型: 一般数据(值传递):字符,数值,布尔,undefined 拷贝(复制)时,传递的是值,修改新数据,不会影响老数据 复杂数据(引用传递):对象 拷贝(复制)时,传递的是内存地址的

js中对象的复制,浅复制(浅拷贝)和深复制(深拷贝)

在js中,我们经常复制一个对象,复制数据,那么就会有人问了,怎么复制,今天鹏哥就带来js中的复制方法. JS中对象分为基本类型和复合(引用)类型,基本类型存放在栈内存,复合(引用)类型存放在堆内存. 堆内存用于存放由new创建的对象,栈内存存放一些基本类型的变量和对象的引用变量. 至于堆内存和栈内存的区别介绍,你们可以百度看看. 下面开始讲解复制: 这种只是简单的变量,内存小,我们直接复制不会发生引用. var a=123; var b=a; a=123456; alert(a); //1234

认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法

(一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQuery的优势 1)可以像CSS一样访问和操作DOM 2)修改CSS控制页面外观 3)简化JS代码操作 4)事件代理更加容易 5)动画效果使用方便 6) Ajax技术更加完美 7)大量的基于Jquery的插件 8)可以自定义扩展功能插件 (三)JQuery的语法 格式:$(selector).actio

[转]JS中对象与字符串的互相转换

原文地址:http://www.cnblogs.com/luminji/p/3617160.html 在使用 JSON2.JS 文件的 JSON.parse(data) 方法时候,碰到了问题: throw new SyntaxError('JSON.parse'); 查询资料,大概意思如下: JSON.parse方法在遇到不可解析的字符串时,会抛出SyntaxError异常. 即:JSON.parse(text, reviver),This method parses a JSON text t

js 遍历对象

function allPrpos(obj) { // 用来保存所有的属性名称和值 var props = ""; // 开始遍历 for(var p in obj){ // 方法 if(typeof(obj[p])=="function"){ obj[p](); }else{ // p 为属性名称,obj[p]为对应属性的值 props+= p + "=" + obj[p]+"<br />"; } } // 最后