在js中将一个值a赋值给另一个值b,在什么情况下改变了b的值会影响a的值?在知道哪种类型赋值后改变值会影响原对象的情况下该怎么做才不会影响原对象?就是这里需要讨论的问题。

首先是哪种类型赋值后改变赋值后的值会影响到被赋值的值?

let a = 1;
let b = a;
b = 2;
console.log(a) // 1let obj = {a: 1}
let obj2 = obj;
obj2.a = 2;
console.log(obj) // {a: 2}

从这里我们可以知道:简单数据类型的number赋值后就算改变赋值后的值也不会影响到其本身,但是对象复制后改变了赋值后的值就会影响到其本身。

原理:

javaScript中的数据类型分为两类,简单数据类型和复杂数据类型;
1.简单数据类型:包括数值,字符串、布尔值、null、undefined;
2.复杂数据类型:对象即属性的集合(function、Array、Object);

先了解数据类型在计算机中的存储;
1.简单数据类型:存储的是对象的原始数据;
2.复杂数据类型:对象的原型也是引用类型,对象类型的值单独存放。对象原型的方法和属性放在内存中,通过原型链的方式来指向这个地址;所以对象类型存储的是对象的引用地址;

对象类型在复制的时候,只是将对象的引用复制了,将a对象的引用地址值赋值给了b
所以在b改变对象属性值的时候,a的引用也发生了改变,它们在内存中获取的都是同一个对象;

如果想要复制一个复杂数据类型却不想影响原对象,此时就需要用到深拷贝/浅拷贝。

浅拷贝:
首先由一个数组[1,2,3]或对象{name:'porco', age:1},这样的数组或对象中的值统一不为[数组array]或[对象obj]的只有一层数据结构的简单对象,被称为浅拷贝对象,如果单纯的赋值使用例如let a = [1,2,3],如果改变了a,那么原数组也会相应的被改变,对象也是一样。所以遇到这种情况,想要复制的对象的改变不想影响到原对象,就需要浅拷贝方法:如下

/**
* 浅拷贝对象:
**/let obj = {a:1,b:2}
let obj2 = {};
/*方法1*/
for(let e in obj) {obj2[e] = obj[e]
}
/*方法2*/
Object.keys(obj).forEach(e => {obj2[e] = obj[e]
})
obj2.a = 0;
console.log(obj2) //{a:0, b:2}
console.log(obj) //{a:1, b:2}/*这里还可以使用两种es6浅拷贝方式*/
/*这是直接浅拷贝:*/
let obj2 = Object.assign({}, obj);/*以及直接使用拓展运算符拷贝*/
let obj2 = {...obj}/*以上四种方式均可作为浅拷贝对象的方式*//***********************************//*** 浅拷贝数组:**/
let arr = [1,2,3]
/*第一种浅拷贝数组方式*/
let arr2 = arr.slice();
/*第二种浅拷贝数组方式*/
let arr2 = arr.concat();
/*第三种浅拷贝数组方式*/
let arr2 = [];
arr.forEach(e => {arr2.push(e)
})
arr2.[0] = 0;
console.log(arr2) //[0,2,3]
console.log(arr) //[1,2,3]

深拷贝:
当对象中的第一层级有一项是数组或对象,浅拷贝失效,例如:let a = [{a:1}]或let a = {a:{aa:1}},这样,使用上面的方法都会失效。这时必须使用深拷贝
1、最简单的办法

let BBB = JSON.parse(JSON.stringify(AAA)) 

这种方法简单适用于普通场景,但是也会抛弃对象的constructor,不管之前的构造函数什么样,深拷贝后都会变成object.这种方法能正确处理的对象只有 Number, String, Boolean, Array, 并且能用jso格式直接表示的数据结构。

2、一个递归方法:

function deepClone(obj) {let objClone = Array.isArray(obj) ? [] : {};if(obj && typeof obj === "object") {for(let key in obj) {if(obj.hasOwnProperty(key)) {if(obj[key] && typeof obj[key] === "object") {objClone[key] = deepClone(obj[key]);} else {objClone[key] = obj[key];    }}} }return objClone
}

以上就是讨论了哪些值类型赋值不需要使用拷贝,哪些值类型赋值需要浅拷贝,哪些值类型赋值需要深拷贝

javaScript中简单数据类型和复杂数据类型赋值拷贝的理解相关推荐

  1. JavaScript中简单的逻辑思维题

    1.输入半径,高,求圆柱体的面积,和体积,把体积.面积返回给函数调用者,然后由调用者输出面积和体积大小.圆面积:PI*R*R 圆周长:2*PI*R 圆柱体表面积s:(2PIR)h+(PIRR)2 圆柱 ...

  2. JS中的基本数据类型与引用数据类型

    JS中的数据类型可以这样分类: 原始数据类型: number, string ,boolean, undefined, null, symbol 基本类型(简单类型): 值类型: number((整数 ...

  3. JavaScript的基本数据类型和引用数据类型

    一个变量可以存放两种类型的值,基本类型的值(primitive values)和引用类型的值(reference values). ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值. ...

  4. java引用类型和值类型_[Java教程]JavaScript中值类型和引用类型的区别

    [Java教程]JavaScript中值类型和引用类型的区别 0 2017-02-24 00:00:35 JavaScript的数据类型分为两类:原始类型和对象类型.其中,原始类型包括:数字.字符串和 ...

  5. 【JavaScript】在JavaScript中使用JSON进行序列化/反序列化操作

    文章目录 用于stringfy/parse操作的"JSON"对象 JavaScript中简单数据类型的JSON序列化操作 使用toJSON()进行对象的序列化操作 使用eval() ...

  6. js基本数据类型和引用数据类型有什么区别?

    js基本数据类型和引用数据类型有什么区别? 1.基本数据类型和引用数据类型包括哪些? 基本数据类型: 在javascript中,有6种基本数据类型:string.number.boolean.null ...

  7. javascript中的toString()

    基本介绍 javascript中的toString方法是我们在写前端时经常要用的一个函数,也就是将我们的变量转换成字符串的方法. javascript中各种类型的toString方法 javascri ...

  8. this调用语句必须是构造函数中的第一个可执行语句_谈谈JavaScript中的函数构造式和new关键字...

    您是否曾困惑于 Javascript 中的new关键字呢?是否曾想理解关于 function 和 constructor 的区别是什么呢? 大多数 Javascript 的新开发者不太想要使用new关 ...

  9. 谈谈JavaScript中的function constructor和new关键字

    您是否曾困惑于 Javascript 中的new关键字呢?是否曾想理解关于 function 和 constructor 的区别是什么呢? 大多数 Javascript 的新开发者不太想要使用new关 ...

  10. JavaScript中的基本数据类型与引用数据类型

    JavaScript中的基本数据类型与引用数据类型 转载自:https://www.cnblogs.com/c2016c/articles/9328725.html 1.栈(stack)和堆(heap ...

最新文章

  1. Xamarin Andro教程搭建Xamarin Androidid开发环境(一)
  2. Linux下tar.xz压缩解压
  3. 【Android 高性能音频】高性能音频简介 ( 高性能音频问题引入 | 使用场景 | 相关开发库及技术 )
  4. python中字母大小写的转换,和一些字典的常规操作
  5. Luogu T9376 区间GCD
  6. iOS之性能优化·提高App的编译速度
  7. LeetCode 563. 二叉树的坡度(DFS)
  8. 补码到底是个什么东西
  9. Spring Boot笔记-WebSocket的使用
  10. python使用字典描述学生信息_一起学Python:字典介绍
  11. Intellij IDLE 中javafx使用与配置
  12. 【“玩物立志”-scratch少儿编程】迷宫游戏-图片素材
  13. JVM - 类加载器
  14. matlab中solver函数_Matlab中solve函数用法详解
  15. python图像锐化_(python 图像锐化教程)C 实现bmp图像锐化后,锐化的效果很差,求大神帮忙啊...
  16. Canvas 画贝塞尔曲线(二阶曲线和三阶曲线)
  17. 7.3.1 B树及其基本操作
  18. 特殊符号,emoji表情,四字节去除问题
  19. 禁用和启用google翻译
  20. 机器自动翻译古文拼音 - 十大宋词 - 满江红 怒发冲冠 南宋·岳飞

热门文章

  1. SQL语言入门(一)
  2. iOS端im实时音视频功能快速开发实操指导!
  3. NOI2003 文本编辑器
  4. 012的悲剧终于预言了
  5. 体检结果(2018年10月,胃肠镜)
  6. OPENSTACK在RHEL7安装;admin创建虚拟机模板供demo使用
  7. 关于微信支付接口,curl错误代码58
  8. C++primer 6.7节练习
  9. 与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误。
  10. 3-25构造方法String类中的api