[javascript] 각 배열에 대한 자바 스크립트?


10 Answers

편집 :이 답변은 절망적으로 오래되었습니다. 보다 근대적 인 접근법을 얻으 려면 어레이에서 사용할 수있는 방법을 살펴보십시오. 관심 대상의 방법은 다음과 같습니다.

  • 각각
  • 지도
  • 필터
  • 지퍼
  • 줄이다
  • ...마다
  • 약간

JavaScript 에서 배열을 반복하는 표준 방법 for -loop의 바닐라 for .

var length = arr.length,
    element = null;
for (var i = 0; i < length; i++) {
  element = arr[i];
  // Do something with element i.
}

그러나이 방법은 조밀 한 배열이 있고 각 인덱스가 요소로 채워져있는 경우에만 유용합니다. 배열이 희소 한 경우 배열에 실제로 존재하지 않는 많은 인덱스를 반복하므로이 접근 방식으로 성능 문제가 발생할 수 있습니다. 이 경우 for..lo-loop이 더 좋은 아이디어 일 수 있습니다. 그러나 for..in -loop도 레거시 브라우저에서 열거되거나 추가 (예 : 배열 요소)가 필요하면 적절한 보호 책을 사용해야 어레이의 원하는 속성 (즉 배열 요소) 만 작동하도록 할 수 있습니다. 속성은 enumerable 정의됩니다.

ECMAScript 5 에서는 배열 프로토 타입에 forEach 메서드가 있지만 레거시 브라우저에서는 지원되지 않습니다. 따라서 일관되게 사용할 수 있으려면이를 지원하는 환경 (예 : 서버 측 JavaScript의 경우 Node.js )이 있거나 "Polyfill"을 사용해야합니다. 그러나이 기능을위한 Polyfill은 간단하며 코드를 읽기 쉽게 만들어주기 때문에 포함시킬 좋은 polyfill입니다.

Question

JavaScript를 사용하여 배열의 모든 항목을 반복하는 방법은 무엇입니까?

나는 그것이 다음과 같다고 생각했다.

forEach(instance in theArray)

어디에 theArray 내 배열이지만 잘못된 것으로 보입니다.




An easy solution now would be to use the underscore.js library . It's providing many useful tools, such as each and will automatically delegate the job to the native forEach if available.

A CodePen example of how it works is:

var arr = ["elemA", "elemB", "elemC"];
_.each(arr, function(elem, index, ar)
{
...
});

또한보십시오

  • Array::forEach .
  • In for_each...in (MDN) it is explained that for each (variable in object) is deprecated as the part of ECMA-357 ( EAX ) standard.
  • for...of (MDN) describes the next way of iterating using for (variable of object) as the part of the Harmony (ECMAScript 6) proposal.



The lambda syntax doesnt usually work in IE 10 or below.

I usually use the

[].forEach.call(function(value,index){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});


If you are a jQuery Fan and already have a jQuery file running, you should reverse the positions of the index and value parameters

$("#ul>li").each(function(**index,value**){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});



ECMAScript5 (the version on Javascript) to work with Arrays.

forEach - Iterates through every item in the array and do whatever you need with each item.

['C', 'D', 'E'].forEach(function(element, index) {
  console.log(element + " is the #" + (index+1) + " in musical scale");
});

// Output
// C is the #1 in musical scale
// D is the #2 in musical scale
// E is the #3 in musical scale

In case , more interested on operation on array using some inbuilt feature.

map - It creates a new array with the result of the callback function. This method is good to be used when you need to format the elements of your array.

// Let's upper case the items in the array
['bob', 'joe', 'jen'].map(function(elem) {
  return elem.toUpperCase();
});

// Output: ['BOB', 'JOE', 'JEN']

reduce - As the name says it reduces the array to a single value by calling the given function passing in the currenct element and the result of the previous execution.

[1,2,3,4].reduce(function(previous, current) {
  return previous + current;
});
// Output: 10
// 1st iteration: previous=1, current=2 => result=3
// 2nd iteration: previous=3, current=3 => result=6
// 3rd iteration: previous=6, current=4 => result=10

every - Returns true or false if all the elements in the array pass the test in the callback function.

// Check if everybody has 18 years old of more.
var ages = [30, 43, 18, 5];  
ages.every(function(elem) {  
  return elem >= 18;
});

// Output: false

filter - Very similar to every except that filter return an array with the elements that return true to the given function.

// Finding the even numbers
[1,2,3,4,5,6].filter(function(elem){
  return (elem % 2 == 0)
});

// Output: [2,4,6]

Hope this will be useful.




jQuery way using $.map :

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

var newData = $.map(data, function(element) {
    if (element % 2 == 0) {
        return element;
    }
});

// newData = [2, 4, 6];



나는 이것이 오래된 게시물 인 것을 알고 있으며 이미 많은 훌륭한 답변들이 있습니다. 좀 더 완벽을 위해 AngularJS 사용하여 다른 것을 던질 것이라고 생각했습니다. 물론 이것은 Angular를 사용하고있는 경우에만 적용됩니다. 그럼에도 불구하고 어쨌든 그것을 넣고 싶습니다.

angular.forEach 는 두 개의 인수와 선택적 인 세 번째 인수를 취합니다. 첫 번째 인수는 반복 할 객체 (배열)이고 두 번째 인수는 반복 함수이며 선택적 세 번째 인수는 객체 컨텍스트입니다 (기본적으로 'this'로 루프 내에서 참조됩니다.).

각 회진 forEach 루프를 사용하는 여러 가지 방법이 있습니다. 가장 간단하고 아마도 가장 많이 사용되는 것은

var temp = [1, 2, 3];
angular.forEach(temp, function(item) {
    //item will be each element in the array
    //do something
});

Another way that is useful for copying items from one array to another is

var temp = [1, 2, 3];
var temp2 = [];
angular.forEach(temp, function(item) {
    this.push(item); //"this" refers to the array passed into the optional third parameter so, in this case, temp2.
}, temp2);

Though, you don't have to do that, you can simply do the following and it's equivalent to the previous example:

angular.forEach(temp, function(item) {
    temp2.push(item);
});

Now there are pros and cons of using the angular.forEach function as opposed to the built in vanilla-flavored for loop.

찬성

  • Easy readability
  • Easy writability
  • If available, angular.forEach will use the ES5 forEach loop. Now, I will get to efficientcy in the cons section, as the forEach loops are much slower than the for loops. I mention this as a pro because it's nice to be consistent and standardized.

Consider the following 2 nested loops, which do exactly the same thing. Let's say that we have 2 arrays of objects and each object contains an array of results, each of which has a Value property that's a string (or whatever). And let's say we need to iterate over each of the results and if they're equal then perform some action:

angular.forEach(obj1.results, function(result1) {
    angular.forEach(obj2.results, function(result2) {
        if (result1.Value === result2.Value) {
            //do something
        }
    });
});

//exact same with a for loop
for (var i = 0; i < obj1.results.length; i++) {
    for (var j = 0; j < obj2.results.length; j++) {
        if (obj1.results[i].Value === obj2.results[j].Value) {
            //do something
        }
    }
}

Granted this is a very simple hypothetical example, but I've written triple embedded for loops using the second approach and it was very hard to read, and write for that matter.

단점

  • 능률. angular.forEach , and the native forEach , for that matter, are both so much slower than the normal for loop....about 90% slower . So for large data sets, best to stick to the native for loop.
  • No break, continue, or return support. continue is actually supported by " accident ", to continue in an angular.forEach you simple put a return; statement in the function like angular.forEach(array, function(item) { if (someConditionIsTrue) return; }); which will cause it to continue out of the function for that iteration. This is also due to the fact that the native forEach does not support break or continue either.

I'm sure there's various other pros and cons as well, and please feel free to add any that you see fit. I feel that, bottom line, if you need efficiency, stick with just the native for loop for your looping needs. But, if your datasets are smaller and a some efficiency is okay to give up in exchange for readability and writability, then by all means throw an angular.forEach in that bad boy.




There are a few ways to loop through an array in JavaScript, as below:

for - it's the most common one. Full block of code for looping

var languages = ["JAVA", "JavaScript", "C#", "Python"];
var i, len, text;
for (i = 0, len = languages.length, text = ""; i < len; i++) {
    text += languages[i] + "<br>";
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>

while - loop while a condition is through. It seems to be the fastest loop

var text = "";
var i = 0;
while (i < 10) {
    text +=  i + ") something<br>";
    i++;
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>

do/while - also loop through a block of code while the condition is true, will run at least one time

var text = ""
var i = 0;
do {
    text += i + ") something <br>";
    i++;
}
while (i < 10);
document.getElementById("example").innerHTML = text;
<p id="example"></p>

Functional loops - forEach , map , filter , also reduce (they loop through the function, but used if you need to do something with your array, etc.

// For example, in this case we loop through the number and double them up using the map function
var numbers = [65, 44, 12, 4];
document.getElementById("example").innerHTML = numbers.map(function(num){return num * 2});
<p id="example"></p>

For more information and examples about functional programming on arrays, look at the blog post Functional programming in JavaScript: map, filter and reduce .




배열을 반복하려면 표준 3 부분 for 루프를 사용하십시오.

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

myArray.length 를 캐싱하거나 역순으로 반복하여 성능 최적화를 얻을 수 있습니다.




뒤로 루프

역방향 for 루프는 여기에 언급 할 가치가 있다고 생각합니다.

for (var i = array.length; i--; ) {
     // process array[i]
}

장점 :

  • 임시 len 변수를 선언하거나 각 반복에서 array.length 와 비교할 필요가 없습니다.이 중 하나는 미세 최적화 일 수 있습니다.
  • DOM에서 형제 를 역순으로 제거하는 것이 일반적으로 더 효율적 입니다. (브라우저는 내부 배열의 요소 이동이 적어야합니다.)
  • 루프하면서, 인덱스 i 에서 또는 후에 배열수정하면 (예 : array[i] 에서 항목을 제거하거나 삽입하면) 앞으로 루프는 왼쪽으로 이동 한 항목을 건너 뜁니다. 또는 i 를 다시 처리합니다 오른쪽으로 이동 한 항목. 전통적인 for 루프에서는 처리가 필요한 다음 항목 ( 1) 을 가리 키도록 i 를 업데이트 할 있지만 간단히 반복의 방향을 바꾸는 것이 종종 더 간단 하고 우아한 해결책 입니다.
  • 마찬가지로, 중첩 된 DOM 요소를 수정하거나 제거 할 때 역순으로 처리하면 오류피할 수 있습니다 . 예를 들어, 자식을 처리하기 전에 부모 노드의 innerHTML을 수정하는 것을 고려하십시오. 자식 노드에 도달 할 때까지 DOM에서 분리되어 부모의 innerHTML이 작성되면 새로 생성 된 자식으로 대체됩니다.
  • 사용할 수있는 다른 옵션보다 더 짧게 입력하고 읽을 수 있습니다. 그것은 forEach() 와 ES6 forEach() for ... of 잃는다.

단점 :

  • 항목을 역순으로 처리합니다. 결과에서 새 배열을 만들거나 화면에 내용을 인쇄하는 경우 자연스럽게 원래 순서대로 출력이 반전 됩니다.
  • 순서를 유지하기 위해 형제를 첫 번째 자식으로 DOM에 반복적으로 삽입하는 것은 덜 효율적 입니다. DOM 노드를 효율적이고 순차적으로 생성하려면 보통 전달 및 추가 (그리고 "문서 조각"사용)하기 만하면됩니다.
  • 후진 루프는 중학교 개발자들에게 혼란 스럽 습니다. (귀하의 전망에 따라 이점을 고려할 수도 있습니다.)

나는 항상 그것을 사용해야합니까?

일부 개발자는 앞으로 전달할 좋은 이유가없는 한 기본적으로 reverse for 루프 사용합니다.

성능 향상은 대개 중요하지 않지만 다음과 같이 비명을 지릅니다.

"목록의 모든 항목에이 작업을 수행하면 주문에 신경 쓰지 않습니다!"

그러나 실제로는 의도에 대한 신뢰할 수있는 표시가 아니며 주문에 대해 신경 쓰는 경우와 구분할 수 없으므로 실제로 역순으로 반복 해야 합니다. ECMAScript를 비롯하여 대부분의 언어에서는 현재 사용할 수 없지만 예를 들어 forEachUnordered() 와 같이 호출 할 수있는 "무효"의도를 정확하게 표현하려면 다른 구문이 필요합니다.

순서가 중요하지 않고 효율성 (게임이나 애니메이션 엔진의 가장 안쪽 루프에서)이 중요하다면 reverse for 루프를 이동 패턴으로 사용하는 것이 허용 될 수 있습니다. 기존 코드에서 reverse for 루프를 본다고해서 순서가 관련성 이 없다는 것을 반드시 기억 하지 마십시오 !

forEach ()를 사용하는 것이 더 좋습니다.

일반적으로 선명도와 안전성 이 더 중요한 고차원 코드의 경우 기본 패턴으로 Array::forEach 를 사용하는 것이 좋습니다.

  • 읽을 것이 분명합니다.
  • 그것은 내가 블록 내에서 이동하지 않을 것임을 나타냅니다 (항상 forwhile 루프에 숨어있을 가능성이 있습니다).
  • 그것은 당신에게 종결을위한 무료 범위를 제공합니다.
  • 그것은 국소 변수의 누설과 외부 변수의 우발적 인 충돌 (및 돌연변이)을 줄입니다.

그런 다음 코드에서 reverse for 루프를 볼 때, 이는 좋은 이유 (아마도 위에 설명 된 이유 중 하나 일 수 있음)가 바뀌 었다는 힌트입니다. 그리고 전통적인 for for loop를 보면 이동이 발생할 수 있음을 나타낼 수 있습니다.

(의도에 대한 토론이 당신에게 이해가되지 않는다면, 프로그래밍 스타일과 두뇌 에 관한 Crockford의 강연을 보면서 당신과 당신의 코드가 도움이 될 것입니다.)

어떻게 작동합니까?

for (var i = 0; i < array.length; i++) { ... }   // Forwards

for (var i = array.length; i--; )    { ... }   // Reverse

중간 절 (우리가 보통 비교를 보는 곳)과 마지막 절이 비어 있음을 알 수 있습니다 (여기서 우리는 보통 i++ 보았습니다). 즉, i-- 또한 계속을위한 조건 으로 사용된다는 것을 의미합니다. 결정적으로 각 반복 전에 실행되고 검사됩니다.

  • 폭발하지 않고 array.length 에서 어떻게 시작할 수 있습니까?

    왜냐하면 각 반복 전에 먼저 실행 되기 때문에 첫 번째 반복에서 array-out-of-bounds undefined 항목 문제를 피하는 array.length - 1 의 항목에 실제로 액세스하게됩니다.

  • 인덱스 0 이전에 iterating이 중지되지 않는 이유는 무엇입니까?

    루프는 조건 i-- 가 거짓 값으로 평가 될 때 반복을 중지합니다 (0을 산출 할 때).

    트릭은 --i 와 달리 후행 i 연산자는 i 감소 i-- 감소 이전 의 값을 산출합니다. 콘솔에서 다음을 입증 할 수 있습니다.

    > var i = 5; [i, i--, i];

    [5, 5, 4]

    따라서 최종 반복에서 나는 이전에 1 이었고 i - expression은 0으로 변경했지만 실제로는 1 (truthy)을 산출하므로 조건이 통과됩니다. 다음 반복에서 i-1을 i 로 변경하지만 0 (거짓)을 생성하므로 실행이 즉시 루프의 맨 아래로 떨어집니다.

    전통적인 Forward for for 루프에서 ++++ ++i 는 서로 교환 가능합니다 (Douglas Crockford가 지적했듯이). 그러나 reverse for 루프에서는 감소 값이 조건 식이 i-- 인덱스 0에서 항목을 처리하려면 i-- 사용해야합니다.

하찮은 일

어떤 사람들 for 루프의 반대쪽 for 작은 화살표를 그리고 윙크로 끝내기를 좋아합니다.

for (var i = array.length; i --> 0 ;) {

크레딧은 WYL에서 reverse for 루프의 이점과 공포를 보여주기 위해 사용됩니다.




There isn't any for each loop in native JavaScript . You can either use libraries to get this functionality (I recommend Underscore.js ), use a simple for in loop.

for (var instance in objects) {
   ...
}

However, note that there may be reasons to use an even simpler for loop (see question Why is using “for…in” with array iteration such a bad idea? )

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



Probably the for(i = 0; i < array.length; i++) loop is not the best choice. 왜? If you have this:

var array = new Array();
array[1] = "Hello";
array[7] = "World";
array[11] = "!";

The method will call from array[0] to array[2] . First, this will first reference variables you don't even have, second you would not have the variables in the array, and third this will make the code bolder. Look here, it's what I use:

for(var i in array){
    var el = array[i];
    //If you want 'i' to be INT just put parseInt(i)
    //Do something with el
}

And if you want it to be a function, you can do this:

function foreach(array, call){
    for(var i in array){
        call(array[i]);
    }
}

If you want to break, a little more logic:

function foreach(array, call){
    for(var i in array){
        if(call(array[i]) == false){
            break;
        }
    }
}

예:

foreach(array, function(el){
    if(el != "!"){
        console.log(el);
    } else {
        console.log(el+"!!");
    }
});

It returns:

//Hello
//World
//!!!



Related