it-swarm-vi.com

Cho - Phần trên một trong JavaScript?

Làm cách nào tôi có thể lặp qua tất cả các mục trong một mảng bằng JavaScript?

Tôi nghĩ rằng nó là một cái gì đó như thế này:

forEach(instance in theArray)

Trong đó theArray là mảng của tôi, nhưng điều này dường như không chính xác.

4056
Dante1986

Chỉnh sửa: Câu trả lời này đã hết thời. Để có cách tiếp cận hiện đại hơn, hãy xem các phương thức có sẵn trên một mảng . Phương pháp quan tâm có thể là:

  • cho mỗi
  • bản đồ
  • bộ lọc
  • Zip
  • giảm
  • mỗi
  • một số

Cách tiêu chuẩn để lặp lại một mảng trong JavaScript là một vòng lặp for- Vanilla:

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

Tuy nhiên, lưu ý rằng phương pháp này chỉ tốt nếu bạn có một mảng dày đặc và mỗi chỉ mục bị chiếm bởi một phần tử. Nếu mảng thưa thớt, thì bạn có thể gặp vấn đề về hiệu năng với cách tiếp cận này, vì bạn sẽ lặp lại rất nhiều chỉ số không tồn tại thực sự trong mảng. Trong trường hợp này, một vòng lặp for .. in- có thể là một ý tưởng tốt hơn. Tuy nhiên, bạn phải sử dụng các biện pháp bảo vệ phù hợp để đảm bảo rằng chỉ các thuộc tính mong muốn của mảng (nghĩa là các thành phần mảng) được tác động, vì vòng lặp for..in- cũng sẽ được liệt kê trong các trình duyệt cũ, hoặc nếu các thuộc tính bổ sung được định nghĩa là enumerable.

Trong ECMAScript 5 sẽ có một phương thức forEach trên nguyên mẫu mảng, nhưng nó không được hỗ trợ trong các trình duyệt cũ. Vì vậy, để có thể sử dụng nó một cách nhất quán, bạn phải có môi trường hỗ trợ nó (ví dụ: Node.js cho JavaScript phía máy chủ) hoặc sử dụng "Polyfill". Tuy nhiên, Polyfill cho chức năng này là tầm thường và vì nó làm cho mã dễ đọc hơn, nó là một polyfill tốt để bao gồm.

473
PatrikAkerstrand

Nếu bạn sử dụng thư viện jQuery , bạn có thể sử dụng jQuery.each :

$.each(yourArray, function(index, value) {
  // do your stuff here
});

CHỈNH SỬA : 

Theo câu hỏi, người dùng muốn mã trong javascript thay vì jquery để chỉnh sửa

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

Vòng lặp ngược

Tôi nghĩ rằng đảo ngược cho vòng lặp xứng đáng được đề cập ở đây:

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

Ưu điểm:

  • Bạn không cần phải khai báo biến len tạm thời hoặc so sánh với _array.length_ trên mỗi lần lặp, một trong số đó có thể là tối ưu hóa phút.
  • Loại bỏ anh chị em khỏi DOM theo thứ tự ngược thường là hiệu quả hơn . (Trình duyệt cần thực hiện ít dịch chuyển các phần tử trong mảng bên trong của nó.)
  • Nếu bạn sửa đổi mảng trong khi lặp, chỉ mục tại hoặc sau i (ví dụ: bạn xóa hoặc chèn một mục tại _array[i]_), sau đó một vòng lặp chuyển tiếp sẽ bỏ qua mục được chuyển sang trái vào vị trí i hoặc xử lý lại i mục thứ đã được chuyển sang phải. Trong vòng lặp for truyền thống, bạn có thể cập nhật i để trỏ đến mục tiếp theo cần xử lý - 1, nhưng chỉ cần đảo ngược hướng lặp thường là một đơn giản hơn giải pháp thanh lịch hơn .
  • Tương tự, khi sửa đổi hoặc loại bỏ các phần tử DOM lồng nhau , xử lý ngược lại có thể phá vỡ các lỗi . Ví dụ, hãy xem xét sửa đổi bên trongHTML của nút cha trước khi xử lý các nút con của nó. Vào thời điểm nút con đạt được, nó sẽ được tách ra khỏi DOM, đã được thay thế bởi một đứa trẻ mới được tạo khi nội bộHTML của cha mẹ được viết.
  • Đó là ngắn hơn để nhập và đọc , so với một số khác tùy chọn có sẵn. Mặc dù nó thua forEach() và cho ES6 là _for ... of_.

Nhược điểm:

  • Nó xử lý các mục theo thứ tự ngược lại. Nếu bạn đang xây dựng một mảng mới từ kết quả hoặc in mọi thứ trên màn hình, tự nhiên đầu ra sẽ bị đảo ngược so với thứ tự ban đầu.
  • Liên tục chèn anh chị em vào DOM như một đứa trẻ đầu tiên để giữ trật tự của họ là kém hiệu quả . (Trình duyệt sẽ phải thay đổi mọi thứ ngay.) Để tạo các nút DOM hiệu quả và theo thứ tự, chỉ cần lặp về phía trước và nối thêm như bình thường (và cũng sử dụng "đoạn tài liệu").
  • Vòng lặp ngược là gây nhầm lẫn cho các nhà phát triển cơ sở. (Bạn có thể coi đó là một lợi thế, tùy thuộc vào Outlook của bạn.)

Tôi có nên luôn luôn sử dụng nó?

Một số nhà phát triển sử dụng vòng lặp đảo ngược cho vòng lặp theo mặc định , trừ khi có lý do chính đáng để lặp lại.

Mặc dù mức tăng hiệu suất thường không đáng kể, nhưng nó hét lên:

"Chỉ cần làm điều này cho mọi mục trong danh sách, tôi không quan tâm đến thứ tự!"

Tuy nhiên, trong thực tế, không phải thực sự là một dấu hiệu đáng tin cậy về ý định, vì nó không thể phân biệt được với những trường hợp khi bạn do quan tâm đến thứ tự và thực sự làm cần để lặp lại. Vì vậy, trên thực tế, một cấu trúc khác sẽ là cần thiết để thể hiện chính xác ý định "không quan tâm", một cái gì đó hiện không có sẵn trong hầu hết các ngôn ngữ, bao gồm ECMAScript, nhưng có thể được gọi, ví dụ, forEachUnordered().

Nếu thứ tự không thành vấn đề và hiệu quả là một mối quan tâm (trong vòng lặp trong cùng của trò chơi hoặc công cụ hoạt hình), thì có thể chấp nhận sử dụng đảo ngược cho vòng lặp như mô hình đi đến của bạn. Chỉ cần nhớ rằng việc nhìn thấy một vòng lặp ngược trong mã hiện có không nhất thiết có nghĩa là rằng thứ tự không liên quan!

Tốt hơn là sử dụng forEach ()

Nói chung đối với mã cấp cao hơn trong đó độ rõ ràng và an toàn là mối quan tâm lớn hơn, tôi khuyên bạn nên sử dụng Array::forEach làm mẫu mặc định:

  • Nó là rõ ràng để đọc.
  • Nó chỉ ra rằng i sẽ không bị dịch chuyển trong khối (điều này luôn gây bất ngờ có thể ẩn trong các vòng lặp forwhile dài.)
  • Nó cung cấp cho bạn một phạm vi miễn phí cho việc đóng cửa.
  • Nó làm giảm rò rỉ các biến cục bộ và va chạm ngẫu nhiên với (và đột biến) các biến ngoài.

Sau đó, khi bạn thấy vòng lặp đảo ngược trong mã của mình, đó là một gợi ý rằng nó bị đảo ngược vì một lý do chính đáng (có lẽ là một trong những lý do được mô tả ở trên). Và nhìn thấy một vòng lặp truyền thống cho vòng lặp có thể chỉ ra rằng sự dịch chuyển có thể diễn ra.

(Nếu cuộc thảo luận về ý định không có ý nghĩa với bạn, thì bạn và mã của bạn có thể được hưởng lợi từ việc xem bài giảng của Crockford trên Phong cách lập trình & bộ não của bạn .)


Làm thế nào nó hoạt động?

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

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

Bạn sẽ nhận thấy rằng _i--_ là mệnh đề giữa (nơi chúng ta thường thấy một so sánh) và mệnh đề cuối cùng trống (nơi chúng ta thường thấy _i++_). Điều đó có nghĩa là _i--_ cũng được sử dụng làm điều kiện để tiếp tục. Điều quan trọng, nó được thực thi và kiểm tra trước mỗi lần lặp.

  • Làm thế nào nó có thể bắt đầu tại _array.length_ mà không phát nổ?

    Bởi vì _i--_ chạy trước mỗi lần lặp, trong lần lặp đầu tiên, chúng tôi thực sự sẽ truy cập vào mục tại _array.length - 1_ để tránh mọi vấn đề với Mảng ngoài lề undefined mặt hàng.

  • Tại sao nó không dừng lặp trước chỉ số 0?

    Vòng lặp sẽ dừng lặp khi điều kiện _i--_ ước lượng thành giá trị falsey (khi nó mang lại 0).

    Thủ thuật là không giống như _--i_, toán tử _i--_ khai báo i nhưng mang lại giá trị trước độ giảm. Bảng điều khiển của bạn có thể chứng minh điều này:

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

    _[5, 5, 4]_

    Vì vậy, ở lần lặp cuối cùng, i trước đây 1 và biểu thức _i--_ thay đổi nó đến 0 nhưng thực tế mang lại 1 (trung thực), và do đó điều kiện qua đi. Ở lần lặp tiếp theo _i--_ thay đổi i thành - 1 nhưng mang lại 0 (falsey), khiến việc thực thi ngay lập tức rơi ra khỏi đáy của vòng lặp.

    Trong vòng lặp chuyển tiếp truyền thống, _i++_ và _++i_ có thể hoán đổi cho nhau (như Douglas Crockford chỉ ra). Tuy nhiên, trong vòng lặp ngược lại, vì phần giảm của chúng tôi cũng là biểu thức điều kiện của chúng tôi, chúng tôi phải gắn bó với _i--_ nếu chúng tôi muốn xử lý mục ở chỉ số 0.


Câu đố

Một số người thích vẽ một mũi tên nhỏ trong vòng lặp for ngược và kết thúc bằng một cái nháy mắt:

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

Tín dụng vào WYL để cho tôi thấy những lợi ích và sự khủng khiếp của vòng lặp ngược.

99
joeytwiddle

Một số ngôn ngữ C - sử dụng foreach để lặp qua các bảng liệt kê. Trong JavaScript, điều này được thực hiện với cấu trúc vòng lặp for..in :

var index,
    value;
for (index in obj) {
    value = obj[index];
}

Có một cái bẫy. for..in sẽ lặp qua từng thành viên vô số của đối tượng và các thành viên trên nguyên mẫu của nó. Để tránh đọc các giá trị được kế thừa qua nguyên mẫu của đối tượng, chỉ cần kiểm tra xem thuộc tính có thuộc về đối tượng không:

for (i in obj) {
    if (obj.hasOwnProperty(i)) {
        //do stuff
    }
}

Ngoài ra, ECMAScript 5 đã thêm phương thức forEach vào Array.prototype có thể được sử dụng để liệt kê một mảng bằng cách sử dụng một calback (polyfill có trong tài liệu để bạn vẫn có thể sử dụng nó cho các trình duyệt cũ hơn):

arr.forEach(function (val, index, theArray) {
    //do stuff
});

Điều quan trọng cần lưu ý là Array.prototype.forEach không bị hỏng khi gọi lại trả về false. jQueryUnderscore.js cung cấp các biến thể của riêng họ trên each để cung cấp các vòng lặp có thể được ngắn mạch.

75
zzzzBov

Nếu bạn muốn lặp qua một mảng, hãy sử dụng vòng lặp for ba phần tiêu chuẩn.

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

Bạn có thể nhận được một số tối ưu hóa hiệu suất bằng cách lưu trữ myArray.length hoặc lặp lại qua đó.

34
Quentin

Tôi biết đây là một bài viết cũ, và đã có rất nhiều câu trả lời tuyệt vời rồi. Để hoàn thiện hơn một chút, tôi nghĩ rằng tôi sẽ ném vào một cái khác bằng cách sử dụng AngularJS . Tất nhiên, điều này chỉ áp dụng nếu bạn đang sử dụng Angular, rõ ràng, dù sao tôi cũng muốn đặt nó.

angular.forEach nhận 2 đối số và đối số thứ ba tùy chọn. Đối số đầu tiên là đối tượng (mảng) để lặp lại, đối số thứ hai là hàm lặp và đối số thứ ba tùy chọn là bối cảnh đối tượng (về cơ bản được gọi bên trong vòng lặp là 'this'.

Có nhiều cách khác nhau để sử dụng vòng lặp forEach của góc. Đơn giản nhất và có lẽ được sử dụng nhiều nhất là

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

Một cách khác hữu ích để sao chép các mục từ mảng này sang mảng khác là

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);

Mặc dù, bạn không phải làm điều đó, bạn chỉ cần làm như sau và nó tương đương với ví dụ trước:

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

Bây giờ có những ưu và nhược điểm của việc sử dụng hàm angular.forEach trái ngược với vòng lặp for có hương vị Vanilla.

Ưu điểm

  • Dễ đọc
  • Dễ viết
  • Nếu có sẵn, angular.forEach sẽ sử dụng vòng lặp ES5 forEach. Bây giờ, tôi sẽ chuyển sang hiệu quả trong phần khuyết điểm, vì các vòng lặp forEach là much chậm hơn các vòng lặp for. Tôi đề cập đến điều này như một chuyên gia vì thật tuyệt khi được thống nhất và chuẩn hóa.

Hãy xem xét 2 vòng lặp lồng nhau sau đây, chúng thực hiện chính xác cùng một điều. Giả sử chúng ta có 2 mảng đối tượng và mỗi đối tượng chứa một mảng kết quả, mỗi đối tượng có thuộc tính Giá trị là một chuỗi (hoặc bất cứ thứ gì). Và giả sử chúng ta cần lặp lại qua từng kết quả và nếu chúng bằng nhau thì thực hiện một số hành động:

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

Được cho đây là một ví dụ giả thuyết rất đơn giản, nhưng tôi đã viết ba lần nhúng cho các vòng lặp bằng cách sử dụng cách tiếp cận thứ hai và nó rất ​​khó đọc và viết cho vấn đề đó.

Nhược điểm

  • Hiệu quả. angular.forEach và bản địa forEach, đối với vấn đề đó, cả hai rất nhiề chậm hơn so với vòng lặp for bình thường .... about 90 % chậm hơn . Vì vậy, đối với các tập dữ liệu lớn, tốt nhất nên bám vào vòng lặp for gốc.
  • Không nghỉ, tiếp tục, hoặc trả lại hỗ trợ. continue thực sự được hỗ trợ bởi " tai nạn ", để tiếp tục trong angular.forEach bạn đơn giản đặt một câu lệnh return; trong hàm như angular.forEach(array, function(item) { if (someConditionIsTrue) return; }); sẽ làm cho nó tiếp tục ra khỏi chức năng cho lần lặp đó. Điều này cũng là do thực tế là forEach không hỗ trợ ngắt hoặc tiếp tục.

Tôi chắc chắn cũng có nhiều ưu và nhược điểm khác, và xin vui lòng thêm bất kỳ điều gì bạn thấy phù hợp. Tôi cảm thấy rằng, điểm mấu chốt, nếu bạn cần hiệu quả, hãy gắn bó với vòng lặp for riêng cho nhu cầu lặp của bạn. Nhưng, nếu bộ dữ liệu của bạn nhỏ hơn và một số hiệu quả vẫn ổn để từ bỏ để đổi lấy khả năng đọc và khả năng ghi, thì bằng mọi cách, hãy ném angular.forEach vào cậu bé xấu số đó.

29
user2359695

Nếu bạn không nhớ làm trống mảng:

var x;

while(x = y.pop()){ 

    alert(x); //do something 

}

x sẽ chứa giá trị cuối cùng của y và nó sẽ bị xóa khỏi mảng. Bạn cũng có thể sử dụng shift() sẽ cung cấp và xóa mục đầu tiên khỏi y.

27
gaby de wilde

Việc triển khai forEach ( xem trong jsFiddle ):

function forEach(list,callback) {
  var length = list.length;
  for (var n = 0; n < length; n++) {
    callback.call(list[n]);
  }
}

var myArray = ['hello','world'];

forEach(
  myArray,
  function(){
    alert(this); // do something
  }
);
27
nmoliveira

Một giải pháp dễ dàng bây giờ sẽ là sử dụng thư viện underscore.js . Nó cung cấp nhiều công cụ hữu ích, chẳng hạn như each và sẽ tự động ủy thác công việc cho người bản xứ forEach nếu có.

Một ví dụ CodePen về cách thức hoạt động của nó là:

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

Xem thêm

24
Micka

Có ba cách triển khai foreach trong jQuery như sau.

var a = [3,2];

$(a).each(function(){console.log(this.valueOf())}); //Method 1
$.each(a, function(){console.log(this.valueOf())}); //Method 2
$.each($(a), function(){console.log(this.valueOf())}); //Method 3
24
Rajesh Paul

Có lẽ vòng lặp for(i = 0; i < array.length; i++) không phải là lựa chọn tốt nhất. Tại sao? Nếu bạn có điều này:

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

Phương thức sẽ gọi từ array[0] đến array[2]. Đầu tiên, điều này sẽ tham chiếu các biến đầu tiên mà bạn thậm chí không có, thứ hai bạn sẽ không có các biến trong mảng và thứ ba điều này sẽ làm cho mã mạnh hơn. Nhìn vào đây, đó là những gì tôi sử dụng:

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

Và nếu bạn muốn nó là một hàm, bạn có thể làm điều này:

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

Nếu bạn muốn phá vỡ, logic hơn một chút:

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

Thí dụ:

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

Nó trở lại:

//Hello
//World
//!!!
22
Federico Piragua

Kể từ ES6:

list = [0, 1, 2, 3]
for (let obj of list) {
    console.log(obj)
}

Trong đó of tránh các điểm kỳ lạ liên quan đến in và làm cho nó hoạt động giống như vòng lặp for của bất kỳ ngôn ngữ nào khác và let liên kết i trong vòng lặp trái ngược với hàm.

Các dấu ngoặc nhọn ({}) có thể được bỏ qua khi chỉ có một lệnh (ví dụ: trong ví dụ trên).

21
Zaz

Đây là một trình lặp cho danh sách thưa thớt trong đó chỉ mục bắt đầu từ 0, đây là kịch bản điển hình khi xử lý tài liệu.getElementsByTagName hoặc document.querySelector ALL)

function each( fn, data ) {

    if(typeof fn == 'string')
        eval('fn = function(data, i){' + fn + '}');

    for(var i=0, L=this.length; i < L; i++) 
        fn.call( this[i], data, i );   

    return this;
}

Array.prototype.each = each;  

Ví dụ về cách sử dụng:

Ví dụ 1

var arr = [];
[1, 2, 3].each( function(a){ a.Push( this * this}, arr);
arr = [1, 4, 9]

Ví dụ # 2

each.call(document.getElementsByTagName('p'), "this.className = data;",'blue');

Mỗi thẻ p được class="blue"

Ví dụ # 3

each.call(document.getElementsByTagName('p'), 
    "if( i % 2 == 0) this.className = data;",
    'red'
);

Mỗi thẻ p khác được class="red">

Ví dụ # 4

each.call(document.querySelectorAll('p.blue'), 
    function(newClass, i) {
        if( i < 20 )
            this.className = newClass;
    }, 'green'
);

Và cuối cùng, 20 thẻ p màu xanh đầu tiên được đổi thành màu xanh lá cây

Thận trọng khi sử dụng chuỗi làm hàm: hàm được tạo ngoài ngữ cảnh và chỉ nên được sử dụng khi bạn chắc chắn có phạm vi biến. Mặt khác, tốt hơn để vượt qua các chức năng trong đó phạm vi trực quan hơn.

17
Tim

Không có bất kỳ vòng lặp for each nào trong nguồn gốc JavaScript . Bạn có thể sử dụng các thư viện để có được chức năng này (tôi khuyên dùng Underscore.js ), sử dụng một vòng lặp for đơn giản.

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

Tuy nhiên, lưu ý rằng có thể có lý do để sử dụng vòng lặp for thậm chí đơn giản hơn (xem câu hỏi về Stack Overflow lặp đi lặp lại một ý tưởng tồi như vậy?)

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

một vài cách để lặp qua một mảng trong JavaScript, như dưới đây:

for - đó là cái phổ biến nhất. Khối mã đầy đủ để lặp

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 - lặp trong khi một điều kiện được thông qua. Nó dường như là vòng lặp nhanh nhất

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

do/while - cũng lặp qua một khối mã trong khi điều kiện là đúng, sẽ chạy ít nhất một lần

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

Vòng lặp chức năng - forEach, map, filter, cũng reduce (chúng lặp qua hàm, nhưng được sử dụng nếu bạn cần làm gì đó với mảng của mình, v.v.

// 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>

Để biết thêm thông tin và ví dụ về lập trình chức năng trên mảng, hãy xem bài đăng trên blog Lập trình chức năng trong JavaScript: ánh xạ, lọc và giảm.

16
Alireza

ECMAScript5 (phiên bản trên Javascript) để hoạt động với Mảng.

forEach - Lặp lại qua từng mục trong mảng và làm bất cứ điều gì bạn cần với mỗi mục.

['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

Trong trường hợp, quan tâm nhiều hơn đến hoạt động trên mảng bằng cách sử dụng một số tính năng sẵn có.

map - Nó tạo ra một mảng mới với kết quả của hàm gọi lại. Phương pháp này là tốt để được sử dụng khi bạn cần định dạng các thành phần của mảng.

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

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

less - Như tên đã nói, nó giảm mảng thành một giá trị bằng cách gọi hàm đã cho đi qua trong phần tử dòng điện và kết quả của lần thực hiện trước đó.

[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 - Trả về true hoặc false nếu tất cả các phần tử trong mảng vượt qua kiểm tra trong hàm gọi lại.

// 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 - Rất giống với mọi bộ lọc ngoại trừ bộ lọc đó trả về một mảng với các phần tử trả về true cho hàm đã cho.

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

// Output: [2,4,6]

Hy vọng điều này sẽ hữu ích.

14
Anil Kumar Arya

Không có khả năng sẵn sàng để đột nhập trong forEach. Để ngắt thực thi, sử dụng Array#some như bên dưới:

[1,2,3].some(function(number) {
    return number === 1;
});

Điều này hoạt động vì some trả về true ngay khi bất kỳ cuộc gọi lại nào, được thực hiện theo thứ tự mảng, trả về true, ngắn mạch khi thực hiện phần còn lại. Câu trả lời gốc Xem nguyên mẫu Mảng cho một số

14
Priyanshu Chauhan

Tôi cũng muốn thêm nó như là một thành phần của một vòng lặp ngược và một câu trả lời ở trên cho một người cũng thích cú pháp này.

var foo = [object,object,object];
for (var i = foo.length, item; item = foo[--i];) {
    console.log(item);
}

Ưu điểm:

Lợi ích cho việc này: Bạn đã có tài liệu tham khảo trong phần đầu tiên như thế sẽ không cần phải khai báo sau với dòng khác. Nó rất thuận tiện khi lặp qua máng đối tượng.

Nhược điểm:

Điều này sẽ phá vỡ bất cứ khi nào tham chiếu là sai - falsey (không xác định, v.v.). Nó có thể được sử dụng như một lợi thế mặc dù. Tuy nhiên, nó sẽ làm cho nó khó hơn một chút để đọc. Và cũng tùy thuộc vào trình duyệt, nó có thể "không" được tối ưu hóa để hoạt động nhanh hơn trình duyệt gốc.

11

cách jQuery sử dụng $.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];
10
DanFromGermany

Một cách gần nhất với ý tưởng của bạn sẽ là sử dụng Array.forEach() chấp nhận chức năng clojure sẽ được thực thi cho từng phần tử của mảng.

myArray.forEach(
  (item) => {
    // do something 
    console.log(item);
  }
);

Một cách khả thi khác là sử dụng Array.map() hoạt động theo cùng một cách nhưng cũng mutates mỗi phần tử và trả về nó như sau:

var myArray = [1, 2, 3];
myArray = myArray.map(
  (item) => {
    return item + 1;
  }
);

console.log(myArray); // [2, 3, 4]
6
Ante Jablan Adamović

Sử dụng các vòng lặp với toán tử ES6 phá hủylây lan

Phá hủy và sử dụng toán tử lây lan đã được chứng minh khá hữu ích cho những người mới sử dụng ES6 vì nó dễ đọc/thẩm mỹ hơn, mặc dù một số cựu chiến binh javascript có thể cho rằng nó lộn xộn, đàn em hoặc một số người khác có thể thấy nó hữu ích.

Các ví dụ sau sẽ sử dụng for...of statement và .forEach .

Ví dụ 6, 7 và 8 có thể được sử dụng với bất kỳ vòng lặp chức năng nào như .map, .filter, .reduce, .sort, .every, .some, để biết thêm thông tin về các phương thức này hãy kiểm tra Đối tượng mảng .

Ví dụ 1: Vòng lặp for...of bình thường - không có thủ thuật nào ở đây.

let arrSimple = ['a', 'b', 'c'];

for (let letter of arrSimple) {
  console.log(letter);
}

Ví dụ 2: Tách từ thành ký tự

let arrFruits = ['Apple', 'orange', 'banana'];

for (let [firstLetter, ...restOfTheWord] of arrFruits) {
  // Create a shallow copy using the spread operator
  let [lastLetter] = [...restOfTheWord].reverse();
  console.log(firstLetter, lastLetter, restOfTheWord);

}

Ví dụ 3: Vòng lặp với keyvalue 

// let arrSimple = ['a', 'b', 'c'];

// Instead of keeping an index in `i` as per example `for(let i = 0 ; i<arrSimple.length;i++)`
// this example will use a multi-dimensional array of the following format type: 
// `arrWithIndex: [number, string][]`

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Same thing can be achieved using `.map` method
// let arrWithIndex = arrSimple.map((i, idx) => [idx, i]);

// Same thing can be achieved using `Object.entries`
// NOTE: `Object.entries` method doesn't work on internet Explorer unless it's polyfilled
// let arrWithIndex = Object.entries(arrSimple);

for (let [key, value] of arrWithIndex) {
  console.log(key, value);
}

Ví dụ 4: Nhận thuộc tính đối tượng nội tuyến

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];

for (let { name, age: aliasForAge } of arrWithObjects) {
  console.log(name, aliasForAge);
}

Ví dụ 5: Nhận các thuộc tính đối tượng sâu của những gì bạn cần

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

for (let { name, tags: [firstItemFromTags, ...restOfTags] } of arrWithObjectsWithArr) {
  console.log(name, firstItemFromTags, restOfTags);
}

Ví dụ 6:Ví dụ 3 được sử dụng với .forEach

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Not to be confused here, `forEachIndex` is the real index
// `mappedIndex` was created by "another user", so you can't really trust it

arrWithIndex.forEach(([mappedIndex, item], forEachIndex) => {
  console.log(forEachIndex, mappedIndex, item);
});

Ví dụ 7: Is Ví dụ 4 được sử dụng với .forEach

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];
// NOTE: Destructuring objects while using shorthand functions 
// are required to be surrounded by parenthesis
arrWithObjects.forEach( ({ name, age: aliasForAge }) => {
  console.log(name, aliasForAge)
});

Ví dụ 8:Ví dụ 5 được sử dụng với .forEach

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

arrWithObjectsWithArr.forEach(({
  name,
  tags: [firstItemFromTags, ...restOfTags]
}) => {
  console.log(name, firstItemFromTags, restOfTags);
});

6
darklightcode

Cú pháp lambda thường không hoạt động trong IE 10 trở xuống.

Tôi thường sử dụng

[].forEach.call(arrayName,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);
});
5
Murtuza Husain

Bạn có thể gọi forEach Thích điều này:

let Array = [1,3,2];

theArray.forEach((element)=>{ 
  // use the element of the array
  console.log(element) 
}

phần tử sẽ có giá trị của mỗi chỉ số từ 0 đến chiều dài của mảng.

Đầu ra:

1    
3    
2

Giải thích:

forEach là trong lớp nguyên mẫu. bạn cũng có thể gọi đây là theArray.prototype.forEach (...);

nguyên mẫu: https://hackernoon.com/prototypes-in-javascript-5bba2990e04b

Bạn cũng có thể thay đổi trên một mảng như thế này:

for(let i=0;i<theArray.length;i++){
  console.log(i); //i will have the value of each index
}
4
Nouman Dilshad

nếu bạn muốn lặp qua mảng các đối tượng có chức năng mũi tên:

let arr=[{name:'john',age:50},{name:'clark',age:19},{name:'mohan',age:26}];

arr.forEach((person)=>{
  console.log('i am '+person.name+' and i am '+person.age+ ' old');
})
3
subhashish negi

Tóm lược:

Khi lặp qua một mảng, chúng ta thường có thể muốn thực hiện một trong các mục tiêu sau:

  1. Chúng tôi muốn lặp lại mảng và tạo mảng mới:

    Array.prototype.map 

  2. Chúng tôi muốn lặp lại mảng và không tạo một mảng mới:

    Array.prototype.forEach 

    for..of vòng lặp

Trong JS có nhiều cách để hoàn thành cả hai mục tiêu này. Tuy nhiên, một số là thuận tiện hơn những người khác. Dưới đây bạn có thể tìm thấy một số phương thức thường được sử dụng (imo thông thường nhất) để thực hiện việc lặp mảng trong javascript.

Tạo mảng mới: Map

map() là một hàm nằm trên Array.prototype có thể biến đổi mọi phần tử của một mảng và sau đó trả về một new mảng. map() lấy làm đối số một hàm gọi lại và hoạt động theo cách sau:

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

let newArr = arr.map((element, index, array) => {
  return element * 2;
})

console.log(arr);
console.log(newArr);

Cuộc gọi lại mà chúng tôi đã chuyển vào map() như một đối số được thực thi cho mọi phần tử. Sau đó, một mảng được trả về có cùng độ dài với mảng ban đầu. Trong phần tử mảng mới này được chuyển đổi bởi hàm gọi lại được truyền vào dưới dạng đối số cho map().

Sự khác biệt rõ rệt giữa map và cơ chế vòng lặp khác như forEach và vòng lặp for..ofmap trả về dưới dạng mảng mới và giữ nguyên mảng cũ (trừ khi bạn tự động điều khiển nó với suy nghĩ như splice). 

Cũng lưu ý rằng hàm gọi lại của hàm map cung cấp dưới dạng đối số thứ hai số chỉ mục của lần lặp hiện tại. Hơn nữa, đối số thứ ba cung cấp mảng mà map được gọi. Đôi khi những tính chất này có thể rất hữu ích.

Lặp lại bằng cách sử dụng forEach

forEach là một hàm nằm trên Array.prototype, lấy hàm gọi lại làm đối số. Sau đó, nó thực hiện chức năng gọi lại này cho mọi phần tử trong mảng. Ngược lại với hàm map(), hàm forEach không trả về gì (undefined). Ví dụ:

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

arr.forEach((element, index, array) => {

  console.log(element * 2);

  if (index === 4) {
    console.log(array)
  }
  // index, and oldArray are provided as 2nd and 3th argument by the callback

})

console.log(arr);

Giống như hàm map, hàm gọi lại forEach cung cấp dưới dạng đối số thứ hai số chỉ mục của lần lặp hiện tại. Ngoài ra, đối số thứ ba cũng cung cấp mảng mà forEach được gọi. 

Lặp lại các phần tử bằng cách sử dụng for..of

Vòng lặp for..of lặp qua mọi phần tử của một mảng (hoặc bất kỳ đối tượng lặp lại nào khác). Nó hoạt động theo cách sau:

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

for(let element of arr) {
  console.log(element * 2);
}

Trong ví dụ trên element là viết tắt của một phần tử mảng và arr là mảng mà chúng ta muốn lặp. Không phải là tên element là tùy ý và chúng tôi có thể đã chọn bất kỳ tên nào khác như 'el' hoặc một cái gì đó mang tính khai báo hơn khi điều này được áp dụng. 

Đừng nhầm lẫn vòng lặp for..in với vòng lặp for..of. for..in sẽ lặp qua tất cả các thuộc tính có thể đếm được của mảng trong khi vòng for..of sẽ chỉ lặp qua các phần tử mảng. Ví dụ:

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

arr.foo = 'foo';

for(let element of arr) {
  console.log(element);
}

for(let element in arr) {
  console.log(element);
}

2
Willem van der Veen

Nếu bạn có một mảng lớn, bạn nên sử dụng iterators để đạt được hiệu quả. Trình lặp là một thuộc tính của một số bộ sưu tập JavaScript nhất định (như Map , Set , String , Array ). Thậm chí, for..of sử dụng iterator dưới mui xe.

Trình vòng lặp cải thiện hiệu quả bằng cách cho phép bạn tiêu thụ các mục trong danh sách một lần như thể chúng là một luồng. Điều làm cho một trình vòng lặp trở nên đặc biệt là cách nó đi qua một bộ sưu tập. Các vòng lặp khác cần tải toàn bộ bộ sưu tập lên phía trước để lặp qua nó, trong khi đó một trình vòng lặp chỉ cần biết vị trí hiện tại trong bộ sưu tập. 

Bạn truy cập vào mục hiện tại bằng cách gọi phương thức lặp next. Phương thức tiếp theo sẽ trả về value của mục hiện tại và boolean để cho biết khi nào bạn đã kết thúc bộ sưu tập. Sau đây là một ví dụ về việc tạo một trình vòng lặp từ một mảng. 

Chuyển đổi mảng thông thường của bạn thành iterator bằng cách sử dụng values() như thế này: 

    const myArr = [2,3,4]

let it = myArr.values();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

Bạn cũng có thể chuyển đổi mảng thông thường của mình thành iterator bằng cách sử dụng Symbol.iterator như thế này: 

const myArr = [2,3,4]

let it = myArr[Symbol.iterator]();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

Bạn cũng có thể chuyển đổi array thông thường của mình thành iterator như thế này: 

let myArr = [8, 10, 12];

function makeIterator(array) {
    var nextIndex = 0;
    
    return {
       next: function() {
           return nextIndex < array.length ?
               {value: array[nextIndex++], done: false} :
               {done: true};
       }
    };
};

var it = makeIterator(myArr);

console.log(it.next().value);   // {value: 8, done: false}
console.log(it.next().value);   // {value: 10, done: false}
console.log(it.next().value);   // {value: 12, done: false}
console.log(it.next().value);   // {value: undefined, done: true}

CH&UACUTE; TH&IACUTE;CH

  • Iterators là kiệt sức trong tự nhiên. 
  • Các đối tượng không phải là iterable theo mặc định. Sử dụng for..in trong trường hợp đó vì thay vì các giá trị, nó hoạt động với các khóa.

Bạn có thể đọc thêm về iteration protocoltại đây

1
BlackBeard
var a = ["car", "bus", "truck"]
a.forEach(function(item, index) {
    console.log("Index" + index);
    console.log("Element" + item);
})
1
John

// Looping through arrays using foreach  ES6 way

var data = new Array(1,2,3,4,5);
data.forEach((val,index) => {
    console.log("index :",index); // index
	console.log("value :", val); // value
});

0
arul prince

Bạn có thể sử dụng API forEach () (được cung cấp bởi Javascript) chấp nhận chức năng như một cuộc gọi lại và chạy một lần cho mỗi phần tử có trong mảng.

https://fullstackgeek.blogspot.com/2019/01/arrays-in-javascript-part-2.html

0
Ayush Jain

Tôi đến từ python và tôi thấy cách này rõ ràng hơn nhiều.
theArray là mảng, ví dụ là phần tử của mảng

for(let instance of theArray)
{
    console.log("The instance",instance);
}

hoặc là

for( instance in theArray)
{
  console.log("The instance",instance);
}

so với:

theArray.forEach(function(instance) {
    console.log(instance);
});

nhưng cuối cùng cả hai đều làm điều tương tự

0
Peko Chan

Nếu bạn muốn giữ mã của mình theo cách chức năng, hãy sử dụng bản đồ:

theArray.map(instance => do_something);

Bằng cách này, bạn sẽ tạo ra mảng mới cho hoạt động trong tương lai và sẽ bỏ qua mọi tác dụng phụ không mong muốn.

0
alejoko

Nếu bạn muốn sử dụng forEach(), nó sẽ giống như - 

theArray.forEach ( element => {
    console.log(element);
});

Nếu bạn muốn sử dụng for(), nó sẽ giống như - 

for(let idx = 0; idx < theArray.length; idx++){
    let element = theArray[idx];
    console.log(element);
}
0
Harunur Rashid