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 相关文章推荐
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
理解javascript中的with关键字
Feb 15 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
详解Angular 开发环境搭建
Jun 22 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
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操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
python实现获取序列中最小的几个元素
2014/09/25 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
python顺序执行多个py文件的方法
2019/06/29 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
暑假实习求职信范文
2013/09/22 职场文书
千元咖啡店的创业计划书范文
2013/12/29 职场文书
读书之星事迹材料
2014/05/12 职场文书
创先争优一句话承诺
2014/05/29 职场文书
班主任2015新年寄语
2014/12/08 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
保险公司增员口号
2015/12/25 职场文书
使用CSS连接数据库的方式
2022/02/28 HTML / CSS
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server