Google Chrome : JavaScript 연관 배열, 시퀀스에서 평가

StackOverflow https://stackoverflow.com/questions/640745

문제

자, 웹 페이지에는 연관 배열로 사용하는 JavaScript 객체가 있습니다. 페이지가로드되면 스크립트 블록에 정적으로 존재합니다.

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"]
};

키/값 쌍의 순서는 의도적입니다. 객체를 다음과 같은 HTML 선택 상자로 바꾸므로 의도적입니다.

<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>

... 이와 같은 것처럼 보이는 코드로 (함수에서 흠뻑 젖었다) :

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("");

이것은 모두 Firefox 및 Opera에서 잘 작동합니다.

그러나 Chrome에서는 주문이 모두 이상해집니다.

<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>

참고 :이 순서는 이상하지만 이후의 새로 고침에서는 변경되지 않습니다. 항상이 순서입니다.

그래서 Chrome은 무엇을하고 있습니까? 루프를 처리하는 방법에 대한 최적화?

우선, 키/값 쌍이 선언 된 순서에 의존하는 것이 잘못된 것입니다. 어느 연관 배열?

나는 이전에 의문을 제기 한 적이 없다. 나는이 기술이 항상 다른 브라우저에서 나에게 효과가 있었기 때문에 주문이 유지 될 것이라고 생각했다. 그러나 나는 주문이 보장된다고 생각한 적이 없다고 생각합니다. 어쩌면 그렇지 않을까요?

모든 통찰력은 굉장 할 것입니다. 감사.

도움이 되었습니까?

해결책

연관 배열을 모든 키 값 쌍을 배치하는 종이 자루로 생각하십시오. 손을 자루에 닿아 쌍 (예 : for ... in loop)을 보면서, 당신이 그들을 만나는 순서는 모든 실용적인 목적을 무작위로 사용합니다.

특정 순서로 보려면 키를 배열로 추출하여 정렬해야합니다. 그런 다음 배열을 가로 질러 걸어 가서 직면 한 키를 사용하여 연관 배열에 인덱싱하십시오.

다른 팁

요소가 연관 배열에 저장되는 순서는 보장되지 않습니다. 출력을 명시 적으로 정렬해야합니다.

다른 답변에서 알 수 있듯이, 주요 브라우저는 정의 된 순서로 반복하더라도 객체의 속성이 반복되는 순서는 사양에 정의되지 않습니다.

모든 물체의 특성에 원시 값이 포함 된 경우 크롬도 순서대로 열거됩니다. John Resig는 Chrome의 행동에 대한 자세한 내용 ( "루프 주문을 위해") :http://ejohn.org/blog/javaScript-in-chrome/

지적한 바와 같이 Chrome의 행동은 완벽하게 유효합니다.

이것은 어떤 OO 사고가 도움이 될 수있는 좋은 경우입니다. 당신은 정말로 연관 배열이나 객체 목록을 원하십니까?

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

내가 생각하는 더 나은 도움이 될 것입니다 (어떤 형태의 종류의 종류를 옹호하는 사람들에게, 주문은 이미 정의되어 있습니다 - 왜 당신은 왜 추가 일을하고 싶습니까?)

@CurtainDog : 아니요! 아니! JavaScript의 배열 객체와 함께 "for .. in"을 사용하면 나쁘다. 여기서 대부분의 응답의 모든 점은 "for .. in"이 어떤 순서도 보장하지 않는다는 것입니다. 또한, "for .. in"은 객체의 생성자의 프로토 타입에서 속성을 가져 오며 존재하지 않는 키를 반복하지 않습니다.

@Samnan : 사양은 단순히 반복 순서가 보장되지 않는다고 말합니다. 이는 브라우저가 정렬 된 순서로, 삽입 순서대로, 무작위 순서로 또는 그렇지 않을 수도 있음을 의미합니다. 그것은 해시 테이블과 같습니다. 명백한 순서로 나오더라도 무작위로 생각하십시오.

나는 대부분의 브라우저가 배열 객체가있는 "for..in"을 찾고 숫자 순서로 반복하여 상황이 깨지지 않도록합니다. 그러나 그런 식으로 사용하는 대부분의 사람들이 그렇게하고 있다고 생각하는 일을 실제로하는 것은 아니며, 구체적으로 필요하지 않으면 피해야합니다. 물체-유형 반복.

진짜 좋은 관행은 아니지만 ...

값에 공간을 추가하면 Chrome은 값을 고려하지 않고 값별로 정렬하지 않습니다.

예시:

<select>
  <option value=" 3">Third</option>
  <option value=" 1">First</option>
  <option value=" 2">Second</option>
</select>

좋은면은 누군가 제안한 것처럼 ID에서 알파벳 문자를 추가하거나 제거하지 않아야한다는 것입니다 (이 또는 다른 게시물에서 비슷한 질문이있는 다른 게시물에서는 쉽게 다듬을 수 있지만 대부분의 시간은 공간이 단지 단지 단지 하나입니다. 무시하고 다른 파일에 게시하거나 가져 오면 단순히 공간이 아닌 정수 값을 볼 수 있습니다.

다른 모든 대답과는 달리, 그것은 크롬의 버그입니다.

이유:

데이터 구조가 Barry가 말한 것처럼 종이 자루 인 경우 :

값은 항상 랜시화되어야합니다. 크롬의 경우에는 그렇지 않습니다

데이터 구조가 순차적 인 경우 :

값은 구조에 추가되는 순서로되어야합니다.

다른 브라우저는 두 번째 접근 방식을 따르지만 Chrome은 두 가지를 따르지 않으며 여전히 데이터 구조에 액세스하는 동안 Chrome의 분류 순서가 무엇인지 설명하지 않습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top