JS基本数据类型与引用数据类型

对前端感兴趣的可以关注一下我的博客，会持续更新前端相关的知识和学习笔记，一起学习。

JavaScript中的数据类型分为基本数据类型和引用数据类型，那么哪些是基本类型，哪些是引用类型，以及它们的区别是什么呢？

基本数据类型

基本数据类型共有6种，包括String、Number、Boolean、Null、undefined以及ES6新增的Symbol。

引用数据类型

引用数据类型就是除基本数据类型外的数据，即Object对象类型，Array、Function、RegExp、Date都是对象类型。

基本数据类型与引用数据类型的区别

认识了基本数据类型与引用数据类型，那么它们之间有什么区别呢？

基本数据类型存储在栈（Stack）内存中，引用数据类型存储在堆（Heap）内存中。

基本数据类型存放在栈中，是一段简单的数据段，数据大小确定，内存空间大小可以分配，是直接按值存放的，可以按值访问。

引用数据类型存放在堆中，变量在栈中保存的是指向堆内存的地址值，这个地址值指向对应的对象类型，访问堆内存中的对象是通过地址值访问的。

下图表示基本类型和引用类型在内存中的存放位置，以及嵌套的数据类型的地址指向。

其中变量 a 和变量 b 保存的都是基本数据类型，foo 与 Foo 保存的都是引用数据类型，Foo 对象中还包含嵌套的数据类型。访问对象类型时，需要通过 obj.xxx 访问，即访问 Foo 内的 n 或 x 时，需要通过 Foo.n 或 Foo.n.x 访问，并且对象嵌套对象时，变量中不存在对 n 和 x 的直接引用，必须通过Foo.n 和 Foo.n.x 才能访问到嵌套的对象。

理解了上面的内容，那么对下面数据类型的赋值也会有一个清晰的认识。

// 基本数据类型的赋值var a = 10;var b = a; b = 20; // a和b的值分别为多少？console.log(a,b); // 10 20 // 引用数据类型的赋值var foo = { c: 30 };var Foo = foo;Foo.c = 40; // foo内的c与Foo内的c的值分别为多少?console.log(foo.c, Foo.c) // 40 40

在上面，我们知道了基本类型和引用类型在内存中的存放位置，那么我们这两个问题也会迎刃而解。

首先a是基本数据类型，存放在栈内存中，当把a的值赋给b时，即 b = 10,这时a和b在栈内存中保存的值相同，但这两个变量相互独立，改变b的值并不会影响a原本的值，因此a=10，b=20。

而foo属于引用数据类型，在栈内存中存放的是指向堆内存对象的地址值，赋值时把foo的地址值给了Foo，这时这两个变量指向同一个对象，改变Foo中c的值，foo中c的值也会改变。