JS 数据结构与数组核心学习笔记

在 JavaScript 编程中，数据结构是构建高效代码的基础，而数组作为最常用的线性数据结构，其特性与使用技巧直接影响程序性能。本文将围绕 JS 中的核心数据结构分类、数组的底层原理、创建方式、遍历方法及作用域相关实践展开，帮助开发者夯实基础、优化代码效率。

一、JS 核心数据结构分类

数据结构本质是数据的组织与存储方式，JS 中的数据结构可分为线性结构和非线性结构两大类，不同结构适用于不同业务场景。

1.1 线性数据结构

线性结构的元素按顺序排列，每个元素只有一个前驱和一个后继，逻辑上呈 “一条直线” 形态。

• 数组：最常用的线性结构，占用连续内存空间，可通过索引直接访问元素，操作高效。
• 栈：遵循 “先进后出（FILO）” 规则，仅能在栈顶进行元素的添加（入栈）和删除（出栈）操作。
• 队列：遵循 “先进先出（FIFO）” 规则，元素从队尾添加、从队首删除，适用于顺序处理场景。
• 链表：元素分散存储在非连续内存中，通过指针（引用）连接前后元素，解决了数组连续内存分配的限制。

1.2 非线性数据结构

非线性结构的元素之间存在多对多的关联关系，逻辑上呈 “网状” 或 “层次” 形态。

• 树（二叉树）：核心非线性结构，元素按层次排列，每个节点最多有两个子节点，适用于查找、排序等场景（如二叉搜索树、红黑树）。
• 其他扩展结构：图（元素间任意关联）、哈希表（基于键值对存储，查询效率极高）等，后续可进一步深入学习。

---

二、数组：JS 中 “开箱即用” 的核心数据结构

数组是 JS 中最基础且高频使用的数据结构，其 “连续内存 + 索引访问” 的特性使其兼具易用性和高效性，但动态扩容等底层细节需要重点关注。

2.1 数组的底层原理

• JS 中没有真正意义上的 “数组类型”，数组本质是特殊的对象，下标作为对象的键（字符串类型），元素作为值存储。
• 数组占用连续的内存空间，每个元素按索引顺序排列，这也是通过索引访问元素能达到 O (1) 时间复杂度的核心原因。
• 与链表相比，数组在少量数据场景下性能更优：链表的每个节点需要额外存储指针，占用更多内存；而数组的连续存储减少了内存开销。

2.2 数组的创建方式

数组的创建需根据是否已知元素内容和长度选择合适方法，不同方式的底层实现和适用场景存在差异。

（1）已知元素时的创建

直接通过字面量初始化，明确元素内容，简洁高效。

// 已知元素的数组创建，直接分配对应长度的连续内存并初始化值
const arr = [1, 2, 3, 4, 5, 6];

（2）未知元素时的初始化

通过 new Array() 结合 fill() 方法创建，需指定数组长度并填充默认值，避免空元素问题。

// 创建长度为6、每个元素均为0的数组
const arr = new Array(6).fill(0);
console.log(arr); // [0, 0, 0, 0, 0, 0]

（3）创建方式的注意事项

• new Array(6) 仅分配长度为 6 的连续内存，但未初始化元素，数组表现为 [empty × 6]，empty 并非 undefined，可能导致遍历异常。
• 数组长度的权衡：初始化长度过大会造成内存浪费，过小则可能触发动态扩容。
• JS 数组的动态扩容机制：当数组元素超出初始长度时，JS 会自动申请更大的内存空间（通常是原长度的 2 倍），将原数组数据拷贝到新空间，这个 “搬家” 过程会产生性能开销，因此提前预估数组长度能优化性能。

---

三、数组遍历：性能与场景的选择

数组遍历是高频操作，不同遍历方法的性能、功能差异显著，需根据场景选择最优方案。核心遍历方法包括计数循环、forEach、map、for...of、for...in，其性能排序大致为：计数循环 > for...of > forEach > map > for...in。

3.1 计数循环（for 循环）：性能最优

计数循环是最基础的遍历方式，语法死板但性能最佳，与 CPU 执行逻辑高度契合。

const arr = [1, 2, 3, 4, 5, 6];
const len = arr.length; // 缓存长度，减少对象属性访问开销

// 循环变量i从0开始，遍历至数组长度-1
for (let i = 0; i < len; i++) {
  console.log("索引：", i, "元素：", arr[i]); // 直接通过索引访问，O(1)时间复杂度
}

• 性能优势：避免函数回调、原型链遍历等额外开销，仅执行循环判断和索引访问。
• 关键优化：将 arr.length 赋值给变量 len，因为 arr.length 是数组对象的属性，每次访问都需查询对象属性，缓存后可减少性能损耗。
• 灵活特性：支持 break 终止循环、continue 跳过当前迭代，适配复杂遍历场景。

3.2 forEach：简洁但无法终止

forEach 是数组原型方法，接收回调函数遍历每个元素，语法简洁但存在功能限制。

const arr = [1, 2, 3, 4, 5, 6];

// 回调函数接收元素、索引、原数组三个参数
arr.forEach((item, index) => {
  // 无法使用break或continue终止循环，会报错
  // if (item === 3) break; // 语法错误
  console.log("索引：", index, "元素：", item);
});

• 性能特点：回调函数的入栈和出栈会产生额外开销，性能低于计数循环。
• 核心限制：不支持提前终止循环，即使满足条件也需遍历所有元素。
• 适用场景：无需终止遍历、追求代码简洁的简单场景。

3.3 map：遍历并返回新数组

map 与 forEach 语法类似，但会根据回调函数的返回值生成新数组，适用于元素转换场景。

const arr = [1, 2, 3, 4, 5, 6];

// 遍历数组，每个元素加1，返回新数组（原数组不变）
const newArr = arr.map(item => item + 1);
console.log(newArr); // [2, 3, 4, 5, 6, 7]

• 核心特性：不会修改原数组，返回与原数组长度相同的新数组。
• 性能开销：除了回调函数开销，还需额外分配内存存储新数组，性能略低于 forEach。
• 适用场景：需要对数组元素进行统一处理（如格式化、转换）并获取新数组的场景。

3.4 for...of：可读性与灵活性兼顾

ES6 新增的遍历方式，专门用于迭代可迭代对象（数组、字符串、Set 等），语法简洁、可读性强。

const arr = [1, 2, 3, 4, 5, 6];

// 直接遍历元素，无需索引（如需索引可结合Array.prototype.entries()）
for (let item of arr) {
  console.log("元素：", item);
}

// 遍历索引和元素
for (let [index, item] of arr.entries()) {
  console.log("索引：", index, "元素：", item);
}

• 性能表现：优于 forEach 和 map，无回调函数开销，支持 break 和 continue。
• 可读性优势：语法直观，无需手动维护循环变量，代码更简洁。
• 适用场景：追求可读性且需要灵活控制遍历过程的场景。

3.5 for...in：不建议用于数组遍历

for...in 设计用于遍历对象的可枚举属性，包括原型链上的属性，遍历数组时存在明显缺陷。

const arr = [1, 2, 3, 4, 5, 6];

// 遍历数组的索引（键名），但会遍历原型链上的属性
for (let key in arr) {
  console.log("索引：", key, "元素：", arr[key]);
}

// 缺陷演示：给数组原型添加属性，会被for...in遍历到
Array.prototype.customProp = "原型属性";
for (let key in arr) {
  console.log(key); // 0,1,2,3,4,5,customProp（意外遍历原型属性）
}

• 核心缺陷：遍历顺序不固定、会遍历原型链属性、索引为字符串类型（可能导致计算错误）。
• 适用场景：仅用于遍历普通对象的属性，不建议用于数组遍历。

---

四、循环中的作用域：var 与 let 的关键差异

在循环中使用 var 和 let 声明变量，会因作用域差异导致截然不同的结果，这是 JS 中的高频易错点，尤其在异步场景中表现明显。

4.1 var 声明：全局作用域导致的问题

var 声明的变量没有块级作用域，仅存在函数作用域或全局作用域，循环中会共享同一个变量。

// 用var声明循环变量i，i属于全局作用域
for (var i = 0; i < 10; i++) {
  // setTimeout是异步任务，1秒后执行回调函数
  setTimeout(() => {
    console.log(i); // 输出10个10
  }, 1000);
}

• 原理分析：for 循环是同步执行的，瞬间完成迭代，i 最终被赋值为 10。1 秒后异步回调执行时，所有回调都引用同一个全局变量 i，因此全部输出 10。

4.2 let 声明：块级作用域的解决方案

let 声明的变量具有块级作用域，每个循环迭代都会创建一个独立的变量实例，回调函数引用当前迭代的变量。

// 用let声明循环变量i，每个循环都有独立的块级作用域
for (let i = 0; i < 10; i++) {
  setTimeout(() => {
    console.log(i); // 输出0,1,2,3,4,5,6,7,8,9
  }, 1000);
}

• 原理分析：let 使 i 绑定到每个循环的块级作用域中，每个迭代的 i 都是独立的变量。异步回调执行时，引用的是当前迭代的 i，因此输出正确的序列。

4.3 核心结论

• 循环中声明变量优先使用 let，避免 var 导致的作用域污染和异步执行异常。
• 块级作用域是 ES6 新增特性，通过 let 和 const 实现，能有效隔离变量作用范围，提升代码可靠性。

---

五、数组使用的核心优化技巧

结合前文知识点，总结数组使用的关键优化方向，帮助提升代码性能和可读性。

1. 提前预估数组长度：减少动态扩容带来的拷贝开销，如已知数据量时用 new Array(length).fill() 初始化。
2. 遍历方式选型：大量数据遍历优先使用计数循环；无需终止遍历用 forEach；元素转换用 map；追求可读性用 for...of。
3. 缓存数组长度：计数循环中缓存 arr.length，避免重复访问对象属性。
4. 避免 for...in 遍历数组：防止原型链属性干扰和遍历顺序问题。
5. 循环变量用 let：避免 var 导致的作用域问题，尤其在异步循环中。

---

总结

数据结构是 JS 编程的基础，数组作为 “开箱即用” 的线性结构，其连续内存、索引访问的特性使其成为高频选择。掌握数组的创建方式、底层扩容机制和遍历方法的差异，能帮助我们写出更高效的代码。同时，循环中 var 与 let 的作用域差异是易错点，需重点关注。

后续可进一步学习栈、队列、链表、树等数据结构的 JS 实现，以及数组的高阶方法（如 filter、reduce、find 等），夯实数据结构基础，为复杂业务开发和算法优化提供支撑。