前言
作为前端开发者，数组是我们日常开发中最常用的数据结构之一。但你是否真正理解数组在内存中的存储方式？不同遍历方法的性能差异？以及经典的循环变量作用域问题？本文将带你深入探讨这些核心概念。
数组的内存模型
数组的创建方式
// 方式一：字面量创建
const arr = [1, 2, 3, 4, 5, 6];
// 方式二：构造函数创建空数组
const arr2 = new Array();
// 方式三：创建定长数组并填充
const arr3 = new Array(6).fill(0);
内存分配解析：
arr变量存储在栈内存中，包含对堆内存的引用地址- 实际数组
[1,2,3,4,5,6]存储在堆内存中，占用连续的6个单位空间 - 这种连续内存分配使得数组的随机访问性能极佳
数组的动态扩容问题
const arr2 = []; // 初始容量很小
for (let i = 0; i < 1000; i++) {
arr2.push(i); // 可能触发多次扩容操作
}
扩容代价：
- 分配新的更大内存空间
- 复制所有元素到新空间
- 回收旧内存空间
数组遍历方法性能对比
1. 传统 for 循环（性能最佳）
const arr = new Array(6).fill(0);
const len = arr.length; // 优化：只查找一次长度
for (let i = 0; i < len; i++) {
console.log(arr[i]); // 直接访问，无函数调用开销
}
优化技巧：
- 提前缓存
arr.length，避免每次循环都查找属性 - 直接通过索引访问，没有函数调用开销
- CPU 对计数循环有很好的优化支持
2. forEach 方法
const arr = [1, 2, 3, 4, 5, 6];
arr.forEach((item, index) => {
console.log(item, index); // 每次迭代都是函数调用
})
局限性：
- 无法使用
break中断循环 - 每次迭代都有函数调用开销
- 代码可读性较好，但性能不如 for 循环
3. map 方法
const arr = [1, 2, 3, 4, 5];
const newArr = arr.map(item => item + 1); // 返回新数组
特点：
- 遍历同时进行数据加工
- 返回新的数组，不改变原数组
- 适合函数式编程场景
4. for...of 循环
const arr = [1, 2, 3, 4, 5];
for(let item of arr){
item += 1; // 可读性好
}
优势：
- 语法简洁，可读性强
- 相比计数循环更直观
- 支持
break和continue
5. for...in 循环
// 遍历对象
const obj = {name: "张三", age: 18};
for (let k in obj) {
console.log(k, obj[k]);
}
// 遍历数组（不推荐）
const arr = [1, 2, 3, 4, 5];
for (let key in arr) {
console.log(key, arr[key]); // key 是字符串类型的下标
}
注意事项：
- 设计初衷是遍历对象属性
- 遍历数组时，key 是字符串类型
- 会遍历原型链上的可枚举属性
- 遍历数组时不保证顺序（虽然通常按顺序）
经典作用域问题：循环中的异步操作
问题场景
// var 的问题
for (var i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i); // 全部输出 10
}, 1000);
}
问题根源：
var声明的变量存在于全局/函数作用域- 整个循环共享同一个
i变量 - 异步回调执行时，循环已结束，
i的值为 10
解决方案
方案一：使用 let（推荐）
for (let i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i); // 正确输出 0,1,2,...,9
}, 1000);
}
原理：
let具有块级作用域- 每次循环迭代都创建新的块级作用域、词法环境
- 每个 setTimeout 回调捕获各自迭代中的
i
方案二：使用 IIFE（闭包）
for (var i = 0; i < 10; i++) {
(function(index) {
setTimeout(function() {
console.log(index); // 正确输出 0,1,2,...,9
}, 1000);
})(i);
}
方案三：使用 forEach
Array.from({length: 10}).forEach((_, index) => {
setTimeout(function() {
console.log(index); // 正确输出 0,1,2,...,9
}, 1000);
});
数据结构学习路线
线性数据结构
- 数组：连续内存，随机访问快
- 栈：先进后出 (FILO)
- 队列：先进先出 (FIFO)
- 链表：离散内存，动态性好
非线性数据结构
- 树：层次关系，搜索效率高
- 图：顶点和边的集合，建模复杂关系
性能选择建议
- 数据量小：优先使用数组，链表节点的实例化开销更大
- 频繁动态操作：考虑链表，避免数组的扩容代价
- 遍历性能：for 循环 > for...of > forEach > map > for...in
- 代码可读性：for...of ≈ forEach ≈ map > for 循环
结语
理解数组的底层原理对于编写高性能 JavaScript 代码至关重要。从内存分配到遍历方法选择，从作用域问题到数据结构选型，每一个细节都影响着程序的运行效率。希望本文能帮助你更深入地理解 JavaScript 数组，在性能与可维护性之间找到最佳平衡点。
记住：没有绝对最好的方法，只有最适合场景的选择。
