Tôi đang cố gắng lặp qua một mảng. Tôi có đoạn mã sau:

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

Đang cố gắng để có được tất cả các dữ liệu ra khỏi mảng. Ai đó có thể dẫn tôi đi đúng đường không?

(Cập nhật: Câu trả lời khác của tôi ở đây đưa ra các tùy chọn không phải jQuery kỹ lưỡng hơn nhiều. Tùy chọn thứ ba bên dưới, jQuery.eachmặc dù không có trong đó.)

Bốn lựa chọn:

Vòng lặp chung:

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

hoặc trong ES2015 +:

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

Ưu điểm : Thẳng thắn, không phụ thuộc vào jQuery, dễ hiểu, không có vấn đề gì trong việc bảo tồn ý nghĩa thisbên trong vòng lặp, không có chi phí không cần thiết cho các cuộc gọi hàm (ví dụ, trên lý thuyết nhanh hơn, mặc dù trên thực tế bạn phải có rất nhiều yếu tố mà tỷ lệ cược là bạn có vấn đề khác; chi tiết ).

ES5 forEach:

Kể từ ECMAScript5, các mảng có forEachchức năng trên chúng giúp dễ dàng lặp qua mảng:

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

Liên kết đến tài liệu

(Lưu ý: Có rất nhiều chức năng khác, không chỉ forEach; xem câu trả lời được tham chiếu ở trên để biết chi tiết.)

Ưu điểm : Khai báo, có thể sử dụng hàm dựng sẵn cho iterator nếu bạn có một tiện dụng, nếu thân vòng lặp của bạn phức tạp thì việc gọi hàm đôi khi rất hữu ích, không cần ibiến trong phạm vi chứa của bạn.

Nhược điểm : Nếu bạn đang sử dụng thistrong các mã chứa và bạn muốn sử dụng thistrong phạm vi của mình forEachgọi lại, bạn phải hoặc A) Stick nó trong một biến, do đó bạn có thể sử dụng nó trong chức năng, B) Vượt qua nó như là một đối số thứ hai để forEachquá forEachđặt nó như thistrong khi gọi lại hoặc C) Sử dụng chức năng mũi tên ES2015 + , đóng lại this. Nếu bạn không thực hiện một trong những điều đó, trong cuộc gọi lại thissẽ là undefined(ở chế độ nghiêm ngặt) hoặc đối tượng toàn cầu ( window) ở chế độ lỏng lẻo. Đã từng có một nhược điểm thứ hai forEachkhông được hỗ trợ toàn cầu, nhưng ở đây vào năm 2018, trình duyệt duy nhất bạn sẽ gặp phải đó không phải forEachlà IE8 (và nó không thể đúng đa dạng ở đó, một trong hai).

ES2015 + for-of:

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

Xem câu trả lời được liên kết ở đầu câu trả lời này để biết chi tiết về cách thức hoạt động.

Ưu điểm : Đơn giản, dễ hiểu, cung cấp một biến phạm vi chứa (hoặc hằng số, ở trên) cho mục nhập từ mảng.

Nhược điểm : Không được hỗ trợ trong bất kỳ phiên bản IE nào.

jQuery.each:

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

( Liên kết đến tài liệu )

Ưu điểm : Tất cả các ưu điểm giống như forEach, cộng với bạn biết nó có từ khi bạn sử dụng jQuery.

Nhược điểm : Nếu bạn đang sử dụng thistrong mã chứa, bạn phải dán nó vào một biến để bạn có thể sử dụng nó trong hàm, vì thiscó nghĩa là một cái gì đó khác trong hàm.

Bạn có thể tránh thisđiều đó bằng cách sử dụng $.proxy:

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

... hoặc Function#bind:

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

... hoặc trong ES2015 ("ES6"), chức năng mũi tên:

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

Những gì KHÔNG nên làm:

Đừng sử dụng for..incho việc này (hoặc nếu bạn làm thế, hãy thực hiện với các biện pháp bảo vệ thích hợp). Bạn sẽ thấy mọi người nói (thực tế, có một câu trả lời ở đây nói rằng), nhưng for..inkhông làm những gì nhiều người nghĩ nó làm (nó làm một cái gì đó thậm chí còn hữu ích hơn!). Cụ thể, for..incác vòng lặp thông qua các tên thuộc tính vô số của một đối tượng (không phải là các chỉ mục của một mảng). Vì các mảng là các đối tượng và các thuộc tính có thể đếm được theo mặc định của chúng là các chỉ mục, nên nó hầu như sắp xếp công việc trong một triển khai nhạt nhẽo. Nhưng đó không phải là một giả định an toàn rằng bạn chỉ có thể sử dụng nó cho việc đó. Đây là một khám phá: http://jsbin.com/exohi/3

Tôi nên làm dịu "không" ở trên. Nếu bạn đang xử lý các mảng thưa thớt (ví dụ: mảng có tổng cộng 15 phần tử nhưng chỉ số của chúng nằm trong phạm vi từ 0 đến 150.000 vì một số lý do, và vì vậy lengthlà 150.001), và nếu bạn sử dụng các biện pháp bảo vệ thích hợp như hasOwnPropertyvà kiểm tra tên thuộc tính thực sự là số (xem liên kết ở trên), for..incó thể là một cách hoàn toàn hợp lý để tránh nhiều vòng lặp không cần thiết, vì chỉ các chỉ số dân cư sẽ được liệt kê.

jQuery.each ()

jQuery.each ()

jQuery.each(array, callback)

lặp mảng

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

lặp lại đối tượng

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

ví dụ :

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>

vòng lặp javascript cho mảng

cho vòng lặp

for (initialExpression; condition; incrementExpression)
  statement

thí dụ

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

tạ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
}

cho

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

cho mỗi

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

Tài nguyên

Vòng lặp MDN và vòng lặp

Không cần jquery ở đây, chỉ cần một forvòng lặp hoạt động:

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

Lựa chọn 1: Các truyền thống for-loop

Những thứ cơ bản

Một for-loop truyền thống có ba thành phần:

1. khởi tạo: được thực hiện trước khi khối nhìn được thực thi lần đầu tiên
2. điều kiện: kiểm tra một điều kiện mỗi lần trước khi khối vòng lặp được thực thi và thoát khỏi vòng lặp nếu sai
3. suy nghĩ lại: được thực hiện mỗi lần sau khi khối vòng lặp được thực thi

Ba thành phần này được ngăn cách với nhau bằng một ;biểu tượng. Nội dung cho mỗi trong số ba thành phần này là tùy chọn, có nghĩa là sau đây là phần nhỏ fornhất có thể:

for (;;) {
    // Do stuff
}

Tất nhiên, bạn sẽ cần bao gồm một if(condition === true) { break; } hoặc một if(condition === true) { return; }nơi nào đó bên trong đó forđể làm cho nó ngừng chạy.

Tuy nhiên, thông thường, việc khởi tạo được sử dụng để khai báo một chỉ mục, điều kiện được sử dụng để so sánh chỉ mục đó với giá trị tối thiểu hoặc tối đa và sau đó được sử dụng để tăng chỉ mục:

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

Sử dụng một -loop truyền thống forđể lặp qua một mảng

Cách truyền thống để lặp qua một mảng là:

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

Hoặc, nếu bạn muốn lặp lại, bạn làm điều này:

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

Tuy nhiên, có nhiều biến thể có thể, ví dụ như. cái này :

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

... hoặc cái này ...

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

... hoặc cái này:

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

Bất cứ điều gì hoạt động tốt nhất phần lớn là vấn đề của cả sở thích cá nhân và trường hợp sử dụng cụ thể mà bạn đang thực hiện.

Mỗi biến thể này đều được hỗ trợ bởi tất cả các trình duyệt, bao gồm cả các phiên bản cũ!

Tùy chọn 2: The while-loop

Một thay thế cho một for-loop là một while-loop. Để lặp qua một mảng, bạn có thể làm điều này:

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

Giống như for-loop truyền thống , while-loops được hỗ trợ bởi ngay cả những trình duyệt lâu đời nhất.

Ngoài ra, mỗi vòng lặp while có thể được viết lại dưới dạng for-loop. Ví dụ: while-loop ở đây hành xử giống hệt như cách này for-loop:

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

Tùy chọn 3: for...invàfor...of

Trong JavaScript, bạn cũng có thể làm điều này:

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

Điều này nên được sử dụng một cách cẩn thận, tuy nhiên, vì nó không hoạt động giống như truyền thống fortrong mọi trường hợp và có những tác dụng phụ tiềm ẩn cần được xem xét. Xem Tại sao sử dụng "for ... in" với việc lặp mảng là một ý tưởng tồi? để biết thêm chi tiết.

Thay thế cho for...in, bây giờ cũng cho for...of. Ví dụ sau đây cho thấy sự khác biệt giữa một for...ofvòng lặp và một for...invòng lặp:

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
}

Bạn cũng cần xem xét rằng không có phiên bản Internet Explorer nào hỗ trợ for...of( Edge 12+ ) và điều đó for...inyêu cầu ít nhất IE10.

Tùy chọn 4: Array.prototype.forEach()

Một thay thế cho For-loops là Array.prototype.forEach(), sử dụng cú pháp sau:

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

Array.prototype.forEach() được hỗ trợ bởi tất cả các trình duyệt hiện đại, cũng như IE9 +.

Tùy chọn 5: jQuery.each()

Ngoài bốn tùy chọn khác được đề cập, jQuery cũng có foreachbiến thể riêng .

Nó sử dụng cú pháp sau:

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

Sử dụng each()chức năng của jQuery.

Đây là một ví dụ:

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

Sử dụng jQuery each(). Có những cách khác nhưng mỗi cách được thiết kế cho mục đích này.

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

Và không đặt dấu phẩy sau số cuối cùng.

Bạn có thể sử dụng một for()vòng lặp:

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

Cú pháp ES6 với chức năng mũi tên và nội suy:

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

Thử cái này:

$.grep(array, function(element) {

})

Các cách lặp khác thông qua mảng / chuỗi với các tác dụng phụ

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