Javascript的数组与字典用法与遍历对象的属性技巧
更新时间：2012年11月07日 10:02:57 作者：
Javascript 的数组Array,既是一个数组，也是一个字典(Dictionary)。先举例看看数组的用法
Javascript 的数组Array,既是一个数组，也是一个字典(Dictionary)。先举例看看数组的用法。
复制代码 代码如下:
var a = new Array();
a[0] = "Acer";
a[1] = "Dell";
for (var i = 0; i < a.length; i++) {
alert(a[i]);
}
下面再看一下字典的用法。
复制代码 代码如下:
var computer_price = new Array();
computer_price["Acer"] = 500;
computer_price["Dell"] = 600;
alert(computer_price["Acer"]);
我们甚至可以同样象上面那样遍历这个数组（字典）
复制代码 代码如下:
for (var i in computer_price) {
alert(i + ": " + computer_price[i]);
}
这里的 i 即为字典的每个键值。输出结果为：
Acer: 500
Dell: 600
另外 computer_price 是一个字典对象，而它的每个键值就是一个属性。也就是说 Acer 是 computer_price 的一个属性。我们可以这样使用它：
computer_price.Acer
再来看一下字典和数组的简化声明方式。
var array = [1, 2, 3]; // 数组
var array2 = { "Acer": 500, "Dell": 600 }; // 字典
alert(array2.Acer); // 500
这样对字典的声明是和前面的一样的。在我们的例子中，Acer又是键值，也可是作为字典对象的属性了。
下面再来看看如何对一个对象的属性进行遍历。我们可以用 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 和 price.所以输出结果为：
computer[brand]=Acer
computer[price]=500
上面的这种用法可以用来查看一个对象都有哪些属性。当你已经知道Computer对象有一个brand属性时，就可以用
mycomputer.brand
或 mycomputer[brand]
来获取属性值了。
总结：Javascript中的数组也可以用来做字典。字典的键值也是字典对象的属性。对一个对象的属性进行遍历时，可以用for in。
数组遍历与属性
虽然在 JavaScript 中数组是是对象，但是没有好的理由去使用 for in 循环 遍历数组。
相反，有一些好的理由不去使用 for in 遍历数组。
注意: JavaScript 中数组不是 关联数组。
JavaScript 中只有对象 来管理键值的对应关系。但是关联数组是保持顺序的，而对象不是。
由于 for in 循环会枚举原型链上的所有属性，唯一过滤这些属性的方式是使用hasOwnProperty 函数，
因此会比普通的 for 循环慢上好多倍。
遍历
为了达到遍历数组的最佳性能，推荐使用经典的 for 循环。
复制代码 代码如下:
var list = [1, 2, 3, 4, 5, ...... 100000000];
for(var i = 0, l = list.length; i < l; i++) {
console.log(list[i]);
}
上面代码有一个处理，就是通过 l = list.length 来缓存数组的长度。
虽然 length 是数组的一个属性，但是在每次循环中访问它还是有性能开销。
可能最新的 JavaScript 引擎在这点上做了优化，但是我们没法保证自己的代码是否运行在这些最近的引擎之上。
实际上，不使用缓存数组长度的方式比缓存版本要慢很多。
length 属性
length 属性的 getter 方式会简单的返回数组的长度，而 setter 方式会截断数组。
复制代码 代码如下:
var foo = [1, 2, 3, 4, 5, 6];
foo.length = 3;
foo; // [1, 2, 3]
foo.length = 6;
foo; // [1, 2, 3]
译者注：
在 Firebug 中查看此时 foo 的值是： [1, 2, 3, undefined, undefined, undefined]
但是这个结果并不准确，如果你在 Chrome 的控制台查看 foo 的结果，你会发现是这样的： [1, 2, 3]
因为在 JavaScript 中 undefined 是一个变量，注意是变量不是关键字，因此上面两个结果的意义是完全不相同的。
// 译者注：为了验证，我们来执行下面代码，看序号 5 是否存在于 foo 中。
5 in foo; // 不管在 Firebug 或者 Chrome 都返回 false
foo[5] = undefined;
5 in foo; // 不管在 Firebug 或者 Chrome 都返回 true
为 length 设置一个更小的值会截断数组，但是增大 length 属性值不会对数组产生影响。
结论
为了更好的性能，推荐使用普通的 for 循环并缓存数组的 length 属性。
使用 for in 遍历数组被认为是不好的代码习惯并倾向于产生错误和导致性能问题。
相关文章
这篇文章主要给大家介绍了关于JS算法教程之字符串去重与字符串反转的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
微信小程序的运行环境不是在浏览器下运行的。所以不能以cookie来维护登录态。下面这篇文章主要给大家介绍了微信小程序中如何做用户登录与登录态维护的相关资料，文中介绍的非常详细，需要的朋友可以参考学习。2017-05-05
这篇文章主要为大家详细介绍了JS中FormData类实现文件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
今天小编就为大家分享一篇layer.confirm()右边按钮实现href的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
javascript代码调试之console.log 用法图文详解
对于开始学js的朋友可能不知道为什么用console.log，页面中也看不到信息，对于这个console.log脚本之家小编特整理与介绍一下，方便需要的朋友2016-09-09
将字符串转化为xml对象需要注意的是该死的ie多版本的问题，具体实现如下，感兴趣的朋友不妨参考下本文，希望对大家有所帮助2013-09-09
match()方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配,下面这篇文章主要给大家介绍了关于JS前端开发之exec()和match()的对比使用的相关资料,需要的朋友可以参考下2022-09-09
JavaScript中apply与call的用法意义及区别说明
JavaScript中有一个call和apply方法，其作用基本相同，但也有略微的区别。2010-04-04
这篇文章主要介绍了momentjs详细使用说明,使用 Moment.js 可以轻松地获取上周、上月和前三个月的起始和结束时间，在示例中，我们传入了 '2023-07-15'，并将返回的日期信息存储在 dateInfo 变量中，然后将其打印到控制台上，需要的朋友可以参考下2023-07-07
以前看到的都是用IE的zoom，所以非IE就不支持，昨天看到这个js中鼠标滚轮事件详解 ，于是完全兼容（IE6-8,FF,Chrome,Opera,Safari）的鼠标滚轴缩放图片效果今天就诞生了2010-02-02
最新评论