javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js数据类型

深入理解JavaScript 数据类型:从冯·诺依曼架构到八种数据类型

作者：meilindehuzi_a

本文从底层内存分配讲起,深度剖析原始类型与引用类型在调用栈和堆中的运作机制,你将理解null与undefined的本质区别、Number的精度陷阱,以及BigInt和Symbol的现代用法,感兴趣的朋友跟随小编一起看看吧

在前端开发领域，JavaScript 的数据类型是每位开发者构建知识大厦的基石。然而，仅仅停留在“有哪些类型”的表层记忆是远远不够的。本文将从现代计算机的底层架构——冯·诺依曼体系出发，结合 V8 引擎的内存管理机制，对 ECMAScript 规范中的八种数据类型进行全方位的深度剖析，并对核心代码行为进行逐行拆解。

一、 计算机底层视高的内存分配

要透彻理解 JavaScript 的数据类型划分，首先需要将视线移至计算机的物理底层。

根据冯·诺依曼体系结构，现代计算设备由五大核心部分组成：运算器、存储器、输入设备、输出设备。其中，存储器负责保存程序代码与数据。

[输入设备] ──> [ 存储器 (外存 -> 内存) ] ──> [输出设备]
│  ▲
▼  │
[  C P U  ]
(运算器 / 控制器)

当我们编写好 JavaScript 代码时，它作为文本文件存储在外存（硬盘）中。当程序启动时，代码会被调入内存中。经过 V8 引擎的编译后，进入执行阶段。

在引擎内部，JavaScript 的执行依赖于执行上下文（Execution Context）。每个上下文都包含变量环境（Variable Environment）与词法环境（Lexical Environment）。这些环境在底层通过两种不同的内存结构进行管理：调用栈（Stack）与堆内存（Heap）。

1. 调用栈（栈内存）

2. 堆内存

二、 JavaScript 的八种数据类型

根据 ECMA-262 规范，目前 JavaScript 共包含 8 种数据类型，分为两大类：

1. 传统原始数据类型（ES6 之前）

在 ECMAScript 6 规范发布之前，JavaScript 拥有 5 种原始数据类型：

2. ES6 新增原始数据类型

随着语言的发展，ES6 引入了 2 种新的原始类型，使原始类型总数达到 7 种：

3. 复杂数据类型

三、 核心代码片深度剖析与知识点扩展

为了进一步厘清这八种数据类型在执行过程中的具体表现，我们将对四个核心代码片段进行逐行、逐模块的细致讲解。

1. 代码片 1：null的多重应用与引用式赋值

本段代码深入探讨了原始类型与引用类型在赋值行为上的底层差异，并演示了 null 的实际应用场景。

// 表示空或者没有
// null
// primitive 原始 内存空间固定
// 拷贝式赋值
let a = null;
let b = a; // 拷贝，复印机
b = 2;
let obj1 = { name: "moss" };
let obj2 = obj1; // 引用式
obj2.company = "快手";
console.log(obj1, obj2);
console.log(a, b);
console.log(a);
let obj = {
  name: "Alice",
  address: null
};
console.log(obj.address); // null
console.log(obj.age); // undefined
let largeObject = {
  data: new Array(100000000).fill("hgh")
};
// 手动回收内存？
largeObject = null;

讲解：

2. 代码片 2：undefined的四种典型场景

本段代码演示了在 JavaScript 中系统触发 undefined 状态的四种核心边界条件。

let a; // 未初始化 undefined
console.log(a);
let obj = {};
console.log(obj.property);
function noReturn() {
}
noReturn(); // 没有返回值的函数 undefined
let arr = [1, 2, 3];
console.log(arr[5]);

讲解：

3. 代码片 3：Number的二进制精度陷阱与BigInt的引入

本段代码深刻揭示了经典 Number 类型的局限性，并引出了 ES6 用于解决超大整数运算的 BigInt 类型。

// js 不擅长计算
// js 在存小数的时候不够精确
// js 统一使用二进制来存数值 1/3  0.3333333333333333
let a = 0.1;
let b = 0.2;
console.log(a + b);
// let num1 = 999999999999999999999999999999999999999999999999999999999999
// let num2 = 1234567890987654334673245776547890087323345689900346678892424
// console.log(num1 + num2);
let num1 = 999999999999999999999999999999999999999999999999999999999999n;
let num2 = 123456789098765433467324577654789008732334568990034667889243n;
console.log(num1 + num2, typeof num1);
console.log(num1 + 1n); // 1后面必须加 n

讲解：

4. 代码片 4：Symbol作为独一无二标识符的特性

本段代码展示了 Symbol 类型的非对象构造行为、绝对唯一性以及在对象属性防冲突中的核心应用。

// symbol 唯一的标识符，用函数创建的，简单数据类型
// 轻松表达独一无二
console.log(Symbol('moss') === Symbol('moss'));
console.log(typeof Symbol('moss'));
console.log(Symbol()); // 绝对唯一，可以传一个标签 label
let obj = {
  [Symbol()]: 'value',
  prop: "2"
}

讲解：

四、 总结

JavaScript 的八种数据类型是语言运行的核心枢纽。从内存管理的角度看：

深入理解二进制浮点数引发的精度偏差、null 与 undefined 的语义分工、以及 ES6 赋予 BigInt 和 Symbol 的现代特性，能够帮助我们在面对复杂的内存管理与架构设计时，写出更严谨、更高效的书面化高质量代码。

到此这篇关于深入理解JavaScript 数据类型:从冯·诺依曼架构到八种数据类型的文章就介绍到这了,更多相关js数据类型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文