자바스크립트 배열 반복
배열 반복 방법은 모든 배열 항목에서 작동합니다.
JavaScript 배열 forEach()
이 forEach()메서드는 각 배열 요소에 대해 한 번씩 함수(콜백 함수)를 호출합니다.
예시
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}
이 함수는 3개의 인수를 취합니다.
- 아이템 가치
- 아이템 인덱스
- 어레이 자체
위의 예에서는 값 매개변수만 사용합니다. 예제는 다음과 같이 다시 작성할 수 있습니다.
예시
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
}
자바스크립트 배열 맵()
이 map()메서드는 각 배열 요소에 대해 함수를 수행하여 새 배열을 만듭니다.
이 map()메서드는 값이 없는 배열 요소에 대해 함수를 실행하지 않습니다.
이 map()방법은 원래 배열을 변경하지 않습니다.
이 예에서는 각 배열 값에 2를 곱합니다.
예시
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
이 함수는 3개의 인수를 취합니다.
- 아이템 가치
- 아이템 인덱스
- 어레이 자체
콜백 함수가 값 매개변수만 사용하는 경우 인덱스 및 배열 매개변수를 생략할 수 있습니다.
예시
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
자바스크립트 배열 필터()
이 filter()메서드는 테스트를 통과한 배열 요소로 새 배열을 만듭니다.
이 예에서는 18보다 큰 값을 가진 요소에서 새 배열을 만듭니다.
예시
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
이 함수는 3개의 인수를 취합니다.
- 아이템 가치
- 아이템 인덱스
- 어레이 자체
위의 예에서 콜백 함수는 인덱스 및 배열 매개변수를 사용하지 않으므로 생략할 수 있습니다.
예시
const numbers = [45, 4, 9, 16, 25];
const over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
자바스크립트 배열 reduce()
이 reduce()메서드는 각 배열 요소에서 함수를 실행하여 단일 값을 생성(축소)합니다.
이 reduce()방법은 배열에서 왼쪽에서 오른쪽으로 작동합니다. 도 참조하십시오 reduceRight().
이 reduce()방법은 원래 배열을 줄이지 않습니다.
이 예에서는 배열에 있는 모든 숫자의 합을 찾습니다.
예시
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
이 함수는 4개의 인수를 취합니다.
- 합계(초기값/이전 반환값)
- 아이템 가치
- 아이템 인덱스
- 어레이 자체
위의 예에서는 인덱스 및 배열 매개변수를 사용하지 않습니다. 다음과 같이 다시 작성할 수 있습니다.
예시
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
이 reduce()메서드는 초기 값을 받아들일 수 있습니다.
예시
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction,
100);
function myFunction(total, value) {
return total + value;
}
자바스크립트 배열 reduceRight()
이 reduceRight()메서드는 각 배열 요소에서 함수를 실행하여 단일 값을 생성(축소)합니다.
reduceRight()배열에서 오른쪽에서 왼쪽으로 작동합니다 . 도 참조하십시오 reduce().
이 reduceRight()방법은 원래 배열을 줄이지 않습니다.
이 예에서는 배열에 있는 모든 숫자의 합을 찾습니다.
예시
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
이 함수는 4개의 인수를 취합니다.
- 합계(초기값/이전 반환값)
- 아이템 가치
- 아이템 인덱스
- 어레이 자체
위의 예에서는 인덱스 및 배열 매개변수를 사용하지 않습니다. 다음과 같이 다시 작성할 수 있습니다.
예시
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
JavaScript 배열 every()
메서드 는 every()모든 배열 값이 테스트를 통과하는지 확인합니다.
이 예에서는 모든 배열 값이 18보다 큰지 확인합니다.
예시
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
이 함수는 3개의 인수를 취합니다.
- 아이템 가치
- 아이템 인덱스
- 어레이 자체
콜백 함수가 첫 번째 매개변수(값)만 사용하는 경우 다른 매개변수는 생략할 수 있습니다.
예시
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
JavaScript 배열 some()
이 some()메서드는 일부 배열 값이 테스트를 통과하는지 확인합니다.
이 예에서는 일부 배열 값이 18보다 큰지 확인합니다.
예시
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
이 함수는 3개의 인수를 취합니다.
- 아이템 가치
- 아이템 인덱스
- 어레이 자체
자바스크립트 배열 indexOf()
이 indexOf()메서드는 배열에서 요소 값을 검색하고 해당 위치를 반환합니다.
참고: 첫 번째 항목의 위치는 0이고 두 번째 항목의 위치는 1입니다.
예시
"Apple" 항목에 대한 배열 검색:
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
통사론
array.indexOf(item, start)
| item | Required. The item to search for. |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the end. |
Array.indexOf()항목을 찾을 수 없으면 -1을 반환합니다.
항목이 두 번 이상 있으면 첫 번째 항목의 위치를 반환합니다.
자바스크립트 배열 lastIndexOf()
Array.lastIndexOf()와 동일 Array.indexOf()하지만 지정된 요소가 마지막으로 발생한 위치를 반환합니다.
예시
"Apple" 항목에 대한 배열 검색:
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
통사론
array.lastIndexOf(item, start)
| item | Required. The item to search for |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the beginning |
자바스크립트 배열 찾기()
이 find()메서드는 테스트 함수를 통과하는 첫 번째 배열 요소의 값을 반환합니다.
이 예에서는 18보다 큰 첫 번째 요소를 찾습니다(값 반환).
예시
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
이 함수는 3개의 인수를 취합니다.
- 아이템 가치
- 아이템 인덱스
- 어레이 자체
브라우저 지원
find()ES6 기능(JavaScript 2015)입니다.
모든 최신 브라우저에서 지원됩니다.
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
find()Internet Explorer에서는 지원되지 않습니다.
자바스크립트 배열 findIndex()
이 findIndex()메서드는 테스트 함수를 통과하는 첫 번째 배열 요소의 인덱스를 반환합니다.
이 예에서는 18보다 큰 첫 번째 요소의 인덱스를 찾습니다.
예시
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
이 함수는 3개의 인수를 취합니다.
- 아이템 가치
- 아이템 인덱스
- 어레이 자체
브라우저 지원
findIndex()ES6 기능(JavaScript 2015)입니다.
모든 최신 브라우저에서 지원됩니다.
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
findIndex()Internet Explorer에서는 지원되지 않습니다.
JavaScript Array.from()
이 Array.from()메서드는 길이 속성이 있는 모든 개체 또는 반복 가능한 개체에서 Array 개체를 반환합니다.
예시
문자열에서 배열 만들기:
Array.from("ABCDEFG");
브라우저 지원
from()ES6 기능(JavaScript 2015)입니다.
모든 최신 브라우저에서 지원됩니다.
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
from()Internet Explorer에서는 지원되지 않습니다.
자바스크립트 배열 키()
이 Array.keys()메서드는 배열 키가 있는 Array Iterator 객체를 반환합니다.
예시
Create an Array Iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
text += x + "<br>";
}
Browser Support
keys() is an ES6 feature (JavaScript 2015).
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
keys() is not supported in Internet Explorer.
JavaScript Array includes()
ECMAScript 2016 introduced Array.includes() to arrays.
This allows us to check if an element is present in an array (including NaN, unlike indexOf).
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.includes("Mango"); // is true
Syntax
array.includes(search-item)
Array.includes() allows to check for NaN values. Unlike Array.indexOf().
Array.includes() is not supported in Internet Explorer and Edge 12/13.
The first browser versions with full support are:
Browser Support
includes() is an ECMAScript 2016 feature.
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
includes() is not supported in Internet Explorer.
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.