배열을 반복하려고합니다. 다음 코드가 있습니다.

 var currnt_image_list= '21,32,234,223';
 var substr = currnt_image_list.split(','); // array here

배열에서 모든 데이터를 가져 오려고합니다. 어떤 사람이 올바른 길로 나를 인도 할 수 있습니까?

(업데이트 : 여기에있는 다른 대답 은 비 jQuery 옵션을 훨씬 더 철저하게 설명합니다. 아래 세 번째 옵션 jQuery.each은 그렇지 않습니다.)

네 가지 옵션 :

일반 루프 :

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

또는 ES2015 +에서 :

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

장점 : 간단하고, jQuery에 의존하지 않고, 이해하기 쉽고 this, 루프 본문 내에서 의미를 보존하는 데 문제가 없으며, 함수 호출의 불필요한 오버 헤드가 없습니다 (예 : 이론적으로는 더 빠릅니다). 요소가 너무 많아서 다른 문제가 발생할 가능성이 있습니다 ( 세부 사항 ).

ES5 forEach:

ECMAScript5부터 배열에는 배열을 forEach쉽게 반복 할 수 있는 기능이 있습니다.

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

문서에 링크

(참고 : 다른 기능도 많지 않습니다 forEach. 자세한 내용 은 위의 답변을 참조 하십시오.)

장점 : 선언적이며, 편리한 경우 반복자에 대해 미리 작성된 함수를 사용할 수 있습니다. 루프 본문이 복잡한 경우 함수 호출의 범위 지정이 유용한 경우 i가 있습니다.

단점 : this포함 코드에서 사용하고 콜백 this내 에서 사용하려면 forEachA) 변수 내에서 변수를 사용하여 함수 내에서 사용할 수 있도록해야합니다 .B) 두 번째 인수로 forEach전달하십시오. 콜백 중과 forEach같이 설정 this하거나 C) ES2015 + 화살표 기능을 사용하여 닫습니다 this. 그중 하나를 수행하지 않으면 콜백 this은 undefined(엄격 모드) 또는 전역 객체 ( window)는 느슨한 모드입니다. forEach보편적으로 지원되지 않은 두 번째 단점이 있었지만 2018 년에는 forEachIE8 이 아닌 유일한 브라우저가 실행되었습니다 (그리고 제대로 할 수는 없습니다) 거기에 polyfilled).

ES2015 +의 for-of:

for (const s of substr) { // Or `let` if you want to modify it in the loop body
    // do something with `s`
}

작동 방법에 대한 자세한 내용은이 답변 맨 위에 링크 된 답변을 참조하십시오.

장점 : 간단하고 간단하며 배열의 항목에 대해 포함 범위 변수 (또는 위의 상수)를 제공합니다.

단점 : 모든 버전의 IE에서 지원되지 않습니다.

jQuery.each :

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

( 문서 링크 )

장점 :와 동일한 장점 forEach은 물론 jQuery를 사용하고 있기 때문에 이점 이 있다는 것도 알고 있습니다.

단점 : this포함 코드에서 사용하는 경우 함수 내에서 사용할 수 있도록 변수에 변수를 붙여야 함수 내에서 사용할 수 있습니다 this.

this그러나 $.proxy다음 중 하나를 사용하여 문제 를 피할 수 있습니다 .

jQuery.each(substr, $.proxy(function(index, item) {
    // do something with `item` (`this` is the same as it was outside)
}, this));

... 또는 Function#bind:

jQuery.each(substr, function(index, item) {
    // do something with `item` (`this` is the same as it was outside)
}.bind(this));

... 또는 ES2015 ( "ES6")에서 화살표 기능 :

jQuery.each(substr, (index, item) => {
    // do something with `item` (`this` is the same as it was outside)
});

무엇 NOT 해야 할 일 :

이것을 사용 하지 마십시오for..in (또는 사용 하는 경우 적절한 보호 조치를 취하십시오). 당신은 사람들이 말하는 것을 보게 될 것입니다 (사실, 여기에 간단히 대답했습니다). for..in많은 사람들이 생각하는 것을하지 않습니다 (더 유용한 것). 특히, for..in배열의 인덱스가 아닌 개체의 열거 가능한 속성 이름을 반복합니다. 배열은 객체이고 기본적으로 열거 가능한 유일한 속성 은 인덱스이기 때문에 대부분의 배치 작업에서 일종의 작업으로 보입니다. 그러나 당신이 그것을 위해 그것을 사용할 수 있다고 안전한 가정이 아닙니다. 탐색은 다음과 같습니다. http://jsbin.com/exohi/3

위의 "하지 말 것"을 부드럽게해야합니다. 스파 스 배열 나왔습니다 거래 같은 경우 (예, 배열이 총 15 개 요소를 가지고 있지만 자신의 인덱스가 어떤 이유로 150,000의 범위는 0에 걸쳐 천지되고, 그래서 length150,001입니다), 그리고 당신은 같은 적절한 안전 장치를 사용하는 경우 hasOwnProperty와 점검 속성 이름은 실제로 숫자입니다 (위 링크 참조) for..in. 채워진 인덱스 만 열거되므로 불필요한 루프를 많이 피할 수있는 완벽한 방법이 될 수 있습니다.

jQuery.each ()

jQuery.each ()

jQuery.each(array, callback)

배열 반복

jQuery.each(array, function(Integer index, Object value){});

객체 반복

jQuery.each(object, function(string propertyName, object propertyValue){});

예 :

var substr = [1, 2, 3, 4];
$.each(substr , function(index, val) { 
  console.log(index, val)
});

var myObj = { firstName: "skyfoot"};
$.each(myObj, function(propName, propVal) {
  console.log(propName, propVal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

배열을위한 자바 스크립트 루프

for 루프

for (initialExpression; condition; incrementExpression)
  statement

예

var substr = [1, 2, 3, 4];

//loop from 0 index to max index
for(var i = 0; i < substr.length; i++) {
  console.log("loop", substr[i])
}

//reverse loop
for(var i = substr.length-1; i >= 0; i--) {
  console.log("reverse", substr[i])
}

//step loop
for(var i = 0; i < substr.length; i+=2) {
  console.log("step", substr[i])
}

에 대한

//dont really wnt to use this on arrays, use it on objects
for(var i in substr) {
    console.log(substr[i]) //note i returns index
}

~의

for(var i of subs) {
    //can use break;
    console.log(i); //note i returns value
}

각각

substr.forEach(function(v, i, a){
    //cannot use break;
    console.log(v, i, a);
})

자원

MDN 루프 및 반복자

여기서 jquery가 필요 없으며 for루프 만 작동합니다.

var substr = currnt_image_list.split(',');
for(var i=0; i< substr.length; i++) {
  alert(substr[i]);
}

옵션 1 : 전통적인 for루프

기본

전통적인 for루프에는 세 가지 구성 요소가 있습니다.

1. 초기화 : look 블록이 처음 실행되기 전에 실행
2. condition : 루프 블록이 실행될 때마다 조건을 확인하고 false이면 루프를 종료합니다
3. afterthought : 루프 블록이 실행될 때마다 수행

이 세 가지 구성 요소는 ;기호로 서로 분리되어 있습니다. 이 세 가지 구성 요소 각각에 대한 내용은 선택 사항이므로 다음은 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배열을 통해 루프를 -loop

배열을 반복하는 전통적인 방법은 다음과 같습니다.

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

가장 잘 작동하는 것은 주로 개인적인 취향과 구현중인 특정 사용 사례의 문제입니다.

이러한 각 버전은 이전 버전을 포함한 모든 브라우저에서 지원됩니다!

옵션 2 :- while루프

for-loop의 대안 은 while-loop입니다. 배열을 반복하려면 다음을 수행하십시오.

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

전통적인 for-loops 와 마찬가지로 while-loops는 가장 오래된 브라우저에서도 지원됩니다.

또한 모든 while 루프를 for-loop 로 다시 작성할 수 있습니다 . 예를 들어, 위의 while-loop는 다음과 같은 방식으로 작동합니다 for.

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

옵션 3 : for...in및for...of

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

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

그러나 for모든 경우에 전통적 루프 와 동일하게 작동하지 않으므로 고려해야 할 잠재적 부작용이 있으므로주의해서 사용해야합니다. 참조 "에 대한 ..."왜 사용하는 배열을 반복 나쁜 아이디어? 상세 사항은.

에 대한 대안으로 for...in현재도 있습니다 for...of. 다음 예제는 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 Explorer를 지원하지 않는 버전 for...of( Edge 12+ 는 지원 하지 않음) 이상 이며 for...inIE10 이상 이 필요하다는 점도 고려해야합니다 .

옵션 4 : Array.prototype.forEach()

For-loops 의 대안 Array.prototype.forEach()은 다음 구문을 사용하는 것입니다.

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

Array.prototype.forEach() IE9 +뿐만 아니라 모든 최신 브라우저에서 지원됩니다.

옵션 5 : jQuery.each()

언급 된 4 가지 다른 옵션 외에도 jQuery에는 고유 한 foreach변형 이있었습니다 .

다음 구문을 사용합니다.

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

each()jQuery 의 기능을 사용하십시오 .

예를 들면 다음과 같습니다.

$.each(currnt_image_list.split(','), function(index, value) { 
  alert(index + ': ' + value); 
});

jQuery를 사용하십시오 each(). 다른 방법이 있지만 각각이 목적을 위해 설계되었습니다.

$.each(substr, function(index, value) { 
  alert(value); 
});

마지막 숫자 뒤에 쉼표를 넣지 마십시오.

for()루프 를 사용할 수 있습니다 :

var things = currnt_image_list.split(','); 
for(var i = 0; i < things.length; i++) {
    //Do things with things[i]
}

화살표 기능 및 보간 기능이있는 ES6 구문 :

var data=["a","b","c"];
$(data).each((index, element) => {
        console.log(`current index : ${index} element : ${element}`)
    });

이 시도:

$.grep(array, function(element) {

})

부작용이있는 배열 / 문자열을 통한 대체 반복 방법

var str = '21,32,234,223';
var substr = str.split(',');

substr.reduce((a,x)=> console.log('reduce',x), 0)        // return undefined

substr.every(x=> { console.log('every',x); return true}) // return true

substr.some(x=> { console.log('some',x); return false})  // return false

substr.map(x=> console.log('map',x));                    // return array
 
str.replace(/(\d+)/g, x=> console.log('replace',x))      // return string