programing

JavaScript에서 어레이를 루프합니다.

kingscode 2022. 10. 8. 16:57
반응형

JavaScript에서 어레이를 루프합니다.

에서는 Java 를 할 수 .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. 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 사양에서는 유익한 어레이 방법이 많이 도입되었습니다.그 중 하나인는 어레이를 반복하는 간결한 방법을 제시했습니다.

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

ES5 사양이 공개된 지 거의 10년(2009년 12월)이 지났기 때문에 데스크톱, 서버, 모바일 환경의 최신 엔진에서 거의 모두 구현되어 있기 때문에 안심하고 사용할 수 있습니다.

ES6 화살표 기능 구문을 사용하면 더욱 간결해집니다.

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

화살표 기능도 오래된 플랫폼(Internet Explorer 11 등)을 지원할 계획이 없는 한 광범위하게 구현되어 있으므로 안심하고 이용하실 수 있습니다.

장점

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

단점

  • 할 수 .breakcontinue

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

지도의 적절한 사용 사례:

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

console.log(doubled);

또한 배열을 값으로 줄이려는 경우(예: 숫자 배열을 합산하는 경우)에는 축소 방법을 사용해야 합니다.

안티 패턴:

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. ES6for-of★★★★★★★★

ES6 표준은 반복 가능한 객체의 개념을 도입하고 데이터 통과를 위한 새로운 구조인 데이터 통과를 정의한다.for...of★★★★★★ 。

이 문은 모든 종류의 반복 가능한 개체 및 생성기(속성이 있는 개체)에도 사용할 수 있습니다.

어레이 오브젝트는 ES6에 기본적으로 포함되어 있기 때문에 다음 문을 사용할 수 있습니다.

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

장점

  • 그것은 다양한 물체에 걸쳐 반복될 수 있다.
  • 제어문(「Flow Control을 할 수 .breakcontinue를 참조해 주세요.
  • 연속적으로 비동기 값을 반복할 때 유용합니다.

단점

「 」를하지 주세요.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])
JavaScript에서 어레이를 루프합니다.    }
}

예에서는, 「」를 해 주세요.hasOwnPropertymethod를 사용하면 자신의 속성만 열거할 수 있습니다.즉, 개체가 물리적으로 가지고 있는 속성만 상속된 속성은 없습니다.

다음 기사를 읽어보시길 권합니다.

,of 구현에 다음이 포함되어 있다고 가정합니다.ECMAScript 2015('Harmony' 릴리즈)에 도입된 기능...요즘엔 꽤 안전한 가정이죠

다음과 같이 동작합니다.

// REQUIRES ECMASCRIPT 2015+
var s, myStringArray = ["Hello", "World"];
for (s of myStringArray) {
  // ... do something with s ...
}

ECMAScript 2015는 블록 범위 변수도 제공하기 때문에 더 좋습니다.

// REQUIRES ECMASCRIPT 2015+
const myStringArray = ["Hello", "World"];
for (const s of myStringArray) {
  // ... do something with s ...
}
// s is no longer defined here

(수))s, ''로 할 수 .const「」를 참조해당됩니다.

어레이에 : "JavaScript"가되지 않을 수 .length; 이 리포트된 수치는 값이 저장되어 있는 가장 높은 인덱스보다1개 클 뿐입니다.배열에 포함된 요소가 길이로 표시된 것보다 적을 경우 스파스라고 합니다.예를 들어, 항목이 인덱스 3, 12 및 247에만 있는 어레이는 완전히 합법적입니다.length248로 보고되지만 실제로는 3개의 값만 저장합니다.인덱스에서 에 "Da's anympto"가 것으로 .undefined가치를 부여합니다.배열을 " 스루과 같은 . 즉, 로 나타내는 것인지, 즉, 즉 '루프 스루 스루', '루프 스루', '루프 스루', '루프 스루', '루프 스루 스루'를합니다.그 길이와 프로세스에 의해서 나타나는 모든 범위를 루프 하고 싶은가?undefined또는 실제로 존재하는 요소만 처리하시겠습니까?두 접근 방식 모두 많은 애플리케이션이 있습니다.어레이의 용도에 따라 다릅니다.

「」가 붙은 .forof이 실행됩니다.length가 「회수」로 .undefined어레이에 실제로 존재하지 않는 항목에 대해 설명합니다. with코드의 사항에 그 일 수 "do something with"라는 다른 접근.

일부 어떤 로든 아직 JavaScript 다른 . 어떤 이유로든 아직 지원하지 않는 자바스크립트 버전을 목표로 하기 때문입니다.forof.

사용 중인 JavaScript 구현이 ECMAScript 사양의 이전 버전(예를 들어 Internet Explorer 9 이전 버전 제외)에 준거하고 있는 한 루프 대신 반복기 방식을 사용할 수 있습니다.이 경우 어레이의 각 항목에 대해 호출할 함수를 전달합니다.

var myStringArray = [ "Hello", "World" ];
myStringArray.forEach( function(s) { 
     // ... do something with s ...
} );

물론 구현이 ES6+를 지원하는 경우 화살표 기능을 사용할 수 있습니다.

myStringArray.forEach( s => { 
     // ... do something with s ...
} );

★★★★★★★★★★★★★★★와 달리forof,.forEach는 배열에 실제로 존재하는 요소에 대해서만 함수를 호출합니다.3개의 요소와 248개의 길이를 가진 가상 어레이를 통과하면 함수는 248회가 아닌 3회만 호출됩니다.어레이를 이렇게 를 하십시오..forEach가 지원해도 이 될 수 .forof.

마지막 옵션은 모든 버전의 JavaScript에서 작동하며 명시적 카운트 루프입니다.단순히 0에서 길이보다 1 적게 카운트하고 카운터를 인덱스로 사용합니다.기본 루프는 다음과 같습니다.

var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length;
for (i=0; i<len; ++i) {
  s = myStringArray[i];
  // ... do something with s ...
}

이 방법의 장점 중 하나는 스파스 어레이의 처리 방법을 선택할 수 있다는 것입니다.로 실행합니다.length "time", "times", "times" 와 함께sundefined는, 「」와 .forof; 배열에 할 경우 다음과 같이 하십시오.forEach 간단한 '아까운데'를 수 있어요in다음 중 하나:

var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length;
for (i=0; i<len; ++i) {
  if (i in myStringArray) {
    s = myStringArray[i];
    // ... do something with s ...
  }
}

로컬 하는 것이 ).myStringArray.length루프 상태의 식)은 매번 속성 조회를 건너뛰기 때문에 성능에 큰 차이가 있을 수 있습니다.구에 을 알 수 있습니다.loop initialization 음 、 。

var i, len, myStringArray = [ "Hello", "World" ];
for (len = myStringArray.length, i=0; i<len; ++i) {

명시적 카운트 루프는 필요에 따라 각 값의 인덱스에 액세스할 수 있음을 의미합니다.는 또한 에 대한 변수로 됩니다.forEach을 사용하다

myStringArray.forEach( (s,i) => {
   // ... do something with s and i ...
});

forof를 제공하는하는 오브젝트가 의 만 해당됩니다.Array).forof에서는 동작합니다).Array #entries 메서드를 사용하여 [index, item]쌍의 배열로 변경하고 그 위에 반복할 수 있습니다.

for (const [i, s] of myStringArray.entries()) {
  // ... do something with s and i ...
}

forin 위한 JavaScript는 이름으로 갱신됨)을 입니다.Array. JavaScript는 Array입니다.length속성)을 사용하여 이론적으로 어레이를 루프할 수 있습니다.그러나 문제는 숫자 속성 값으로 제한되지 않고(메서드도 실제로는 값이 마감인 속성일 뿐이며) 숫자 순서대로 반복되지 않는다는 것입니다. 때문에 '이러한'은forin구문은 어레이를 통한 루프에는 사용하지 마십시오.

하시면 됩니다.mapPython이나 Haskell과 같은 다른 언어에서도 사용할 수 있는 기능적 프로그래밍 기술입니다.

[1,2,3,4].map( function(item) {
     alert(item);
})

일반적인 구문은 다음과 같습니다.

array.map(func)

으로는 ★★★★★★★★★★★★★★★」func는 배열의 항목인 하나의 매개 변수를 사용합니다.그러나 JavaScript의 경우 항목 색인인 두 번째 매개 변수와 배열 자체인 세 번째 매개 변수를 사용할 수 있습니다.

" " "array.map할 수 있습니다.

var x = [1,2,3,4].map( function(item) {return item * 10;});

x는 리는는는는는는입니다.[10,20,30,40].

함수를 인라인으로 쓸 필요는 없습니다.별도의 기능일 수 있습니다.

var item_processor = function(item) {
      // Do something complicated to an item
}

new_list = my_list.map(item_processor);

이는 다음과 같습니다.

 for (item in my_list) {item_processor(item);}

' 하면 안 돼'라는 은 안 돼new_list.

(myStringArray의 계속) {

(질문에 직접 답합니다.이제 할 수 있어요!)

다른 답변은 대부분 맞지만 ECMAScript는 (이 문서에서는)  6개 2015년에는 반복을 위한 새로운 메커니즘인 루프가 도입되고 있습니다.

이 새로운 구문은 JavaScript에서 배열을 반복하는 가장 우아한 방법입니다(반복 인덱스가 필요하지 않은 경우).

현재 Firefox 13+, Chrome 37+에서 작동하며 다른 브라우저에서는 기본적으로 작동하지 않습니다(아래 브라우저 호환성 참조).다행히 현재 차세대 기능을 사용할 수 있는 JavaScript 컴파일러(Babel 등)가 있습니다.

Node.js에서도 동작합니다(버전 0.12.0에서 테스트했습니다).

배열 반복

// You could also use "let" or "const" instead of "var" for block scope.
for (var letter of ["a", "b", "c"]) {
   console.log(letter);
}

개체 배열 반복

const band = [
  {firstName : 'John', lastName: 'Lennon'},
  {firstName : 'Paul', lastName: 'McCartney'}
];

for(const member of band){
  console.log(member.firstName + ' ' + member.lastName);
}

제너레이터 반복:

(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for에서 추출한 정보.../)

function* fibonacci() { // A generator function
  let [prev, curr] = [1, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (const n of fibonacci()) {
  console.log(n);
  // Truncate the sequence at 1000
  if (n >= 1000) {
    break;
  }
}

호환성 표: http://kangax.github.io/compat-table/es6/ #test-for..of_for_filename

사양: http://wiki.ecmascript.org/doku.php?id=harmony:iterators

}

루프가 , for-in은 JavaScript를 하는 for하다

for(var i=0, len=myArray.length; i < len; i++){}

어레이 길이 캐싱도 최적화되어 있습니다.더 배우고 싶다면, 그 주제에 대한글을 읽어보세요.

이제 Opera, Safari, Firefox 및 Chrome은 많은 공통 루프를 최적화하기 위한 일련의 확장 어레이 방식을 공유합니다.

모든 것이 필요한 것은 아니지만 매우 유용할 수 있습니다.또는 모든 브라우저가 이러한 기능을 지원하는 경우 유용합니다.

사용자가 직접 추가할 수 있도록 Mozilla Labs와 WebKit 모두 사용하는 알고리즘을 공개했습니다.

filter는 특정 조건 또는 테스트를 충족하는 항목의 배열을 반환합니다.

every는 모든 어레이 멤버가 테스트를 통과하면 true를 반환합니다.

테스트에 합격한 사람이 있으면 true를 반환하는 사람도 있습니다.

for는 각 어레이 멤버에서 함수를 실행하고 아무것도 반환하지 않습니다.

은 각 요소의 작업 결과 배열을 반환합니다.

이러한 메서드는 모두 첫 번째 인수로 함수를 사용하고 옵션인 두 번째 인수로 구성됩니다.이 인수는 함수를 루프할 때 어레이 멤버에게 적용하려는 객체입니다.

필요할 때까지 무시하세요.

indexOflastIndexOf는 인수와 정확히 일치하는 첫 번째 또는 마지막 요소의 적절한 위치를 찾습니다.

(function(){
    var p, ap= Array.prototype, p2={
        filter: function(fun, scope){
            var L= this.length, A= [], i= 0, val;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        val= this[i];
                        if(fun.call(scope, val, i, this)){
                            A[A.length]= val;
                        }
                    }
                    ++i;
                }
            }
            return A;
        },
        every: function(fun, scope){
            var L= this.length, i= 0;
            if(typeof fun== 'function'){
                while(i<L){
                    if(i in this && !fun.call(scope, this[i], i, this))
                        return false;
                    ++i;
                }
                return true;
            }
            return null;
        },
        forEach: function(fun, scope){
            var L= this.length, i= 0;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        fun.call(scope, this[i], i, this);
                    }
                    ++i;
                }
            }
            return this;
        },
        indexOf: function(what, i){
            i= i || 0;
            var L= this.length;
            while(i< L){
                if(this[i]=== what)
                    return i;
                ++i;
            }
            return -1;
        },
        lastIndexOf: function(what, i){
            var L= this.length;
            i= i || L-1;
            if(isNaN(i) || i>= L)
                i= L-1;
            else
                if(i< 0) i += L;
            while(i> -1){
                if(this[i]=== what)
                    return i;
                --i;
            }
            return -1;
        },
        map: function(fun, scope){
            var L= this.length, A= Array(this.length), i= 0, val;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        A[i]= fun.call(scope, this[i], i, this);
                    }
                    ++i;
                }
                return A;
            }
        },
        some: function(fun, scope){
            var i= 0, L= this.length;
            if(typeof fun== 'function'){
                while(i<L){
                    if(i in this && fun.call(scope, this[i], i, this))
                        return true;
                    ++i;
                }
                return false;
            }
        }
    }
    for(p in p2){
        if(!ap[p])
            ap[p]= p2[p];
    }
    return true;
})();

어레이를 루프하는 6가지 방법

배열은 다양한 방법으로 루프할 수 있습니다.저는 제가 좋아하는 6가지 방법을 위에서 아래로 분류했습니다.

1. 루프에 사용

단순히 어레이를 루프하는 것만으로for루프가 내 첫 번째 선택이야

let array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

2. 각 루프에 사용

forEachloop을 입니다.또한 어레이와 요소에 대한 유연성과 제어성도 향상됩니다.

let array = [1, 2, 3, 4, 5];
array.forEach((element) => {
  console.log(element);
});

3. …에 사용

for...of요소에 수 .loop을 사용하면 어레이 요소에 직접 액세스할 수 있습니다.

let array = [1, 2, 3, 4, 5];
for (let element of array) {
  console.log(element);
}

4. 루프에서...에 사용

for...in는 어레이 요소에 액세스할 수 있는 키를 제공합니다.

let array = [1, 2, 3, 4, 5];
for(let index in array){
  console.log(array[index]);
}

5. while loop 사용

루프를 사용하여 어레이를 루프할 수도 있습니다.

let array = [1, 2, 3, 4, 5];
let length = array.length;
while(length > 0){
  console.log(array[array.length - length]);
  length--;
}

6. '도'를 사용하여...while loop

저는 ★★★★★★★★★★★★★★★★★★★★★★★★★★★.do...while

let array = [1, 2, 3, 4, 5];
let length = array.length;
do {
  console.log(array[array.length - length]);
  length--;
}
while (length > 0)

서론

대학 시절부터 자바, JavaScript, Pascal, ABAP, PHP, Progress 4GL, C/C++, 그리고 아마도 지금 당장은 생각할 수 없는 몇 가지 언어로 프로그래밍을 했습니다.

그들 모두는 그들만의 언어적 기형을 가지고 있지만, 이들 언어들은 많은 기본적인 개념들을 공유한다. 절차/기능, 또는 절차/기능,IF, - 스테이트먼트,FOR, - 계약서WHILE--. - - -


의 통인 afor 스위치

의 통인 afor는 3가지되어 있습니다.루프에는 3가지 요소가 있습니다.

  1. 초기화: 룩 블록이 처음 실행되기 전에 실행됩니다.
  2. 조건: 루프 블록이 실행되기 전에 매번 상태를 확인하고 false일 경우 루프를 종료합니다.
  3. 후: 루프 블록이 실행된 후 매번 수행됨

세 은 서로 있다; 요소 은 선택 , 다음 작은 3가지 구성 요소입니다.for루프 가능한:루프 가능:

for (;;) {
    // Do stuff
}

물론, 너필요가 있습니다 포함할 물론, 다음 명령어를을 포함해야 할 것이다.if(condition === true) { break; }또는또는if(condition === true) { return; }안쪽 어디에선가 그 그 안 어딘가에for-loop 달리는 중단시키기 위해.-루프를눌러 실행을 중지합니다.

그러나 일반적으로 초기화를 사용하여 인덱스를 선언하고 조건을 사용하여 인덱스를 최소값 또는 최대값과 비교하며 이후 고려사항을 사용하여 인덱스를 증가시킵니다.

for (var i = 0, length = 10; i < length; i++) {
    console.log(i);
}

사용 전통적인 종래의를 사용하여for루프는array배열을 루프하다를 통해에 다.

어레이를 루프하는 기존의 방법은 다음과 같습니다.

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

반대로 루프하는 경우는, 다음과 같이 실시합니다.

for (var i = myArray.length - 1; i > -1; i--) {
    console.log(myArray[i]);
}

단, 다음과 같은 다양한 종류가 있습니다.

for (var key = 0, value = myArray[key], length = myArray.length; key < length; value = myArray[++key]) {
    console.log(value);
}

...아니면 이건...

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

...혹은 이것:

var key = 0, value;
for (; value = myArray[key++];){
    console.log(value);
}

어떤 것이 가장 적합한지는 대부분 개인의 취향과 구현하려는 특정 사용 사례에 달려 있습니다.

이러한 변형은 모두 매우 오래된 브라우저를 포함하여 모든 브라우저에서 지원됩니다.


A whileloop고리

한 대신할 수에 한가지 대안 있는 것은for의 고리는루프는은while루프. 배열을 통해, 여러분 이:루프 할 수 있는 재생하려면.같이 하십시오 다음과어레이를 루프하려면.

var key = 0;
while(value = myArray[key++]){
    console.log(value);
}

전통적인 종래와 같은처럼for루프, 루프,while루프는 가장 오래된 브라우저에서도 지원됩니다.

다시 될 수 .for 「」, 「」 입니다.while의 loop은 이 동작과 합니다.for- - 루우프:

for(var key = 0; value = myArray[key++];){
    console.log(value);
}

For...in ★★★★★★★★★★★★★★★★★」for...of

JavaScript 에서는 다음 작업도 수행할 수 있습니다.

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

이것은 인 '아까운'과 을 하지해서 사용해야 합니다.for모든 경우에 루프가 발생하며 고려해야 할 잠재적 부작용이 있습니다.자세한 내용은 어레이 반복에 "in..."을 사용하는 것이 좋지 않은 이유를 참조하십시오.자세한 것은, 을 참조해 주세요.

의 대체 수단으로서 「」도 있습니다.다음 예시는 의 차이를 나타내고 있습니다.for...of와 '루프'의for...in 디세이블로그:

var myArray = [3, 5, 7];
myArray.foo = "hello";

for (var i in myArray) {
  console.log(i); // logs 0, 1, 2, "foo"
}

for (var i of myArray) {
  console.log(i); // logs 3, 5, 7
}

버전도 Internet .for...of(Edge 12+는 가능) 및 그 자체for...in★ Internet Explorer 10 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」


Array.prototype.forEach()

「 」의 for-syslog는 다음 구문을 사용합니다.

myArray.forEach(function(value, key, myArray) {
    console.log(value);
});

Array.prototype.forEach()Internet Explorer 9 후 explorer explorer 9 9 。


라이브러리

인 지지 also also, 은 also also also also also also also also also also also also also also also also also also also also also also also also also also also also 도 있습니다.foreach★★★ 있는 것은 같습니다AFAIK의 가장 인기 있는 것은 다음과 같습니다.

, j쿼리의 경우jQuery.each():

$.each(myArray, function(key, value) {
    console.log(value);
});

_.each(), 밑줄.js:

_.each(myArray, function(value, key, myArray) {
    console.log(value);
});

_.forEach(), 로다시:

_.forEach(myArray, function(value, key) {
    console.log(value);
});

while 루프 사용...

var i = 0, item, items = ['one', 'two', 'three'];
while(item = items[i++]){
    console.log(item);
}

로그: '1', '2', '3'

또한 역순의 경우 보다 효율적인 루프가 제공됩니다.

var items = ['one', 'two', 'three'], i = items.length;
while(i--){
    console.log(items[i]);
}

로그: '3', '2', '1'

클래식 '아예전의 음악도 있고for 디세이블로그:

var items = ['one', 'two', 'three']
for(var i=0, l = items.length; i < l; i++){
    console.log(items[i]);
}

기록: '1', '2', '3'

레퍼런스:구글 폐쇄: JavaScript를 쓰지 않는 방법

고속 루프를 간단하게 기술하고, 반대로 반복할 수 있는 경우는, 다음과 같이 합니다.

for (var i=myArray.length;i--;){
  var item=myArray[i];
}

수 장점이 (이것은 「이행」과 합니다).for (var i=0, len=myArray.length; i<len; ++i) ★★★★★★★★★★★★★★와 달리for (var i=0; i<myArray.length; ++i)이치노

반복 중에 DOM에서 항목을 삭제할 예정인 활성 NodeList를 반복하는 경우 등 반대로 반복해야 할 경우가 있습니다.

자바스크립트에서는 기능적인 프로그래밍 방식으로 어레이를 루프하는 경우가 있습니다.

1. 어레이를 루프하기만 하면 됩니다.

const myArray = [{x:100}, {x:200}, {x:300}];

myArray.forEach((element, index, array) => {
    console.log(element.x); // 100, 200, 300
    console.log(index); // 0, 1, 2
    console.log(array); // same myArray object 3 times
});

메모: Array.protype.ForEach()는 엄밀하게 말하면 기능적인 방법이 아닙니다.입력 파라미터로 사용하는 함수는 값을 반환하지 않기 때문에 순수한 함수로 간주할 수 없습니다.

2. 어레이 내의 요소 중 하나라도 테스트에 합격했는지 확인합니다.

const people = [
    {name: 'John', age: 23}, 
    {name: 'Andrew', age: 3}, 
    {name: 'Peter', age: 8}, 
    {name: 'Hanna', age: 14}, 
    {name: 'Adam', age: 37}];

const anyAdult = people.some(person => person.age >= 18);
console.log(anyAdult); // true

3. 새로운 어레이로의 이행

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]

주의: map() 메서드는 호출 배열 내의 모든 요소에 대해 제공된 함수를 호출한 결과로 새 배열을 만듭니다.

4. 특정 성질을 집계하여 그 평균을 산출한다.

const myArray = [{x:100}, {x:200}, {x:300}];

const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);
console.log(sum); // 600 = 0 + 100 + 200 + 300

const average = sum / myArray.length;
console.log(average); // 200

5. 원래 어레이를 기반으로 새로운 어레이를 작성하지만 수정은 하지 않는다.

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => {
    return {
        ...element,
        x: element.x * 2
    };
});

console.log(myArray); // [100, 200, 300]
console.log(newArray); // [200, 400, 600]

6. 각 카테고리의 수를 세다

const people = [
    {name: 'John', group: 'A'}, 
    {name: 'Andrew', group: 'C'}, 
    {name: 'Peter', group: 'A'}, 
    {name: 'James', group: 'B'}, 
    {name: 'Hanna', group: 'A'}, 
    {name: 'Adam', group: 'B'}];

const groupInfo = people.reduce((groups, person) => {
    const {A = 0, B = 0, C = 0} = groups;
    if (person.group === 'A') {
        return {...groups, A: A + 1};
    } else if (person.group === 'B') {
        return {...groups, B: B + 1};
    } else {
        return {...groups, C: C + 1};
    }
}, {});

console.log(groupInfo); // {A: 3, C: 1, B: 2}

7. 특정 기준에 따라 어레이의 서브셋을 취득한다.

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}] 

주의: filter() 메서드는 지정된 함수에 의해 구현된 테스트를 통과한 모든 요소를 사용하여 새 배열을 만듭니다.

8. 어레이 정렬

const people = [
  { name: "John", age: 21 },
  { name: "Peter", age: 31 },
  { name: "Andrew", age: 29 },
  { name: "Thomas", age: 25 }
];

let sortByAge = people.sort(function (p1, p2) {
  return p1.age - p2.age;
});

console.log(sortByAge);

여기에 이미지 설명 입력

9. 배열에서 요소를 찾습니다.

const people = [ {name: "john", age:23},
                {name: "john", age:43},
                {name: "jim", age:101},
                {name: "bob", age:67} ];

const john = people.find(person => person.name === 'john');
console.log(john);

여기에 이미지 설명 입력

Array.protype.find() 메서드는 제공된 테스트 함수를 충족하는 배열의 첫 번째 요소 값을 반환합니다.

레퍼런스

, 루프를 사용하여 JavaScript에서도 동일한 작업을 수행할 수 있지만 에 국한되지 않습니다.JavaScript에서 어레이를 루프오버하는 방법은 여러 가지가 있습니다.아래에 다음과 같은 배열이 있다고 가정해 보겠습니다.

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

해결책은 다음과 같습니다.

1) 루프용

A for루프는 JavaScript에서 어레이를 루프하는 일반적인 방법이지만 대규모 어레이에서는 가장 빠른 솔루션으로 간주되지 않습니다.

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

2) While loop(루프 중)

while loop은 긴 배열을 루프하는 가장 빠른 방법으로 간주되지만 일반적으로 JavaScript 코드에서는 덜 사용됩니다.

let i=0;

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

동안 3) 하다
A do while while하다

let i=0;
do {
  console.log(arr[i]);
  i++;
}
while (arr.length>i);

JavaScript 루프를 실행하는 주요 방법은 다음과 같습니다만, 그 밖에도 몇 가지 방법이 있습니다.

,을 합니다.for in자바스크립트

, 을 봐 주세요.map(),filter(),reduce() 등은 JavaScript의 합니다.은 일을 더 잘 할 수 .while ★★★★★★★★★★★★★★★★★」for.

JavaScript의 어레이를 통한 비동기 함수에 대해 자세히 알아보려면 이 문서를 참고하십시오.

기능적 프로그래밍은 요즘 개발업계에서 큰 인기를 끌고 있다.그리고 타당한 이유로:기능적 기술을 사용하면 한눈에 이해하기 쉽고, 리팩터 및 테스트를 쉽게 수행할 수 있는 선언적 코드를 작성할 수 있습니다.

함수 프로그래밍의 기초 중 하나는 목록과 목록 연산을 특수하게 사용하는 것입니다.소리 그대로입니다.여러 가지가 배열되어 있고그들에게 하는 짓이 있어요그러나 기능적 사고방식은 예상과 조금 다르게 그들을 대합니다.

이 기사에서는 "빅3" 목록 작업인 맵, 필터링 및 축소에 대해 자세히 설명합니다.이 세 가지 기능에 대해 머리를 감싸는 것은 깔끔한 기능 코드를 작성하기 위한 중요한 단계이며, 기능적이고 반응적인 프로그래밍이라는 매우 강력한 기술의 문을 엽니다.

또한 for 루프를 다시 쓸 필요가 없습니다.

자세한 내용은 이쪽:

루프에 암묵적인 범위가 거의 없고 추가 변수를 제거할 수 있는 방법이 있습니다.

var i = 0,
     item;

// Note this is weak to sparse arrays or falsey values
for ( ; item = myStringArray[i++] ; ){
    item; // This is the string at the index.
}

정말 for 디세이블로그:

var i = 0,
    len = myStringArray.length; // Cache the length

for ( ; i < len ; i++ ){
    myStringArray[i]; // Don't use this if you plan on changing the length of the array
}

메서드를 지원합니다.forEach,map,reduce,filter어레이 프로토타입의 많은 다른 방법들이 있습니다.

JavaScript에서 어레이를 루프하는 방법은 다양합니다.

범용 루프:

var i;
for (i = 0; i < substr.length; ++i) {
    // Do something with `substr[i]`
}

ES5의 각 용도:

substr.forEach(function(item) {
    // Do something with `item`
});

jQuery.각각:

jQuery.each(substr, function(index, item) {
    // Do something with `item` (or `this` is also `item` if you like)
});

자세한 내용은 여기를 참조해 주세요.또한 MDN이 JavaScript 내의 어레이를 루프하고 jQuery를 사용하여 각 어레이에 대해 jQuery를 체크할 수도 있습니다.

배열 루프:

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

오브젝트 루프:

for(var prop in obj){
    var propValue = obj[prop];
    console.log(propValue);
}

Underscore.js 라이브러리를 사용할 것을 강력히 권장합니다.어레이/컬렉션에서 반복하기 위해 사용할 수 있는 다양한 기능을 제공합니다.

예:

_.each([1, 2, 3], function(num){ alert(num); });
=> alerts each number in turn...

어레이 반복에 사용할 수 있는 여러 메커니즘의 퍼포먼스 측면에 관심이 있는 사용자는 다음 JSPerf 테스트를 준비했습니다.

https://jsperf.com/fastest-array-iterator

퍼포먼스 결과

결과:

의 ★★★★for()특히 어레이 길이가 캐시된 상태에서 사용할 경우 가장 빠른 방법입니다.

let arr = [1,2,3,4,5];

for(let i=0, size=arr.length; i<size; i++){
    // Do something
}

Array.prototype.forEach()Array.prototype.map()메서드는 아마도 함수 콜오버헤드의 결과로서 가장 느린 근사치입니다.

저는 개인적으로 가장 좋아하는 이 변형을 아직 보지 못했습니다.

어레이 지정:

var someArray = ["some", "example", "array"];

길이 속성에 액세스하지 않고 루프 오버할 수 있습니다.

for (var i=0, item; item=someArray[i]; i++) {
  // item is "some", then "example", then "array"
  // i is the index of item in the array
  alert("someArray[" + i + "]: " + item);
}

다음 JsFiddle을 참조하십시오.http://jsfiddle.net/prvzk/

이는 스파스가 없는 어레이에만 적용됩니다.이는 배열의 각 인덱스에 실제로 값이 있음을 의미합니다.그러나 실제로는 JavaScript에서 sparse 어레이를 거의 사용하지 않는다는 것을 알게 되었습니다.이러한 경우 일반적으로 객체를 맵/해시 테이블로 사용하는 것이 훨씬 쉽습니다.스파스 어레이가 있고 0 위에 루프하는 경우.length-1, for (var i=0; i<someArray.length; ++i) 구문이 필요하지만,if현재 인덱스의 요소가 실제로 정의되어 있는지 여부를 확인하기 위해 루프 내부를 선택합니다.

또한 CMS가 다음 코멘트에서 언급했듯이 위변조 값이 포함되지 않은 배열에서만 사용할 수 있습니다.이 예의 문자열 배열은 기능하지만 빈 문자열이나 0 또는 NaN 등의 숫자가 있으면 루프가 조기에 끊어집니다.다시 말씀드리지만, 실제로는 문제가 되지 않습니다만, 주의해 둘 필요가 있기 때문에, 사용하기 전에 생각해 두는 것이 반복되고 있습니다.일부 사용자에게는 부적격일 수 있습니다.

이 루프의 장점은 다음과 같습니다.

  • 쓰기에는 짧다
  • 길이 속성에 액세스할 필요가 없음(캐시는 고사하고)
  • 액세스할 항목은 선택한 이름으로 루프 본문 내에서 자동으로 정의됩니다.
  • 어레이와 매우 자연스럽게 결합됩니다.push 및 array.splice를 사용하여 목록/배열과 같은 배열을 사용합니다.

이 기능이 작동하는 이유는 어레이 사양에 따라 인덱스 > = 어레이 길이에서 항목을 읽을 때 정의되지 않은 상태로 반환해야 하기 때문입니다.이러한 위치에 쓰면 실제로 길이가 업데이트됩니다.

이 구조는 제가 좋아하는 Java 5 구문을 가장 잘 모방하고 있습니다.

for (String item : someArray) {
}

...루프 내부의 현재 인덱스에 대해서도 알 수 있다는 이점이 추가되어 있습니다.

jQuery 라이브러리를 사용하는 경우 http://api.jquery.com/jQuery.each/ 사용을 고려하십시오.

매뉴얼에서 다음 항목을 참조하십시오.

jQuery.each( collection, callback(indexInArray, valueOfElement) )

반품: 물건

설명: 범용 반복기 기능으로 오브젝트와 어레이 모두에서 심리스하게 반복할 수 있습니다.길이 속성을 가진 배열 및 배열과 유사한 개체(함수의 인수 개체 등)는 숫자 인덱스로 0에서 길이-1까지 반복됩니다.다른 개체는 명명된 속성을 통해 반복됩니다.

$.each()$(selector).each()jQuery 객체 상에서 배타적으로 반복하기 위해 사용됩니다.$.each()이 함수는 맵(JavaScript 객체)이든 배열이든 모든 컬렉션에서 반복할 수 있습니다. 은 (를 할 수 )this 단, Javascript를 .this의 값Object단순한 문자열 또는 숫자 값인 경우에도 마찬가지입니다.)메서드는 첫 번째 인수(반복된 개체)를 반환합니다.

어레이 반복에는 4가지 방법이 있습니다.

// 1: for

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

// 2: forEach

arr.forEach((v, i) => console.log(v));

// 3: for in

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

// 4: for of

for (const v of arr) {
  console.log(v);
}

요약: 1 및 3 솔루션은 추가 변수를 생성하고, 2 - 추가 함수 컨텍스트를 생성합니다.가장 좋은 방법은 네 번째 - "for of"입니다.

난해한 변이법

let a= ["Hello", "World"];

while(a.length) { console.log( a.shift() ); }

프로토타입은 포함하지 않고 자신의 오브젝트 속성만 반복하는 방법이 있습니다.

for (var i in array) if (array.hasOwnProperty(i)) {
    // Do something with array[i]
}

커스텀 정의 속성에서도 반복됩니다.

JavaScript에서는 배열을 포함한 모든 개체에 모든 사용자 지정 속성을 할당할 수 있습니다.

어레이를 는, 「스패어드 어레이를 참조해 주세요.for (var i = 0; i < array.length; i++) if (i in array) ★★★★★★★★★★★★★★★★★」array.forEaches5shim사용해야 합니다.

가장 우아하고 빠른 방법

var arr = [1, 2, 3, 1023, 1024];
for (var value; value = arr.pop();) {
    value + 1
}

http://jsperf.com/native-loop-performance/8


편집(잘못했기 때문에)


100,000개 항목의 배열을 루프하고 매번 새로운 값과 최소 연산을 수행하는 방법을 비교합니다.

준비:

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script>
    Benchmark.prototype.setup = function() {
        // Fake function with minimal action on the value
        var tmp = 0;
        var process = function(value) {
            tmp = value; // Hold a reference to the variable (prevent engine optimisation?)
        };
        
        // Declare the test Array
        var arr = [];
        for (var i = 0; i < 100000; i++)
            arr[i] = i;
    };
</script>

테스트:

<a href="http://jsperf.com/native-loop-performance/16" 
   title="http://jsperf.com/native-loop-performance/16"
><img src="http://i.imgur.com/YTrO68E.png" title="Hosted by imgur.com" /></a>

자바스크립트JavaScript를 사용합니다. 가 JavaScript의 jQuery를 사용하는 jQuery는 JavaScript의 jQuery를 합니다..each()★★★★★★ 。

var myStringArray = ["hello", "World"];
for(var i in myStringArray) {
  alert(myStringArray[i]);
}

var myStringArray = ["hello", "World"];
for (var i=0; i < myStringArray.length; i++) {
  alert(myStringArray[i]);
}

var myStringArray = ["hello", "World"];
$.each(myStringArray, function(index, value){
  alert(value);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

변수 하여 모든 변수를 변수 패턴으로 입니다.var키워드를 지정합니다.

var i, max, myStringArray = ["Hello", "World"];
for (i = 0, max = myStringArray.length; i < max; i++) {
    alert(myStringArray[i]);

    // Do something
}

반복 순서가 중요하지 않은 경우 역루프를 시도해야 합니다.오버헤드 상태 테스트를 줄이고 다음 중 하나의 문장으로 감소하기 때문에 가장 빠릅니다.

var i,myStringArray = ["item1","item2"];
for (i =  myStringArray.length; i--) {
    alert(myStringArray[i]);
}

또는 while loop을 사용하는 것이 더 좋고 깨끗합니다.

var myStringArray = ["item1","item2"],i = myStringArray.length;
while(i--) {
   // Do something with fruits[i]
}

JavaScript에는 어레이를 루프하는 솔루션이 매우 많습니다.

아래 코드는 인기 있는 코드입니다.

/** Declare inputs */
const items = ['Hello', 'World']

/** Solution 1. Simple for */
console.log('solution 1. simple for')

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

console.log()
console.log()

/** Solution 2. Simple while */
console.log('solution 2. simple while')

let i = 0
while (i < items.length) {
  console.log(items[i++])
}

console.log()
console.log()

/** Solution 3. forEach*/
console.log('solution 3. forEach')

items.forEach(item => {
  console.log(item)
})

console.log()
console.log()

/** Solution 4. for-of*/
console.log('solution 4. for-of')

for (const item of items) {
  console.log(item)
}

console.log()
console.log()

jQuery를 사용하는 경우 설명서에 좋은 예가 있습니다.

 $.each([ 52, 97 ], function( index, value ) {
      alert( index + ": " + value );
 });

각 기능에 Array.를 사용하는 것이 가장 좋은 방법이라고 생각합니다.만약 그것을 사용할 수 없다면 MDN에서 polyfill을 입수하는 것이 좋습니다.이를 이용하려면 JavaScript에서 어레이를 반복하는 것이 가장 안전한 방법입니다.

Array.protype.각()에 대해서

그래서 다른 사람들이 제안했듯이, 이것은 거의 항상 여러분이 원하는 것입니다.

var numbers = [1,11,22,33,44,55,66,77,88,99,111];
var sum = 0;
numbers.forEach(function(n){
  sum += n;
});

에 의해, 한 것은 그 , 멤버는 이, 「」, 「」, 「」, 「」, 「」, 「」, 「」의 「배열 처리 범위내」입니다.for ..옷을 입었어요.

의 C 스타일 「C」의 경우for루프는 대부분의 경우 기능합니다.루프 내의 모든 것이 프로그램의 나머지 부분과 범위를 공유하므로 { }을(를) 사용해도 새 범위가 생성되지 않습니다.

이 때문에,

var sum = 0;
var numbers = [1,11,22,33,44,55,66,77,88,99,111];

for(var i = 0; i<numbers.length; ++i){
  sum += numbers[i];
}

alert(i);

는, 「11」을 출력합니다.이거는 원하는 경우와 그렇지 않은 경우가 있습니다.

동작하는 jsFiddle의 예:https://jsfiddle.net/workingClassHacker/pxpv2dh5/7/

100% 동일하지는 않지만 유사합니다.

   var myStringArray = ['Hello', 'World']; // The array uses [] not {}
    for (var i in myStringArray) {
        console.log(i + ' -> ' + myStringArray[i]); // i is the index/key, not the item
    }

예를 들어 Firefox 콘솔에서 다음을 사용했습니다.

[].forEach.call(document.getElementsByTagName('pre'), function(e){ 
   console.log(e);
})

query Selector를 사용할 수 있습니다.모두 동일한 결과를 얻기 위해

document.querySelectorAll('pre').forEach( (e) => { 
   console.log(e.textContent);
})
<pre>text 1</pre>
<pre>text 2</pre>
<pre>text 3</pre>

언급URL : https://stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript

반응형