JavaScript 배열을 반복하는

1. for루프를 사용하여 JavaScript에서 배열을 반복합니다
2. while루프를 사용하여 JavaScript에서 배열을 반복합니다
3. do...while루프를 사용하여 JavaScript에서 배열을 반복합니다
4. forEach루프를 사용하여 JavaScript에서 배열을 반복합니다
5. for...of를 사용하여 JavaScript에서 배열을 반복합니다
6. for...in을 사용하여 JavaScript에서 배열을 반복합니다
7. map메서드를 사용하여 JavaScript에서 배열을 반복합니다
8. reduce메서드를 사용하여 JavaScript에서 배열을 반복합니다
9. filter메서드를 사용하여 JavaScript에서 배열을 반복합니다
10. some을 사용하여 JavaScript에서 배열을 반복합니다
11. every를 사용하여 JavaScript에서 배열을 반복합니다

이 자습서에서는 JavaScript에서 배열을 반복하는 방법을 설명합니다. for루프 및while루프와 같은 Vanilla JavaScript의 기존 메소드를 사용하거나forEach,for ... of,for ... in과 같이 ES5, ES6에서 도입 한 최신 메소드를 사용하여이를 수행 할 수 있습니다. , 사용 사례 및 코드의 속도 / 효율성에 따라 다른 많은 방법이 있습니다.

for루프를 사용하여 JavaScript에서 배열을 반복합니다

전통적인for루프는 C++, Java 등과 같은 다른 언어의for루프와 유사합니다. 여기에는 세 부분이 있습니다.

1. 변수 / 반복자의 초기화는 for 루프 실행 전에 실행됩니다.
2. 루프가 실행되기 전에 매번 확인할 조건입니다.
3. 루프 실행 후 매번 수행 할 단계.

const arr = [1, 2, 3, 4, 5, 6];
var length = arr.length;
for (var i = 0; i < length; i++) {
  console.log(arr[i]);
}

출력:

1
2
3
4
5
6

반복자i를 취하고 매 반복 후i를1만큼 증가시키는for루프를 사용하여 배열을 반복하고이를next요소로 이동합니다.

while루프를 사용하여 JavaScript에서 배열을 반복합니다

while루프는 매 반복 후 확인하는 조건이 있기 때문에 매우 간단하며이 조건이 충족되지 않으면 계속 실행됩니다.

const arr = [1, 2, 3, 4, 5, 6];
var length = arr.length;
let i = 0;

while (i < length) {
  console.log(arr[i]);
  i++;
}

for루프와 마찬가지로 반복자i를 가져 와서 모든 요소를 ​​루프하는 배열 길이까지 늘립니다.

do...while루프를 사용하여 JavaScript에서 배열을 반복합니다

do...while루프는 루프 조건이 거짓 인 경우에도 한 번 이상 실행된다는 사실을 제외하면while루프와 동일합니다. 따라서이 루프를 작성하는 동안주의해야합니다.

const arr = [1, 2, 3, 4, 5, 6];
var length = arr.length;
var i = 0;

do {
  console.log(arr[i]);
  i++;
} while (i < length);

forEach루프를 사용하여 JavaScript에서 배열을 반복합니다

ES5는 배열을 반복하는 새로운 방법으로forEach를 도입했습니다. forEach는 함수를 인수로 취하고 배열 내에있는 모든 요소에 대해 호출합니다.

const arr = [1, 2, 3, 4, 5, 6];
arr.forEach(item => console.log(item));

여기에서는 함수에 전달 된 인수를 인쇄하는 화살표 함수를 작성하고 해당 함수를forEach에 지정하여 배열을 반복하고 해당 요소를 인쇄했습니다.

for...of를 사용하여 JavaScript에서 배열을 반복합니다

ES6는 반복 가능한 객체의 개념을 도입했으며 배열 객체를 반복하는 데 사용할 수있는for ... of를 제공했습니다.

let arr = [1, 2, 3, 4, 5, 6];
for (const item of arr) {
  console.log(item);
}

우리는 그것을 일반 루프로 사용하지만 배열뿐만 아니라 광범위한 객체를 쉽게 반복합니다.

for...in을 사용하여 JavaScript에서 배열을 반복합니다

for ... in을 사용하여 배열을 반복 할 수 있지만 객체의 속성을 열거하므로 권장되지 않습니다. 배열 요소 외에도Array.prototype에 첨부 된 메소드도 열거합니다.

var arr = [1, 2, 3, 4, 5, 6];

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

map메서드를 사용하여 JavaScript에서 배열을 반복합니다

map메소드는 배열을 반복하고 각 요소에서 콜백 함수를 사용하고 새 배열을 반환합니다. 즉, 배열을 입력 받아 콜백 함수가 수행 한 계산을 통해 새 배열에 매핑합니다.

arr = [1, 2, 3, 4, 5, 6];
const square = (x) => {
  return Math.pow(x, 2);
} mapped = arr.map(square);
console.log(arr);
console.log(mapped);

여기서 우리는 입력 배열을 반복하고 배열 내부에 요소의 제곱이있는 배열을 형성했습니다.

reduce메서드를 사용하여 JavaScript에서 배열을 반복합니다

reduce메소드는 배열을 반복하고reducer함수를 호출하여 누산기 함수의 배열 계산 값을 저장합니다. 누산기는 배열을 통해 반복되는 누적 결과를 저장하기 위해 모든 반복에서 기억되는 변수입니다.

const arr = [1, 2, 3, 4];
const reducer = (accumulator, curr) => accumulator + curr;
console.log(arr.reduce(reducer));

여기서 우리는 배열을 반복하고 누산기 내부의 모든 요소를 ​​합산합니다.

filter메서드를 사용하여 JavaScript에서 배열을 반복합니다

filter메소드는 배열을 반복하고 특정 조건을 충족하는 요소를 필터링합니다.

const fruits =
    ['apple', 'orange', 'pomegranete', 'banana', 'pear', 'blueberry'];
const result = fruits.filter(word => word.length > 6);
console.log(result);

여기서 배열을 반복하고 주어진 과일 이름의 길이가 6보다 큰지 확인합니다. 그렇다면 결과 배열에 포함합니다. 즉, 필요한 요소를 필터링합니다.

some을 사용하여 JavaScript에서 배열을 반복합니다

배열을 반복하고 주어진 조건이 배열 내부에있는 요소 중 하나 이상에 의해 충족되는지 확인하는 데 사용됩니다.

array = [1, 2, 3, 4, 5, 6];
const under_three = x => x < 3;
console.log(array.some(under_three));

여기서some을 사용하여 배열 내에3보다 작은 요소가 있는지 확인합니다. 부울 값true또는false를 리턴합니다.

every를 사용하여 JavaScript에서 배열을 반복합니다

배열을 반복하고 배열 내부의 모든 요소가 주어진 조건을 충족하는지 확인하는 데 사용됩니다.

array = [1, 2, 3, 4, 5, 6];
const under_three = x => x < 3;
console.log(array.every(under_three));

여기서every를 사용하여 배열 내부에있는 모든 요소가3미만인지 여부를 확인합니다. 부울 값true또는false를 리턴합니다.