배열 및 개체 조작 + DOM 차이점

너무 오랫동안(약 몇 주) For... 루프를 작성하기 시작할 때마다 제 자신을 두 번째로 추측했습니다. 여기서는 당면한 작업에 어떤 것을 사용해야 하는지, 잘못된 것을 선택했을 때 어떤 일이 발생할 수 있는지, 그리고 이것이 DOM 요소로 확장되는 방법을 알아보는 방법을 보여드리겠습니다.

...의

데이터 배열을 처리할 때 For...of 루프를 사용하는 것이 좋습니다.

여기에 루프가 입력될 때마다 배열의 새 항목이 i 값으로 로드됩니다. 여기서 첫 번째 console.log는 i가 array[0] 또는 'apple'의 값과 같다고 표시합니다. 두 번째는 '바나나' 등입니다. i는 항목의 인덱스 값과 같지 않습니다.

...에 대한

이제 개체의 경우 For...in 루프를 사용하고 싶습니다. 나는 모든 키와 값을 보기 위해 객체 내부를 보고 있다고 상상하는 것을 좋아합니다.

이러한 유형의 루프에서는 i가 재할당될 때마다 새 키를 얻습니다. 이제 objectLogger 함수를 변경하여 대신 값을 볼 수 있는지 확인하겠습니다.

i 대신 object[i]를 기록하도록 선택하면 개체의 모든 값을 볼 수 있습니다. 따라서 이러한 유형의 루프를 사용하여 개체의 모든 키:값 쌍에 대한 완전한 통찰력을 얻을 수 있습니다. 이와 같이 개체에 액세스할 때 염두에 두어야 할 중요한 사항은 개체 속성을 가져오기 위해 점 표기법을 사용하지 않고 대괄호라고도 하는 계산된 멤버 액세스 연산자를 대신 사용하는 것입니다. 이 기능에서 console.log 객체를 시도합니다. JavaScript가 문자 그대로 i라는 키를 찾기 위해 객체를 살펴보려 할 때 i는 정의되지 않은 오류를 발생시킵니다.

잊으면 어떻게 되나요?

개체를 배열인 것처럼 처리하려고 시도하는 경우 재앙적인 결과가 즉시 발생하고 코드를 실행하려고 시도하는 즉시 IDE에서 이를 명확하게 알립니다.

arrayLogger(animalObject)
// will return the following:
index.js:6 Uncaught TypeError: array is not iterable
    at arrayLogger (index.js:6:25)
    at HTMLDocument.<anonymous> (index.js:24:5)

그러나 배열을 객체로 취급하는 경우 흥미로운 일이 발생합니다.

objectLogger(fruitArray)
//=> apple, banana, cantaloupe

객체의 하위 유형이기 때문에 실제로 JavaScript에서 객체로 배열을 처리할 수 있습니다.

확인 해봐:

console.log(typeof fruitArray)
//=> object
console.log(typeof animalObject)
//=> object

흥미로운. 이것은 배열과 객체를 구분하기 위해 typeof 연산자를 사용하는 것도 좋지 않은 생각인 이유이기도 합니다.

DOM 요소 및 처리 시 참고 사항

아름다운 HTML 페이지에서 몇 가지 실험을 한 후 HTML/Node 요소 모음을 함께 모을 때 정확히 어떤 일이 발생하는지 더 잘 처리할 수 있었습니다.

The relevant portion of my test HTML file.

I'll spare you the eye-searing entirety of the output.

이제 HTML 컬렉션 형식으로 요소를 수집할 때 어떤 일이 발생하는지 살펴보겠습니다.

const divItems = document.getElementsByTagName('div')
console.log(divItems)
//=> HTMLCollection(7) [div, div, div, div, div, div, div]
for (const i of divItems) {
    console.log(i)
}
// will output :
 //   <div>Hey</div>
 //   <div>it's</div>
 //   <div>a</div>
 //   <div>whole</div>
 //   <div>bunch</div>
 //   <div>of</div>
 //   <div>divs!</div>

자, 이 HTML 컬렉션은 일종의 배열입니다. 하지만 객체처럼 처리하면 어떻게 될까요?

for (const i in divItems) {
    console.log(i)
}
// will output the following (numbers on one line for readability)
// 0, 1, 2, 3, 4, 5, 6
// length
// item
// namedItem

와우, 비밀 속성. 이것이 바로 HTML 컬렉션이 단순한 배열보다 조금 더 중요한 이유입니다. 하지만 훨씬 우수한 querySelectorAll을 살펴보고 내가 처음에 그런 주장을 한 이유를 알아보겠습니다.

const divList = document.querySelectorAll('section div')
console.log(divList)
//=> NodeList(7) [div, div, div, div, div, div, div]
for (const i of divItems) {
    console.log(i)
}
// will output :
 //   <div>Hey</div>
 //   <div>it's</div>
 //   <div>a</div>
 //   <div>whole</div>
 //   <div>bunch</div>
 //   <div>of</div>
 //   <div>divs!</div>

지금까지는 거의 동일합니다. NodeList라고 불리는 것을 제외하고. 어쨌든, 그렇지? 하지만 잠시만요, 객체처럼 읽어봅시다.

for (const i in divItems) {
    console.log(i)
}
// will output the following (numbers on one line for readability)
// 0, 1, 2, 3, 4, 5, 6
// entries
// keys
// values
// forEach
// length
// item

그리고 제가 NodeList를 더 좋아하는 이유가 있습니다. Prototype에서 상속되었기 때문에 forEach 메서드를 사용할 수 있습니다(나중에 이에 대해 작성하겠습니다). HTML/노드 컬렉션에 대한 console.log를 전체적으로 확장하고 마지막 항목을 보면 For...in 루프에서 읽는 추가 개체 '키'를 찾을 수 있습니다.

Peering inside our HTML collection entry.

따라서 목표가 페이지의 여러 HTML 요소를 반복하는 것이라면 최선의 최선은 쿼리 SelectorAll 나쁜 소년을 사용하고 For...of 루프 또는 forEach 메서드를 사용하는 것입니다.

TL; DR

배열의 첫 번째, 두 번째 또는 n번째 항목을 알고 싶을 때 배열에서 For... of 루프를 사용하십시오. 개체 내부의 키:값 쌍을 보려면 개체에서 For... in 루프를 사용하십시오. HTMLCollections 및 NodeLists는 모두 배열 유형이지만 NodeList만이 forEach 메소드에 액세스할 수 있습니다.

읽어 주셔서 감사합니다!