JavaScript数组与字典用法及对象遍历技巧

结果与目标

在 JavaScript 开发中，理解数组（Array）与对象（Object/Dictionary）的异同，以及如何高效遍历它们，是提升代码质量和性能的关键。本文将演示如何用数组模拟字典行为，如何访问和枚举对象属性，并提供经过优化的数组遍历方案。

准备条件

基础 JavaScript 知识，了解变量声明、基本数据类型及函数定义。

真实操作顺序

第1步：理解数组的字典特性与简化声明

JavaScript 中的数组本质上也是对象，因此可以像字典一样使用字符串键值对进行存储，尽管这不是最佳实践。

字典用法示例：

var computer_price = new Array();
computer_price["Acer"] = 500;
computer_price["Dell"] = 600;
alert(computer_price["Acer"]); // 输出: 500

// 简化的对象（字典）声明方式
var dict = { "Acer": 500, "Dell": 600 };
console.log(dict.Acer); // 输出: 500

在上面的例子中，Acer 既是键值，也可以作为对象的属性直接通过 dict.Acer 访问。

第2步：使用 for...in 遍历对象属性

当一个自定义对象创建后，可以使用 for...in 循环来枚举其所有可枚举属性。

对象遍历示例：

function Computer(brand, price) {
    this.brand = brand;
    this.price = price;
}

var myComputer = new Computer("Acer", 500);

for (var prop in myComputer) {
    alert("computer[" + prop + "]=" + myComputer[prop]);
}

执行结果将依次弹出：
computer[brand]=Acer
computer[price]=500

这种写法常用于动态查看对象的所有属性名。如果已知属性名，直接使用 myComputer.brand 或 myComputer["brand"] 访问会更直接。

第3步：高性能遍历数组（关键优化）

虽然 for...in 可以遍历数组，但**不推荐**这样做。原因如下：

1. 性能损耗：for...in 会枚举原型链上的所有属性（包括继承的方法），必须配合 hasOwnProperty() 过滤，导致速度显著慢于普通循环。
2. 语义混淆：JavaScript 中没有真正的“关联数组”，只有对象。数组应保持索引顺序，而对象属性顺序不保证。

最佳实践： 使用经典 for 循环并缓存数组长度。

var list = [1, 2, 3, 4, 5]; // 假设数组很大

// 推荐写法：缓存 length
for (var i = 0, l = list.length; i < l; i++) {
    console.log(list[i]);
}

为什么缓存 length？
虽然现代 JS 引擎对属性访问进行了优化，但在每次循环中重复读取 list.length 仍比局部变量查找稍慢。对于超大规模数组，缓存长度能带来微小的性能提升，且符合严谨的代码规范。

第4步：控制数组长度的机制

通过设置 length 属性可以截断数组，但不能通过增大 length 来扩充有效元素。

var foo = [1, 2, 3, 4, 5, 6];
foo.length = 3; // 截断数组
console.log(foo); // 输出: [1, 2, 3]

foo.length = 6; // 恢复长度，但原被截取的元素不会自动回来
console.log(foo); // 输出: [1, 2, 3, undefined, undefined, undefined]

注意区分 undefined 状态：

• 索引不存在： 5 in foo; 返回 false（数组在索引 5 处没有属性）。
• 存在但未赋值： 若执行 foo[5] = undefined;，则 5 in foo; 返回 true（因为索引 5 现在是一个显式存在的属性，只是值为 undefined）。

完成判断

当你能够区分对象属性遍历与数组索引遍历的区别，并在实际编码中使用带长度缓存的经典 for 循环处理数组时，即表示已掌握本教程的核心要点。

原文有依据的排错

误区纠正： 初学者常误以为可以用 for...in 高效遍历数组。务必记住：数组用 for / forEach / map，对象（字典）才用 for...in（且需注意非自身属性问题）。

简要总结

JavaScript 中的数组不仅是列表，也可充当字典；但为了性能和语义清晰，遍历数组应摒弃 for...in，转而使用缓存 length 的传统 for 循环。同时，通过修改 length 可截断数组，但不会改变已被删除索引的状态（变为无此属性或值为 undefined）。

以上就是JavaScript数组与字典用法及对象遍历技巧的详细内容，更多关于JavaScript基础知识的相关资料请关注本站其它相关文章！