[JS]JavaScript一张图引发的深思

很早以前在掘金沸点看到一张图，很有意思就发了朋友圈。结果很多朋友问我为什么。
（好吧，其实我只是不知道这周写什么内容了）。
就围绕这张图，我们扒扒JavaScript的基本数据类型和引用数据类型、栈内存和堆内存、==和===的区别。

为什么！

因为var a和var b是引用类型，它们在栈内存中存放地址指针，在堆内存中存放值;而var c是JavaScript的基本数据类型，String类型，所以它直接在栈中存放值。

var a=[1,2,3];
console.log(a.toString());     //"1,2,3"
a.toString()==c;   //true

当a==c;的时候，因为==比较的时候，会将两个比较的值转换为同一类型进行比较是否相同，所以在比较的时候其实var a会被调用toString（）的方法，其结果为："1,2,3"；然后将var a再与var c进行比较。结果返回当然是true。

当b==c的时候，同上。

当a==b的时候，因为var a和var b都是引用类型，所以当它们==比较的时候，比较的是它们栈内存中的地址是否相同。而因为它们各自的地址不同，结果当然是返回false。

知识点补充包

我们粗略的知道了为什么会呈现出图片中的结果。但有的童鞋可能没有相关的知识储备，看的比较吃力。所以我们来补充下这张图所涵盖的知识点。

5种基本数据类型和引用数据类型

栈内存和堆内存

JavaScript中的5种基本数据类型包括：

1、String

2、Number

3、Boolean

4、Undefined

5、Null

基本数据类型，因为它们占用的存储空间有固定的大小，所以直接存储在栈内存中。基本类型在当前执行环境结束时销毁。

而除了以上的基本数据类型以外，都是引用数据类型，例如：数组Array，Object类型，Function类型。而引用类型不会随执行环境结束而销毁，只有当所有引用它的变量不存在时这个对象才被垃圾回收机制回收。

var a;
var b;
function fun(){
    var c=[1,2,3];
    var d="hello";  //基本数据类型
    a=c;         //将c的地址，赋值给a
    b=d;        //将d的值赋值给b
}
fun();
a;             //Array(3) [ 1, 2, 3 ],此时因为变量a还引用着c的值，所以在堆内存中c的值还未被回收
b;             //"hello",此时b是直接将d的值复制过来，因为b是String类型，是基本数据类型，b直接将值"hello"存储在栈内存中，而d的值在方法执行完以后，已经被销毁。

以上，我们也就讲清楚了JavaScript的基本数据类型和引用数据类型的区别，还有它们与栈内存和堆内存的关系。

复盘：

1、基本数据类型直接将值存在栈内存中。

2、基本类型在当前执行环境结束时销毁。

3、引用数据类型在栈内存中存放地址，将值存在堆内存中。

4、引用类型不会随执行环境结束而销毁，只有当所有引用它的变量不存在时这个对象才被垃圾回收机制回收。

==和===的区别

“==”：表示等于(值)，如果两个值的类型不同，会通过强制转换类型，转换成同类型后比较它们转换后的值是否相同。相同返回true，不相同返回false。

“===”：表示等于（值和类型）：

如果两个比较的类型不同，直接返回false；

如果两个比较的值类型相同，但它们值不相同，返回false；

如果两个比较的值类型相同，而且它们的值也相同，返回true；

我是大麦，如果喜欢的文章，请给我一个小心心。