No error , No gain

Question 1

for 루프를 사용하여 배열의 객체를 순회할 수 있습니다.

 String[] myStringArray = {"Hello", "World"}; for (String s : myStringArray) { // Do something }

JavaScript에서도 같은 작업을 수행할 수 있습니까?

Question 2

세 가지 주요 옵션:

for (var i = 0; i < xs.length; i++) { console.log(xs[i]); }
xs.forEach((x, i) => console.log(x));
for (const x of xs) { console.log(x); }

자세한 예는 아래와 같습니다.

1. 순차 `for` 루프:

 var myStringArray = ["Hello","World"]; var arrayLength = myStringArray.length; for (var i = 0; i < arrayLength; i++) { console.log(myStringArray[i]); //Do something }

장점

모든 환경에서 작동
break 및 continue 흐름 제어 문을 사용할 수 있습니다.

단점

너무 장황하다
피할 수 없는
오프바이원 오류가 발생 하기 쉽습니다(때때로 펜스 포스트 오류 라고도 함).

2. `Array.prototype.forEach` :

ES5 사양은 많은 유익한 어레이 방법을 도입했습니다. 그 중 하나인 Array.prototype.forEach 는 배열을 반복하는 간결한 방법을 제공했습니다.

 const array = ["one", "two", "three"] array.forEach(function (item, index) { console.log(item, index); });

ES5 사양이 출시된 지 거의 10년(2009년 12월)으로 데스크탑, 서버, 모바일 환경의 거의 모든 최신 엔진에 구현되어 있어 안심하고 사용할 수 있습니다.

그리고 ES6 화살표 함수 구문을 사용하면 훨씬 더 간결해집니다.

 array.forEach(item => console.log(item));

화살표 기능은 고대 플랫폼(예: Internet Explorer 11 )을 지원할 계획이 아니라면 널리 구현됩니다. 당신은 또한 가도 안전합니다.

장점

매우 짧고 간결합니다.
선언적

단점

break / continue 사용할 수 없습니다.

일반적으로 다음과 같이 반복하기 전에 배열 요소를 필터링하여 명령형 루프 break 필요성을 대체할 수 있습니다.

 array.filter(item => item.condition < 10) .forEach(item => console.log(item))

다른 배열을 만들기 위해 배열을 반복하는 map 을 사용해야 합니다. 이 안티 패턴을 너무 많이 보았습니다.

안티 패턴:

 const numbers = [1,2,3,4,5], doubled = []; numbers.forEach((n, i) => { doubled[i] = n * 2 });

지도의 적절한 사용 사례:

 const numbers = [1,2,3,4,5]; const doubled = numbers.map(n => n * 2); console.log(doubled);

또한 배열을 값으로 줄이려 는 경우(예: 숫자 배열을 합산하려는 경우) reduce 메서드를 사용해야 합니다.

안티 패턴:

 const numbers = [1,2,3,4,5]; const sum = 0; numbers.forEach(num => { sum += num });

감소의 적절한 사용:

 const numbers = [1,2,3,4,5]; const sum = numbers.reduce((total, n) => total + n, 0); console.log(sum);

3. ES6 `for-of` 문:

ES6 표준은 반복 가능한 객체의 개념을 도입하고 데이터 순회를 위한 새로운 구조인 for...of 문을 정의합니다.

이 명령문은 모든 종류의 반복 가능한 개체와 생성기( \[Symbol.iterator\] 속성이 있는 모든 개체)에 대해 작동합니다.

배열 객체는 정의에 따라 ES6에서 기본 제공 iterable이므로 다음 명령문을 사용할 수 있습니다.

 let colors = ['red', 'green', 'blue']; for (const color of colors){ console.log(color); }

장점

매우 다양한 개체를 반복할 수 있습니다.
일반적인 흐름 제어 문( break / continue )을 사용할 수 있습니다.
직렬 비동기 값을 반복하는 데 유용합니다.

단점

이전 브라우저를 대상으로 하는 경우 변환된 출력 이 놀라울 수 있습니다 .

다음 용도로 사용하지 마십시오 `for...in`

for...in 문의 사용을 제안하지만 반복 배열의 경우 for-in 을 피해야 하므로 해당 문은 개체 속성 을 열거하기 위한 것입니다.

다음과 같은 이유로 배열과 유사한 객체에는 사용하면 안 됩니다.

반복 순서는 보장되지 않습니다. 배열 인덱스는 숫자 순서로 방문할 수 없습니다.
상속된 속성도 열거됩니다.

두 번째 요점은 많은 문제를 일으킬 수 있다는 것입니다. 예를 들어 Array.prototype 개체를 확장하여 거기에 메서드를 포함하면 해당 속성도 열거됩니다.

예를 들어:

 Array.prototype.foo = "foo!"; var array = ['a', 'b', 'c']; for (var i in array) { console.log(array[i]); }

위의 코드는 콘솔 로그 "a", "b", "c" 및 "foo!"입니다.

네이티브 프로토타입 보강에 크게 의존하는 라이브러리(예: MooTools )를 사용하는 경우 특히 문제가 될 수 있습니다.

앞서 말했듯이 for-in 문은 개체 속성을 열거 하는 데 사용됩니다. 예를 들면 다음과 같습니다.

 var obj = { "a": 1, "b": 2, "c": 3 }; for (var prop in obj) { if (obj.hasOwnProperty(prop)) { // or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety... console.log("prop: " + prop + " value: " + obj[prop]) } }

위의 예에서 hasOwnProperty 메서드를 사용하면 자신의 속성 만 열거할 수 있습니다. 즉, 객체가 물리적으로 가지고 있는 속성만 있고 상속된 속성은 없습니다.

다음 기사를 읽는 것이 좋습니다.

열거 대 반복

Question 3

예, 구현을 가정하는 것이 포함 for ... of 도입 기능 ECMAScript를 2015 요즘 꽤 안전한 가정이다 (이하 "하모니"자료) ....

다음과 같이 작동합니다.

 // REQUIRES ECMASCRIPT 2015+ var s, myStringArray = ["Hello", "World"]; for (s of myStringArray) { // ... do something with s ... }

또는 ECMAScript 2015도 블록 범위 변수를 제공하기 때문에 더 좋습니다.

 // REQUIRES ECMASCRIPT 2015+ const myStringArray = ["Hello", "World"]; for (const s of myStringArray) { // ... do something with s ... } // s is no longer defined here

(변수 s 는 각 반복마다 다르지만 수정되지 않는 한 루프 본문 내에서 const

희소 배열에 대한 참고 사항: JavaScript의 배열은 실제로 length 로 보고된 만큼 많은 항목을 저장하지 않을 수 있습니다. 보고된 숫자는 값이 저장된 가장 높은 인덱스보다 1이 더 큽니다. 배열이 길이로 표시되는 것보다 적은 수의 요소를 포함하는 경우 희소(sparse) 라고 합니다. 예를 들어, 인덱스 3, 12, 247에만 항목이 있는 배열을 갖는 것은 완전히 합법적입니다. 이러한 배열의 length 는 248로 보고되지만 실제로는 3개의 값만 저장합니다. 다른 인덱스에 있는 항목에 액세스하려고 하면 배열에 undefined 값이 있는 것으로 나타납니다. 따라서 배열을 "루핑"하고 싶을 때 대답해야 할 질문이 있습니다. 길이로 표시된 전체 범위를 루프하고 undefined s를 처리하시겠습니까, 아니면 요소만 처리하시겠습니까? 실제로 존재? 두 접근 방식 모두에 대한 많은 응용 프로그램이 있습니다. 배열을 사용하는 용도에 따라 다릅니다.

for .. of 를 사용하여 배열을 반복하면 루프 본문이 length 실행되고 루프 제어 변수는 실제로 배열에 없는 항목에 대해 undefined "do something with" 코드의 세부 사항에 따라 해당 동작이 원하는 것일 수 있지만 그렇지 않은 경우 다른 접근 방식을 사용해야 합니다.

물론, 일부 개발자들은 선택의 여지가 있지만, 어떤 이유가 아직 지원하지 않는 자바 스크립트의 버전을 대상으로하고 있기 때문에, 어쨌든 다른 접근 방법을 사용하기 for ... of .

JavaScript 구현이 ECMAScript 사양의 이전 버전(예: Internet Explorer 9 이전 버전 제외)을 준수하는 한 루프 대신 Array#forEach 이 경우 배열의 각 항목에 대해 호출할 함수를 전달합니다.

 var myStringArray = [ "Hello", "World" ]; myStringArray.forEach( function(s) { // ... do something with s ... } );

for ... of 와 달리 .forEach 는 배열에 실제로 존재하는 요소에 대해서만 함수를 호출합니다. 3개의 요소와 길이가 248인 가상 배열을 전달하면 248번이 아니라 3번만 함수를 호출합니다. 또한 누락된 요소와 실제로 undefined 설정된 요소를 구분합니다. 후자의 경우 여전히 함수를 호출하고 undefined 를 인수로 전달합니다. 이것은 당신이 스파 스 배열을 처리하는 방법의 경우, .forEach 당신의 통역 지원하는 경우도 갈 수있는 방법이 될 수 있습니다 for ... of .

JavaScript의 모든 버전에서 작동하는 마지막 옵션 은 명시적 카운팅 루프 입니다. 0에서 길이보다 하나 작은 값까지 계산하고 카운터를 인덱스로 사용합니다. 기본 루프는 다음과 같습니다.

 var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length; for (i=0; i<len; ++i) { s = myStringArray[i]; // ... do something with s ... }

이 접근 방식의 한 가지 장점은 희소 배열을 처리하는 방법을 선택할 수 있다는 것입니다. for .. of 처럼 누락된 요소에 대해 s undefined 로 설정된 상태에서 루프의 본문을 전체 length 실행합니다. .forEach 와 같이 희소 배열의 실제 존재하는 요소만 처리하려면 인덱스에 in test를 추가할 수 있습니다.

 var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length; for (i=0; i<len; ++i) { if (i in myStringArray) { s = myStringArray[i]; // ... do something with s ... } }

길이 값을 지역 변수에 할당하면( myStringArray.length 표현식을 포함하는 것과 반대) 매번 속성 조회를 건너뛰기 때문에 성능이 크게 달라질 수 있습니다. 내 컴퓨터에서 Rhino를 사용하면 속도가 43% 향상됩니다.

다음과 같이 루프 초기화 절에서 길이 캐싱이 수행되는 것을 볼 수 있습니다.

 var i, len, myStringArray = [ "Hello", "World" ]; for (len = myStringArray.length, i=0; i<len; ++i) {

명시적 계산 루프는 또한 원하는 경우 각 값의 인덱스에 액세스할 수 있음을 의미합니다. forEach 전달하는 함수에 추가 매개변수로 전달되므로 다음과 같은 방법으로도 액세스할 수 있습니다.

 myStringArray.forEach( function(s, i) { // ... do something with s and i ... });

for ... of 는 각 객체와 관련된 인덱스를 제공하지 않지만, 반복하는 객체가 실제로 Array ( for .. of works for other iterable types that may not have this method), Array#entries 메서드를 사용하여 [인덱스, 항목] 쌍의 배열로 변경한 다음 이를 반복할 수 있습니다.

 for (const [i, s] of myStringArray.entries()) { // ... do something with s and i ... }

for ... in 구문은 객체의 속성을 반복하기 위한 것입니다. JavaScript의 Array는 숫자 속성 이름(및 자동으로 업데이트되는 length 속성)이 있는 객체일 뿐이므로 이론적으로 배열을 사용하여 루프를 돌 수 있습니다. 그러나 문제는 숫자 속성 값으로 제한되지 않고(메소드조차도 실제로 값이 클로저인 속성이라는 것을 기억하십시오) 숫자 순서로 반복되는 것을 보장하지 않는다는 것입니다. 따라서,이 for ... in 구문 어레이를 통해 반복 사용 하여서는 아니된다.

Question 4

Python 및 Haskell 과 같은 다른 언어에서도 사용할 수 있는 함수형 프로그래밍 기술인 map 을 사용할 수 있습니다.

 [1,2,3,4].map( function(item) { alert(item); })

일반 구문은 다음과 같습니다.

 array.map(func)

일반적으로 func 는 배열의 항목인 하나의 매개변수를 취합니다. 그러나 JavaScript의 경우 항목의 인덱스인 두 번째 매개변수와 배열 자체인 세 번째 매개변수를 사용할 수 있습니다.

array.map 의 반환 값은 다른 배열이므로 다음과 같이 사용할 수 있습니다.

 var x = [1,2,3,4].map( function(item) {return item * 10;});

이제 x는 [10,20,30,40] 입니다.

함수를 인라인으로 작성할 필요가 없습니다. 별도의 기능일 수 있습니다.

 var item_processor = function(item) { // Do something complicated to an item } new_list = my_list.map(item_processor);

다음과 같은 종류입니다.

 for (item in my_list) {item_processor(item);}

new_list 얻지 못하는 것을 제외하고.

Question 5

for (myStringArray의 const) {

(질문에 직접 답하기: 이제 할 수 있습니다!)

대부분의 다른 답변은 옳았지만 ECMAScript 6 2015 가 반복 수행을 위한 새로운 메커니즘인 for..of 루프를 가져오고 있다고 언급하지 않았습니다(이 글을 쓰는 시점에서).

이 새로운 구문은 JavaScript에서 배열을 반복하는 가장 우아한 방법입니다(반복 인덱스가 필요하지 않은 한).

현재 Firefox 13+, Chrome 37+에서 작동하며 다른 브라우저에서는 기본적으로 작동하지 않습니다(아래 브라우저 호환성 참조). 다행히도 오늘날 차세대 기능을 사용할 수 있는 JavaScript 컴파일러(예: Babel)가 있습니다.

Node.js에서도 작동합니다(버전 0.12.0에서 테스트했습니다).

배열 반복

 // You could also use "let" or "const" instead of "var" for block scope. for (var letter of ["a", "b", "c"]) { console.log(letter); }

객체 배열 반복

 const band = [ {firstName : 'John', lastName: 'Lennon'}, {firstName : 'Paul', lastName: 'McCartney'} ]; for(const member of band){ console.log(member.firstName + ' ' + member.lastName); }

생성기 반복:

(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of 에서 추출한 예)

 function* fibonacci() { // A generator function let [prev, curr] = [1, 1]; while (true) { [prev, curr] = [curr, prev + curr]; yield curr; } } for (const n of fibonacci()) { console.log(n); // Truncate the sequence at 1000 if (n >= 1000) { break; } }

호환성 표: http://kangax.github.io/es5-compat-table/es6/#For..of 루프

사양: http://wiki.ecmascript.org/doku.php?id=harmony:iterators

}

Question 6

JavaScript에서는 for-in 루프를 사용하여 배열을 반복하는 것은 바람직하지 않지만 다음과 같은 for

 for(var i=0, len=myArray.length; i < len; i++){}

또한 최적화되어 있습니다(배열 길이를 "캐싱"). 더 자세히 알고 싶다면 해당 주제에 대한 내 게시물을 읽으십시오 .

Question 7

Opera, Safari, Firefox 및 Chrome은 이제 많은 공통 루프를 최적화하기 위한 향상된 배열 방법 세트를 공유합니다.

모두 필요하지 않을 수도 있지만 매우 유용하거나 모든 브라우저에서 지원한다면 필요할 것입니다.

Mozilla Labs는 사용자가 직접 추가할 수 있도록 자신과 WebKit이 모두 사용하는 알고리즘을 게시했습니다.

필터 는 일부 조건 또는 테스트를 충족하는 항목의 배열을 반환합니다.

every 는 모든 배열 구성원이 테스트를 통과하면 true를 반환합니다.

일부 는 테스트를 통과하면 true를 반환합니다.

forEach 는 각 배열 멤버에 대해 함수를 실행하고 아무 것도 반환하지 않습니다.

map 은 forEach와 비슷하지만 각 요소에 대한 연산 결과의 배열을 반환합니다.

이러한 메서드는 모두 첫 번째 인수에 대해 함수를 사용하고 선택적 두 번째 인수를 갖습니다. 이 인수는 함수를 반복할 때 배열 구성원에 적용하려는 범위의 개체입니다.

필요할 때까지 무시하십시오.

indexOf 및 lastIndexOf 는 인수와 정확히 일치하는 첫 번째 또는 마지막 요소의 적절한 위치를 찾습니다.

 (function(){ var p, ap= Array.prototype, p2={ filter: function(fun, scope){ var L= this.length, A= [], i= 0, val; if(typeof fun== 'function'){ while(i< L){ if(i in this){ val= this[i]; if(fun.call(scope, val, i, this)){ A[A.length]= val; } } ++i; } } return A; }, every: function(fun, scope){ var L= this.length, i= 0; if(typeof fun== 'function'){ while(i<L){ if(i in this && !fun.call(scope, this[i], i, this)) return false; ++i; } return true; } return null; }, forEach: function(fun, scope){ var L= this.length, i= 0; if(typeof fun== 'function'){ while(i< L){ if(i in this){ fun.call(scope, this[i], i, this); } ++i; } } return this; }, indexOf: function(what, i){ i= i || 0; var L= this.length; while(i< L){ if(this[i]=== what) return i; ++i; } return -1; }, lastIndexOf: function(what, i){ var L= this.length; i= i || L-1; if(isNaN(i) || i>= L) i= L-1; else if(i< 0) i += L; while(i> -1){ if(this[i]=== what) return i; --i; } return -1; }, map: function(fun, scope){ var L= this.length, A= Array(this.length), i= 0, val; if(typeof fun== 'function'){ while(i< L){ if(i in this){ A[i]= fun.call(scope, this[i], i, this); } ++i; } return A; } }, some: function(fun, scope){ var i= 0, L= this.length; if(typeof fun== 'function'){ while(i<L){ if(i in this && fun.call(scope, this[i], i, this)) return true; ++i; } return false; } } } for(p in p2){ if(!ap[p]) ap[p]= p2[p]; } return true; })();

Question 8

소개

대학 시절부터 Java, JavaScript, Pascal, ABAP , PHP, Progress 4GL , C/C++ 및 지금 당장은 생각할 수 없는 몇 가지 다른 언어로 프로그래밍했습니다.

그들 모두는 고유한 언어적 특이성을 가지고 있지만 이러한 각 언어는 동일한 기본 개념을 많이 공유합니다. 이러한 개념에는 프로시저/함수, IF 문, FOR 루프 및 WHILE 루프가 포함됩니다.

전통적인 `for` 루프

전통적인 for 루프에는 세 가지 구성 요소가 있습니다.

초기화: look 블록이 처음 실행되기 전에 실행됨
조건: 루프 블록이 실행되기 전에 매번 조건을 확인하고 거짓이면 루프를 종료합니다.
사후 생각: 루프 블록이 실행된 후 매번 수행

이 세 가지 구성 요소는 ; 상징. 이 세 가지 구성 요소 각각에 대한 콘텐츠는 선택 사항입니다. 즉, 가능한 for

 for (;;) { // Do stuff }

물론 if(condition === true) { break; } 또는 if(condition === true) { return; } for -loop 내부의 어딘가에서 실행을 중지합니다.

그러나 일반적으로 초기화는 인덱스를 선언하는 데 사용되며 조건은 해당 인덱스를 최소값 또는 최대값과 비교하는 데 사용되며 사후 고려는 인덱스를 증가시키는 데 사용됩니다.

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

전통적인 `for` 루프를 사용하여 배열을 반복

배열을 반복하는 전통적인 방법은 다음과 같습니다.

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

또는 역방향 루프를 선호하는 경우 다음을 수행합니다.

 for (var i = myArray.length - 1; i > -1; i--) { console.log(myArray[i]); }

그러나 예를 들어 다음과 같이 많은 변형이 가능합니다.

 for (var key = 0, value = myArray[key], length = myArray.length; key < length; value = myArray[++key]) { console.log(value); }

...또는 이것...

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

...또는 이것:

 var key = 0, value; for (; value = myArray[key++];){ console.log(value); }

어느 것이 가장 효과가 좋은지는 개인 취향과 구현하는 특정 사용 사례 모두의 문제입니다.

이러한 각 변형은 아주 오래된 브라우저를 포함하여 모든 브라우저에서 지원됩니다.

`while` 루프

for 루프의 한 가지 대안 while 루프입니다. 배열을 반복하려면 다음을 수행할 수 있습니다.

 var key = 0; while(value = myArray[key++]){ console.log(value); }

for 루프와 마찬가지로 while 루프는 가장 오래된 브라우저에서도 지원됩니다.

또한, every while 루프는 for 루프로 다시 작성할 수 있습니다. 예를 들어, 위의 while for -loop과 똑같은 방식으로 동작합니다.

 for(var key = 0; value = myArray[key++];){ console.log(value); }

`For...in` 그리고 ~을 `for...of`

JavaScript에서는 다음을 수행할 수도 있습니다.

 for (i in myArray) { console.log(myArray[i]); }

for 루프와 동일하게 동작하지 않으며 고려해야 할 잠재적인 부작용이 있으므로 주의해서 사용해야 합니다. 배열 반복에 "for...in"을 사용하는 것이 나쁜 생각인 이유를 참조하십시오. 자세한 사항은.

for...in 대신 for...of 있습니다. for...of 루프와 for...in 루프의 차이점을 보여줍니다.

 var myArray = [3, 5, 7]; myArray.foo = "hello"; for (var i in myArray) { console.log(i); // logs 0, 1, 2, "foo" } for (var i of myArray) { console.log(i); // logs 3, 5, 7 }

또한 Internet Explorer의 어떤 버전도 for...of ( Edge 12+ 지원)를 지원하지 않으며 for...in 에는 Internet Explorer 10 이상이 필요하다는 점을 고려해야 합니다.

`Array.prototype.forEach()`

for 루프의 대안은 다음 구문을 사용하는 Array.prototype.forEach()

 myArray.forEach(function(value, key, myArray) { console.log(value); });

Array.prototype.forEach() 는 모든 최신 브라우저와 Internet Explorer 9 이상에서 지원됩니다.

도서관

마지막으로 많은 유틸리티 라이브러리에도 자체 foreach 변형이 있습니다. AFAIK, 가장 인기 있는 세 가지는 다음과 같습니다.

jQuery.each() , jQuery :

 $.each(myArray, function(key, value) { console.log(value); });

_.each() , Underscore.js :

 _.each(myArray, function(value, key, myArray) { console.log(value); });

_.forEach() , Lodash :

 _.forEach(myArray, function(value, key) { console.log(value); });

Question 9

while 루프를 사용하십시오 ...

 var i = 0, item, items = ['one', 'two', 'three']; while(item = items[i++]){ console.log(item); }

'하나', '둘', '셋'을 기록합니다.

역순의 경우 훨씬 더 효율적인 루프:

 var items = ['one', 'two', 'three'], i = items.length; while(i--){ console.log(items[i]); }

'3', '2', '하나'를 기록합니다.

또는 고전적인 for 루프:

 var items = ['one', 'two', 'three'] for(var i=0, l = items.length; i < l; i++){ console.log(items[i]); }

기록: '하나', '둘', '셋'

참고: Google Closure: JavaScript를 작성하지 않는 방법

Question 10

당신이 원하는 경우 간결한 방법은 빠른 루프를 작성하고 당신은 역으로 반복 할 수있다

 for (var i=myArray.length;i--;){ var item=myArray[i]; }

이것은 길이를 캐싱하는 이점이 있습니다( for (var i=0, len=myArray.length; i<len; ++i) 와 for (var i=0; i<myArray.length; ++i) ) 입력할 문자 수가 적습니다.

반복하는 동안 DOM에서 항목을 제거할 계획인 라이브 NodeList를 반복할 때와 같이 역순으로 반복해야 하는 경우도 있습니다.

Question 11

JavaScript에서 함수형 프로그래밍 방식으로 배열을 반복하는 몇 가지 사용 사례:

1. 배열을 순환하기만 하면 됩니다.

 const myArray = [{x:100}, {x:200}, {x:300}]; myArray.forEach((element, index, array) => { console.log(element.x); // 100, 200, 300 console.log(index); // 0, 1, 2 console.log(array); // same myArray object 3 times });

참고: Array.prototype.forEach()는 엄밀히 말하면 기능적 방법이 아닙니다. 입력 매개변수로 취하는 함수가 값을 반환하지 않아야 하므로 순수한 함수로 간주할 수 없기 때문입니다.

2. 배열의 요소 중 테스트를 통과한 요소가 있는지 확인

 const people = [ {name: 'John', age: 23}, {name: 'Andrew', age: 3}, {name: 'Peter', age: 8}, {name: 'Hanna', age: 14}, {name: 'Adam', age: 37}]; const anyAdult = people.some(person => person.age >= 18); console.log(anyAdult); // true

3. 새 배열로 변환

 const myArray = [{x:100}, {x:200}, {x:300}]; const newArray= myArray.map(element => element.x); console.log(newArray); // [100, 200, 300]

참고: map() 메서드는 호출 배열의 모든 요소에 대해 제공된 함수를 호출한 결과로 새 배열을 만듭니다.

4. 특정 속성을 요약하고 평균을 계산합니다.

 const myArray = [{x:100}, {x:200}, {x:300}]; const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0); console.log(sum); // 600 = 0 + 100 + 200 + 300 const average = sum / myArray.length; console.log(average); // 200

5. 원본을 기반으로 하지만 수정하지 않고 새 배열을 만듭니다.

 const myArray = [{x:100}, {x:200}, {x:300}]; const newArray= myArray.map(element => { return { ...element, x: element.x * 2 }; }); console.log(myArray); // [100, 200, 300] console.log(newArray); // [200, 400, 600]

6. 각 카테고리의 수를 센다

 const people = [ {name: 'John', group: 'A'}, {name: 'Andrew', group: 'C'}, {name: 'Peter', group: 'A'}, {name: 'James', group: 'B'}, {name: 'Hanna', group: 'A'}, {name: 'Adam', group: 'B'}]; const groupInfo = people.reduce((groups, person) => { const {A = 0, B = 0, C = 0} = groups; if (person.group === 'A') { return {...groups, A: A + 1}; } else if (person.group === 'B') { return {...groups, B: B + 1}; } else { return {...groups, C: C + 1}; } }, {}); console.log(groupInfo); // {A: 3, C: 1, B: 2}

7. 특정 기준에 따라 배열의 하위 집합 검색

 const myArray = [{x:100}, {x:200}, {x:300}]; const newArray = myArray.filter(element => element.x > 250); console.log(newArray); // [{x:300}]

참고: filter() 메서드는 제공된 함수에 의해 구현된 테스트를 통과하는 모든 요소가 포함된 새 배열을 만듭니다.

8. 배열 정렬

 const people = [ { name: "John", age: 21 }, { name: "Peter", age: 31 }, { name: "Andrew", age: 29 }, { name: "Thomas", age: 25 } ]; let sortByAge = people.sort(function (p1, p2) { return p1.age - p2.age; }); console.log(sortByAge);

9. 배열에서 요소 찾기

 const people = [ {name: "john", age:23}, {name: "john", age:43}, {name: "jim", age:101}, {name: "bob", age:67} ]; const john = people.find(person => person.name === 'john'); console.log(john);

Array.prototype.find() 메서드는 제공된 테스트 기능을 충족하는 배열의 첫 번째 요소 값을 반환합니다.

참고문헌

Question 12

예 , 루프를 사용하여 JavaScript에서 동일한 작업을 수행할 수 있지만 이에 국한되지 않습니다 . JavaScript에서 배열에 대해 루프를 수행하는 방법에는 여러 가지가 있습니다. 아래에 이 배열이 있고 이 배열에 대해 루프를 수행하고 싶다고 상상해 보십시오.

 var arr = [1, 2, 3, 4, 5];

솔루션은 다음과 같습니다.

1) 루프를 위해

for 루프는 JavaScript에서 배열을 반복하는 일반적인 방법이지만 큰 배열에 대한 가장 빠른 솔루션으로 간주되지 않습니다.

 for (var i=0, l=arr.length; i<l; i++) { console.log(arr[i]); }

2) while 루프

while 루프는 긴 배열을 반복하는 가장 빠른 방법으로 간주되지만 일반적으로 JavaScript 코드에서는 덜 사용됩니다.

 let i=0; while (arr.length>i) { console.log(arr[i]); i++; }

3) 동안
do while 은 다음과 같은 구문 차이가 있는 while 과 동일한 작업을 수행합니다.

 let i=0; do { console.log(arr[i]); i++; } while (arr.length>i);

이것이 JavaScript 루프를 수행하는 주요 방법이지만 몇 가지 방법이 더 있습니다.

또한 JavaScript에서 객체를 반복 for in 루프를 사용합니다.

또한 JavaScript의 배열에 map() , filter() , reduce() 등의 함수를 살펴보십시오. while 및 for 사용하는 것보다 훨씬 빠르고 더 나은 작업을 수행할 수 있습니다.

JavaScript의 배열에 대한 비동기 함수에 대해 자세히 알고 싶다면 이 기사가 좋습니다.

함수형 프로그래밍은 요즘 개발 세계에서 큰 인기를 얻고 있습니다. 그리고 그만한 이유가 있습니다. 기능적 기술은 한 눈에 이해하기 쉽고, 리팩터링하고, 테스트하기 쉬운 보다 선언적인 코드를 작성하는 데 도움이 될 수 있습니다.
함수형 프로그래밍의 초석 중 하나는 목록과 목록 연산의 특별한 사용입니다. 그리고 그것들은 정확히 소리가 나는 것과 같습니다. 그러나 기능적 사고방식은 그것들을 당신이 예상하는 것과 조금 다르게 취급합니다.
이 기사에서는 내가 "3대" 목록 작업이라고 부르는 매핑, 필터 및 축소에 대해 자세히 살펴볼 것입니다. 이 세 가지 기능에 대해 머리를 숙이는 것은 깨끗한 기능 코드를 작성할 수 있는 중요한 단계이며 기능 및 반응 프로그래밍의 매우 강력한 기술에 대한 문을 엽니다.
또한 for 루프를 다시 작성할 필요가 없다는 의미이기도 합니다.

더 읽기>> 여기 :

Question 13

루프에 암시적 범위가 거의 없고 추가 변수를 제거하는 방법이 있습니다.

 var i = 0, item; // Note this is weak to sparse arrays or falsey values for ( ; item = myStringArray[i++] ; ){ item; // This is the string at the index. }

또는 정말로 id를 얻고 정말로 고전적인 for 루프를 갖고 싶다면:

 var i = 0, len = myStringArray.length; // Cache the length for ( ; i < len ; i++ ){ myStringArray[i]; // Don't use this if you plan on changing the length of the array }

최신 브라우저는 모두 Array 프로토타입 forEach , map , reduce , filter 및 기타 여러 메서드에 대한 반복자 메서드를 지원합니다.

Question 14

JavaScript에서 배열을 반복하는 다양한 방법이 있습니다.

일반 루프:

 var i; for (i = 0; i < substr.length; ++i) { // Do something with `substr[i]` }

ES5의 forEach:

 substr.forEach(function(item) { // Do something with `item` });

jQuery.each:

 jQuery.each(substr, function(index, item) { // Do something with `item` (or `this` is also `item` if you like) });

자세한 정보를 보려면 이것을 살펴보거나 JavaScript에서 배열을 반복하기 위해 MDN 을 확인하고 각각에 대해 jQuery를 사용하여 jQuery를 확인할 수도 있습니다.

Question 15

배열 루프:

 for(var i = 0; i < things.length; i++){ var thing = things[i]; console.log(thing); }

개체 루프:

 for(var prop in obj){ var propValue = obj[prop]; console.log(propValue); }

Question 16

Underscore.js 라이브러리를 사용하는 것이 좋습니다. 배열/컬렉션을 반복하는 데 사용할 수 있는 다양한 기능을 제공합니다.

예를 들어:

 _.each([1, 2, 3], function(num){ alert(num); }); => alerts each number in turn...

Question 17

어레이 반복에 사용할 수 있는 여러 메커니즘의 성능 측면에 관심이 있는 사람이 있으면 다음 JSPerf 테스트를 준비했습니다.

https://jsperf.com/fastest-array-iterator

결과:

전통적인 for() 반복자는 특히 배열 길이가 cached 와 함께 사용될 때 가장 빠른 방법입니다.

 let arr = [1,2,3,4,5]; for(let i=0, size=arr.length; i<size; i++){ // Do something }

Array.prototype.forEach() 및 Array.prototype.map() 메서드는 아마도 함수 호출 오버헤드 의 결과로 가장 느린 근사값입니다.

Question 18

jQuery 라이브러리를 사용하는 경우 http://api.jquery.com/jQuery.each/ 사용을 고려하십시오.

문서에서:

jQuery.each( collection, callback(indexInArray, valueOfElement) )
반환: 개체
설명: 개체와 배열 모두를 원활하게 반복하는 데 사용할 수 있는 일반 반복기 함수입니다. 길이 속성이 있는 배열 및 배열과 유사한 개체(예: 함수의 인수 개체)는 0에서 길이-1 사이의 숫자 인덱스로 반복됩니다. 다른 개체는 명명된 속성을 통해 반복됩니다.
$.each() 함수는 jQuery 객체에 대해 독점적으로 반복하는 데 사용되는 $(selector).each() 와 동일하지 않습니다. $.each() 함수는 맵(JavaScript 객체)이든 배열이든 상관없이 모든 컬렉션을 반복하는 데 사용할 수 있습니다. 배열의 경우 콜백에 배열 인덱스와 해당 배열 값이 매번 전달됩니다. this 키워드를 통해 액세스할 수도 있지만 Javascript는 this 값이 단순한 문자열이나 숫자 값인 경우에도 항상 this 값을 Object 로 래핑합니다.) 이 메서드는 첫 번째 인수인 반복된 개체를 반환합니다.

Question 19

나는 개인적으로 가장 좋아하는이 변형을 아직 보지 못했습니다.

주어진 배열:

 var someArray = ["some", "example", "array"];

length 속성에 액세스하지 않고도 반복할 수 있습니다.

 for (var i=0, item; item=someArray[i]; i++) { // item is "some", then "example", then "array" // i is the index of item in the array alert("someArray[" + i + "]: " + item); }

http://jsfiddle.net/prvzk/를 시연하는 이 JsFiddle을 참조하십시오.

이것은 희소 하지 않은 배열에 대해서만 작동합니다. 배열의 각 인덱스에 실제로 값이 있음을 의미합니다. 그러나 실제로 JavaScript에서 희소 배열을 거의 사용하지 않는다는 것을 알았습니다... 이러한 경우 일반적으로 객체를 맵/해시 테이블로 사용하는 것이 훨씬 쉽습니다. 희소 배열이 있고 0 .. length-1 이상을 반복하려는 경우 for (var i=0; i<someArray.length; ++i) 구문이 필요하지만 여전히 내부에 if 현재 인덱스에 있는 요소가 실제로 정의되었는지 확인하는 루프입니다.

또한 CMS가 아래 주석에서 언급했듯이 거짓 값을 포함하지 않는 배열에서만 사용할 수 있습니다. 예제의 문자열 배열은 작동하지만 빈 문자열이나 0 또는 NaN 등의 숫자가 있는 경우 루프가 조기에 중단됩니다. 다시 말하지만 실제로 이것은 나에게 거의 문제가 되지 않지만 명심해야 할 사항이므로 사용하기 전에 생각해야 하는 루프가 됩니다... 일부 사람들에게는 실격될 수 있습니다. :)

이 루프에 대해 내가 좋아하는 것은 다음과 같습니다.

쓰다보니 짧다
길이 속성에 액세스할 필요가 없습니다(캐시는 물론).
액세스할 항목은 선택한 이름 아래 루프 본문 내에서 자동으로 정의됩니다.
array.push 및 array.splice와 매우 자연스럽게 결합하여 목록/스택과 같은 배열을 사용합니다.

이것이 작동하는 이유는 배열 사양이 인덱스 >= 배열의 길이에서 항목을 읽을 때 정의되지 않은 값을 반환하도록 요구하기 때문입니다. 이러한 위치에 쓸 때 실제로 길이가 업데이트됩니다.

나에게 이 구성은 내가 좋아하는 Java 5 구문을 가장 밀접하게 에뮬레이트합니다.

 for (String item : someArray) { }

... 루프 내부의 현재 인덱스에 대해서도 알 수 있다는 추가 이점이 있습니다.

Question 20

난해한 변경 방법

 let a= ["Hello", "World"]; while(a.length) { console.log( a.shift() ); }

Question 21

프로토타입의 속성을 포함하지 않고 자신의 객체 속성만 반복하는 방법이 있습니다.

 for (var i in array) if (array.hasOwnProperty(i)) { // Do something with array[i] }

그러나 여전히 사용자 정의 속성을 반복합니다.

JavaScript에서는 배열을 포함한 모든 객체에 사용자 정의 속성을 할당할 수 있습니다.

희소 배열을 반복하려면 for (var i = 0; i < array.length; i++) if (i in array) 또는 array.forEach 와 es5shim 사용해야 합니다.

Question 22

배열 반복에는 4가지 방법이 있습니다.

 // 1: for for (let i = 0; i < arr.length; ++i) { console.log(arr[i]); } // 2: forEach arr.forEach((v, i) => console.log(v)); // 3: for in for (let i in arr) { console.log(arr[i]); } // 4: for of for (const v of arr) { console.log(v); }

요약 : 1 및 3 솔루션은 추가 변수를 생성하고 2 - 추가 기능 컨텍스트를 생성합니다. 가장 좋은 방법은 4번째 - "for" 입니다.

Question 23

가장 우아하고 빠른 방법

 var arr = [1, 2, 3, 1023, 1024]; for (var value; value = arr.pop();) { value + 1 }

http://jsperf.com/native-loop-performance/8

수정함(내가 틀렸기 때문에)

100000개 항목의 배열을 반복하는 방법을 비교하고 매번 새 값으로 최소한의 작업을 수행합니다.

http://jsben.ch/#/BQhED

준비:

 <script src="//code.jquery.com/jquery-2.1.0.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script> <script> Benchmark.prototype.setup = function() { // Fake function with minimal action on the value var tmp = 0; var process = function(value) { tmp = value; // Hold a reference to the variable (prevent engine optimisation?) }; // Declare the test Array var arr = []; for (var i = 0; i < 100000; i++) arr[i] = i; }; </script>

테스트:

 <a href="http://jsperf.com/native-loop-performance/16" title="http://jsperf.com/native-loop-performance/16" ><img src="http://i.imgur.com/YTrO68E.png" title="Hosted by imgur.com" /></a>

Question 24

JavaScript에서 두 가지 방법이 있습니다. 처음 두 가지 예는 JavaScript 샘플입니다. 세 번째는 JavaScript 라이브러리를 사용합니다. 즉, jQuery는 .each() 함수를 사용합니다.

 var myStringArray = ["hello", "World"]; for(var i in myStringArray) { alert(myStringArray[i]); }

 var myStringArray = ["hello", "World"]; for (var i=0; i < myStringArray.length; i++) { alert(myStringArray[i]); }

 var myStringArray = ["hello", "World"]; $.each(myStringArray, function(index, value){ alert(value); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Question 25

배열을 순환하는 6가지 다른 방법

다양한 방법으로 배열을 반복할 수 있습니다. 내가 좋아하는 6가지 방법을 위에서 아래로 정렬했습니다.

1. for 루프 사용

단순히 배열 for 반복하는 경우 for 루프가 첫 번째 선택입니다.

 let array = [1, 2, 3, 4, 5]; for (let i = 0; i < array.length; i++) { console.log(array[i]); }

2. forEach 루프 사용

forEach 루프는 배열을 반복하는 현대적인 방법입니다. 또한 배열과 요소에 대해 더 많은 유연성과 제어를 제공합니다.

 let array = [1, 2, 3, 4, 5]; array.forEach((element) => { console.log(element); });

3. ...의 사용

for...of 루프를 사용하면 배열 요소에 직접 액세스할 수 있습니다.

 let array = [1, 2, 3, 4, 5]; for (let element of array) { console.log(element); }

4. for...in 루프 사용

for...in 은 배열 요소에 액세스할 수 있는 키를 제공합니다.

 let array = [1, 2, 3, 4, 5]; for(let index in array){ console.log(array[index]); }

5. while 루프 사용하기

while 루프 는 배열을 루프하는 데에도 사용할 수 있습니다.

 let array = [1, 2, 3, 4, 5]; let length = array.length; while(length > 0){ console.log(array[array.length - length]); length--; }

6. do...while 루프 사용하기

마찬가지로 do...while 루프를 사용합니다.

 let array = [1, 2, 3, 4, 5]; let length = array.length; do { console.log(array[array.length - length]); length--; } while (length > 0)

Question 26

JavaScript에는 배열을 반복하는 많은 솔루션이 있습니다.

아래 코드는 인기 있는 코드입니다.

 /** Declare inputs */ const items = ['Hello', 'World'] /** Solution 1. Simple for */ console.log('solution 1. simple for') for (let i = 0; i < items.length; i++) { console.log(items[i]) } console.log() console.log() /** Solution 2. Simple while */ console.log('solution 2. simple while') let i = 0 while (i < items.length) { console.log(items[i++]) } console.log() console.log() /** Solution 3. forEach*/ console.log('solution 3. forEach') items.forEach(item => { console.log(item) }) console.log() console.log() /** Solution 4. for-of*/ console.log('solution 4. for-of') for (const item of items) { console.log(item) } console.log() console.log()

Question 27

jQuery를 사용하려면 설명서에 좋은 예가 있습니다.

 $.each([ 52, 97 ], function( index, value ) { alert( index + ": " + value ); });

Question 28

제 생각에 가장 좋은 방법은 Array.forEach 함수를 사용하는 것입니다. 그것을 사용할 수 없다면 MDN에서 폴리필을 가져오는 것이 좋습니다. 사용 가능하게 하려면 JavaScript에서 배열을 반복하는 가장 안전한 방법입니다.

Array.prototype.forEach()

따라서 다른 사람들이 제안했듯이 이것은 거의 항상 당신이 원하는 것입니다.

 var numbers = [1,11,22,33,44,55,66,77,88,99,111]; var sum = 0; numbers.forEach(function(n){ sum += n; });

for .. in이 수행하는 개체 속성 및 기타 구성원이 아닌 배열의 값만 처리할 수 있습니다.

일반 C 스타일 for 루프를 사용하면 대부분의 경우 작동합니다. 루프 내의 모든 것은 프로그램의 나머지 부분과 범위를 공유하며 { }는 새 범위를 생성하지 않는다는 것을 기억하는 것이 중요합니다.

따라서:

 var sum = 0; var numbers = [1,11,22,33,44,55,66,77,88,99,111]; for(var i = 0; i<numbers.length; ++i){ sum += numbers[i]; } alert(i);

"11"을 출력합니다. 이는 원하는 것일 수도 있고 아닐 수도 있습니다.

작동하는 jsFiddle 예제: https://jsfiddle.net/workingClassHacker/pxpv2dh5/7/

Question 29

최적화된 접근 방식은 배열의 길이를 캐시하고 단일 변수 패턴을 사용하여 단일 var 키워드로 모든 변수를 초기화하는 것입니다.

 var i, max, myStringArray = ["Hello", "World"]; for (i = 0, max = myStringArray.length; i < max; i++) { alert(myStringArray[i]); // Do something }

반복 순서가 중요하지 않으면 역 루프를 시도해야 합니다. 오버 헤드 조건 테스트를 줄이고 감소가 하나의 명령문에 있으므로 가장 빠릅니다.

 var i,myStringArray = ["item1","item2"]; for (i = myStringArray.length; i--) { alert(myStringArray[i]); }

또는 while 루프를 사용하는 것이 더 좋고 깨끗합니다.

 var myStringArray = ["item1","item2"],i = myStringArray.length; while(i--) { // Do something with fruits[i] }

Question 30

100% 동일하지는 않지만 유사합니다.

 var myStringArray = ['Hello', 'World']; // The array uses [] not {} for (var i in myStringArray) { console.log(i + ' -> ' + myStringArray[i]); // i is the index/key, not the item }

Question 31

공식적인 (그리고 아마도 오래된) 방법은 Array.prototype.forEach(...) .

 var arr = ["apple", "banana", "cherry", "mango"]; arr.forEach(function(item, index, _) { console.log("[" + index + "] = '" + item + "'"); });

특정 Git 브랜치를 복제하려면 어떻게 해야 합니까? [복제하다] (0)	2021.10.06
AngularJS: 서비스 대 공급자 대 공장 (0)	2021.10.06
char[]가 비밀번호에 대해 String보다 선호되는 이유는 무엇입니까? (0)	2021.10.06
grep 파일이지만 여러 줄을 표시합니까? (0)	2021.10.06
JavaScript에서 클립보드에 복사하려면 어떻게 합니까? (0)	2021.10.06

No error , No gain

JavaScript에서 배열을 통해 루프

1. 순차 `for` 루프:

2. `Array.prototype.forEach` :

3. ES6 `for-of` 문:

다음 용도로 사용하지 마십시오 `for...in`

for (myStringArray의 const) {

}

소개

전통적인 `for` 루프

전통적인 `for` 루프를 사용하여 배열을 반복

`while` 루프

`For...in` 그리고 ~을 `for...of`

`Array.prototype.forEach()`

도서관

1. 배열을 순환하기만 하면 됩니다.

2. 배열의 요소 중 테스트를 통과한 요소가 있는지 확인

3. 새 배열로 변환

4. 특정 속성을 요약하고 평균을 계산합니다.

5. 원본을 기반으로 하지만 수정하지 않고 새 배열을 만듭니다.

6. 각 카테고리의 수를 센다

7. 특정 기준에 따라 배열의 하위 집합 검색

8. 배열 정렬

9. 배열에서 요소 찾기

참고문헌

결과:

가장 우아하고 빠른 방법

수정함(내가 틀렸기 때문에)

배열을 순환하는 6가지 다른 방법

1. for 루프 사용

2. forEach 루프 사용

3. ...의 사용

4. for...in 루프 사용

5. while 루프 사용하기

6. do...while 루프 사용하기

'etc. > StackOverFlow' 카테고리의 다른 글

'etc./StackOverFlow'의 다른글

티스토리툴바

JavaScript에서 배열을 통해 루프

1. 순차 for 루프:

2. Array.prototype.forEach :

3. ES6 for-of 문:

다음 용도로 사용하지 마십시오 for...in

for (myStringArray의 const) {

}

소개

전통적인 for 루프

전통적인 for 루프를 사용하여 배열을 반복

while 루프

For...in 그리고 ~을 for...of

Array.prototype.forEach()

도서관

1. 배열을 순환하기만 하면 됩니다.

2. 배열의 요소 중 테스트를 통과한 요소가 있는지 확인

3. 새 배열로 변환

4. 특정 속성을 요약하고 평균을 계산합니다.

5. 원본을 기반으로 하지만 수정하지 않고 새 배열을 만듭니다.

6. 각 카테고리의 수를 센다

7. 특정 기준에 따라 배열의 하위 집합 검색

8. 배열 정렬

9. 배열에서 요소 찾기

참고문헌

결과:

가장 우아하고 빠른 방법

수정함(내가 틀렸기 때문에)

배열을 순환하는 6가지 다른 방법

1. for 루프 사용

2. forEach 루프 사용

3. ...의 사용

4. for...in 루프 사용

5. while 루프 사용하기

6. do...while 루프 사용하기

'etc. > StackOverFlow' 카테고리의 다른 글

'etc./StackOverFlow'의 다른글

관련글

티스토리툴바

1. 순차 `for` 루프:

2. `Array.prototype.forEach` :

3. ES6 `for-of` 문:

다음 용도로 사용하지 마십시오 `for...in`

전통적인 `for` 루프

전통적인 `for` 루프를 사용하여 배열을 반복

`while` 루프

`For...in` 그리고 ~을 `for...of`

`Array.prototype.forEach()`