本系列作为Effective JavaScript的读书笔记。

ECMAScript标准并没有规定对JavaScript的Object类型中的属性的存储顺序。

可是在使用for..in循环对Object中的属性进行遍历的时候,确实是须要依赖于某种顺序的。

正由于ECMAScript没有对这个顺序进行明白地规范,所以每一个JavaScript运行引擎都可以依据自身的特点进行实现。那么在不同的运行环境中就不能保证for..in循环的行为一致性了。

比方,下面代码在调用report方法时的结果就是不确定的:

function report(highScores) {
var result = "";
var i = 1;
for (var name in highScores) { // unpredictable order
result += i + ". " + name + ": " +
highScores[name] + "\n";
i++;
}
return result;
}
report([{ name: "Hank", points: 1110100 },
{ name: "Steve", points: 1064500 },
{ name: "Billy", points: 1050200 }]);
// ?

假设你确实须要保证执行的结果是建立在数据的顺序上,优先使用数组类型来表示数据,而不是直接使用Object类型。同一时候。也尽量避免使用for..in循环,而使用显式的for循环:

function report(highScores) {
var result = "";
for (var i = 0, n = highScores.length; i < n; i++) {
var score = highScores[i];
result += (i + 1) + ". " +
score.name + ": " + score.points + "\n";
}
return result;
}
report([{ name: "Hank", points: 1110100 },
{ name: "Steve", points: 1064500 },
{ name: "Billy", points: 1050200 }]);
// "1. Hank: 1110100\n2. Steve: 1064500\n3. Billy: 1050200\n"

还有一个特别依赖于顺序的行为是浮点数的计算:

var ratings = {
"Good Will Hunting": 0.8,
"Mystic River": 0.7,
"21": 0.6,
"Doubt": 0.9
};

在Item 2中。谈到了浮点数的加法操作甚至不能满足交换律:

(0.1 + 0.2) + 0.3
的结果和 0.1 + (0.2 + 0.3)的结果各自是

0.600000000000001
和 0.6

所以对于浮点数的算术操作,更加不能使用随意的顺序了:

var total = 0, count = 0;
for (var key in ratings) { // unpredictable order
total += ratings[key];
count++;
}
total /= count;
total; // ?

当for..in的遍历顺序不一样时,最后得到的total结果也就不一样了。下面是两种计算顺序和其相应的结果:

(0.8 + 0.7 + 0.6 +0.9) / 4 // 0.75

(0.6 + 0.8 + 0.7 +0.9) / 4 // 0.7499999999999999

当然,对于浮点数的计算这一类问题,有一个解决方式是使用整型数来表示,比方我们将上面的浮点数首先放大10倍变成整型数据。然后计算结束之后再缩小10倍:

(8+ 7 + 6 + 9) / 4 / 10
   // 0.75

(6+ 8 + 7 + 9) / 4 / 10
   // 0.75

总结:

  1. 在使用for..in循环时。不要依赖于遍历的顺序。
  2. 当使用Object类型来保存数据时,须要保证当中的数据是无序的。
  3. 当须要表示带有顺序的集合时。使用数组类型而不是Object类型。

Effective JavaScript Item 46 优先使用数组而不是Object类型来表示有顺序的集合的更多相关文章

  1. Effective JavaScript Item 31 优先使用Object.getPrototypeOf,而不是__proto__

    本系列作为Effective JavaScript的读书笔记. 在ES5中引入了Object.getPrototypeOf作为获取对象原型对象的标准API.可是在非常多运行环境中.也提供了一个特殊的_ ...

  2. Effective JavaScript Item 51 在类数组对象上重用数组方法

    Array.prototype对象上的标准方法被设计为也能够在其他对象上重用 - 即使不是继承自Array的对象. 因此,在JavaScript中存折一些类数组对象(Array-like Object ...

  3. Effective JavaScript Item 49 对于数组遍历,优先使用for循环,而不是for..in循环

    本系列作为Effective JavaScript的读书笔记. 对于以下这段代码,能看出最后的平均数是多少吗? var scores = [98, 74, 85, 77, 93, 100, 89]; ...

  4. Effective JavaScript Item 40 避免继承标准类型

    本系列作为Effective JavaScript的读书笔记. ECMAScript标准库不大.可是提供了一些重要的类型如Array,Function和Date.在一些场合下.你或许会考虑继承当中的某 ...

  5. Effective JavaScript Item 21 使用apply方法调用函数以传入可变參数列表

    本系列作为Effective JavaScript的读书笔记. 以下是一个拥有可变參数列表的方法的典型样例: average(1, 2, 3); // 2 average(1); // 1 avera ...

  6. Effective JavaScript Item 10 避免使用with

    本系列作为Effective JavaScript的读书笔记. Item 9:避免使用withkeyword 重点: 设计withkeyword本来是为了让代码变简洁,可是却起到了相反的效果.比方: ...

  7. Effective JavaScript Item 39 绝不要重用父类型中的属性名

    本系列作为Effective JavaScript的读书笔记. 假设须要向Item 38中的Actor对象加入一个ID信息: function Actor(scene, x, y) { this.sc ...

  8. Effective JavaScript Item 22 使用arguments来创建接受可变參数列表的函数

    本系列作为Effective JavaScript的读书笔记. 在Item 21中,介绍了结合apply方法实现的可变參数列表函数average,它实际上仅仅声明了一个数组作为參数,可是利用apply ...

  9. Effective JavaScript Item 37 认识this的隐式指向

    本系列作为Effective JavaScript的读书笔记. CSV数据通常都会被某种分隔符进行分隔.所以在实现CSV Reader时,须要支持不同的分隔符.那么,非常自然的一种实现就是将分隔符作为 ...

随机推荐

  1. openfire 用户名+密码 配置

    安装了openfire后要求配置,通常用户名都是admin,密码是安装时用户所设定的密码.由于种种原因会出现无法登陆的现象.现有两种方法可以解决. 1. 进入openfire的安装目录下---> ...

  2. Java从零开始学四(数据类型)

    一.Java数据类型划分 二.基本数据类型 No. 数据类型 大小/位 可表示的数据范围 1 long(长整数) 64 -9223372036854775808 ~ 92233720368547758 ...

  3. netsh学习

    show allowedprogram –显示被允许的程序配置 show config - 显示防火墙的配置 show currentprofile -显示 Windows 防火墙的当前配置文件. s ...

  4. How to set up OpenERP for various timezone kindly follow the following steps to select timezone in OpenERP

        How to set up OpenERP for different Time Zones Click on the "Edit Preferences" wheel a ...

  5. [Python]网络爬虫(五):urllib2的使用细节与抓站技巧

    转自:http://blog.csdn.net/pleasecallmewhy/article/details/8925978 前面说到了urllib2的简单入门,下面整理了一部分urllib2的使用 ...

  6. jquery实现下拉联动

    很多项目用到这个功能,虽然写了不下5次以上了,一直没做过记录,记录一下,下次直接拷贝了,免得还得要重复写浪费时间. 先上HTML代码: 品牌: <select class="sa&qu ...

  7. Eclipse调试cas server 3.5.2.1

    由于在配置CAS+LDAP总是报错,决定Eclipse调试cas server,跟踪问题出在哪里? ================================================== ...

  8. VC2012编译CEF3-转

    原文地址:http://blog.csdn.net/tiplip/article/details/42047815 下载 代码下载:http://cefbuilds.com/,CEF 3.2556.1 ...

  9. 实践:由0到1-无线大数据UX团队的成长

    背景 大数据产品的在项目成立之初,采用的是模仿原有网优工具的方式做UI设计,由BA主导画草图.手绘线框图.excel制作,更有直接打开参考产品做原型的方式,没有统一的设计和规范可言.随着团队逐渐增多. ...

  10. 【微信小程序】解决 竖向<scroll-view>组件 “竖向滚动页面出现遮挡”问题

    问题图: 问题原因: <scroll-view class="scroll-container" upper-threshold="{{sortPanelDist} ...