Google Chrome浏览器：JavaScript关联数组，按顺序评估 [英] Google Chrome: JavaScript associative arrays, evaluated out of sequence

问题描述

好的，在网页上，我有一个JavaScript对象，我将其用作关联数组。当页面加载时，它会静态存在于脚本块中：

  var salesWeeks = {
200911：[ 2009/2009，2009财年]，
200910：[2009年10月2009年，2009财年]，
200909：[2009年9月，2009财年]，
200908：[08/2009，2009财年]，
200907：[07/2009，2009财年]，
 200906：[06/2009，2009财年]，
200905：[05/2009，2009财年]，
200904：[04/2009 2009财年]，
200903：[2009年3月，2009财年]，
200902：[2009年2月，2009财年]， 
200901：[01/2009，2009财年]，
200852：[52/2008，2009财年]，
200851： [51/2008，2009财年] 
}; 
  

键/值对的顺序是有意的，因为我将对象转换为HTML选择框如下：

 < select id =ddl_swname =ddl_sw> 
< option value => == SELECT WEEK ==< / option> 
< option value =200911> 11/2009（2009财年）< / option> 
< option value =200910> 10/2009（2009财年）< / option> 
< option value =200909> 09/2009（2009财年）< / option> 
< option value =200908> 08/2009（2009财政年度）< / option> 
< option value =200907> 07/2009（2009财年）< / option> 
< option value =200906> 06/2009（2009财年）< / option> 
< option value =200905> 05/2009（2009财年）< / option> 
< option value =200904> 04/2009（2009财政年度）< / option> 
< option value =200903> 03/2009（2009财年）< / option> 
< option value =200902> 02/2009（2009财年）< / option> 
< option value =200901> 01/2009（2009财年）< / option> 
< option value =200852> 52/2008（2009财年）< / option> 
< option value =200851> 51/2008（2009财年）< / option> 
< / select> 
  

...看起来像这样的代码（从函数中剪下来）：

  var arr = []; 
 arr.push（
< select id = \ddl_sw\name = \ddl_sw\>+ 
< option value = \ \> == SELECT WEEK ==< / option>
）; 
 
（var key in salesWeeks）
 {
 arr.push（
< option value = \+ key +\> ;+ 
 salesWeeks [key] [0] +（+ salesWeeks [key] [1] +）+ 
< \ / option>
）; 
} 
 
 arr.push（< \ / select>）; 
 
 return arr.join（）; 
  

这一切都可以在IE，FireFox和Opera中正常使用。

然而，在Chrome中，订单显得非常奇怪：

 < select id =ddl_swname = ddl_sw > 
< option value => == SELECT WEEK ==< / option> 
< option value =200852> 52/2008（2009财年）< / option> 
< option value =200908> 08/2009（2009财政年度）< / option> 
< option value =200906> 06/2009（2009财年）< / option> 
< option value =200902> 02/2009（2009财年）< / option> 
< option value =200907> 07/2009（2009财年）< / option> 
< option value =200904> 04/2009（2009财政年度）< / option> 
< option value =200909> 09/2009（2009财年）< / option> 
< option value =200903> 03/2009（2009财年）< / option> 
< option value =200905> 05/2009（2009财年）< / option> 
< option value =200901> 01/2009（2009财年）< / option> 
< option value =200910> 10/2009（2009财年）< / option> 
< option value =200911> 11/2009（2009财年）< / option> 
< option value =200851> 51/2008（2009财年）< / option> 
< / select> 
  

注意：此顺序尽管很奇怪，但在后续刷新时不会更改。它总是按照这个顺序。

那么，Chrome在做什么？如何处理循环的一些优化？

首先，我错误地依赖在中声明键/值对的顺序any 关联数组？

我之前从来没有提出过这个问题，我只是认为顺序会保留下来，因为这种技术在其他浏览器中一直适用于我。但是我想我从来没有见过在订单得到保证的任何地方。也许它不是？

任何见解都会很棒。
Thanks。

解决方案

想象一个关联数组作为纸袋，所有的键值对。当你把手伸进袋子里去看对（比如用for ... in循环）时，你遇到它们的顺序就是随机的所有实际目的。

如果您想按特定顺序查看它们，则需要将键提取到数组中并对其进行排序。然后穿过数组，使用您遇到的键索引到关联数组中。

Ok, so on a web page, I've got a JavaScript object which I'm using as an associative array. This exists statically in a script block when the page loads:

var salesWeeks = {
    "200911" : ["11 / 2009", "Fiscal 2009"],
    "200910" : ["10 / 2009", "Fiscal 2009"],
    "200909" : ["09 / 2009", "Fiscal 2009"],
    "200908" : ["08 / 2009", "Fiscal 2009"],
    "200907" : ["07 / 2009", "Fiscal 2009"],
    "200906" : ["06 / 2009", "Fiscal 2009"],
    "200905" : ["05 / 2009", "Fiscal 2009"],
    "200904" : ["04 / 2009", "Fiscal 2009"],
    "200903" : ["03 / 2009", "Fiscal 2009"],
    "200902" : ["02 / 2009", "Fiscal 2009"],
    "200901" : ["01 / 2009", "Fiscal 2009"],
    "200852" : ["52 / 2008", "Fiscal 2009"],
    "200851" : ["51 / 2008", "Fiscal 2009"]
};

The order of the key/value pairs is intentional, as I'm turning the object into an HTML select box such as this:

<select id="ddl_sw" name="ddl_sw">
<option value="">== SELECT WEEK ==</option>
<option value="200911">11 / 2009 (Fiscal 2009)</option>
<option value="200910">10 / 2009 (Fiscal 2009)</option>
<option value="200909">09 / 2009 (Fiscal 2009)</option>
<option value="200908">08 / 2009 (Fiscal 2009)</option>
<option value="200907">07 / 2009 (Fiscal 2009)</option>
<option value="200906">06 / 2009 (Fiscal 2009)</option>
<option value="200905">05 / 2009 (Fiscal 2009)</option>
<option value="200904">04 / 2009 (Fiscal 2009)</option>
<option value="200903">03 / 2009 (Fiscal 2009)</option>
<option value="200902">02 / 2009 (Fiscal 2009)</option>
<option value="200901">01 / 2009 (Fiscal 2009)</option>
<option value="200852">52 / 2008 (Fiscal 2009)</option>
<option value="200851">51 / 2008 (Fiscal 2009)</option>
</select>

...with code that looks like this (snipped from a function):

var arr = [];
arr.push(
    "<select id=\"ddl_sw\" name=\"ddl_sw\">" +
    "<option value=\"\">== SELECT WEEK ==</option>"
);

for(var key in salesWeeks)
{
    arr.push(
        "<option value=\"" + key + "\">" +
        salesWeeks[key][0] + " (" + salesWeeks[key][1] + ")" +
        "<\/option>"
    );
}

arr.push("<\/select>");

return arr.join("");

This all works fine in IE, FireFox and Opera.

However in Chrome, the order comes out all weird:

<select id="ddl_sw" name="ddl_sw">
<option value="">== SELECT WEEK ==</option>
<option value="200852">52 / 2008 (Fiscal 2009)</option>
<option value="200908">08 / 2009 (Fiscal 2009)</option>
<option value="200906">06 / 2009 (Fiscal 2009)</option>
<option value="200902">02 / 2009 (Fiscal 2009)</option>
<option value="200907">07 / 2009 (Fiscal 2009)</option>
<option value="200904">04 / 2009 (Fiscal 2009)</option>
<option value="200909">09 / 2009 (Fiscal 2009)</option>
<option value="200903">03 / 2009 (Fiscal 2009)</option>
<option value="200905">05 / 2009 (Fiscal 2009)</option>
<option value="200901">01 / 2009 (Fiscal 2009)</option>
<option value="200910">10 / 2009 (Fiscal 2009)</option>
<option value="200911">11 / 2009 (Fiscal 2009)</option>
<option value="200851">51 / 2008 (Fiscal 2009)</option>
</select>

NOTE: This order, though weird, does not change on subsequent refreshes. It's always in this order.

So, what is Chrome doing? Some optimization in how it processes the loop?

In the first place, am I wrong to rely on the order that the key/value pairs are declared in any associative array?

I never questioned it before, I just assumed the order would hold because this technique has always worked for me in the other browsers. But I suppose I've never seen it stated anywhere that the order is guaranteed. Maybe it's not?

Any insight would be awesome. Thanks.

解决方案

Think of an associative array as a paper sack into which all the key-value pairs are placed. As you reach your hand into the sack to look at the pairs (such as with the for...in loop), the order that you encounter them is for all practical purposes random.

If you want to see them in a specific order, you'll need to extract the keys into an array and sort it. Then walk across the array, using the keys you encounter to index into the associative array.

这篇关于Google Chrome浏览器：JavaScript关联数组，按顺序评估的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！