JavaScript와 의 JavaScript

의 JavaScript와 의 JavaScript

루프와...에 큰 차이가 있다고 생각하십니까?어떤 종류의 "용도"를 사용하고 싶으며, 그 이유는 무엇입니까?

예를 들어 다음과 같은 어레이가 있다고 합시다.

var myArray = [{'key': 'value'}, {'key': 'value1'}];

따라서 반복할 수 있습니다.

for (var i = 0; i < myArray.length; i++)

그리고:

for (var i in myArray)

큰 차이는 없어요.퍼포먼스에 문제가 있습니까?

선택은 어떤 사자성어가 가장 잘 이해되는지에 따라 이루어져야 한다.

어레이는 다음 방법으로 반복됩니다.

for (var i = 0; i < a.length; i++)
   //do stuff with a[i]

연관 배열로 사용되는 개체는 다음을 사용하여 반복됩니다.

for (var key in o)
  //do stuff with o[key]

대지를 파괴하는 이유가 없는 한, 확립된 사용 패턴을 고수하십시오.

Douglas Crockford는 JavaScript에서 다음을 권장합니다. 적절한 부품(24페이지)을 사용하여for in★★★★★★ 。

「 」를 사용하고 for in개체의 속성 이름을 루프하려면 결과가 정렬되지 않습니다.더 나쁜 경우: 프로토타입 체인에서 상속된 멤버와 메서드 이름이 포함되므로 예기치 않은 결과가 나타날 수 있습니다.

한 모든 은 but성음음음음음음음음음음음음음음음음음음음 every 로 걸러낼 수 있다..hasOwnProperty

for (var name in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, name)) {
        // DO STUFF
    }
}

참고 - jQuery 사용자

---

jQuery'seach(callback)는 " " " 를 사용합니다.for( ; ; ) 「」를합니다.for( in ) 길이가 같은 경우에만undefined

따라서 이 기능을 사용할 때는 올바른 순서를 상정하는 것이 안전하다고 생각합니다.

예:

$(['a','b','c']).each(function() {
    alert(this);
});
//Outputs "a" then "b" then "c"

이 기능을 사용하면 UI 이외의 로직을 실행할 경우 다른 프레임워크에 대한 이식성이 떨어진다는 단점이 있습니다.each()및 jQuery에서 사용하는 .for( ; ; )그렇지 않으면 좋을지도 모릅니다.

---

사용하는 루프 종류와 브라우저에 따라 성능 차이가 있습니다.

예:

for (var i = myArray.length-1; i >= 0; i--)

일부 브라우저에서는 다음 브라우저보다 거의 2배 빠릅니다.

for (var i = 0; i < myArray.length; i++)

그러나 어레이가 크거나 지속적으로 반복하지 않는 한 모든 것이 충분히 빠릅니다.어레이 루프가 프로젝트(또는 그 문제에 관한 다른 프로젝트)의 병목현상을 일으키는 것은 아닌지 의심스럽다.

네이티브 Array.for Each 메서드가 폭넓게 지원되게 되었습니다.

2012년 최신 버전의 모든 주요 브라우저 - Chrome, Firefox, IE9, Safari 및 Opera는 각각 ES5의 네이티브 어레이를 지원합니다.

IE8을 네이티브로 지원할 이유가 없는 한(ES5-shim 또는 Chrome 프레임을 이러한 사용자에게 제공할 수 있으므로 적절한 JS 환경을 제공할 수 있음) 단순히 해당 언어의 올바른 구문을 사용하는 것이 좋습니다.

myArray.forEach(function(item, index) {
    console.log(item, index);
});

array.forEach()의 전체 매뉴얼은 MDN에 있습니다.

배열이 희박한 경우 두 개의 배열은 같지 않습니다.

var array = [0, 1, 2, , , 5];

for (var k in array) {
  // Not guaranteed by the language spec to iterate in order.
  alert(k);  // Outputs 0, 1, 2, 5.
  // Behavior when loop body adds to the array is unclear.
}

for (var i = 0; i < array.length; ++i) {
  // Iterates in order.
  // i is a number, not a string.
  alert(i);  // Outputs 0, 1, 2, 3, 4, 5
  // Behavior when loop body modifies array is clearer.
}

각각을 사용하여 프로토타입 체인을 건너뜁니다.

위의 @nailer 답변에 대한 간단한 부록입니다.개체와 함께 Each를 사용합니다.keys는 hasOwnProperty를 사용하지 않고도 프로토타입 체인을 통해 반복되는 것을 방지할 수 있음을 의미합니다.

var Base = function () {
    this.coming = "hey";
};

var Sub = function () {
    this.leaving = "bye";
};

Sub.prototype = new Base();
var tst = new Sub();

for (var i in tst) {
    console.log(tst.hasOwnProperty(i) + i + tst[i]);
}

Object.keys(tst).forEach(function (val) {
    console.log(val + tst[val]);
});

필요에 따라 반복 방법을 선택해야 한다는 의견에 찬성합니다.네이티브를 통해 절대 루프를 하지 말 것을 권합니다.Arrayfor in구조.이는 훨씬 느리고 Chase Seibert가 방금 지적했듯이 프로토타입 프레임워크와 호환되지 않습니다.

JavaScript를 사용할 경우 다양한 루프 스타일에 대한 훌륭한 벤치마크가 있습니다.초기 최적화를 실행하지 말고, 그 정보를 머리 뒤에 남겨두어야 합니다.

나는 사용할 것이다.for in이치노이는 스크립트를 디버깅할 때 특히 유용합니다.예를 들어, 익숙하지 않은 물체를 탐색할 때 다음 줄을 쉽게 사용할 수 있습니다.

l = ''; for (m in obj) { l += m + ' => ' + obj[m] + '\n' } console.log(l);

오브젝트 전체의 내용(메서드 본문과 함께)이 Firebug 로그에 덤프됩니다.매우 편리합니다.

나는 내가 원하는 항목에 따라 다른 방법을 사용할 것이다.

현재 항목만 원하는 경우 foreach를 사용하십시오.

상대 비교를 위해 인덱서가 필요한 경우 를 사용합니다(예: 이전/다음 항목과 비교).

성능 차이는 전혀 눈치채지 못했습니다.성능 문제가 생길 때까지 기다렸다가 걱정하겠습니다.

여기 내가 한 일이 있다.

function foreach(o, f) {
 for(var i = 0; i < o.length; i++) { // simple for loop
  f(o[i], i); // execute a function and make the obj, objIndex available
 }
}

요.
및 요소 등)에서합니다.

foreach(o, function(obj, i) { // for each obj in o
  alert(obj); // obj
  alert(i); // obj index
  /*
    say if you were dealing with an html element may be you have a collection of divs
  */
  if(typeof obj == 'object') { 
   obj.style.marginLeft = '20px';
  }
});

제안할 수 있도록 방금 만든 것입니다.

(myArray의 var i)를 사용하면 오브젝트도 루프오버할 수 있습니다.키 이름이 포함되어 myArray[i]를 통해 속성에 액세스할 수 있습니다.또한 오브젝트에 추가하는 메서드도 루프에 포함됩니다.즉, jQuery 또는 프로토타입과 같은 외부 프레임워크를 사용하거나 오브젝트 프로토타입에 메서드를 직접 추가하는 경우, 어느 시점에서 이러한 메서드를 가리킵니다.

조심해!

스크립트 태그가 여러 개 있고 태그 속성의 정보를 검색하는 경우 단순 배열이 아니라 HTML Collection 개체이기 때문에 for 루프를 사용하여 .length 속성을 사용해야 합니다.

https://developer.mozilla.org/en/DOM/HTMLCollection

(var i in yourList)에 대해 foreach 문을 사용하면 대부분의 브라우저에서 HTML Collection의 properties와 메서드가 반환됩니다.

var scriptTags = document.getElementsByTagName("script");

for(var i = 0; i < scriptTags.length; i++)
alert(i); // Will print all your elements index (you can get src attribute value using scriptTags[i].attributes[0].value)

for(var i in scriptTags)
alert(i); // Will print "length", "item" and "namedItem" in addition to your elements!

getElementsByTagName이 NodeList를 반환해야 하는 경우에도 대부분의 브라우저는 HTML Collection을 반환하고 있습니다.https://developer.mozilla.org/en/DOM/document.getElementsByTagName

In loop on Arrays는 프로토타입과 호환되지 않습니다.향후 그 라이브러리를 사용할 필요가 있다고 생각되면 루프를 계속 사용하는 것이 좋습니다.

http://www.prototypejs.org/api/array

오브젝트, 프로토타입 및 어레이를 사용하는 '각자'에 관한 문제를 본 적이 있습니다.

각각은 오브젝트의 속성을 위한 것이지 어레이를 위한 것은 아니라는 것을 알고 있습니다.

코드 속도를 높이고 싶다면 어떻게 해야 할까요?

for( var i=0,j=null; j=array[i++]; foo(j) );

'for' 스테이트먼트 안에 'while' 논리가 있고 덜 중복되는 거죠또한 Firefox에는 Array.forEach와 Array.filter가 있습니다.

jsperf에 따라 짧고 최적의 코드는 다음과 같습니다.

keys  = Object.keys(obj);
for (var i = keys.length; i--;){
   value = obj[keys[i]];// or other action
}

for(;)는 어레이용입니다.[ 20 , 55 , 33 ]

for..in은 개체: {x:20,y:55:z:33)에 대한 것입니다.

병렬 처리를 이용하려면 어레이()를 사용합니다.각 루프에 대해

조심해!!!Mac OS에서 Chrome 22.0을 사용하고 있는데 구문별로 문제가 있습니다.

브라우저 문제인지 javascript 문제인지 코드에 오류가 있는지 모르겠지만 매우 이상합니다.오브젝트 밖에서는 완벽하게 동작합니다.

var MyTest = {
    a:string = "a",
    b:string = "b"
};

myfunction = function(dicts) {
    for (var dict in dicts) {
        alert(dict);
        alert(typeof dict); // print 'string' (incorrect)
    }

    for (var i = 0; i < dicts.length; i++) {
        alert(dicts[i]);
        alert(typeof dicts[i]); // print 'object' (correct, it must be {abc: "xyz"})
    }
};

MyObj = function() {
    this.aaa = function() {
        myfunction([MyTest]);
    };
};
new MyObj().aaa(); // This does not work

myfunction([MyTest]); // This works

둘 사이에는 중요한 차이가 있다.for-in은 객체의 속성에서 반복되므로 대소문자가 배열일 경우 해당 요소뿐만 아니라 "제거" 함수에서도 반복됩니다.

for (var i = 0; i < myArray.length; i++) { 
    console.log(i) 
}

//Output
0
1

for (var i in myArray) { 
    console.log(i) 
} 

// Output
0 
1 
remove

에 대한 찬스를 사용할 수 있습니다.if(myArray.hasOwnProperty(i))다만, 어레이를 반복할 때는, 항상 이것을 피하고, for(;;) 스테이트먼트를 사용합니다.

둘 다 매우 비슷하지만 작은 차이가 있습니다.

var array = ["a", "b", "c"];
array["abc"] = 123;
console.log("Standard for loop:");
for (var index = 0; index < array.length; index++)
{
  console.log(" array[" + index + "] = " + array[index]); //Standard for loop
}

이 경우 출력은 다음과 같습니다.

루프 표준:

어레이[0] = A

어레이 [1] = B

어레이 [2] = C

console.log("For-in loop:");
for (var key in array)
{
  console.log(" array[" + key + "] = " + array[key]); //For-in loop output
}

이 경우 출력은 다음과 같습니다.

포인 루프:

어레이 [1] = B

어레이 [2] = C

어레이[10] = D

어레이[ABC] = 123

언급URL : https://stackoverflow.com/questions/242841/javascript-for-in-vs-for