Day14 - JavaScript 引用和值拷贝
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:30天完成30个JS原生开发项目挑战视频教程。JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。
按值操作
基本类型由值操作。以下类型在JavaScript中被视为基本类型:
String
Number
Boolean
Null
Undefined
基本数据类型赋值你可以理解成值拷贝,从深拷贝和浅拷贝的角度去思考的话,你可以理解成深拷贝
,当你修改一个变量的值时,不会影响其他变量的值。
实例
1 | let age = 100; |
由此可见,基本类型,按值操作,新建的变量会将值复制给新的变量,各自的改变不会互相影响。
通过引用操作
对象Object
类型是按引用操作的,如果它不是基本类型中的一个,那么它就是对象,这里如果我们细究的话,JavaScript中每一个东西都可以当做对象,甚至是基本的类型(不包括null
和undefined
),但我们尽量不要钻这个牛角尖。
一些JavaScript中的对象:
Object
Function
Array
Set
Map
浅拷贝
1 | const players = ['Wes', 'Sarah', 'Ryan', 'Poppy']; |
由上效果显示,浅拷贝拷贝的是指针,当你去操作一个指针时,其实所有指针指向的同一个对象的值都会发生变化。
深拷贝
1 | const players = ['Wes', 'Sarah', 'Ryan', 'Poppy']; |
由上面的效果显示,但我们修改team4时,players并没有发生任何变化,上面的contact
,...
,Array.from
都属于深拷贝,会将原来的内容重新拷贝一份,所以当你操作一个指针时不会影响原对象。
深拷贝 与 浅拷贝对比
1 | //创建object对象 |
JSON.stringify
将对象转换成字符串,打印时效果清晰。captain = person
属于浅拷贝Object.assign
的三个参数中,第一个参数属于初始值,它最终的值是第二个和第三个参数的并集,如果第二个、第三个参数有相同的属性,那个第三个参数会覆盖第二个参数里面的值。
采用JSON字符串
1 | // 对象的嵌套 |
首先调用JSON.stringify()
方法将对象解析为字符串,再调用JSON.parse()
方法,将字符串解析为对象,这是一个小技巧,在处理对象的复制时很有用。