JavaScript에서 연관 배열을 만드는 방법. JavaScript 정의 및 응용 프로그램에서 배열을 반복하는 모든 방법

마지막 업데이트: 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
• 자바스크립트

$("ul#myList").children().each(function())( console.log($(this).text()); )); // 결과: // HTML // CSS // 자바스크립트

jQuery의 각 메소드에서 마지막 인덱스(항목)를 확인하는 방법을 살펴보겠습니다.

// 요소 선택 var myList = $("ul li"); // 선택 항목의 요소 수를 결정합니다. var total = myList.length; // 선택한 요소를 반복합니다. myList.each(function(index) ( if (index === total - 1) ( // 선택 항목의 마지막 요소입니다. ) ));

• I. 실제 배열 반복
• forEach 메서드 및 관련 메서드
• for 루프
• for...in 루프의 올바른 사용
• for...of 루프(반복자의 암시적 사용)
• 반복자의 명시적 사용
• II. 배열과 유사한 객체 반복
• 메서드를 사용하여 실제 배열을 반복합니다.
• 실제 배열로 변환
• 런타임 객체에 대한 참고 사항

I. 실제 배열 반복

현재 실제 배열의 요소를 반복하는 세 가지 방법이 있습니다.

메소드 Array.prototype.forEach ;

클래식 for 루프

for...in 루프를 "올바르게" 구성했습니다.

또한 곧 새로운 ECMAScript 6(ES 6) 표준의 출현으로 두 가지 방법이 더 추가될 것으로 예상됩니다.

for...of 루프(반복자의 암시적 사용);

반복자의 명시적인 사용.

1. forEach 메소드 및 관련 메소드

프로젝트가 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와 유사하게 작동하지만 요소를 역순으로 반복합니다.

2. For 루프

규칙에 적합:

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