JavaScript에서 배열을 반복합니다.

자바에서는 다음과 같이 배열에서 개체를 탐색하기 위해 for 루프를 사용할 수 있습니다.

String[] myStringArray = {Hello, World};

for (String s : myStringArray) {

// Do something

}

제이쿼리와 같은 기능을 자바스크립트로 할 수 있나요?

답변 1

세 가지 주요 옵션:

for (var i = 0; i < xs.length; i++) { console.log(xs[i]); }

xs.forEach((x, i) => console.log(x));

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 흐름 제어 문장을 사용할 수 있습니다.

단점

너무 말이 많아요.

명령형

off-by-one errors는 쉽게 발생할 수 있습니다. (가끔 울타리 기둥 오류라고도합니다.)

2. Array.prototype.forEach : (번역 불가능한 문자열)

ES5 명세는 많은 이점이 있는 배열 메서드를 도입했습니다. 그 중 하나인 Array.prototype.forEach 은 배열을 반복하는 간결한 방법을 제공합니다.

const array = [one, two, three]

array.forEach(function (item, index) {

console.log(item, index);

});

ES5 명세가 출시된 시점인 글 작성 시점에서 약 10년이 지나고, 현재 대부분의 모던 엔진이 데스크탑, 서버, 모바일 환경에서 구현되어 있으므로 안전하게 사용할 수 있습니다.

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

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

화살표 함수는 고대 플랫폼 (예: Internet Explorer 11 )을 지원하지 않을 계획이 아니라면 널리 구현되어 있으므로 안전하게 사용할 수 있습니다.

장점

매우 짧고 간결합니다.

선언문

단점

break / continue을(를) 사용할 수 없습니다.

일반적으로, 반복문에서 탈출해야 하는 필요성을 #$ * #!! $ * $ &의 배열 요소를 반복하기 전에 필터링하여 대체할 수 있습니다.

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 });

지도의 적절한 사용 사례:

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 문장:

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

이 문장은 모든 순방향 오브젝트와 발전기( \[Symbol.iterator\] 속성을 가진 어떤 오브젝트든)에 적용됩니다.

ES6에서 배열 객체는 기본적으로 반복 가능한(iterable) 내장형이므로, 다음 문장을 사용할 수 있습니다.

let colors = ['red', 'green', 'blue'];

for (const color of colors){

console.log(color);

}

장점

그것은 다양한 객체를 반복할 수 있습니다.

일반적인 흐름 제어 문을 사용할 수 있습니다 (break / continue).

비동기 값들을 일련적으로 반복하는 데 유용합니다.

단점

당신이 더 오래된 브라우저를 대상으로 한다면, 변환된 출력물은 might surprise you입니다.

for...in을 사용하지 마세요.

@zipcodeman은 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 방법은 자신의 속성만 열거할 수 있게 해줍니다. 그러니 객체가 물리적으로 가지고 있는 속성만을 열거합니다.

다음의 기사를 읽어보시기를 권하겠습니다.

Enumeration VS Iteration

답변 2

자바스크립트에서 배열을 반복하는 것은 매우 중요합니다. 이것은 배열의 요소를 하나씩 처리할 수 있는 무한한 가능성을 엽니다. 이를 통해 요소를 수정하거나 조작하고 배열에 저장된 데이터를 활용할 수 있습니다. 그러나 순환 (looping)을 통해 배열을 처리할 때에는 효율성과 안정성이 매우 중요합니다.

자바스크립트에서는 간단한 순환 (looping) 방법이 사용됩니다. 다음과 같이 배열을 순환 (looping) 하는 코드를 작성할 수 있습니다.

```

let fruits = [apple, banana, orange];

for (let i = 0; i < fruits.length; i++) {

console.log(fruits[i]);

}

```

위의 코드는 fruits 배열의 요소를 처음부터 끝까지 하나씩 순환 (looping) 합니다. 이 방법은 가장 기본적인 순환 (looping) 방법입니다.

간단한 순환 (looping) 문법을 사용하여 배열을 처리할 수 있지만, 더욱 효율적인 방법도 있습니다. for문은 다른 언어들과 마찬가지로 사용이 가능합니다만, 자바스크립트에는 다양한 순환 (looping) 메서드도 사용할 수 있습니다. 예를 들어, forEach() 메서드를 사용하여 배열을 처리할 수 있습니다.

```

let fruits = [apple, banana, orange];

fruits.forEach(function(fruit) {

console.log(fruit);

});

```

위의 코드는 fruits 배열을 처리하는 forEach() 메서드를 사용합니다. 이 방법은 매우 짧고 간결한 구문입니다. 또한, forEach() 메서드는 함수를 사용하므로 코드를 더욱 효율적이게 만들 수 있습니다.

자바스크립트에서 배열을 처리하는 것은 매우 중요합니다. 배열을 처리할 때 위의 방법들을 사용하여 효율적이고 안정적인 방법으로 처리할 수 있습니다. 이를 통해 데이터를 조작하고 다양한 작업을 수행할 수 있습니다. 이러한 작업은 자바스크립트의 능력을 활용하여 더욱 복잡한 작업을 수행하는 데 매우 유용합니다.