在JavaScript中,数据类型分为两大类:基本数据类型和复杂数据类型。基本数据类型包括Number、Boolean、String、Null、String),而复杂数据类型包括Object、Function、Array。

而对于基本数据类型来说,复制一个变量值,本质上就是copy了这个变量。一个变量值的修改,不会影响到另外一个变量。

let val = 123;
let copy = val;
console.log(copy); //
val = 456; //修改val的值对copy的值不产生影响
console.log(copy); //

而对于复杂数据类型来说,同基本数据类型实现的不太相同。对于复杂数据类型的复制,要注意的是,变量名只是指向这个对象的指针。当我们将保存对象的一个变量赋值给另一个变量时,实际上复制的是这个指针,而两个变量都指向都一个对象。因此,一个对象的修改,会影响到另外一个对象。

// obj只是指向对象的指针
let obj = {
character: 'peaceful'
};
//copy变量复制了这个指针,指向同一个对象
let copy = obj;
console.log(copy); //{character: 'peaceful'}
obj.character = 'lovely';
console.log(copy); //{character: 'lovely'}

拷贝对象

在JavaScript中,拷贝对象分为两种方式,浅拷贝和深拷贝。

浅拷贝指两个不同的变量存的是同一个对象的地址,即两个变量指向同一块内存区域;深拷贝则是重新分配了一块内存区域来存储复制后的对象,两个变量存的是真正的两个互不影响的变量。

浅拷贝

let objA = {
name: '对象A',
content: '我是A'
};
let copyA = objA; console.log(objA.name); // ==> "对象A"
console.log(copyA.name); // ==> "对象A"

如此即得到了objA的一份浅拷贝copyA,由于指向的是同一个对象,因此在修改objA的同时也是修改了copyA,反之亦然。

Object.assign 的深拷贝与浅拷贝

Object.assign(target, …sources)

如果我们把它的第一个参数target设置为一个空对象 {},同时保证剩余的源对象sources中的属性类型不包含引用类型,则该方法的返回值就是一个与源对象相同的但并不在同一块内存空间另一个对象,即获得了源对象的深拷贝。但是,如果源对象的属性中包含某个对象,也就是这个属性的值指向某个对象,就像下面这样:

var obj = {
name: 'obj name',
content: {
a: 1,
b: 2
}
};

则使用 Object.assign({}, obj) 时,返回的目标对象中的content属性与源对象obj中的content属性指向的同一块内存区域,即对obj下的content属性进行了浅拷贝。因此针对深拷贝,需要使用其他方法,比如自己实现一个深拷贝的方法,或者使用 JSON.parse(JSON.stringify(obj))

另一种浅拷贝 ...操作符:

 let arr = {a:1,b:2}
let arr2 = {...arr}
arr2.a = 2
console.log(arr.a)//
console.log(arr2.a)//

深拷贝

我认为对于对象来说最简单的深拷贝方法就是转成字符串再解析

var obj = {a:1,b:2}
var newObj = JSON.parse(JSON.stringify(obj));
newObj.a=3;
console.log(obj);

另外一种深拷贝方法:递归遍历

var obj = {a:{b:10}};
function deepCopy(obj){
  if ( typeof obj != 'object' ){ // ( obj instanceof Object || obj instanceof Array )
    return obj;
  }
  var newobj = {};
  for ( var attr in obj) {
    newobj[attr] = deepCopy(obj[attr]);
  }
  return newobj;
}
var obj2 = deepCopy(obj);
obj2.a.b = 20;
alert(obj.a.b); //

js 对象拷贝的更多相关文章

  1. js对象拷贝的方法

     对象拷贝的方法是一个难点,尤其是深拷贝.建议把代码都运行下,帮助理解拷贝. 一. json方法 1. 适合情况:  JSON对象的深度克隆.方法是先JSON.stringify() 转为json字符 ...

  2. js对象拷贝遇到的坑

    问题:通过拷贝赋值后,所有的对象的name居然都是C test(){ let person = [{'name':'danny'}] let names = ['A','B','C'] let tem ...

  3. 超实用的JavaScript代码段 Item8 -- js对象的(深)拷贝

    js 对象 浅拷贝 和 深拷贝 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: var Chinese = { nation:'中国' } var Doctor ...

  4. js对象及元素复制拷贝

    1.数组及对象拷贝: 浅拷贝var b=$.extend(false,{},a);//对象浅拷贝 var a={aa:111,bb:{bb1:22}}; var b=$.extend(false,{} ...

  5. JS 对象(对象遍历,拷贝)

     定义属性 直接 obj.对象 的方法 Object.defineProperty(obj, prop, descriptor) ,这种方法可以设置 或者修改对象属性的访问权限 数据描述符和存取描述符 ...

  6. JS对象复制

    在JavaScript很多人复制一个对象的时候都是直接用"=",因为大家都觉得脚本语言是没有指针.引用.地址之类的,所以直接用"="就可以把一个对象复制给另外一 ...

  7. js 深度拷贝

    js 数据类型 分为2种: 基本数据类型:Undefined.Null.Boolean.Number.String 复杂数据类型:Object.Array.function 他们的区别是在内存中的存储 ...

  8. JS组件系列——表格组件神器:bootstrap table 包含了js对象的定义和对象成员函数的定义

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  9. js对象进行浅复制,深拷贝的方法

    js对象浅拷贝和深拷贝详解   本文为大家分享了JavaScript对象的浅拷贝和深拷贝代码,供大家参考,具体内容如下 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷 ...

随机推荐

  1. React入门一

    React.js算是当今主流框架之一了,好多公司项目都是React.直接上图: 所以最近整合一些论坛,今儿咱就说说React, React 是一个用于构建用户界面的 JAVASCRIPT 库. Rea ...

  2. Java 标准 I/O 介绍

    一.Java标准I/O知识体系图: 二.I/O是什么 I/O 是Input/Output(输入.输出)的简称,输入流可以理解为向内存输入,输出流是从内存输出. 三.Java I/O 用途与对应的流一览 ...

  3. linux下c编程 基础

    1. 熟悉Linux系统下的开发环境 2. 熟悉vi的基本操作 3. 熟悉gcc编译器的基本原理 4. 熟练使用gcc编译器的常用选项 5 .熟练使用gdb调试技术 6. 熟悉makefile基本原理 ...

  4. CoreData的简单使用

    一.基础知识: CoreData是对SQLite的封装,使用的时候比较方便,减少对SQL语句的使用. CoreData中的核心对象 NSManagedObjectModel:代表Core Data 的 ...

  5. c++右值引用以及使用

    前几天看了一篇文章<4行代码看看右值引用> 觉得写得不错,但是觉得右值引用的内容还有很多可以去挖掘学习,所以总结了一下,希望能对右值引用有一个更加深层次的认识 一.几个基本概念 1.1左值 ...

  6. Java历程-初学篇 Day01初识java

    HelloWorld!!!!! 一,第一个java程序的构成 1,外层框架 class 后面的类名必须与文件名相同 起名方法:1)构成只能有_ $ 字母 数字 2)数字不能开头 3)首字母必须大写 4 ...

  7. Windows 安装 Vue

    引言 在公司 linux 环境下安装不顺利,回家在 windows 下操作感觉到一种幸福 nginx 先安装了 nginx,其实跟 vue 没关系,只是打算用它做 web 服务,此处略过 nginx ...

  8. Intent传值的学习

    今天学习了Intent传值的过程,有点安卓编程经验的都知道,Intent可以实现页面的跳转,可以从一个activity跳转到另一个activity,这个名义上说是界面跳转,其实这句话现在觉得说的很不严 ...

  9. 对JDK的深入理解

    今天对Java的jdk有了更加深入的理解: Java的jdk其实一共包含三部分内容: 1.工具包 2.类库 3.JRE jdk的全名:Java develop kit (java开发工具) jdk包含 ...

  10. SVN更新失败,提示locked 怎么破

    有时在svn更新或提交代码时,会报错,让你cleanup  如果cleanup解决不了,就要删除被锁定的文件夹下的文件,然后就可以更新或提交了 怎么做呢? 1.首先在CMD中进入你工作目录被锁定的文件 ...