![d24f2a12ab272c1ba4b732d30169d571.png](https://i-blog.csdnimg.cn/blog_migrate/0743da4af714aead85e74fcb19948ee2.jpeg)
导读
变量和类型是学习JavaScript
最先接触到的东西,但是往往看起来最简单的东西往往还隐藏着很多你不了解、或者容易犯错的知识,比如下面几个问题:
JavaScript
中的变量在内存中的具体存储形式是什么?0.1+0.2
为什么不等于0.3
?发生小数计算错误的具体原因是什么?Symbol
的特点,以及实际应用场景是什么?[] == ![]
、[undefined] == false
为什么等于true
?代码中何时会发生隐式类型转换?转换的规则是什么?- 如何精确的判断变量的类型?
如果你还不能很好的解答上面的问题,那说明你还没有完全掌握这部分的知识,那么请好好阅读下面的文章吧。
本文从底层原理到实际应用详细介绍了JavaScript
中的变量和类型相关知识。
一、JavaScript数据类型
ECMAScript标准规定了7
种数据类型,其把这7
种数据类型又分为两种:原始类型和对象类型。
原始类型
Null
:只包含一个值:null
Undefined
:只包含一个值:undefined
Boolean
:包含两个值:true
和false
Number
:整数或浮点数,还有一些特殊值(-Infinity
、+Infinity
、NaN
)String
:一串表示文本值的字符序列Symbol
:一种实例是唯一且不可改变的数据类型
(在es10
中加入了第七种原始类型BigInt
,现已被最新Chrome
支持)
对象类型
Object
:自己分一类丝毫不过分,除了常用的Object
,Array
、Function
等都属于特殊的对象
二、为什么区分原始类型和对象类型
2.1 不可变性
上面所提到的原始类型,在ECMAScript
标准中,它们被定义为primitive values
,即原始值,代表值本身是不可被改变的。
以字符串为例,我们在调用操作字符串的方法时,没有任何方法是可以直接改变字符串的:
var str = 'ConardLi';
str.slice(1);
str.substr(1);
str.trim(1);
str.toLowerCase(1);
str[0] = 1;
console.log(str); // ConardLi
复制代码
在上面的代码中我们对str
调用了几个方法,无一例外,这些方法都在原字符串的基础上产生了一个新字符串,而非直接去改变str
,这就印证了字符串的不可变性。
那么,当我们继续调用下面的代码:
str += '6'
console.log(str); // ConardLi6
复制代码
你会发现,str
的值被改变了,这不就打脸了字符串的不可变性么?其实不然,我们从内存上来理解:
在JavaScript
中,每一个变量在内存中都需要一个空间来存储。
内存空间又被分为两种,栈内存与堆内存。
栈内存:
- 存储的值大小固定
- 空间较小
- 可以直接操作其保存的变量,运行效率高
- 由系统自动分配存储空间
JavaScript
中的原始类型的值被直接存储在栈中,在变量定义时,栈就为其分配好了内存空间。
![9943a2eeef112273592f86e53bd659db.png](https://i-blog.csdnimg.cn/blog_migrate/0a216c980de2b17c145c71a4472b8dde.jpeg)
由于栈中的内存空间的大小是固定的,那么注定了存储在栈中的变量就是不可变的。
在上面的代码中,我们执行了str += '6'
的操作,实际上是在栈中又开辟了一块内存空间用于存储'ConardLi6'
,然后将变量str
指向这块空间,所以这并不违背不可变性的
特点。
![3d2e719e191aa37ec967df6addfac21b.png](https://i-blog.csdnimg.cn/blog_migrate/e3209f39e490e6593b0840d755ffbc39.jpeg)
2.2 引用类型
堆内存:
- 存储的值大小不定,可动态调整
- 空间较大,运行效率低
- 无法直接操作其内部存储,使用引用地址读取
- 通过代码进行分配空间
相对于上面具有不可变性的原始类型,我习惯把对象称为引用类型,引用类型的值实际存储在堆内存中,它在栈中只存储了一个固定长度的地址,这个地址指向堆内存中的值。
var obj1 = {name:"ConardLi"}
var obj2 = {age:18}
var obj3 = function(){...}
var obj4 = [1,2,3,4,5,6,7,8,9]
复制代码
![677967166025b0623284447c25fdd1f8.png](https://i-blog.csdnimg.cn/blog_migrate/2574c7e0ce0a68839d8567b1f28aae85.jpeg)
由于内存是有限的,这些变量不可能一直在内存中占用资源,这里推荐下这篇文章JavaScript中的垃圾回收和内存泄漏,这里告诉你
JavaScript
是如何进行垃圾回收以及可能会发生内存泄漏的一些场景。
当然,引用类型就不再具有不可变性
了,我们可以轻易的改变它们:
obj1.name = "ConardLi6";
obj2.age = 19;
obj4.length = 0;
console.log(obj1); //{name:"ConardLi6"}
console.log(obj2); // {age:19}
console.log(obj4); // []
复制代码
以数组为例,它的很多方法都可以改变它自身。
pop()
删除数组最后一个元素,如果数组为空,则不改变数组,返回undefined,改变原数组,返回被删除的元素push()
向数组末尾添加一个或多个元素,改变原数组,返回新数组的长度shift()
把数组的第一个元素删除,若空数组,不进行任何操作,返回undefined,改变原数组,返回第一个元素的值unshift()
向数组的开头添加一个或多个元素,改变原数组,返回新数组的长度reverse()
颠倒数组中元素的顺序,改变原数组,返回该数组sort()
对数组元素进行排序,改变原数组,返回该数组splice()
从数组中添加/删除项目,改变原数组,返回被删除的元素
下面我们通过几个操作来对比一下原始类型和引用类型的区别:
2.3 复制
当我们把一个变量的值复制到另一个变量上时,原始类型和引用类型的表现是不一样的,先来看看原始类型:
var name = 'ConardLi';
var name2 = name;
name2 = 'code秘密花园';
console.log(name); // ConardLi;
复制代码
![dfb5a415cd16dd6c1dc4c9d06c3d5e13.png](https://i-blog.csdnimg.cn/blog_migrate/893d856438cb688a868269ed47d3d62e.jpeg)
内存中有一个变量name
,值为ConardLi
。我们从变量name
复制出一个变量name2
,此时在内存中创建了一个块新的空间用于存储ConardLi
,虽然两者值是相同的,但是两者指向的内存空间完全不同,这两个变量参与任何操作都互不影响。
复制一个引用类型:
var obj = {name:'ConardLi'};
var obj2 = obj;
obj2.name = 'code秘密花园';
console.log(obj.name); // code秘密花园
复制代码
![6d462480bac09210a758741e4a3565bc.png](https://i-blog.csdnimg.cn/blog_migrate/cab74d37c27593fd42732a2b0bf71abe.jpeg)
当我们复制引用类型的变量时,实际上复制的是栈中存储的地址,所以复制出来的obj2
实际上和obj
指向的堆中同一个对象。因此,我们改变其中任何一个变量的值,另一个变量都会受到影响,这就是为什么会有深拷贝和浅拷贝的原因。
2.4 比较
当我们在对两个变量进行比较时,不同类型的变量的表现是不同的:
![2cf08e5e1cce90aa63bfdfd8532e939e.png](https://i-blog.csdnimg.cn/blog_migrate/724423a8716804a556f3a59359ff516f.jpeg)
var name = 'ConardLi';
var name2 = 'ConardLi';
console.log(name === name2); // true
var obj = {name:'ConardLi'};
var obj2 = {name:'ConardLi'