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


Posted in Javascript onNovember 07, 2012

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 遍历数组被认为是不好的代码习惯并倾向于产生错误和导致性能问题。
Javascript 相关文章推荐
列表内容的选择
Jun 30 Javascript
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
浅谈Webpack打包优化技巧
Jun 12 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
JS正则中的RegExp对象对象
Nov 07 #Javascript
js模拟点击事件实现代码
Nov 06 #Javascript
js判断变量是否未定义的代码
Mar 28 #Javascript
jquery判断浏览器类型的代码
Nov 05 #Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 #Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 #Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 #Javascript
You might like
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
详解Python进程间通信之命名管道
2017/08/28 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
Python实现某论坛自动签到功能
2019/08/20 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
毕业生教师求职信
2013/10/20 职场文书
岗位职责风险防控
2014/02/18 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
机关干部作风整顿心得体会
2016/01/22 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书