JavaScript에서 배열을 통해 반복하는 여러 방법

 

질문 : JavaScript에서 배열을 통해 루프

---

for 루프를 사용하여 다음과 같이 배열의 객체를 순회 할 수 있습니다.

String[] myStringArray = {"Hello", "World"};
for (String s : myStringArray)
{
    // Do something
}

JavaScript에서도 똑같이 할 수 있습니까?

답변

---

세 가지 주요 옵션 :

1. for (var i = 0; i < xs.length; i++) { console.log(xs[i]); }
2. xs.forEach((x, i) => console.log(x));
3. for (const x of xs) { console.log(x); }

자세한 예는 다음과 같습니다.

1. 순차적 for 반복문:

var myStringArray = ["Hello","World"];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
    console.log(myStringArray[i]);
    //Do something
}

장점

• 모든 환경에서 작동
• break 및 continue 흐름 제어 문을 사용할 수 있습니다.

단점

• 너무 장황함
• 명령형
• 오프 바이 원 오류가 발생 하기 쉬움 (펜스 포스트 오류 라고도 함)

2. Array.prototype.forEach:

ES5 사양은 많은 유익한 어레이 방법을 도입했습니다. 그중 하나 인 Array.prototype.forEach 는 배열을 반복하는 간결한 방법을 제공했습니다.

const array = ["one", "two", "three"]
array.forEach(function (item, index) {
  console.log(item, index);
});

ES5 사양이 출시 된 시점 (2009 년 12 월)에 거의 10 년이 걸렸으므로 데스크톱, 서버 및 모바일 환경의 거의 모든 최신 엔진에 의해 구현되었으므로 안전하게 사용할 수 있습니다.

그리고 ES6 화살표 함수 구문을 사용하면 훨씬 더 간결합니다.

array.forEach(item => console.log(item));

고대 플랫폼 (예 : Internet Explorer 11 )을 지원할 계획이 없다면 Arrow 기능도 널리 구현됩니다. 당신은 또한 가도 안전합니다.

장점

• 매우 짧고 간결합니다.
• 선언적

단점

• break / continue 사용할 수 없습니다.

일반적으로, 당신은 할 필요가 대체 할 수있는 break 예를 들어,이를 반복하기 전에 배열 요소를 필터링하여 필수적 루프의 아웃 :

array.filter(item => item.condition < 10)
     .forEach(item => console.log(item))

다른 배열을 만들기 위해 배열을 반복하는 map 을 사용해야합니다. 이 안티 패턴을 여러 번 보았습니다.

안티 패턴 :

const numbers = [1,2,3,4,5], doubled = [];

numbers.forEach((n, i) => { doubled[i] = n * 2 });

map의 적절한 사용 사례 :

const numbers = [1,2,3,4,5];
const doubled = numbers.map(n => n * 2);

console.log(doubled);

또한 배열을 값으로 줄이려 는 경우 (예 : 숫자 배열의 합계를 구하려는 경우) reduce 메서드를 사용해야합니다.

안티 패턴 :

const numbers = [1,2,3,4,5];
const sum = 0;
numbers.forEach(num => { sum += num });

reduce의 적절한 사용 :

const numbers = [1,2,3,4,5];
const sum = numbers.reduce((total, n) => total + n, 0);

console.log(sum);

3. ES6 for-of statement:

ES6 표준은 반복 가능한 객체의 개념을 도입하고 데이터 탐색을위한 새로운 구조 인 for...of 문을 정의합니다.

이 문은 모든 종류의 반복 가능한 객체와 생성기 ( \[Symbol.iterator\] 속성이있는 모든 객체)에 대해 작동합니다.

배열 객체는 ES6에 정의 된 내장 이터 러블이므로 다음 문을 사용할 수 있습니다.

let colors = ['red', 'green', 'blue'];
for (const color of colors){
    console.log(color);
}

장점

• 매우 다양한 객체를 반복 할 수 있습니다.
• 일반적인 흐름 제어 문을 사용할 수 있습니다 ( break / continue ).
• 직렬 비동기 값을 반복하는 데 유용합니다.

단점

• 이전 브라우저를 대상으로하는 경우 트랜스 파일 된 출력에 놀랄 수 있습니다 .

 

for...in은 사용하지 마십시오.

for...in 문 사용을 제안 for-in 반복 배열의 경우 해당 문은 개체 속성 을 열거하기위한 것입니다.

다음과 같은 이유로 배열과 같은 객체에 사용해서는 안됩니다.

• 반복 순서는 보장되지 않습니다. 배열 인덱스는 숫자 순서로 방문 할 수 없습니다.
• 상속 된 속성도 열거됩니다.

두 번째 요점은 많은 문제를 일으킬 수 있다는 것입니다. 예를 들어 Array.prototype 객체를 확장하여 여기에 메서드를 포함하면 해당 속성도 열거됩니다.

예를 들면 :

Array.prototype.foo = "foo!";
var array = ['a', 'b', 'c'];

for (var i in array) {
    console.log(array[i]);
}

위의 코드는 "a", "b", "c"및 "foo!"를 콘솔 로그에 기록합니다.

네이티브 프로토 타입 확장에 크게 의존하는 라이브러리 (예 : MooTools )를 사용하는 경우 특히 문제가 될 수 있습니다.

앞서 말했듯이 for-in 문은 객체 속성을 열거 하는 데 있습니다. 예를 들면 다음과 같습니다.

var obj = {
    "a": 1,
    "b": 2,
    "c": 3
};

for (var prop in obj) {
    if (obj.hasOwnProperty(prop)) {
        // or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety...
        console.log("prop: " + prop + " value: " + obj[prop])
    }
}

위의 예에서 hasOwnProperty 메서드를 사용하면 자신의 속성 만 열거 할 수 있습니다. 그게 바로 객체가 물리적으로 가지고있는 속성이고 상속 된 속성은 없습니다.

다음 기사를 읽는 것이 좋습니다.

• 열거 VS 반복

출처 : https://stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript