자바 스크립트의 각 배열을위한 각각의 배열
질문
JavaScript를 사용하여 배열의 모든 항목을 어떻게 반복 할 수 있습니까?
나는 이것과 같다고 생각했다 :
forEach(instance in theArray)
Thearray가 내 배열이지만, 이것은 잘못된 것 같습니다.
답변
TL; 박사
최선의 베팅은 보통입니다
루프 용 루프 (ES2015 + 전용, 사양 | MDN) - 간단하고 비동기 친화적 인
for (thearray의 const 요소) {
// ... ...`element` 사용 ...
}
foreach (ES5 + 전용, 사양 | MDN) (또는 그 친척들이 일부와 그런) - 비동기 친화적이지 않음 (그러나 세부 사항을보십시오)
thearray.foreach (요소 => {
// ... ...`element` 사용 ...
});
루프를위한 간단한 구식 - 비동기 친화적 인
for (index = 0, index 그러나 탐험하는 것이 더 많이 있습니다. JavaScript는 배열 및 배열과 유사한 객체를 통해 루핑을위한 강력한 의미 를가집니다.답변을 두 부분으로 나누었습니다. 정품 배열 옵션과 Arguments 객체, 다른 Iterable 객체 (ES2015 +), DOM 컬렉션 등과 같은 배열과 유사한 작업 옵션. 좋아, 우리 옵션을 살펴 보겠습니다. 실제 배열의 경우 5 가지 옵션 (기본적으로 영원히 지원되는 두 가지가 지원되며, ECMAScript 5 [ "ES5"에 의해 추가 된 또 다른 두 가지 추가 및 ECMAScript 2015 ( "ES2015", 일명 "ES6"에 추가) : (ES5, ES2015 모두를 볼 수 있지만 두 가지 모두는 여기에서 볼 수 있습니다. 현재 편집기의 초안은 항상 여기 있습니다.) 세부: 1. 사용 - 암시 적으로 반복자 사용 (ES2015 +) ES2015는 반복자와 Iterables를 JavaScript에 추가했습니다.배열은 반복적이므로 나중에 볼 수 있듯이 문자열,지도 및 세트는 물론 DOM 컬렉션 및 목록입니다.).Iterable 객체는 가치에 대한 반복기를 제공합니다.Iterator가 반환 한 값을 통해 새로운 명령문 루프를 사용합니다. const a = [ "a", "b", "c"];
for (a) {// 원하는 경우`alt '대신`let'을 사용할 수 있습니다.
console.log (요소);
}
// ㅏ
// b.
// 씨 그것은 그보다 더 간단하지 않습니다!덮개 아래에서 배열에서 반복자를 가져 오는 값을 통해 반복자가 반환하는 값을 통해 루프를 가져옵니다.어레이에서 제공하는 반복자는 시작이 시작되기 시작하여 배열 요소의 값을 제공합니다. 요소가 각 루프 반복에 스코프 된 방식을 알 수 있습니다.루프의 끝 부분이 없기 때문에 루프의 끝이 실패하면 요소를 사용하려고합니다. 이론적으로, 루프의 루프는 여러 함수 호출 (반복자를 가져오고 각 값을 얻는 것)을 얻는 것입니다.그것이 사실 일 때조차도 걱정할 것이 아무것도 아니며, 기능 호출은 현대 자바 스크립트 엔진에서 매우 저렴합니다 (나는 그것을 조사 할 때까지, 세부 사항을 들여다 보았을 때까지 위조를 위해 나를 괴롭혔다).그러나 JavaScript 엔진은 배열과 같은 원시 반복기를 처리 할 때 해당 호출을 최적화합니다 (성능 - 중요한 코드). 전적으로 비스듬한 비공기입니다.시리즈 (병렬로가 아닌) 루프 본문에 작업이 필요한 경우 루프 본문에서 기다리고 있으면 계속하기 전에 약속이 정착 할 때까지 기다릴 것입니다.바보 같은 예가 있습니다. 기능 지연 (MS) {
새로운 약속 반환 (해결 => {
SetTimeout (해결, MS);
});
}
비동기 기능 showslowly (메시지) {
for (메시지의 const 메시지) {
기다리고 지연 (400);
console.log (메시지);
}
}
showslowly ([
"그래서", "long", ",", ",", ",", ",", "," ","물고기! "
]);
// 우리가 결코 거부하지 않기 때문에 생략했기 때문에 생략되었습니다. 각 단어가 각각 지연으로 나타나는 방식에 주목하십시오. 그것은 코딩 스타일의 문제이지만, 뱃머리를 통해 루프 할 때 가장 먼저 도달 할 수 있습니다. 2. foreach 및 관련 ES5가 추가 한 배열 기능에 액세스 할 수있는 막연하게 현대적인 환경 (그래서 IE8이 아닙니다)에서는 동기 코드를 다루는 경우 foreach (spec) mdn)를 사용할 수 있습니다 (또는 필요 없음비동기 프로세스가 루프 중에 완성 될 때까지 기다리십시오) : const a = [ "a", "b", "c"];
a.foreach ((요소) => {
console.log (요소);
}); foreach는 콜백 함수를 수락하고 선택적으로 해당 콜백 (위에 사용되지 않음)을 호출 할 때 사용할 값입니다.콜백은 배열의 각 요소에 대해 호출되므로 스파 스 배열에서 존재하지 않는 요소를 건너 뜁니다.위의 하나의 매개 변수 만 사용했지만 콜백은 해당 요소의 요소, 해당 요소의 인덱스, 반복하는 배열에 대한 참조를 사용하는 세 개의 인수로 호출됩니다 (기능에 대한 기능이없는 경우)능숙한). Foreach는 포함 된 범위에서 인덱싱 및 가치 변수를 선언 할 필요가없는 이점이 있습니다.이 경우 반복 함수에 대한 인수로 제공되며 반복적으로 멋지게 범위를 지정했습니다. foreach와는 달리 Foreach는 비동기 기능을 이해하지 못하고 기다리고있는 단점이 있습니다.비동기 기능을 콜백으로 사용하는 경우 Foreach는 계속하기 전에 해당 함수의 약속이 정착하기를 기다리지 않습니다.대신 위조를위한 비동기 예제는 다음과 같습니다. 초기 지연이 어떻게 지연되는지 알지 못하지만 모든 텍스트가 대기하는 대신 즉시 나타납니다. 기능 지연 (MS) {
새로운 약속 반환 (해결 => {
SetTimeout (해결, MS);
});
}
비동기 기능 showslowly (메시지) {
// 잘못된, 계속하기 전에 기다리지 않습니다,
// 약속 거부를 처리하지 않습니다
messages.foreach (Async message => {
기다리고 지연 (400);
console.log (메시지);
});
}
showslowly ([
"그래서", "long", ",", ",", ",", ",", "," ","물고기! "
]);
// 우리가 결코 거부하지 않기 때문에 생략했기 때문에 생략되었습니다. foreach는 "루프를 통한 루프"함수이지만 ES5는 다음을 포함하여 어레이 및 작업을 수행하고 일을 수행합니다. 모든 (spec | mdn) - 콜백이 falsy 값을 반환하는 처음으로 루프를 멈추게합니다.
일부 (spec | mdn) - 콜백이 진실 값을 반환하는 처음으로 루프를 멈추게합니다.
필터 (spec | MDN) - 콜백이 진실 값을 반환하는 요소를 포함하여 새 배열을 만듭니다.
지도 (spec | mdn) - 콜백에서 반환 한 값에서 새 배열을 만듭니다.
줄이기 (spec | mdn) - 이전 값을 전달하여 콜백을 반복적으로 호출하여 값을 빌드합니다.자세한 내용은 사양을 참조하십시오
Duclederight (Spec | MDN) - 감소하는 것과 같은 경우, 오름차순보다는 내림차순으로 작동합니다. foreach와 마찬가지로 콜백으로 비동기 기능을 사용하는 경우 해당 기능의 약속이 정착하기 위해 기다리지 않습니다.그것의 의미는: Async 함수를 사용하면 콜백은 정말의 가치라는 것처럼 반환 된 약속을 치료할 수 있으므로 모든 것, 일부 및 필터에 적합하지 않습니다.그들은 약속이 정착하고 이행의 가치를 사용하기를 기다리지 않습니다.
Async 함수를 사용하면 콜백을 사용하는 것이 목표가 약속의 배열로 전환하는 것입니다. 아마도 약속 조합업자 함수 중 하나 (약속, Promise.race, Promise.Allsettled,또는 약속.
Async 함수를 사용하면 콜백이 축소 또는 감속기에 거의 적절하지 않습니다. 왜냐하면 콜백은 항상 약속을 반환합니다.그러나 감소를 사용하는 배열로부터 약속을 구축하는 관용구가 있습니다 (const promise = array.reduce ((p, 요소) => p.then (/ * ... 뭔가를 사용하여 뭔가를 사용하십시오 ... */));); 그러나 일반적으로 비동기 기능에서 루프의 경우 또는 디버그가 더 쉽고 쉽게 사용할 수 있습니다. 3. 루프를 간단하게 사용하십시오 때로는 오래된 방법이 최고입니다. const a = [ "a", "b", "c"];
for (index = 0; index 배열의 길이가 루프 중에 변경되지 않고 성능에 민감한 코드가 발생하면 길이가 최대 정면을 잡는 약간 더 복잡한 버전이 작은 비트 더 빨리있을 수 있습니다. const a = [ "a", "b", "c"];
for (index = 0, len = a.length; 및 / 또는 뒤로 계산 : const a = [ "a", "b", "c"];
for (index = a.length - 1, index> = 0; - index) {
const 요소 = A [색인];
console.log (요소);
} 그러나 현대 자바 스크립트 엔진에서는 주스의 마지막 비트를 끼치는 것이 드뭅니다. ES2015 이전에는 블록 수준 범위가 아닌 함수 수준 범위 만 있기 때문에 루프 변수가 포함 된 범위에 포함되어야했습니다.그러나 위의 예에서 보았 듯이 루프만으로 변수를 범위로 확장 할 수 있습니다.그리고 그렇게 할 때 인덱스 변수는 각 루프 반복에 대해 다시 작성됩니다. 루프 본문에서 생성 된 폐쇄는 해당 특정 반복의 인덱스에 대한 참조를 유지하므로 루프의 오래된 "클로저"문제점 "문제점 : // (`querySelectorAll`에서`nodelist`는 배열이고)
const divs = document.querySelectorAll ( "div");
for (index = 0, index 위의 내용을 클릭하면 위의 내용을 누르면 첫 번째와 "인덱스는"인덱스는 다음과 같습니다.var를 사용하면 var (항상 "인덱스가 표시되는 것")를 사용하면 이렇게하면 작동하지 않습니다. 루프를 위해 루프가 잘 작동하는 것처럼 루프가 잘 작동합니다.다음은 A에 대한 루프를 사용하는 이전 예제입니다. 기능 지연 (MS) {
새로운 약속 반환 (해결 => {
SetTimeout (해결, MS);
});
}
비동기 기능 showslowly (메시지) {
for (i = 0; i 4. 정확하게 사용하십시오 FOR -IN은 배열을 통해 루핑하는 것이 아니라 객체 속성의 이름을 반복하는 것입니다.배열이 객체라는 사실의 부산물로 배열을 통해 배열을 통해 작동하는 것처럼 보입니다. 그러나 배열 인덱스를 통해 루프를 루프 (상속 된 것 포함하여 포함)를 통해 루프를 루프합니다.(그것은 또한 명령이 지정되지 않았다는 것입니다. 이제이 다른 답변에 대한 세부 사항입니다. 그러나 주문이 이제 지정 되더라도 규칙은 복잡하고 예외가 있고 주문에 의존하는 것은 아닙니다.모범 사례.) 배열에 대한 유일한 실제 사용 사례는 다음과 같습니다. 그것은 거대한 틈이있는 스파 스 배열이거나
배열 개체에서 요소가 아닌 속성을 사용하고 루프에 포함시킬 것입니다. 그 첫 번째 예제에서만 보는 것 : 적절한 안전 장치를 사용하는 경우 해당 드문 드문 배열 요소를 방문하려면 즉시 사용할 수 있습니다. //`a`는 스파 스 배열입니다
const a = [];
A [0] = "A";
A [10] = "B";
A [10000] = "C";
for (ath in in a) {
if (object.hasown (a, name) &&/이 수표는
/^0$ |^[1-9]D*$/.test(Name) &&/ 설명합니다
이름 <= 4294967294 // 아래
) {
const 요소 = a [name];
console.log (A [이름]);
}
} 세 가지 수표에 유의하십시오. That the object has its own property by that name (not one it inherits from its prototype; this check is also often written as That the name is all decimal digits (e.g., normal string form, not scientific notation), and That the name's value when coerced to a number is <= 2^32 - 2 (which is 4,294,967,294). Where does that number come from? It's part of the definition of an array index in the specification. Other numbers (non-integers, negative numbers, numbers greater than 2^32 - 2) are not array indexes. The reason it's 2^32 - 2 is that that makes the greatest index value one lower than 2^32 - 1, which is the maximum value an array's ... 그게 말했듯이, 대부분의 코드는 HasownProperty 검사 만 수행합니다. 물론 인라인 코드에서는 그렇게하지 않을 것입니다.유틸리티 함수를 작성합니다.아마도: // foreach`가없는 앤티듬한 환경을위한 유틸리티 기능
const hasown = object.prototype.hasownproperty.call.bind (object.prototype.hasownproperty);
const rexnum = / ^ 0 $ | ^ [1-9] \ d * $ /;
함수 sparseeach (배열, 콜백, thisArg) {
for (배열의 const 이름) {
const index = + name;
if (hasown (a, name) &&
rexnum.test (이름) &&
색인 <= 4294967294
) {
callback.call (thisarg, array [name], 색인, 배열);
}
}
}
const a = [];
A [5] = "5";
A [10] = "10";
A [100000] = "1 십만";
a.b = "꿀벌";
sparseeach (a, (값, 색인) => {
console.log ( "+ = + +"에서 "+ 값 + 값);
}); 그렇듯이, 그 안에있는 작업이 시리즈로 수행되어야하는 경우 비동기식 함수에서 잘 작동합니다. 기능 지연 (MS) {
새로운 약속 반환 (해결 => {
SetTimeout (해결, MS);
});
}
비동기 기능 showslowly (메시지) {
for (messages의 const 이름) {
if (message.hasownproperty (name)) {// 거의 항상 이것은 유일한 체크 사람들입니다.
const 메시지 = 메시지 [이름];
기다리고 지연 (400);
console.log (메시지);
}
}
}
showslowly ([
"그래서", "long", ",", ",", ",", ",", "," ","물고기! "
]);
// 우리가 결코 거부하지 않기 때문에 생략했기 때문에 생략되었습니다. 5. 반복자를 명시 적으로 사용하십시오 (ES2015 +) 용도로 Amplicater에서 사용하는 반복자는 모든 Scut 작업을 수행합니다.때로는 반복자를 명시 적으로 사용할 수 있습니다.다음과 같습니다. const a = [ "a", "b", "c"];
const it = a.values ();// 또는`const it = a [symbol.iterator] ();`당신이 원한다면
진입하자;
while (! (entry = it.next ()). 완료) {
const 요소 = Entry.Value;
console.log (요소);
} 반복자는 사양의 반복자 정의와 일치하는 객체입니다.그 다음 방법은 전화를 걸 때마다 새 결과 개체를 반환합니다.결과 객체에는 완료되었는지 여부와 해당 반복 값이있는 속성 값을 알려주는 속성이 있습니다.(FALSE이면 선택 사항은 선택 사항이 없으면 값이 지정되지 않으면 선택 사항입니다.) 가치에 대해 얻는 것은 반복자에 따라 다릅니다.배열에서 기본 반복자는 각 배열 요소의 값 ( "a", "b"및 "c")의 값을 제공합니다.배열에는 반환자를 반환하는 세 가지 다른 방법이 있습니다. 값 () : 기본 반복자를 반환하는 [symbol.iterator] 메서드의 별명입니다.
keys () : 배열에 각 키 (인덱스)를 제공하는 반복자를 리턴합니다.위의 예에서 "0", "1", 다음 "2"(예, 문자열로)를 제공합니다.
항목 () : [Key, Value] 배열을 제공하는 Iterator를 리턴합니다. Iterator 객체가 다음을 호출 할 때까지 진행하지 않으므로 비동기 기능 루프에서 잘 작동합니다.다음은 ITerator를 명시 적으로 사용하는 이전의 예입니다. 기능 지연 (MS) {
새로운 약속 반환 (해결 => {
SetTimeout (해결, MS);
});
}
비동기 기능 showslowly (메시지) {
const it = message.values ()
while (! (entry = it.next ()). 완료) {
기다리고 지연 (400);
const 요소 = Entry.Value;
console.log (요소);
}
}
showslowly ([
"그래서", "long", ",", ",", ",", ",", "," ","물고기! "
]);
// 우리가 결코 거부하지 않기 때문에 생략했기 때문에 생략되었습니다. 배열과 같은 개체의 경우 True Arrays를 제외하고 모든 숫자 이름 : NodeList 인스턴스, HTMLCollection 인스턴스, 인수 개체 등의 길이 속성과 속성이있는 배열과 유사한 개체가 있습니다. 위의 대부분의 옵션을 사용하십시오 어레이 접근 방식의 적어도 일부 및 가능성이 가장 많거나 훨씬 훨씬 적어도 배열과 같은 객체에는 똑같이 적용됩니다. Use Here's an example of looping through const divs = document.querySelectorAll ( "div");
for (const div div divs) {
div.TextContent = math.random ();
}
Use The various functions on Suppose you wanted to use (Note, though, that you could just use If you're going to do that a lot, you might want to grab a copy of the function reference into a variable for reuse, e.g.: Use a simple Perhaps obviously, a simple Use an iterator explicitly (ES2015+) See #1. 당신은 (안전 조치와 함께)을 위해 벗어날 수 있지만, 이러한 모든 더 적절한 옵션을 통해 시도 할 이유가 없습니다. 진정한 배열을 만듭니다 다른 시간에 배열 모양 오브젝트를 실제 배열로 변환 할 수 있습니다.그 일은 놀랍게도 쉽습니다 : Use ...takes the The mapping function is handy if you were going to map the contents in some way. For instance, if you wanted to get an array of the tag names of the elements with a given class: Use spread syntax ( It's also possible to use ES2015's spread syntax. Like So for instance, if we want to convert a Use the We can use the So for instance, if we want to convert a (If you still have to handle IE8 [ouch], will fail; IE8 didn't let you use host-provided objects as 호스트 제공 객체에 대한주의 사항 호스트가 제공된 배열과 유사한 개체 (예 : DOM 컬렉션 및 JavaScript 엔진이 아닌 브라우저에서 제공되는 것과 같은 브라우저에서 제공되는)를 사용하여 Array.prototype 함수를 사용하는 경우 IE8과 같은 쓸모없는 브라우저는 반드시 그런 식으로 처리 할 수 없었습니다.지원을 위해 대상 환경에서 테스트해야합니다.그러나 그것은 막연하게 현대적인 브라우저의 문제가 아닙니다.(브라우저가 아닌 환경의 경우 자연스럽게 환경에 따라 다릅니다.) 답변 참고 :이 답변은 절망적으로 날짜가 없습니다.보다 현대적인 접근 방식을 위해 배열에서 사용할 수있는 방법을 살펴보십시오.관심있는 방법은 다음과 같습니다. 각각
지도
필터
지퍼
줄이다
모든
일부 JavaScript에서 배열을 반복하는 표준 방법은 바닐라 용 루프입니다. 그러나,이 접근법은 밀집한 배열을 가지고 있고 각 인덱스가 요소가 차지하는 경우에만 좋습니다.배열이 희소하는 경우 배열에 실제로 존재하지 않는 많은 인덱스를 반복 할 수 있기 때문에이 접근 방식의 성능 문제로 실행할 수 있습니다.이 경우, A의 인 - 루프가 더 좋은 아이디어 일 수 있습니다.그러나 for..in-loop이 레거시 브라우저에서 열거되거나 추가로 인한 경우가 있으므로 배열의 원하는 속성 만 작동하도록 해당 보호 장치를 사용해야합니다.속성은 열거 형으로 정의됩니다. ECMAScript 5에서는 어레이 프로토 타입에 대해 foreach 메소드가있을 것이지만 레거시 브라우저에서는 지원되지 않습니다.따라서 일관되게 사용할 수 있도록이를 지원하는 환경 (예 : 서버 측 JavaScript 용 Node.js)을 사용하거나 "폴리 필"을 사용해야합니다.그러나이 기능에 대한 폴리 필 틸은 사소한이며 코드를 읽으려면 코드를 쉽게 읽을 수 있으므로 포함 할 수 있습니다. 답변 jQuery 라이브러리를 사용하는 경우 jquery.each를 사용할 수 있습니다. 편집하다 : 질문에 따라 사용자가 jQuery 대신 JavaScript에 코드를 원하므로 편집이 답변 뒤로 루프 나는 루프에 대한 반대가 언급을받을 가치가 있다고 생각합니다. 장점 : 임시 LEN 변수를 선언하거나 각 반복마다 Array.Length와 비교할 필요가 없습니다. 그 중 하나는 최적화 일 수 있습니다.
DOM에서 형제를 역순으로 제거하면 일반적으로보다 효율적입니다. (브라우저는 내부 배열에서 요소를 덜 시프립니다.)
루프를 반복하는 동안 배열을 수정하는 경우 I 인덱스 i (예를 들어, Array [i]에서 항목을 제거하거나 삽입하십시오) 앞으로의 루프는 왼쪽으로 이동 한 항목을 위치 I로 건너 뛸 수 없거나 i 번째를 다시 처리합니다. 바로 이동 한 항목. 전통적인 루프에서는 내가 처리가 필요한 다음 항목을 가리 키도록 1을 가리킬 수 있지만 단순히 반복 방향을 반전하는 것은 종종 더 간단하고 우아한 솔루션입니다.
마찬가지로 중첩 된 DOM 요소를 수정하거나 제거 할 때 역방향으로 처리하면 오류가 우회 할 수 있습니다. 예를 들어 자식을 취급하기 전에 부모 노드의 InnerHTML을 수정하는 것을 고려하십시오. 자식 노드에 도달 할 때까지 부모의 InnerHTML이 작성된 경우 새로 생성 된 자식으로 대체 된 DOM에서 DOM에서 분리됩니다.
사용할 수있는 다른 옵션 중 일부를 입력하고 읽는 것이 짧습니다. 위조 ()와 ES6의 ES6을 잃지 만 ... 단점 : 항목을 역순으로 처리합니다.결과에서 새로운 배열을 구축하거나 화면에 물건을 인쇄하고있는 경우 자연스럽게 출력은 원래 순서와 관련하여 역전됩니다.
주문을 유지하기 위해 첫 번째 자녀로 형제를 반복적으로 삽입하는 것은 덜 효율적입니다.(브라우저는 오른쪽을 바로 이동해야합니다.) DOM 노드를 효율적으로 만들고 순서대로 만들려면 정상적으로 루프를 루프 (그리고 "문서 조각"을 사용하십시오).
역 루프는 주니어 개발자에게 혼란 스럽습니다.(Outlook에 따라 이점을 고려할 수 있습니다.) 항상 그것을 사용해야합니까? 일부 개발자는 앞으로 루프를 루프 할 이유가 없으면 기본적으로 루프를 사용합니다. 성능 향상은 일반적으로 중요하지 않지만, 그것은 일종의 비명을 지른다 : "그냥 목록의 모든 항목에 이렇게하십시오. 나는 주문을 상관하지 않습니다!" 그러나 실제로 실제로 의도의 신뢰할 수있는 징후가 아니며 주문을 신경 쓰지 않을 때 그 일과 구별 할 수 없기 때문에 정말로 반전해야합니다.그래서 실제로 또 다른 구조물은 "상관 없음"의도를 정확하게 표현할 필요가있을 것이지만, ECMAScript를 비롯한 대부분의 언어에서는 현재 사용할 수 없지만, 예를 들어 foreachunordered ()를 포함 할 수 있습니다. 주문이 중요하지 않고 효율성은 (게임이나 애니메이션 엔진의 가장 안쪽의 루프의 루프에서) 걱정이되는 경우, 이동할 수있는 패턴으로 루프 역을 사용할 수 있습니다.기존 코드에서 반대로 반전을 보는 것은 반드시 명령이 관련성이 없음을 의미하지는 않습니다! foreach ()를 사용하는 것이 낫습니다. 일반적으로 명확성과 안전이 더 큰 관심사 인 더 높은 수준의 코드는 배열 :: foreach를 루핑을위한 기본 패턴으로 사용하는 것으로 추천했습니다 (요즘에는 .....of에 사용하기를 선호하는 일).역방향 루프 위험을 선호하는 이유는 다음과 같습니다. 읽는 것이 더 명확합니다.
그것은 내가 블록 내에서 시프트되지 않을 것이라는 것을 나타냅니다 (항상 루프를 위해 오랫동안 숨어있을 수 있습니다).
그것은 당신에게 폐쇄를위한 무료 범위를 제공합니다.
그것은 지역 변수의 누출과 우발적 인 충돌 (그리고 돌연변이의 돌연변이)을 감소시킵니다. 그런 다음 코드에서 루프 반향을 보면, 즉 좋은 이유로 (위에 설명 된 이유 중 하나 일) 힌트 인 힌트입니다.루프 전통적인 전달을 보는 것은 시프 팅이 발생할 수 있음을 나타낼 수 있습니다. (의도에 대한 논의가 당신에게 의미가 없다면, 당신과 당신의 코드는 프로그래밍 스타일과 당신의 두뇌에 대한 Crockford의 강의를 관찰 할 수 있습니다.) 그것은 이제는 .....of에 사용하는 것이 더 낫습니다! for.of 또는 foreach ()가 바람직한 지 여부에 대한 논쟁이 있습니다. 최대 브라우저 지원을 위해, ... for..of는 반복자 용 폴리 필이 필요하므로 앱을 약간 느리게 만져서 다운로드 할 수 있습니다.
그 이유 때문에 (지도 및 필터의 사용을 장려하기 위해 일부 프런트 엔드 스타일 가이드가 완전히 ...의 프런트 엔드 스타일 가이드가 없습니다!
그러나 위의 문제는 Node.js 응용 프로그램에 적용되지 않습니다. 여기서 for..of는 이제 잘 지원됩니다.
또한 위대한 () 안에서 작동하지 않습니다.for..of를 사용하는 것은이 경우 가장 일반적인 패턴입니다. 개인적으로 성능이나 미니 화가 주요 관심사가되지 않는 한, 나는 읽는 것이 가장 쉽게 보이는 것을 사용하는 경향이 있습니다.그래서 요즘 나는 foreach () 대신에 사용하기를 선호하지만 항상지도 나 필터를 사용하거나 적용 할 때 찾거나 일부를 찾을 것입니다.
(동료들을 위해서는 저는 거의 사용하지 않습니다.) 어떻게 작동합니까? i-- 중간 조항이 (보통 비교를 보는 경우), 마지막 절이 비어 있음을 알게 될 것입니다 (일반적으로 i ++를 보는 경우).즉, I-는 계속되는 상태로 사용됩니다.결정적으로, 그것은 각 반복 전에 실행되고 점검됩니다. 분해가없는 Array.Length에서 어떻게 시작할 수 있습니까?
i-- 각 반복 전에 첫 번째 반복 전에 실행되기 때문에 Array.Length - 1의 항목에 실제로 액세스 할 것입니다. 배열 아웃되지 않은 항목 정의되지 않은 항목의 문제를 피할 수 있습니다.
Index 0 이전에 반복을 멈추지 않는 이유는 무엇입니까?
루프는 조건 i-- 조건이 틀린 값으로 평가 될 때 반복을 멈 춥니 다 (0을 산출 할 때).
트릭은 -i와 달리 다음과 같이 일차적 인 I- 운영자는 감소하지만 감소 전의 가치를 얻을 수 있습니다. 콘솔은 다음을 보여줄 수 있습니다.
> var i = 5; [I, I-, I];
[5, 5, 4]
그래서 최종 반복에서 나는 이전에 1이었고 i-- 표현은 0으로 바뀌지 만 실제로 1 (진리)을 산출하므로 상태가지나갑니다. 다음 반복에서 i-- i-는 -1을 변경하지만 0 (거짓)을 생성하여 실행이 루프의 바닥에서 즉시 드롭 밖으로 떨어지게합니다.
루프 용 전통적인 전달에서 i ++ 및 ++ i는 교환 가능합니다 (더글러스 Crockford가 지적함). 그러나 루프의 역순으로, 우리의 감소는 또한 우리의 조건 표현이기 때문에, 우리는 INDEX 0에서 항목을 처리하고자하는 경우 - i-를 고수해야합니다. 하찮은 일 어떤 사람들은 루프를 위해 반전에 작은 화살을 그립니다. 윙크로 끝납니다. 크레딧은 루프 반향의 혜택과 공포를 보여주기 위해 나에게 익숙해 져야합니다. 답변 일부 C 스타일의 언어는 위조를 사용하여 열거 형을 통해 루프를 루프합니다.자바 스크립트에서 이것은 for..in 루프 구조로 수행됩니다. 캐치가 있습니다.for..in은 각 객체의 열거 형 멤버와 그 구성원을 프로토 타입으로 루프합니다.개체의 프로토 타입을 통해 상속 된 값을 읽지 않도록하려면 속성이 개체에 속한지 확인하기 만하면됩니다. 또한 ECMAScript 5는 Calback을 사용하여 배열을 열거하는 데 사용할 수있는 Array.Prototype에 foreach 메소드를 추가했습니다. 콜백이 false를 반환 할 때 Array.prototype.foreach가 끊지는 않습니다.jQuery와 Underscore.js는 단락 될 수있는 루프를 제공하기 위해 각각에 대한 자신의 변형을 제공합니다. 답변 배열을 반복하려는 경우 표준 3 부분을 루프에 사용하십시오. myArray.Length를 캐싱하거나 뒤로 반복하여 일부 성능 최적화를 얻을 수 있습니다.
for-of (use an iterator implicitly) (ES2015+)forEach and related (ES5+)for loopfor-in correctly
a.hasOwnProperty(name) but ES2022 adds Object.hasOwn which can be more reliable), andlength can have. (E.g., an array's length fits in a 32-bit unsigned integer.)
for-of (use an iterator implicitly) (ES2015+)for-of uses the iterator provided by the object (if any). That includes host-provided objects (like DOM collections and lists). For instance, HTMLCollection instances from getElementsByXYZ methods and NodeLists instances from querySelectorAll both support iteration. (This is defined quite subtly by the HTML and DOM specifications. Basically, any object with length and indexed access is automatically iterable. It doesn't have to be marked iterable; that is used only for collections that, in addition to being iterable, support forEach, values, keys, and entries methods. NodeList does; HTMLCollection doesn't, but both are iterable.)div elements:
forEach and related (ES5+)Array.prototype are "intentionally generic" and can be used on array-like objects via Function#call (spec | MDN) or Function#apply (spec | MDN). (If you have to deal with IE8 or earlier [ouch], see the "Caveat for host-provided objects" at the end of this answer, but it's not an issue with vaguely-modern browsers.)forEach on a Node's childNodes collection (which, being an HTMLCollection, doesn't have forEach natively). You'd do this:Array.prototype.forEach.call(node.childNodes, (child) => {
// Do something with `child`
});
for-of on node.childNodes.)// (This is all presumably in a module or some scoping function)
const forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach);
// Then later...
forEach(node.childNodes, (child) => {
// Do something with `child`
});
for loopfor loop works for array-like objects.
Array.fromArray.from (spec) | (MDN) (ES2015+, but easily polyfilled) creates an array from an array-like object, optionally passing the entries through a mapping function first. So:const divs = Array.from(document.querySelectorAll("div"));
NodeList from querySelectorAll and makes an array from it.// Typical use (with an arrow function):
const divs = Array.from(document.querySelectorAll(".some-class"), element => element.tagName);
// Traditional function (since `Array.from` can be polyfilled):
var divs = Array.from(document.querySelectorAll(".some-class"), function(element) {
return element.tagName;
});
...)for-of, this uses the iterator provided by the object (see #1 in the previous section):const trueArray = [...iterableObject];
NodeList into a true array, with spread syntax this becomes quite succinct:const divs = [...document.querySelectorAll("div")];
slice method of arraysslice method of arrays, which like the other methods mentioned above is "intentionally generic" and so can be used with array-like objects, like this:const trueArray = Array.prototype.slice.call(arrayLikeObject);
NodeList into a true array, we could do this:const divs = Array.prototype.slice.call(document.querySelectorAll("div"));
this like that.)
var length = arr.length,
element = null;
for (var i = 0; i < length; i++) {
element = arr[i];
// Do something with element
}
$.each(yourArray, function(index, value) {
// do your stuff here
});
var length = yourArray.length;
for (var i = 0; i < length; i++) {
// Do something with yourArray[i].
}
for (var i = array.length; i--; ) {
// process array[i]
}
for (var i = 0; i < array.length; i++) { ... } // Forwards
for (var i = array.length; i--; ) { ... } // Reverse
for (var i = array.length; i --> 0 ;) {
var index,
value;
for (index in obj) {
value = obj[index];
}
for (i in obj) {
if (obj.hasOwnProperty(i)) {
//do stuff
}
}
arr.forEach(function (val, index, theArray) {
//do stuff
});
for (var i = 0; i < myArray.length; i++) {
var arrayItem = myArray[i];
}
최근댓글