提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Javascript的数组与字典用法与遍历对象的属性技巧

JavaScript属性遍历对象数组 技巧 用法 字典
2023-06-13 09:14:40 时间

Javascript的数组Array,既是一个数组，也是一个字典(Dictionary)。先举例看看数组的用法。

复制代码代码如下:

vara=newArray();
a[0]="Acer";
a[1]="Dell";
for(vari=0;i<a.length;i++){
alert(a[i]);
}

下面再看一下字典的用法。
复制代码代码如下:

varcomputer_price=newArray();
computer_price["Acer"]=500;
computer_price["Dell"]=600;
alert(computer_price["Acer"]);

我们甚至可以同样象上面那样遍历这个数组（字典）
复制代码代码如下:
for(variincomputer_price){
alert(i+":"+computer_price[i]);
}

这里的i即为字典的每个键值。输出结果为：
Acer:500
Dell:600

另外computer_price是一个字典对象，而它的每个键值就是一个属性。也就是说Acer是computer_price的一个属性。我们可以这样使用它：
computer_price.Acer

再来看一下字典和数组的简化声明方式。
vararray=[1,2,3];//数组
vararray2={"Acer":500,"Dell":600};//字典
alert(array2.Acer);//500
这样对字典的声明是和前面的一样的。在我们的例子中，Acer又是键值，也可是作为字典对象的属性了。

下面再来看看如何对一个对象的属性进行遍历。我们可以用forin来遍历对象的属性。
复制代码代码如下:
functionComputer(brand,price){
this.brand=brand;
this.price=price;
}
varmycomputer=newComputer("Acer",500);
for(varpropinmycomputer){
alert("computer["+prop+"]="+mycomputer[prop]);
}

上面的代码中，Computer有两个属性，brand和price.所以输出结果为：
computer[brand]=Acer
computer[price]=500
上面的这种用法可以用来查看一个对象都有哪些属性。当你已经知道Computer对象有一个brand属性时，就可以用
mycomputer.brand
或mycomputer[brand]
来获取属性值了。
总结：Javascript中的数组也可以用来做字典。字典的键值也是字典对象的属性。对一个对象的属性进行遍历时，可以用forin。

数组遍历与属性
虽然在JavaScript中数组是是对象，但是没有好的理由去使用forin循环遍历数组。
相反，有一些好的理由不去使用forin遍历数组。
注意:JavaScript中数组不是关联数组。
JavaScript中只有对象来管理键值的对应关系。但是关联数组是保持顺序的，而对象不是。
由于forin循环会枚举原型链上的所有属性，唯一过滤这些属性的方式是使用hasOwnProperty函数，
因此会比普通的for循环慢上好多倍。
遍历
为了达到遍历数组的最佳性能，推荐使用经典的for循环。
复制代码代码如下:
varlist=[1,2,3,4,5,......100000000];
for(vari=0,l=list.length;i<l;i++){
console.log(list[i]);
}

上面代码有一个处理，就是通过l=list.length来缓存数组的长度。
虽然length是数组的一个属性，但是在每次循环中访问它还是有性能开销。
可能最新的JavaScript引擎在这点上做了优化，但是我们没法保证自己的代码是否运行在这些最近的引擎之上。
实际上，不使用缓存数组长度的方式比缓存版本要慢很多。
length属性
length属性的getter方式会简单的返回数组的长度，而setter方式会截断数组。
复制代码代码如下:
varfoo=[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中。
5infoo;//不管在Firebug或者Chrome都返回false
foo[5]=undefined;
5infoo;//不管在Firebug或者Chrome都返回true
为length设置一个更小的值会截断数组，但是增大length属性值不会对数组产生影响。
结论
为了更好的性能，推荐使用普通的for循环并缓存数组的length属性。
使用forin遍历数组被认为是不好的代码习惯并倾向于产生错误和导致性能问题。

相关文章