목차
- array.entries() 예제 - 배열 반복자 반환
- array.entries() 정의
- array.entries() 구문
- array.entries() 예제 - for 반복문 출력 방법
array.entries() 예제 - 배열 반복자 반환
<p id="demo"></p>
<script>
const langs = ["HTML", "CSS", "JavaScript"];
const v = langs.entries(); // {} : Object Array Iterator
for (let x of v) {
document.getElementById("demo").innerHTML += x + " ";
}
</script>
결과값: 0,HTML 1,CSS 2,JavaScript
PS. key/value 별도 구분 출력하려면, 아래 코드 이용.
array.entries() 정의
key,value 쌍으로 구성된 객체배열반복자(object Array Iterator) 객체 반환.
1.
- 원본 배열을 변경 X.
- 색인번호 0은 키(key), 색인번호 1은 값(value)에 해당.
- 주로 객체 속성 순회 후 각 속성의 키와 값을 함께 처리 시 유용.
- for(...of...) 반복문과 함께 주로 사용.
2.
for...of...반복문 이용해 웹에 출력할 때와 콘솔로 출력할 때 형태가 다름.
- 웹: key,value
- 콘솔: [key, value]
3.
IE 제외한 주요 최신브라우저 모두 지원.
4. MDN entries() 예제보기
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries
array.entries() 구문
array.entries()
[매개변수]
없음.
[반환값]
key,value 쌍으로 구성된 객체배열반복자(object Array Iterator) 객체 반환. (object 타입)
array.entries() 예제 - for 반복문 출력 방법
[key, value 모두 출력]
<p id="demo"></p>
<script>
const langs = ["HTML", "CSS", "JavaScript"];
const v = langs.entries();
for (let [key, value] of v) {
document.getElementById("demo").innerHTML += [key,value] + " ";
}
</script>
결과값: 0,HTML 1,CSS 2,JavaScript
[key만 출력]
<p id="demo"></p>
<script>
const langs = ["HTML", "CSS", "JavaScript"];
const v = langs.entries();
for (let [key, value] of v) {
document.getElementById("demo").innerHTML += [key] + " ";
}
</script>
결과값: 0 1 2
[value만 출력]
<p id="demo"></p>
<script>
const langs = ["HTML", "CSS", "JavaScript"];
const v = langs.entries();
for (let [key, value] of v) {
document.getElementById("demo").innerHTML += [value] + " ";
}
</script>
결과값: HTML CSS JavaScript
PS.
- 「for (let [key] of v) {... 」 처럼 key만 반복할 수도 있음.
- [key, value] 대신 [a, b]처럼 임의의 변수 사용 가능. 단, a는 key, b는 value 의미.
