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 相关文章推荐
用于判断用户注册时,密码强度的JS代码
Jan 01 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
javascript object array方法使用详解
Dec 03 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 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
配置支持SSI
2006/11/25 PHP
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
php中序列化与反序列化详解
2017/02/13 PHP
PDO::commit讲解
2019/01/27 PHP
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
微信小程序实现批量倒计时功能
2020/11/01 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
python计算圆周率pi的方法
2015/07/11 Python
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
python实现扫描ip地址的小程序
2019/04/16 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
python可视化实现KNN算法
2019/10/16 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
python中return的返回和执行实例
2019/12/24 Python
Python Django搭建网站流程图解
2020/06/13 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
公司员工检讨书
2014/02/08 职场文书
安全生产标语大全
2014/10/06 职场文书
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android