前端进阶系列（第1期）：理解JavaScript数据类型

写在前面

前端进阶系列本着“好好干前端”的心态，一步一个脚印认真练好前端的基本功，为在前端的发展道路上作好铺垫。

本周正式开始前端进阶的第1期，本周的主题是理解JavaScript数据类型。

数据类型

最新的 ECMAScript 标准定义了7种数据类型，主要分为两大类基本类型和引用类型。

基本类型

基本类型有时也被称为值类型或原始类型。其中包括6种数据类型，分别是：字符串类型（String）、数字类型（Number）、布尔类型（Boolean）、对空类型（Null）、未定义类型（Undefined）、符号类型（Symbol）。

字符串类型

JavaScript的字符串类型用于表示文本数据。它是一组16位的无符号整数值的“元素”。在字符串中的每一个元素占据了字符串的位置。第一个元素的索引为0，下一个是索引1，依此类推。字符串的长度是它的元素的数量。

数字类型

根据 ECMAScript 标准，JavaScript 中只有一种数字类型：基于 IEEE 754 标准的双精度 64 位二进制格式的值（-(263 -1) 到 263 -1）。它并无为整数给出一种特定的类型。除了可以表示浮点数外，还有一些带符号的值：+Infinity，-Infinity 和 NaN (非数值，Not-a-Number)。

123; // 正整数
-123; // 负整数
520.1314; // 浮点数
0; // 零
Infinity; // 正无穷
-Infinity; // 负无穷
typeof Infinity; // number
复制代码

布尔类型

布尔表示一个逻辑实体，能够有两个值：true 和 false。

2 > 1; // true
[] == []; // false 
[] == ![]; // true 这是为何？
null == undefined // true
'10' > '3'; // flase 这个啥？
typeof true; // boolean
复制代码

Null 类型

Null 类型只有一个值： null。

null === null; // true
typeof null; // object 为何不是 null呢？
复制代码

Undefined 类型

一个没有被赋值的变量会有个默认值 undefined。

let a; // 我申明我是一个变量 a
typeof a; // undefined 申明未赋值
undefined == undefined; // true
undefined == 0; // false
undefined == null; // true
undefined == ''; // false
复制代码

符号类型

符号(Symbols)是ECMAScript 第6版新定义的。符号类型是惟一的而且是不可修改的, 而且也能够用来做为Object的key的值。

let obj = {};
let symbol1 = Symbol();
let symbol2 = Symbol();

typeof symbol1; // symbol
typeof symbol2; // symbol

symbol1 == symbol2; // false

obj.symbol1 = 'hello';
obj[symbol1] = 'world';

console.log(obj.symbol1 + ' ' + obj[symbol1]); // hello world

复制代码

引用类型

引用类型主是指Object类型。

Object 对象

在计算机科学中, 对象是指内存中的能够被 标识符引用的一块区域。

let obj1 = {}; // 对象字面量
let obj2 = new Object(); // 实例化一个对象

typeof obj1; // object
typeof obj2; // object

const person = { author: {name: "布一", "wechat": "Hankewins"}, 1: "No.1" };

console.log(person.author.name); // 布一
console.log(person.author.wechat); // Hankewins
console.log(person[1]); // No.1
复制代码

类型对比

咱们都知道JavaScript中有两大数据类型：基本类型和引用类型，其中基本类型主要是把值存储在栈内存中，而引用类型倒是把地址存储在栈内存中，把值存储在堆内存中，而后将栈内存中存储的地址指向堆内存中存储的值。

基本类型	数据结构	存储位置
基本类型	数字、字符串、布尔、Null、Undefined、Symbol	栈
引用类型	数组、对象、函数	栈、堆

什么是堆栈？

堆栈是两种数据结构，是一种数据项按序排列的数据结构，只能在一端进行插入和删除操做。堆为队列优先，先进先出（FIFO）。栈为先进后出（FILO）。

堆和栈有啥区别？

1. 空间分配

• 堆（操做系统）：通常由程序员分配释放，若程序员不释放，程序结束时可能由OS回收，分配方式相似于链表。PS：java中都是系统GC，程序员没法进行GC。
• 栈（操做系统）：由操做系统自动分配释放，存放函数的参数值，局部变量值等。操做方式与数据结构中的栈相相似。

2. 缓存方式

• 堆：使用二级缓存，生命周期与虚拟机的GC算法有关（并非引用为空就当即被GC），调用速度相对较低。
• 栈：使用一级缓存，被调用时一般处于存储空间中，调用后被当即释放。

3. 数据结构

• 堆（数据结构）：相似于树结构，能够类比于堆排序
• 栈（数据结构）：先进后出（FILO）

总结

本篇文章内容主要告诉咱们如下几个基本知识点：

1. JavaScript中有7种数据类型，分为两大类：基本类型和引用类型。
2. 堆和栈的概念和区别，以及JavaScript中两大数据类型的存储方式。
3. 抛出了一些数据类型转换时遇到的“奇葩”问题。

针对第3点咱们将在下一章节中重点讲解。

参考资料

• JavaScript 数据类型和数据结构
• 操做系统中堆（heap）与栈（stack）的区别

交流

更多精彩内容请关注个人github博客,若是你以为还不错请给个star，很是感谢。