배열과 컬렉션을 위한 Foreach js. JQuery - 배열, 개체 및 요소를 반복합니다. II. 배열과 유사한 객체 반복
마지막 업데이트: 2018년 3월 26일
Array 객체는 배열을 나타내며 배열을 조작할 수 있는 다양한 속성과 메서드를 제공합니다.
어레이 초기화대괄호나 Array 생성자를 사용하여 빈 배열을 만들 수 있습니다.
Var 사용자 = new Array(); var 사람들 = ; console.log(사용자); // 배열 console.log(people); // 배열
특정 수의 요소로 배열을 즉시 초기화할 수 있습니다.
Var users = new Array("톰", "빌", "앨리스"); var people = ["샘", "존", "케이트"]; console.log(사용자); // ["톰", "빌", "앨리스"] console.log(people); // ["샘", "존", "케이트"]
배열을 정의하고 진행하면서 새 요소를 추가할 수 있습니다.
Var 사용자 = new Array(); 사용자 = "톰"; 사용자 = "케이트"; console.log(사용자); // "톰" console.log(users); // 한정되지 않은
기본적으로 배열의 길이가 0으로 생성된다는 것은 중요하지 않습니다. 인덱스를 사용하면 특정 인덱스에서 배열의 하나 또는 다른 요소를 대체할 수 있습니다.
길이배열의 길이를 확인하려면 length 속성을 사용하세요.
Var Fruit = new Array(); 과일 = "사과"; 과일 = "배"; 과일 = "자두"; document.write("과일 배열에서 " + Fruit.length + " 요소:
"); for(var i=0; i< fruit.length; i++)
document.write(fruit[i] + "
");
실제로 배열의 길이는 마지막 요소의 인덱스에 1을 더한 값이 됩니다. 예를 들어:
Var 사용자 = new Array(); // 배열에는 0개의 요소가 있습니다. users = "Tom"; 사용자 = "케이트"; 사용자 = "샘"; for(var i=0; i 0) ( 결과 = true; ) 결과 반환; ); var 전달 = 숫자.모든(조건); document.write(통과); // 거짓
Every() 메소드에는 조건을 매개변수로 나타내는 함수가 전달됩니다. 이 함수는 세 가지 매개변수를 사용합니다.
함수 조건(값, 인덱스, 배열) ( )
value 매개변수는 반복되는 현재 배열 요소를 나타내고, index 매개변수는 해당 요소의 인덱스를 나타내며, array 매개변수는 배열에 대한 참조를 전달합니다.
이 함수에서는 전달된 요소 값이 일부 조건을 준수하는지 확인할 수 있습니다. 예를 들어, 이 예에서는 배열의 각 요소가 0보다 큰지 확인합니다. 더 크면 true 값을 반환합니다. 즉, 요소가 조건을 충족합니다. 적으면 false를 반환합니다. 요소가 조건을 충족하지 않습니다.
결과적으로, number.every(condition) 메소드가 호출되면 숫자 배열의 모든 요소를 반복하여 하나씩 조건 함수에 전달합니다. 이 함수가 모든 요소에 대해 true를 반환하면 Every() 메서드는 true를 반환합니다. 하나 이상의 요소가 조건과 일치하지 않으면 Every() 메서드는 false 를 반환합니다.
일부()some() 메서드는 Every() 메서드와 유사하지만 적어도 하나의 요소가 조건과 일치하는지 확인한다는 점만 다릅니다. 그리고 이 경우 some() 메서드는 true 를 반환합니다. 배열에 조건과 일치하는 요소가 없으면 false가 반환됩니다.
변수 번호 = [1, -12, 8, -4, 25, 42]; 함수 조건(값, 인덱스, 배열) ( var 결과 = false; if (값 === 8) ( 결과 = true; ) return result; ); var 전달 = 숫자.일부(조건); // 진실
필터()some() 및 Every() 와 같은 filter() 메서드는 조건 함수를 허용합니다. 그러나 동시에 이 조건을 충족하는 요소의 배열을 반환합니다.
변수 번호 = [1, -12, 8, -4, 25, 42]; 함수 조건(값, 인덱스, 배열) ( var 결과 = false; if (값 > 0) ( 결과 = true; ) 반환 결과; ); varfilteredNumbers = 숫자.필터(조건); for(var i=0; 나는< filteredNumbers.length; i++)
document.write(filteredNumbers[i] + "
");
브라우저 출력:
1 8 25 42
forEach() 및 map()forEach() 및 map() 메서드는 요소를 반복하고 특정 작업을 수행합니다. 예를 들어 배열에 있는 숫자의 제곱을 계산하려면 다음 코드를 사용할 수 있습니다.
변수 번호 = [1, 2, 3, 4, 5, 6]; for(var i = 0; 나는
- HTML
- 자바스크립트
jQuery의 각 메소드에서 마지막 인덱스(항목)를 확인하는 방법을 살펴보겠습니다.
// 요소 선택 var myList = $("ul li"); // 선택 항목의 요소 수를 결정합니다. var total = myList.length; // 선택한 요소를 반복합니다. myList.each(function(index) ( if (index === total - 1) ( // 선택 항목의 마지막 요소입니다. ) ));
forEach() 메서드는 각 배열 요소에 대해 제공된 함수를 한 번씩 실행합니다.
이 대화형 예제의 소스는 GitHub 저장소에 저장되어 있습니다. 대화형 예제 프로젝트에 기여하고 싶다면 https://github.com/mdn/interactive-examples를 복제하고 풀 요청을 보내주세요.
구문 arr .forEach(callback(currentValue [, index [, array]]) [, thisArg ]) 매개변수 callback 각 요소에 대해 실행할 함수입니다. 이는 1개에서 3개 사이의 인수를 허용합니다. currentValue 배열에서 처리 중인 현재 요소입니다. index 아니요 배열의 index currentValue입니다. array 선택 사항 forEach() 배열이 호출되었습니다. thisArg 선택적 콜백 실행 시 this로 사용할 값입니다. 반환 값 설명forEach()는 배열의 각 요소에 대해 제공된 콜백 함수를 오름차순으로 한 번씩 호출합니다. 삭제되었거나 초기화되지 않은 인덱스 속성에 대해서는 호출되지 않습니다. (희소 배열의 경우 .)
콜백은 세 가지 인수로 호출됩니다.
thisArg 매개변수가 forEach()에 제공되면 콜백의 this 값으로 사용됩니다. thisArg 값은 궁극적으로 콜백에 의해 관찰 가능하며 함수에서 보이는 this를 결정하는 일반적인 규칙에 따라 결정됩니다.
forEach()에서 처리되는 요소의 범위는 callback을 처음 호출하기 전에 설정됩니다. forEach() 호출이 시작된 후 배열에 추가된 요소는 콜백에서 방문되지 않습니다. 배열의 기존 요소가 변경되거나 삭제되면 콜백에 전달되는 해당 값은 forEach()가 해당 요소를 방문할 때의 값이 됩니다. 방문하기 전에 삭제된 요소는 방문되지 않습니다. 반복 중에 이미 방문한 요소가 제거되면(예: Shift() 사용) 이후 요소는 건너뜁니다. (아래의 예를 참조하세요.)
forEach()는 각 배열 요소에 대해 콜백 함수를 한 번씩 실행합니다. map() 또는 Reduce()와 달리 항상 정의되지 않은 값을 반환하며 연결 가능하지 않습니다. 일반적인 사용 사례는 체인 끝에서 부작용을 실행하는 것입니다.
forEach()는 호출된 배열을 변경하지 않습니다. (단, 콜백은 그렇게 할 수 있습니다)
예외를 발생시키는 것 외에는 forEach() 루프를 중지하거나 중단할 수 있는 방법이 없습니다. 이러한 동작이 필요한 경우 forEach() 메서드는 잘못된 도구입니다.
조기 종료는 다음을 통해 수행할 수 있습니다.
배열 메서드: Every() , some() , find() 및 findIndex() 는 실제 값을 반환하는 조건자로 배열 요소를 테스트하여 추가 반복이 필요한지 결정합니다.
예 초기화되지 않은 값(희소 배열)에 대한 작업 없음 const arraySparse = let numCallbackRuns = 0 arraySparse.forEach(function(element)( console.log(element) numCallbackRuns++ )) console.log("numCallbackRuns: ", numCallbackRuns) // 1 / / 3 // 7 // numCallbackRuns: 3 // 주석: 보시다시피 3과 7 사이의 누락된 값은 콜백 함수를 호출하지 않았습니다. for 루프를 forEach로 변환 const items = ["item1", "item2 ", "item3"] const copy = // 이전 for (let i = 0; i< items.length; i++) { copy.push(items[i]) } // after items.forEach(function(item){ copy.push(item) }) Printing the contents of an array참고: 콘솔에 배열의 내용을 표시하려면 배열의 형식화된 버전을 인쇄하는 console.table() 을 사용할 수 있습니다.
다음 예제에서는 forEach() 를 사용하는 대체 접근 방식을 보여줍니다.
다음 코드는 배열의 각 요소에 대한 행을 기록합니다.
함수 logArrayElements(element, index, array) ( console.log("a[" + index + "] = " + element) ) // 인덱스 2는 // 해당 위치에 항목이 없기 때문에 건너뜁니다. 배열... .forEach(logArrayElements) // 로그: // a = 2 // a = 5 // a = 9
이Arg를 사용하여다음 (인위적인) 예는 배열의 각 항목에서 객체의 속성을 업데이트합니다.
함수 Counter() ( this.sum = 0 this.count = 0 ) Counter.prototype.add = function(array) ( array.forEach(function(entry) ( this.sum += 항목 ++this.count ), this ) // ^---- 참고 ) const obj = new Counter() obj.add() obj.count // 3 obj.sum // 16
thisArg 매개변수(this)는 forEach()에 제공되므로 호출될 때마다 콜백에 전달됩니다. 콜백은 이를 this 값으로 사용합니다.
객체 복사 기능다음 코드는 특정 객체의 복사본을 만듭니다.
개체의 복사본을 만드는 방법에는 여러 가지가 있습니다. 다음은 ECMAScript 5 Object.* 메타 속성 함수를 사용하여 Array.prototype.forEach()가 작동하는 방식을 설명하기 위한 한 가지 방법입니다.
함수 copy(obj) ( const copy = Object.create(Object.getPrototypeOf(obj)) const propNames = Object.getOwnPropertyNames(obj) propNames.forEach(function(name) ( const desc = Object.getOwnPropertyDescriptor(obj, name) 객체 .defineProperty(copy, name, desc) )) return copy ) const obj1 = ( a: 1, b: 2 ) const obj2 = copy(obj1) // obj2는 이제 obj1처럼 보입니다.
반복 중에 배열이 수정되면 다른 요소를 건너뛸 수 있습니다.다음 예에서는 "one" , "two" , "four" 를 기록합니다.
"two" 값을 포함하는 항목이 있는 경우" is reached, the first entry of the whole array is shifted off-resulting in all remaining entries moving up one position. Because element "four" is now at an earlier position in the array, "three" will be skipped.!}
forEach()는 반복하기 전에 배열의 복사본을 만들지 않습니다.
단어 = ["1", "2", "3", "4"] word.forEach(function(word) ( console.log(word) if (word === "2") ( word.shift( ) ) )) // 하나 // 둘 // 넷
배열 평면화다음 예는 학습 목적으로만 여기에 있습니다. 내장 메소드를 사용하여 배열을 평면화하려면 Array.prototype.Flat()(ES2019의 일부로 예상되며 일부 브라우저에서 이미 구현됨)을 사용할 수 있습니다.
/** * 전달된 배열을 1차원 배열로 평면화합니다. * * @params (array) arr * @returns (array) */ function flatten(arr) ( const result = arr.forEach((i) => ( if (Array. isArray(i)) ( result.push(... flatten(i)) ) else ( result.push(i) )) return result ) // 사용법 const 문제 = , 8, 9]] flatten(problem) / /
Promise 또는 비동기 함수 사용 시 참고 사항 let ratings = let sum = 0 let sumFunction = async function (a, b) ( return a + b ) ratings.forEach(async function( rating) ( sum = wait sumFunction(sum, rating) ) ) console.log(sum) // 예상 출력: 14 // 실제 출력: 0| ECMAScript 최신 초안(ECMA-262) |
초안 | |
| ECMAScript 2015(6판, ECMA-262) 해당 사양의 "Array.prototype.forEach" 정의입니다. |
기준 | |
| ECMA스크립트 5.1(ECMA-262) 해당 사양의 "Array.prototype.forEach" 정의입니다. |
기준 | 초기 정의. JavaScript 1.6에서 구현되었습니다. |
이 페이지의 호환성 표는 구조화된 데이터에서 생성됩니다. 데이터에 기여하고 싶다면 https://github.com/mdn/browser-compat-data를 확인하고 풀 요청을 보내주세요.
GitHub에서 호환성 데이터 업데이트
| 데스크탑 모바일 서버 | ||||||||||||
| Chrome Edge Firefox Internet Explorer Opera Safari Android webview Android용 Chrome Android용 Firefox Android용 Opera iOS의 Safari Samsung Internet Node.js | ||||||||||||
| 크롬 전체 지원 1 | 엣지 전체 지원 12 | Firefox 전체 지원 1.5 | IE 전체 지원 9 | 오페라 전체 지원 예 | 사파리 완전 지원 3 | WebView Android 전체 지원 ≤37 | Chrome Android 전체 지원 18 | Firefox Android 전체 지원 4 | Opera Android 전체 지원 예 | Safari iOS 전체 지원 1 | 삼성 인터넷 안드로이드 전체 지원 1.0 | nodejs 전체 지원 예 |
- I. 실제 배열 반복
- forEach 메서드 및 관련 메서드
- for 루프
- for...in 루프의 올바른 사용
- for...of 루프(반복자의 암시적 사용)
- 반복자의 명시적 사용
- II. 배열과 유사한 객체 반복
- 메서드를 사용하여 실제 배열을 반복합니다.
- 실제 배열로 변환
- 런타임 객체에 대한 참고 사항
현재 실제 배열의 요소를 반복하는 세 가지 방법이 있습니다.
또한 곧 새로운 ECMAScript 6(ES 6) 표준의 출현으로 두 가지 방법이 더 추가될 것으로 예상됩니다.
프로젝트가 ECMAScript 5(ES5) 표준의 기능을 지원하도록 설계된 경우 혁신 기술 중 하나인 forEach 메서드를 사용할 수 있습니다.
사용 예:
Var a = ["a", "b", "c"]; a.forEach(function(entry) ( console.log(entry); ));
일반적으로 forEach를 사용하려면 이 방법을 기본적으로 지원하지 않는 브라우저에 대해 es5-shim 에뮬레이션 라이브러리를 연결해야 합니다. 여기에는 IE 8 이하 버전이 포함되며 일부 장소에서는 아직 사용되고 있습니다.
forEach의 장점은 현재 배열 요소의 인덱스와 값을 저장하기 위해 로컬 변수를 선언할 필요가 없다는 점입니다. 이는 자동으로 콜백 함수에 인수로 전달되기 때문입니다.
각 요소에 대해 콜백을 호출하는 데 드는 비용이 걱정된다면 걱정하지 말고 이 글을 읽어보세요.
forEach는 배열의 모든 요소를 반복하도록 설계되었지만 그 외에도 ES5는 전체 또는 일부 요소를 반복하고 해당 요소에 대해 일부 작업을 수행하는 데 더 유용한 몇 가지 방법을 제공합니다.
- Every - 배열의 각 요소에 대해 콜백이 true 로 변환될 수 있는 값을 반환하는 경우 true를 반환합니다.
- some - 배열의 하나 이상의 요소에 대해 콜백이 true로 변환될 수 있는 값을 반환하는 경우 true를 반환합니다.
- 필터 - 콜백이 true 를 반환하는 원래 배열의 요소를 포함하는 새 배열을 만듭니다.
- map - 콜백에서 반환된 값으로 구성된 새 배열을 만듭니다.
- 감소 - 배열을 단일 값으로 줄이고 첫 번째부터 시작하여 배열의 각 요소에 콜백을 차례로 적용합니다(배열 요소 및 기타 요약 함수의 합계를 계산하는 데 유용할 수 있음).
- ReduceRight - Reduce와 유사하게 작동하지만 요소를 역순으로 반복합니다.
규칙에 적합:
Var a = ["a", "b", "c"]; var 인덱스; (인덱스 = 0; 인덱스< a.length; ++index) { console.log(a); }
배열 길이가 루프 전체에서 일정하고 루프 자체가 성능이 중요한 코드 섹션에 속하는 경우(가능성은 낮음) 배열 길이를 저장하는 for 의 "더 최적" 버전을 사용할 수 있습니다. :
Var a = ["a", "b", "c"]; var 인덱스, len; for (index = 0, len = a.length; 인덱스< len; ++index) { console.log(a); }
이론적으로 이 코드는 이전 코드보다 조금 더 빠르게 실행되어야 합니다.
요소의 순서가 중요하지 않은 경우 최적화 측면에서 더 나아가 배열 길이를 저장하는 변수를 제거하고 검색 순서를 반대로 변경할 수 있습니다.
Var a = ["a", "b", "c"]; var 인덱스; for (index = a.length - 1; index >= 0; --index) ( console.log(a); )
그러나 최신 JavaScript 엔진에서는 이러한 최적화 게임이 일반적으로 아무 의미가 없습니다.
3. for...in 루프의 올바른 사용for...in 루프를 사용하라는 조언을 받은 경우 배열을 반복하는 것은 의도된 것이 아니라는 점을 기억하세요. 일반적인 오해와는 달리 for...in 루프는 배열 인덱스를 반복하는 것이 아니라 객체의 열거 가능한 속성을 통해 반복합니다.
그러나 희소 배열 반복과 같은 일부 경우에는 아래 예와 같이 예방 조치를 취하는 한 for...in이 유용할 수 있습니다.
// a - 희소 배열 var a = ; a = "a"; a = "비"; a = "c"; for (var key in a) ( if (a.hasOwnProperty(key) && /^0$|^d*$/.test(key) && key