前言
JavaScript 数据类型是前端入门的核心基础，不少新手只会死记类型名称，不懂底层存储逻辑，学习效率极低。今天结合 V8 引擎运行原理，条理清晰梳理所有数据类型，简单易懂干货十足，帮大家快速吃透知识点，筑牢前端根基！
一、JS数据类型
1.1基本类型
1.1.1 字符类型：string
字符串类型（string）：用于表示文本，比如"hello world"。日常开发中常用字符串拼接、截取等操作用代码给你讲清楚，实操示例如下：
let str = 'hello world' // string类型 字符串类型
let str2 =str +'js' //增加字符串 = 字符串拼接
let str3 = `${str} js`
console.log(str2); //hello world js
console.log(str3); //hello world + js
console.log(str[0]); //h
console.log(str.at(0)); //h
console.log(str.slice(0,7)); // hello w 只包含前面的下标不包含后面的下标
输出结果为：
通过以上代码，我们可以更加清晰的知道string类型的常用方法，拼接可通过加号（+）直接拼接，也可使用模板字符串（${}）实现更灵活的拼接，可读性更强；截取则常用slice方法，该方法接收两个参数，分别为起始下标和结束下标，遵循“含前不含后”的规则，可精准获取所需字符串片段
1.1.2 数字类型：number
数字类型（number）：表示数值，包括整数、小数，还有特殊值NaN。实操示例如下：
let num = 123 // number类型 数字类型
let num2 =num + 0.1
console.log(num2); // 123.1
console.log(num2.toString()); // 转变字符串类型
console.log(num2+'5'); //变成字符串类型 123.15
实操示例结果为：
1.1.3 布尔类型：boolean
布尔类型（boolean）：只有两个值，true和false，主要用于判断条件。需注意：JS中只有0、NaN、''、null、undefined、false为假值，其余均为真值，实操示例如下：
//Boolean类型
if (true) { // boolean类型 布尔类型；只有0和NaN为false，其他为true
console.log('猪猪侠');
}
实操示例结果为：
1.1.4 undefined类型：undefined
undefined类型（undefined）：表示“未定义”，变量声明后未赋值，默认就是undefined，实操示例如下：
let u=undefined+'';
console.log(u);//undefined
实操示例结果为：
1.1.5 空类型：null
表示“空值”，主动表示一个变量没有值，和undefined的区别是：null是“故意为空”，undefined是“被动未定义”，实操示例如下：
let n = null;
console.log(n);//null
实操示例结果为：
1.1.6 大整数类型：bigint
用于表示超出number范围的整数，在数字后面加n表示，比如9007199254740993n，解决了number最大安全整数的限制，实操示例如下：
let b=123123123n;//bigint类型 大整数类型
let c=90071992547409912n;//bigint类型 大整数类型
console.log(b+c);//90071992670533035n
实操示例结果为：
1.1.7 Symbol类型：Symbol
表示唯一的值，即使两个Symbol的值看起来一样，它们也不相等，主要用于对象的唯一属性名，避免属性冲突，实操示例如下：
let s=Symbol('hello');//Symbol('hello')代表hello是独一无二的值，无特殊含义
let p=Symbol('hello');
console.log(s==p);//故他们两个不相等
实操示例结果为：
补充知识点：“==”和 “===”的区别，实操示例如下：
let b=1; let c='1'; console.log(b==c);//true,v8引擎会自动转换类型,并且均转换为数字类型 console.log(b===c);//false,不会自动转换类型,直接比较类型和值
1.2引用类型
1.2.1 数组类型：array
数组类型（array）：用于存储一组有序数据，用方括号包裹，里面可以存放任意类型的数据，可通过索引访问和修改元素。日常开发中常用数组增删改查操作，实操示例如下：
var arr=['a','b',1,2];//数组可以存储任意类型的值
arr.push(3);//数组尾部存值
arr.pop();//移除数组最后一个元素
arr.unshift(0);//数组头部存值
arr.shift();//移除数组第一个元素
arr.splice(1,1);//删除数组中指定的元素,第一个元数是删除的元素的下标,第二个元数是删除的元素的个数
arr.splice(2,0,0);//在数组中指定的下标插入元素,第一个元数是插入的元素的下标,第二个元数是删除的元素的个数,第三个元数是插入的元素
arr[2]=10;//修改数组元数；
console.log(arr);
实操示例结果为：
1.2.2 对象类型：object
对象类型（object）：用于存储键值对形式的数据，用大括号包裹，是JS中最常用的复杂类型，支持动态添加、修改、删除属性，实操示例如下：
var obj={
name:'猪猪侠',
age:18,
like:{
one:'eat',
two:{
sport:['篮球','跑步']
}
}
}
obj.girlFriend='小猪';
obj.age=20;
delete obj.girlFriend;
console.log(obj);
实操示例结果为：
1.2.3 函数类型：function
函数类型（function）：可执行的代码块，用于封装逻辑、实现复用，也是一种特殊的对象。实操示例如下：
function fn() {
console.log("执行函数");
}
console.log(fn);
实操示例结果为：
1.2.4 Date类型: date
Date类型（date）：用于处理日期和时间，可创建日期对象、获取当前时间、格式化时间等，比如Date() 可获取当前系统时间。以Chrome浏览器为例：
二、数据类型与V8执行的联动
- 步骤1：创建调用栈
V8执行代码前，会先创建一个“调用栈”，调用栈的核心作用是存放代码的执行上下文，以及基础类型的数据，它的特点是“先进后出”，就像叠盘子，先放的后拿，后放的先拿。
- 步骤2：存入执行上下文
调用栈创建后，会先存入“全局执行上下文”，此时全局执行上下文的变量环境会存储所有var声明的全局变量和函数声明，词法环境会存储let、const声明的全局变量；如果有函数调用，会再创建“函数执行上下文”并压入调用栈，函数执行上下文的变量环境和词法环境，会对应存储该函数内部用var、let、const声明的变量及内部函数声明，执行完函数后，该函数的执行上下文会从调用栈中弹出，释放内存。
- 步骤3：代码执行与数据存储
这一步是核心，也是为什么基础类型和引用类型存储方式不同的原因：执行代码时，V8会将基础类型的值直接存入调用栈中，因为基础类型体积小、值不可变，存储在栈中效率高；而引用类型的值体积可能很大（比如一个复杂对象、一个长数组），如果都存在栈中，会导致栈过大，影响V8引擎的性能，所以V8会将引用类型的值存入“堆空间”，再生成一个唯一的引用地址，将这个地址存入调用栈中。
简单总结这个设计的好处：栈负责存储轻量的基础类型和引用地址，堆负责存储重量级的引用类型数据，分工明确，既保证了执行效率，又避免了栈过大导致的性能问题。举个例子，我们可以把调用栈比作一个口袋（空间有限、取用便捷），把堆比作一个大型储物柜（空间充足、专门放重物）。日常存放物品时，小巧的物件（对应基础类型、引用地址）可以直接放进口袋，取用起来随手就能拿到，效率很高；而体积大、占地方的大件物品（对应复杂对象、长数组等引用类型数据），如果也放进口袋，会把口袋撑得很大，不仅占用过多空间，后续取用里面的小物件时，还得先把大件拿出来，十分不便。V8的栈堆分工就解决了这个问题，小件放口袋（栈）、大件放储物柜（堆），口袋只留一个“储物柜钥匙”（引用地址），既节省了口袋空间，又能通过钥匙快速找到大件物品，兼顾了便捷性和效率。 实操示例如下：
var name ='男模'
var age=18;
v8执行的过程：
扩展知识点“ 变量环境和词法环境 ”：词法环境用于存储函数声明和用let、const声明的变量=，而变量环境用于存储用var声明的变量。二者本质上都是环境记录，只是分工不同，共同构成了执行上下文的“变量存储容器”，确保V8能快速找到代码中使用的变量和函数。
三、总结与拓展
整篇文章核心就两个重点：
- JS数据类型：7种基础类型+ 4种引用类型；
- V8执行过程：创建调用栈 → 存入执行上下文 → 执行代码（栈存基础类型+引用地址，堆存引用类型值），核心是栈与堆的分工，提升引擎性能。
看到这里，相信你已经分清JS的数据类型，也看懂了V8的执行逻辑～ 其实日常开发中，很多bug，本质都是没吃透这两个知识点。你平时在使用数据类型时，有没有踩过相关的坑？欢迎在评论区留言交流，一起查漏补缺、巩固基础！
