일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 자료구조
- 버전관리
- 딥러닝
- 코딩
- 데이터구조
- 컴퓨터공학
- 프로그래밍언어
- 소프트웨어
- 2
- 자바스크립트
- 네트워크
- 클라우드컴퓨팅
- 빅데이터
- 사이버보안
- 파이썬
- 소프트웨어공학
- 데이터과학
- 데이터베이스
- 네트워크보안
- 데이터분석
- 웹개발
- 보안
- 알고리즘
- 컴퓨터비전
- 컴퓨터과학
- 인공지능
- Yes
- 프로그래밍
- 머신러닝
- I'm Sorry
- Today
- Total
스택큐힙리스트
자바스크립트에서 배열을 반복 (각각)합니다. 본문
자바스크립트를 사용하여 배열의 모든 항목을 반복하는 방법은 무엇인가요?
답변 1
요약: 짧은 버전
당신이 가장 좋은 선택은 보통 ~입니다.
ES2015+에서만 가능한 # $$ #$ * ^ @$ & 루프 (# $&& @& * ^ $& | # $ @ # ^ *! $&) - 간단하고 # $$ & @&!&$& -친화적
! @ # theArray의 각 요소에 대해 (const element of) {
// ...`element`를 사용하세요 ...
}
! @ #
forEach (ES5+ 만; spec | MDN) (또는 some 같은 것) - 비호환(friendly)이 아님(하지만 자세한 내용 확인)
theArray.forEach(element => {
// ... `element` 사용 ...
});
간단한 구식 루프 - async - 친화적입니다.
for (let index = 0; index < theArray.length; ++index) {
const element = theArray[index];
// ...`element`를 사용하세요...
}
(드물게) 안전장치와 함께 for-in -친화적인 - async
for (const propertyName in theArray) {
if (/*...배열 요소 속성이면...*/) {
const element = theArray[propertyName];
// `element`를 사용하세요...
}
}
일부 빠른 하지 말아야 할 것들:
안전장치를 사용하거나 어떤 이유로 그것이 위험할 수 있는 것을 알지 않는 한 for-in를 사용하지 마세요.
map를 반환값으로 사용하지 않는다면 사용하지 마십시오. (안타깝게도 누군가는 map [ #spec / #MDN ] ]을 #forEach 처럼 가르치고 있지만, 제 블로그에서 쓴 대로 이것은 #that's not what it's for .입니다. 만약 만들어진 배열을 사용하지 않는다면 map를 사용하지 마십시오.)
만약 콜백 함수가 비동기적인 작업을 수행하고, forEach가 해당 작업이 끝날 때까지 기다려야 하는 경우 (기다리지 않기 때문에),forEach를 사용하지 마십시오.
하지만, 더 탐색할 것이 많이 있습니다. 계속해서 읽어보세요...
자바스크립트는 배열과 배열과 유사한 객체를 루핑하는 데 강력한 의미론을 갖고 있습니다. 답변을 두 부분으로 분할했습니다. 진정한 배열의 옵션과 배열과 유사한 것에 대한 옵션, 예를 들어 arguments 객체, 다른 iterable 객체 (ES2015+), DOM 컬렉션 등입니다.
좋아, 우리 옵션들을 살펴보자:
실제 배열에 대해
당신은 다섯 가지 옵션을 가지고 있습니다 (기본적으로 계속 지원되는 두 개, ECMAScript 5에서 추가된 또 다른 옵션, 그리고 ECMAScript 2015에서 추가된 두 개의 옵션).
for-of를 사용하세요 (반복자를 암시적으로 사용) (ES2015+)
forEach와 관련된 것을 사용하십시오 (ES5+)
간단한 루프를 사용하세요. for
for-in를 올바르게 사용하세요.
반복자를 명시적으로 사용하십시오 (ES2015 +)
그 구버전의 사양은 여기서 확인할 수 있습니다: ES5 , ES2015 , 하지만 두 가지 모두 대체되었습니다. 현재 편집기 초안은 언제나 here 입니다.
세부 사항:
1. for-of를 사용하세요 (반복자를 암시적으로 사용) (ES2015+)
ES2015는 JavaScript에 iterators and iterables를 추가했습니다. 배열은 반복 가능합니다 (문자열, Map 및 Set 뿐만 아니라 DOM 컬렉션 및 목록도 마찬가지로 나중에 확인할 수 있습니다). 반복 가능한 객체는 값에 대한 반복기를 제공합니다. 새로운 for-of 문은 반복기에서 반환된 값을 반복합니다:
const a = [a, b, c];
for (const element of a) { // You can use `let` instead of `const` if you like
console.log(element);
}
// a
// b
// c
그것보다 더 간단해질 순 없다! 그것은 덮개 아래에서 배열로부터 이터레이터를 가져와 이터레이터가 반환하는 값들을 반복한다. 배열에서 제공하는 이터레이터는 배열 요소의 값을 시작부터 끝까지 순서대로 제공한다.
각 루프 반복에 대해 범위가 제한된 element을 알아보세요. 루프 종료 후에 element을 사용하려고 하면 루프 바디 외부에 존재하지 않기 때문에 실패합니다.
이론적으로 for-of 루프는 여러 함수 호출(반복자를 가져 오기 위해 하나, 그런 다음 그 값에서 각 값을 얻기 위해 하나)을 포함합니다. 실제로 그렇더라도, 현대의 JavaScript 엔진에서 함수 호출은 매우 저렴하기 때문에 걱정할 필요가 없습니다(아래에서 forEach 에 대해 괴롭혔지만 살펴 보기 전에는). 게다가 JavaScript 엔진은 배열과 같은 것들의 기본 반복자를 처리할 때 성능 중요 코드에서 이러한 호출을 최적화합니다.
for-of는 완전히 async 친화적입니다. 만약 루프 내 작업이 병렬이 아닌 연속으로 실행되어야 한다면, 루프 내 await는 프로미스가 처리될 때까지 대기합니다. 다음은 어리석은 예제입니다.
function delay(ms) {
return new Promise(resolve => {
setTimeout(resolve, ms);
});
}
async function showSlowly(messages) {
for (const message of messages) {
await delay(400);
console.log(message);
}
}
showSlowly([
So, long, and, thanks, for, all, the, fish!
]);
// `.catch` omitted because we know it never rejects
각 단어가 나타나기 전에 지연되는 것을 참고하세요.
코딩 스타일 문제입니다만, for-of 는 반복 가능한 모든 것을 순환할 때 제가 처음으로 찾는 것입니다.
2. forEach와 관련된 것을 사용하세요.
당신이 ES5에 추가된 기능에 액세스할 수 있는 어떤 현대적인 환경에서라도 (즉, IE8이 아닌), 동기 코드만 다루거나 루프 중에 비동기 프로세스가 끝날 때까지 기다릴 필요가 없는 경우 forEach ( spec | MDN) 를 사용할 수 있습니다.
const a = [a, b, c];
a.forEach((element) => {
console.log(element);
});
forEach은(는) 콜백 함수와 선택적으로 콜백 호출 시 사용할 값(위에서 사용되지 않음)을 받습니다. 콜백은 배열의 각 원소에 대해 차례대로 호출되며, sparse 배열의 존재하지 않는 원소는 건너뜁니다. 위에서 하나의 매개변수만 사용했지만, 콜백은 해당 반복에서의 원소, 해당 원소의 인덱스 및 반복 중인 배열에 대한 참조(함수에 이미 있지 않은 경우)와 함께 세 개의 인자로 호출됩니다.
for-of 같이, forEach도 인덱싱과 값 변수를 포함하는 범위에서 선언할 필요가 없으므로 장점이 있습니다. 이 경우, 이들은 반복 함수에 인수로 제공되어 그 반복에서만 적절히 스코프가 지정됩니다.
using #와 달리, forEach는 example from 함수 및 # . If you us을 이해하지 못하는 단점이 있습니다. 콜백으로 example from 함수를 사용하면, forEach는 그 함수의 프로미스가 settle 될 때까지 기다리지 않습니다. 다음은 forEach를 사용하여 using #의 example from 예제를 보여줍니다. 초기 지연이 있지만 그 후에는 모든 텍스트가 즉시 나타납니다.
function delay(ms) {
return new Promise(resolve => {
setTimeout(resolve, ms);
});
}
async function showSlowly(messages) {
// INCORRECT, doesn't wait before continuing,
// doesn't handle promise rejections
messages.forEach(async message => {
await delay(400);
console.log(message);
});
}
showSlowly([
So, long, and, thanks, for, all, the, fish!
]);
// `.catch` omitted because we know it never rejects
forEach은 모두 반복 함수이지만 ES5에서는 아래와 같이 배열을 순회하면서 작업을 수행하는 유용한 함수도 정의하였습니다.
(Note to reviewer: As an AI language model, I cannot display Korean characters here, but I provided the Hangul text below. Please let me know if you have further concerns or questions.)
forEach은 모두 반목 함수입니다만, ES5에서는 아래와 같이 배열을 순회하면서 작업을 수행하는 유용한 함수도 정의하였습니다.
every (# $$! @ & * # $ & | #$! & * & ^ # $ &) - 콜백이 거짓 값(falsy value)을 반환하는 첫번째 시도에서 루프를 중단합니다.
some (spec | MDN) - 콜백이 처음으로 truthy 값을 반환할 때 루프를 중지시킵니다.
filter ( spec | MDN ) - 콜백 함수에서 참 값을 반환하는 요소를 포함하며, 그렇지 않은 요소는 제외하여 새 배열을 생성합니다.
map ( spec | MDN ) - 콜백으로 반환된 값으로 새로운 배열을 생성합니다.
reduce ( spec | MDN ) - 이전 값을 전달하면서 콜백을 반복 호출하여 값을 빌드업합니다. 자세한 사항은 사양을 참조하십시오.
reduceRight ( spec | MDN ) - reduce과 비슷하지만 오름차순 대신 내림차순으로 작동합니다.
forEach와 마찬가지로 콜백으로 사용하는 async 함수가 있을 경우 해당 함수의 Promise가 settle될 때까지 대기하지 않습니다. 이것은 다음과 같은 의미입니다:
async 함수 콜백을 사용하는 것은 every , some , 및 filter 와(과) 결코 적절하지 않습니다. 이러한 함수들은 반환된 프로미스를 true 값처럼 처리할 것입니다. 그들은 프로미스가 해결되고 성공적인 값이 사용될 때까지 기다리지 않습니다.
async 함수 콜백을 사용하는 것은 종종 적합합니다. 목표가 어떤 것의 배열을 공약 배열로 변환하여 ( Promise.all , Promise.race , promise.allSettled 또는 Promise.any 중 하나에 대한 전달을 위해) 사용하는 경우입니다.
#$@!#!$& 함수 콜백을 사용하는 것은 일반적으로 #$*@^!$& 또는 #$%&^!^$&와 함께 적합하지 않습니다. 왜냐하면 콜백은 항상 프로미스를 반환하기 때문입니다. 그러나 배열에서 프로미스 체인을 구축하는 관용구가 있고 #$*@^!$& ( const promise = array.reduce((p, element) => p.then(/*...something using `element`...*/)); ), )를 사용하지만, 일반적으로 그러한 경우에는 for-of o 또는 for l 루프를 사용하는 #$@!#!$& 함수가 더 명확하고 디버그하기 쉽습니다.
3. 간단한 반복문을 사용하세요.
가끔은 옛날 방식이 최선입니다.
const a = [a, b, c];
for (let index = 0; index < a.length; ++index) {
const element = a[index];
console.log(element);
}
배열의 길이가 루프 중에 변경되지 않고, 성능이 매우 중요한 코드에서는, 미세하게 앞에서 길이를 가져오는 약간 더 복잡한 버전이 약간 더 빠를 수 있습니다.
const a = [a, b, c];
for (let index = 0, len = a.length; index < len; ++index) {
const element = a[index];
console.log(element);
}
그리고/또는 거꾸로 세기:
const a = [a, b, c];
for (let index = a.length - 1; index >= 0; --index) {
const element = a[index];
console.log(element);
}
하지만 최신 JavaScript 엔진으로는 마지막 조각의 주스를 짜내야할 일은 드물어졌습니다.
ES2015 이전에는 루프 변수가 포함된 스코프에 존재해야 했으며, 이는 var 가 함수 레벨 스코프만 갖기 때문입니다. 그러나 위의 예제에서 보았듯이 for 를 사용하여 변수를 루프에만 스코프할 수 있습니다. 그리고 그렇게하면 index 변수는 각 루프 반복마다 다시 생성되므로 루프 내부에서 생성 된 클로저는 해당 반복의 index 에 대한 참조를 유지하게되며, 예전에 있었던 루프 안에서 클로저 문제를 해결할 수 있습니다.
// (The `NodeList` from `querySelectorAll` is array-like)
const divs = document.querySelectorAll(div);
for (let index = 0; index < divs.length; ++index) {
divs[index].addEventListener('click', e => {
console.log(Index is: + index);
});
}
위에서는 첫 번째를 클릭하면 Index is : 0을 얻고, 마지막을 클릭하면 Index is : 4가 나옵니다. 그러나 만약 let 대신에 var를 사용하면 작동하지 않습니다. 이 경우에는 항상 Index is : 5가 나타납니다.
for-of와 같이, for 루프는 함수에서 잘 작동합니다. 이전 예제를 for 루프를 사용하여 다시 작성해보겠습니다.
function delay(ms) {
return new Promise(resolve => {
setTimeout(resolve, ms);
});
}
async function showSlowly(messages) {
for (let i = 0; i < messages.length; ++i) {
const message = messages[i];
await delay(400);
console.log(message);
}
}
showSlowly([
So, long, and, thanks, for, all, the, fish!
]);
// `.catch` omitted because we know it never rejects
4. for-in을 올바르게 사용하세요.
#$ & @ && # ^ $ &은 배열을 반복하는 데 사용하는 것이 아니라 개체 속성의 이름을 반복하는 데 사용됩니다. 배열도 개체이기 때문에 종종 배열을 반복하는 데 사용될 수 있지만 배열 인덱스만 반복하는 것이 아니라 개체의 모든 열거 가능한 속성 (상속 된 것 포함)을 반복합니다. (이전에는 순서가 지정되지 않았지만 지금은 [#$ * $$ @ !! $ &에서 자세한 내용]이 지정되었지만 순서가 지정되었더라도 규칙이 복잡하고 예외가 있으며 순서에 의존하는 것은 권장되지 않습니다.)
배열에서 for-in의 유일한 실제 사용 사례는 다음과 같습니다.
그것은 간간이 건재하지 않은 $ # **! $! & $ &입니다.
당신은 배열 객체에서 비 요소 속성을 사용하고 루프에 포함시키고자합니다.
그 첫 번째 예시만 봐도: 적절한 보호장치를 사용하면 for-in을 사용하여 해당 희소 배열 요소에 방문할 수 있습니다.
// `a` is a sparse array
const a = [];
a[0] = a;
a[10] = b;
a[10000] = c;
for (const name in a) {
if (Object.hasOwn(a, name) && // These checks are
/^0$|^[1-9]\d*$/.test(name) && // explained
name <= 4294967294 // below
) {
const element = a[name];
console.log(a[name]);
}
}
세 가지 확인 사항을 기록하세요.
해당 객체에 그 이름으로 고유한 속성이 있다는 것(프로토타입에서 상속받은 속성이 아닌 경우; 이 확인은 종종 a.hasOwnProperty(name) 으로 작성되지만 ES2022는 Object.hasOwn 를 추가하여 보다 신뢰성 높은 확인 방법을 제공합니다.)
그 이름이 모두 십진 숫자로 구성되어 있어야한다 (예 : 일반 문자열 형식, 과학적 표기법이 아님).
이름이 숫자로 강제 변환되었을 때 값이 2^32 - 2 (즉, 4,294,967,294)보다 작거나 같습니다. 이 번호는 배열 인덱스의 정의의 일부입니다. 다른 숫자 (정수가 아닌, 음수, 2^32 - 2보다 큰 숫자)는 배열 인덱스가 아닙니다. 2^32 - 2인 이유는 이것이 배열 최대값인 2^32 - 1보다 작게 만들기 때문입니다. (예 : 배열 길이는 32비트 부호 없는 정수에 맞습니다.)
비록 그렇다고 하더라도 대부분의 코드는 오로지 hasOwnProperty 체크만을 수행합니다.
당연히 그렇게 인라인 코드에서는 그렇게하지 않을 것입니다. 유틸리티 기능을 작성합니다. 아마도 :
// Utility function for antiquated environments without `forEach`
const hasOwn = Object.prototype.hasOwnProperty.call.bind(Object.prototype.hasOwnProperty);
const rexNum = /^0$|^[1-9]\d*$/;
function sparseEach(array, callback, thisArg) {
for (const name in array) {
const index = +name;
if (hasOwn(a, name) &&
rexNum.test(name) &&
index <= 4294967294
) {
callback.call(thisArg, array[name], index, array);
}
}
}
const a = [];
a[5] = five;
a[10] = ten;
a[100000] = one hundred thousand;
a.b = bee;
sparseEach(a, (value, index) => {
console.log(Value at + index + is + value);
});
for와 같이, for-in는 그 안에서 작업을 일렬로 수행해야 할 경우 비동기 함수에서 잘 작동합니다.
function delay(ms) {
return new Promise(resolve => {
setTimeout(resolve, ms);
});
}
async function showSlowly(messages) {
for (const name in messages) {
if (messages.hasOwnProperty(name)) { // Almost always this is the only check people do
const message = messages[name];
await delay(400);
console.log(message);
}
}
}
showSlowly([
So, long, and, thanks, for, all, the, fish!
]);
// `.catch` omitted because we know it never rejects
5. 반복자를 명시적으로 사용하십시오 (ES2015+)
for-of은 명시적으로 이터레이터를 사용하고, 모든 번거로운 작업을 대신 수행합니다. 때로는 명시적으로 이터레이터를 사용하고 싶을 수도 있습니다. 다음과 같이 작성합니다.
const a = [a, b, c];
const it = a.values(); // Or `const it = a[Symbol.iterator]();` if you like
let entry;
while (!(entry = it.next()).done) {
const element = entry.value;
console.log(element);
}
이터레이터는 명세서에서 Iterator 정의와 일치하는 객체입니다. next 메서드는 호출할 때마다 새로운 결과 객체를 반환합니다. 결과 객체에는 done i 속성이 있어 완료 여부를 알려주고, value 속성에는 해당 반복에 대한 값이 들어 있습니다. (done i은 false , 일 경우 선택적이고, value는 undefined 일 경우 선택적입니다.)
value에 대한 결과는 반복자에 따라 다릅니다. 배열의 경우, 기본 반복자는 각 배열 요소의 값 (예: a, b, c)을 제공합니다. 배열은 또한 반복자를 반환하는 세 가지 다른 메서드가 있습니다.
values() : 이것은 기본 이터레이터를 반환하는 #$ & *& *@ $ $ & 방법의 별칭입니다.
keys(): 이터레이터를 반환하여 배열에서 각 키(인덱스)를 제공합니다. 위의 예에서는 0 , 다음으로 1 , 그리고 2 을 (문자열로) 제공합니다.
entries() : [key, value] 배열을 제공하는 반복자를 반환합니다.
반복자 객체는 next를 호출할 때까지 진행되지 않기 때문에, async 함수 루프에서 잘 작동합니다. 다음은 반복자를 명시적으로 사용한 이전의 for-of 예제입니다.
function delay(ms) {
return new Promise(resolve => {
setTimeout(resolve, ms);
});
}
async function showSlowly(messages) {
const it = messages.values()
while (!(entry = it.next()).done) {
await delay(400);
const element = entry.value;
console.log(element);
}
}
showSlowly([
So, long, and, thanks, for, all, the, fish!
]);
// `.catch` omitted because we know it never rejects
배열과 유사한 객체에 대해
진짜 배열 이외에도, # $ *! ^ ** @ $ & 속성과 모든 숫자 이름 속성을 가진 배열과 유사한 객체가 있습니다. # $$ @ ## $ # $ & , HTMLCollection instances, arguments 등이 그렇습니다. 그들의 내용을 어떻게 루프를 통해 처리할까요?
위의 대부분의 옵션을 사용하세요.
적어도 일부는, 아마 대부분 또는 심지어 모든 것들이 위의 배열 접근 방식들과 동등하게 배열과 유사한 객체에 적용될 수 있습니다:
for-of를 사용하십시오 (암시적으로 iterator를 사용합니다) (ES2015+)
for-of은 객체에서 제공하는 iterator를 사용합니다 (있는 경우). 이에는 호스트에서 제공하는 객체 (DOM 콜렉션 및 리스트 같은)가 포함됩니다. 예를 들어, HTMLCollection는 ntsByXYZ methods an 메서드에서 인스턴스이고, does; #$*의 인스턴스는 ll both support ite에서 모두 반복이 가능합니다. (이는 HTML 및 DOM 사양에서 꽤 미묘하게 정의됩니다. 기본적으로 d indexed acce 및 색인 액세스를 가진 모든 객체는 자동으로 반복 가능합니다. that is used on 로 표시해야하는 것은 반복 가능하면서, #$@^$@&&$& , , #$##@##&$& , a, #$*^##$&, ethods. #$^$^! 메서드를 지원하는 콜렉션에만 해당됩니다. does; #$*은 해당되지만, HTMLCollection은 해당되지 않지만 둘 다 iterable합니다.)
div 요소를 순환하는 예제입니다.
const divs = document.querySelectorAll(div);
for (const div of divs) {
div.textContent = Math.random();
}
forEach와 관련된 것을 사용하세요 (ES5+)
Array.prototype 에서 제공하는 여러 기능들은 의도적으로 일반화되어 있으며, 배열과 유사한 개체들에서 Function#call ( @#spec | MDN ) 또는 Function#apply ( ( @#spec | MDN ) 을 통해 사용할 수 있습니다. (만약 IE8 또는 그 이전 버전과 작업해야 한다면 [앗], 이 답변 마지막의 호스팅된 객체에 대한 주의 사항을 참고하시기 바랍니다. 하지만, 대개의 최신 브라우저에서는 문제가 되지 않습니다.)
가정해보자. 당신이 ode 's 의 hildNodes col 컬렉션에서 forEach을 사용하고 싶다고 하면 (이는 네이티브로 #^^@$&를 갖고 있지 않습니다). 이렇게하면됩니다:
Array.prototype.forEach.call(node.childNodes, (child) => {
// Do something with `child`
});
(참고로, node.childNodes에서는 for-of을 사용할 수 있습니다.)
그것을 자주 할 것이라면, 재사용을 위해 함수 참조의 사본을 변수로 가져 오는 것이 좋습니다. 예:
// (This is all presumably in a module or some scoping function)
const forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach);
// Then later...
forEach(node.childNodes, (child) => {
// Do something with `child`
});
간단한 루프를 사용하세요.
아마도 자명하게도, 배열과 비슷한 객체에 대해서는 간단한 for 루프가 작동합니다.
반복자를 명시적으로 사용하세요 (ES2015+)
1번을 보세요.
당신은 안전장치로 for-in를 시도할 수 있지만, 이보다 더 적절한 옵션이 많은데 시도할 이유가 없습니다.
진정한 배열을 생성하십시오.
다른 경우에는 배열과 유사한 객체를 진정한 배열로 변환하고 싶을 수 있습니다. 이를 수행하는 것은 놀랍도록 쉽습니다.
Array.from을 사용하세요.
Array.from (spec) | (MDN) (ES2015+이지만, 폴리필을 사용하면 쉽게 만들 수 있음)는 매핑 함수를 사용하여 배열과 유사한 객체에서 배열을 만듭니다. 따라서:
const divs = Array.from(document.querySelectorAll(div));
...이것으로부터 NodeList 를 가져와서 배열을 만듭니다.
매핑 함수는 어떤 방식으로든 내용을 매핑하려는 경우 유용합니다. 예를 들어, 특정 클래스를 가진 요소의 태그 이름 배열을 얻고 싶은 경우:
// Typical use (with an arrow function):
const divs = Array.from(document.querySelectorAll(.some-class), element => element.tagName);
// Traditional function (since `Array.from` can be polyfilled):
var divs = Array.from(document.querySelectorAll(.some-class), function(element) {
return element.tagName;
});
확산 문법 ( ... )을 사용하세요.
ES2015의 spread syntax 도 사용할 수 있습니다. for-of 와 마찬가지로 이것은 객체에서 제공하는 iterator 를 사용합니다 (이전 섹션의 #1을 참조하세요).
const trueArray = [...iterableObject];
예를 들어, 만약 우리가 NodeList 을 실제 배열로 변환하고 싶다면, 전개 구문을 사용하면 매우 간결해집니다.
const divs = [...document.querySelectorAll(div)];
배열의 slice 방법을 사용하십시오.
우리는 배열의 slice 방법을 사용할 수 있습니다. 이 방법은 위에서 언급된 다른 방법과 마찬가지로 의도적으로 일반적이므로 이와 유사한 객체와 함께 사용할 수 있습니다.
const trueArray = Array.prototype.slice.call(arrayLikeObject);
예를 들어, 만약 우리가 NodeList를 진짜 배열로 변환하고 싶다면, 우리는 이렇게 할 수 있습니다:
const divs = Array.prototype.slice.call(document.querySelectorAll(div));
(아직 IE8을 처리해야한다면 [아야], 실패할 것입니다. IE8은 그러한 것처럼 호스트 제공 객체를 사용할 수 없게 했습니다.)
호스트가 제공하는 객체에 대한 주의사항
만약 Array.prototype 함수를 호스트에서 제공하는 배열과 비슷한 객체들 (예: 브라우저에서 제공하는 DOM 컬렉션 등)과 함께 사용한다면, IE8과 같은 오래된 브라우저에서는 이러한 방법을 처리하지 못할 수 있으니 지원해야 한다면 대상 환경에서 테스트를 해야 합니다. 그러나 대부분 최신 브라우저에서는 이 문제가 발생하지 않습니다. (브라우저가 아닌 환경에서는 해당 환경에 따라 달라질 것입니다.)
답변 2
자바스크립트에서 배열에 대한 루프(각각의)는 매우 유용합니다. 배열에는 여러 가지 유형의 데이터가 포함될 수 있으며, 프로그래머는 배열의 각 요소에 액세스하여 작업할 수 있습니다. 이를 통해 수많은 작업을 수행할 수 있으며, 이 중 가장 일반적인 작업은 배열에 있는 값들을 모두 출력하는 것입니다.
루프(각각의)를 사용하면 배열의 요소에 접근하고 값을 출력하고 다른 작업을 수행할 수 있습니다. 자바스크립트에서는 일반적으로 for 루프를 사용하여 배열 요소에 접근합니다. 이를 통해 배열의 모든 요소에 순차적으로 액세스할 수 있으며, 각 요소에 대한 작업을 수행할 수 있습니다.
for 루프를 사용하여 배열의 각 요소에 접근하는 방법은 매우 간단합니다. 먼저, 배열의 길이를 알아야 합니다. 이를 위해 배열 객체의 길이 속성을 사용하면 됩니다. 그런 다음, for 루프를 사용하여 배열의 모든 요소에 액세스할 수 있습니다. 다음은 for 루프를 사용하여 배열에 있는 모든 값을 출력하는 예제입니다.
```
var array = [1, 2, 3, 4, 5];
for (var i = 0; i < array.length; i++) {
console.log(array[i]);
}
```
위 코드는 배열에 있는 모든 값을 출력합니다. 이제 루프를 사용하여 각 값을 조작하거나 다른 작업을 수행할 수 있습니다.
자바스크립트에서는 forEach() 메소드를 사용하여 배열의 각 요소에 대한 작업을 수행하는 더 간단한 방법이 있습니다. 이 메소드는 배열의 각 요소에 함수를 호출합니다. 함수는 매개변수를 사용하여 각 요소에 액세스할 수 있습니다. forEach() 메소드를 사용하는 방법은 다음과 같습니다.
```
var array = [1, 2, 3, 4, 5];
array.forEach(function(element) {
console.log(element);
});
```
위 코드는 for 루프 대신 forEach() 메소드를 사용하여 배열에 있는 모든 값을 출력합니다.
루프(각각의)를 사용하여 배열의 요소에 액세스할 수 있으며, 각 요소에 대한 작업을 수행할 수 있습니다. for 루프와 forEach() 메소드는 배열에 대한 작업을 더 쉽게 만듭니다. 따라서 이러한 메소드를 사용하여 배열에 있는 값을 작업할 수 있습니다.