JSARRAY ITERATION
배열 반복 방법은 모든 배열 항목에서 작동한다.
The Array forEach() Method
forEach()메서드는 각 배열 요소에 대해 한번씩 함수(콜백함수)를 호출한다.
이 함수는 3개의 인자를 취한다.
- 아이템 값
- 아이템 인덱스
- Array 본인
위의 예시에서는 그 중 value 매개변수만 사용했다.
아래와 같이 value만 인자로 받게 할 수 있다.
The Array map() Method
map()메서드는 각 배열 요소에 대해 함수를 수행하여 새 배열을 만든다.
map()메서드는 값이 없는 배열 요소에 대한 함수를 실행하지 않는다.
map()메서드는 기존의 배열을 변경(수정)하지 않는다.
아래 예시에서는 각 배열 값에 2를 곱한다 :
map() 함수는 3개의 인자를 취한다.
- 아이템 값
- 아이템 인덱스
- Array 본인
콜백 함수가 값 매개변수만 사용하는 경우 인덱스 및 배열 매개변수를 생략 할 수 있다.
위의 예시에서는 그 중 value 매개변수만 사용했다.
아래와 같이 value만 인자로 받게 할 수 있다.
The Array filter() Method
filter()메서드는 테스트를 통과한 배열 요소로 새 배열을 만든다.
아래 예시에서는 18보다 큰 값을 가진 요소에서 새 배열을 만든다.
The Array reduce() Method
reduce()메서드는 각 배열 요소에서 함수를 실행하여 단일 값을 생성(축소)한다.
reduce()메서드는 배열에서 왼쪽에서 오른쪽으로 작동한다. reduceRight()를 참조하자.
reduce()메서드는 기존의 배열을 줄이거나 수정하지 않는다.
아래 예시에서는 배열에 있는 모든 숫자의 합을 찾는다.
reduce() 함수는 4개의 인자를 취한다.
total(초기값/이전 반환값)- 아이템 값
- 아이템 인덱스
- Array 본인
reduece()메서드는 초기값을 받아들일 수 있다.
The Array reduceRight() Method
reduceRight()메서드는 각 배열 요소에서 함수를 실행하여 단일 값을 생성(축소)한다.
reduceRight()메서드는 배열의 오른쪽에서 왼쪽으로 작동한다.reduce()를 참조하자.
reduceRight()메서드는 기존의 배열을 줄이거나 변경하지 않는다.
아래 예시에서는 배열에 있는 모든 숫자의 합을 찾는다.
reduceRight() 함수는 4개의 인자를 취한다.
total(초기값/이전 반환값)- 아이템 값
- 아이템 인덱스
- Array 본인
The Array every() Method
every()메서드는 모든 배열 값이 테스트를 통과하는지 확인한다.
아래 예시에서는 모든 배열 값이 18보다 큰지 확인한다.
결과로는 boolean형태로 리턴한다.
every() 함수는 3개의 인자를 취한다.
- 아이템 값
- 아이템 인덱스
- Array 본인
콜백 함수가 첫 번째 매개변수(value)만 사용하는 경우 다른 매개변수는 생략할 수 있다.
The Array some() Method
some()메서드는 일부 배열 값이 테스트를 통과하는지 확인한다.
아래 예시에서는 일부 배열 값이 18보다 큰지 확인한다.
some() 함수는 3개의 인자를 취한다.
- 아이템 값
- 아이템 인덱스
- Array 본인
The Array indexOf() Method
indexOf()메서드는 배열에서 요소 값을 검색하고 해당 위치를 index값으로 반환한다.
참고 : 첫 번째 항목의 위치는 0 이고 두번째 항목의 위치는 1이다.
Syntax
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을 반환한다.
항목이 두 번 이상 있으면 첫 번째 항목의 위치를(index값) 반환한다.
The Array lastIndexOf() Method
Array.lastindexOf()는 Array.indexOf()와 동일하지만 지정된 요소가 마지막으로 발생한 위치를 반환한다.
Syntax
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 |
항목이 두 번 이상 있으면 마지막 항목의 위치를(index값) 반환한다.
The Array includes() Method
ECMAScript2016(ES6)는 배열에 Array.includes()를 추가하였다.
이를 통해 요소가 배열안에 있는지 확인 할 수 있다.
(indexOf()과 달리 NaN을 포함)
Syntax
array.includes(search-item)Array.includes()를 사용하면 NaN 값을 확인할 수 있다.
Array.indexOf()와는 다르다.
The Array find() Method
find()메서드는 테스트 함수를 통과한 첫 번째 배열 요소의 값을 반환한다.
아래 예시에서는 18보다 큰 첫 번째 요소를 찾는다.(값을 반환)
find() 함수는 3개의 인자를 취한다.
- 아이템 값
- 아이템 인덱스
- Array 본인
The Array findIndex() Method
findindex()메서드는 테스트 함수를 통과한 첫 번째 배열의 요소를 인덱스로 반환한다.
아래 예시에서는 18보다 큰 첫 번째 요소의 인덱스를 찾는다.
findindex() 함수는 3개의 인자를 취한다.
- 아이템 값
- 아이템 인덱스
- Array 본인
The Array.from() Method
Array.from()메서드는 길이 속성이 있는 객체 또는 반복 가능한 객체에서 Array객체를 반환한다. (즉, 배열 형식으로 반환한다는 뜻이다.)
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>The Array.from() method returns an Array object from any object with a length property or any iterable object.</p>
<p id="demo"></p>
<script>
const myArr = Array.from("ABCDEFG");
document.getElementById("demo").innerHTML = myArr;
</script>
<p>The Array.from() method is not supported in Internet Explorer.</p>
</body>
</html>
The Array Keys() Method
Array.keys()메서드는 배열 키가 있는 Array Iterator객체를 반환한다.
배열의 키를 포함하는 Array Iterator 객체를 만든다.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>The Array.keys() method returns an Array Iterator object with the keys of the array.</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
<p>Array.keys() is not supported in Internet Explorer.</p>
</body>
</html>
Complete Array Reference
전체 Array에 대해 참고 하려면 아래 주소를 참조하자
(참조 : https://www.w3schools.com/jsref/jsref_obj_array.asp)
