JavaScript cho số lượt truy cập so với

Bạn có nghĩ rằng có một sự khác biệt lớn trong ... trong và cho các vòng lặp không? Bạn thích sử dụng loại "cho" nào và tại sao?

Giả sử chúng ta có một mảng các mảng kết hợp:

var myArray = [{'key': 'value'}, {'key': 'value1'}];

Vì vậy, chúng ta có thể lặp lại:

for (var i = 0; i < myArray.length; i++)

Và:

for (var i in myArray)

Tôi không thấy một sự khác biệt lớn. Có bất kỳ vấn đề hiệu suất?

Sự lựa chọn nên dựa trên thành ngữ nào được hiểu rõ nhất.

Một mảng được lặp lại bằng cách sử dụng:

for (var i = 0; i < a.length; i++)
   //do stuff with a[i]

Một đối tượng đang được sử dụng như một mảng kết hợp được lặp lại bằng cách sử dụng:

for (var key in o)
  //do stuff with o[key]

Trừ khi bạn có lý do tan vỡ trái đất, hãy bám vào mô hình sử dụng đã được thiết lập.

Douglas Crockford khuyến nghị trong JavaScript: Các bộ phận tốt (trang 24) để tránh sử dụng for intuyên bố.

Nếu bạn sử dụng for inđể lặp qua tên thuộc tính trong một đối tượng, kết quả sẽ không được sắp xếp. Tệ hơn: Bạn có thể nhận được kết quả bất ngờ; nó bao gồm các thành viên được kế thừa từ chuỗi nguyên mẫu và tên của các phương thức.

Tất cả mọi thứ trừ các thuộc tính có thể được lọc ra .hasOwnProperty. Mẫu mã này thực hiện những gì bạn có thể muốn ban đầu:

for (var name in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, name)) {
        // DO STUFF
    }
}

FYI - Người dùng jQuery

each(callback)Phương thức của jQuery sử dụng for( ; ; )vòng lặp theo mặc định và sẽ for( in ) chỉ sử dụng nếu độ dài là undefined.

Do đó, tôi sẽ nói an toàn khi đảm nhận đúng thứ tự khi sử dụng chức năng này.

Ví dụ :

$(['a','b','c']).each(function() {
    alert(this);
});
//Outputs "a" then "b" then "c"

Nhược điểm của việc sử dụng này là nếu bạn đang thực hiện một số logic không phải UI, các chức năng của bạn sẽ kém khả dụng hơn đối với các khung công tác khác. Các each()chức năng có lẽ là tốt nhất dành cho sử dụng với bộ chọn jQuery và for( ; ; )có thể được khuyến khích khác.

có sự khác biệt về hiệu suất tùy thuộc vào loại vòng lặp bạn sử dụng và trên trình duyệt nào.

Ví dụ:

for (var i = myArray.length-1; i >= 0; i--)

nhanh hơn gần gấp đôi trên một số trình duyệt so với:

for (var i = 0; i < myArray.length; i++)

Tuy nhiên, trừ khi mảng của bạn rất LỚN hoặc bạn lặp chúng liên tục, tất cả đều đủ nhanh. Tôi thực sự nghi ngờ rằng việc lặp mảng là một nút cổ chai trong dự án của bạn (hoặc cho bất kỳ dự án nào khác cho vấn đề đó)

Lưu ý rằng phương thức Array.forEach riêng hiện được hỗ trợ rộng rãi .

Câu trả lời được cập nhật cho phiên bản hiện tại năm 2012 của tất cả các trình duyệt chính - Chrome, Firefox, IE9, Safari và Opera hỗ trợ mảng gốc.forEach của ES5.

Trừ khi bạn có một số lý do để hỗ trợ IE8 nguyên bản (lưu ý khung ES5-shim hoặc Chrome có thể được cung cấp cho những người dùng này, điều này sẽ cung cấp một môi trường JS thích hợp), đơn giản hơn là sử dụng cú pháp đúng của ngôn ngữ:

myArray.forEach(function(item, index) {
    console.log(item, index);
});

Tài liệu đầy đủ cho mảng.forEach () có tại MDN.

Hai cái này không giống nhau khi mảng thưa thớt.

var array = [0, 1, 2, , , 5];

for (var k in array) {
  // Not guaranteed by the language spec to iterate in order.
  alert(k);  // Outputs 0, 1, 2, 5.
  // Behavior when loop body adds to the array is unclear.
}

for (var i = 0; i < array.length; ++i) {
  // Iterates in order.
  // i is a number, not a string.
  alert(i);  // Outputs 0, 1, 2, 3, 4, 5
  // Behavior when loop body modifies array is clearer.
}

Sử dụng forEach để bỏ qua chuỗi nguyên mẫu

Chỉ cần một phụ lục nhanh cho câu trả lời của @ nailer ở trên , sử dụng forEach với Object.keys có nghĩa là bạn có thể tránh lặp lại chuỗi nguyên mẫu mà không phải sử dụng hasOwnProperty.

var Base = function () {
    this.coming = "hey";
};

var Sub = function () {
    this.leaving = "bye";
};

Sub.prototype = new Base();
var tst = new Sub();

for (var i in tst) {
    console.log(tst.hasOwnProperty(i) + i + tst[i]);
}

Object.keys(tst).forEach(function (val) {
    console.log(val + tst[val]);
});

Tôi thứ hai ý kiến ​​rằng bạn nên chọn phương pháp lặp theo nhu cầu của bạn. Tôi sẽ đề nghị bạn thực sự không bao giờ lặp qua bản địa Arrayvới for incấu trúc. Đó là cách chậm hơn và , như Chase Seibert đã chỉ ra vào lúc trước, không tương thích với khung Prototype.

Có một điểm chuẩn tuyệt vời về các kiểu lặp khác nhau mà bạn hoàn toàn nên xem nếu bạn làm việc với JavaScript . Đừng tối ưu hóa sớm, nhưng bạn nên giữ những thứ đó ở đâu đó sau gáy.

Tôi sẽ sử dụng for inđể có được tất cả các thuộc tính của một đối tượng, điều này đặc biệt hữu ích khi gỡ lỗi các tập lệnh của bạn. Ví dụ: tôi thích có dòng này tiện dụng khi tôi khám phá đối tượng lạ:

l = ''; for (m in obj) { l += m + ' => ' + obj[m] + '\n' } console.log(l);

Nó chuyển nội dung của toàn bộ đối tượng (cùng với các thân phương thức) vào nhật ký Firebird của tôi. Rất tiện dụng.

đây là một cái gì đó tôi đã làm

function foreach(o, f) {
 for(var i = 0; i < o.length; i++) { // simple for loop
  f(o[i], i); // execute a function and make the obj, objIndex available
 }
}

đây là cách bạn sẽ sử dụng nó, nó
sẽ hoạt động trên các mảng và đối tượng (chẳng hạn như danh sách các phần tử HTML)

foreach(o, function(obj, i) { // for each obj in o
  alert(obj); // obj
  alert(i); // obj index
  /*
    say if you were dealing with an html element may be you have a collection of divs
  */
  if(typeof obj == 'object') { 
   obj.style.marginLeft = '20px';
  }
});

Tôi chỉ thực hiện điều này vì vậy tôi mở để đề xuất :)

Tôi sẽ sử dụng các phương pháp khác nhau dựa trên cách tôi muốn tham khảo các mục.

Sử dụng foreach nếu bạn chỉ muốn các mục hiện tại.

Sử dụng nếu bạn cần một người lập chỉ mục để so sánh tương đối. (Tức là làm thế nào để so sánh với mục trước / tiếp theo?)

Tôi chưa bao giờ nhận thấy một sự khác biệt hiệu suất. Tôi sẽ đợi cho đến khi có một vấn đề hiệu suất trước khi lo lắng về nó.

Với for (var i in myArray), bạn cũng có thể lặp qua các đối tượng, tôi sẽ chứa tên khóa và bạn có thể truy cập thuộc tính thông qua myArray [i] . Ngoài ra, bất kỳ phương thức nào bạn đã thêm vào đối tượng cũng sẽ được bao gồm trong vòng lặp, tức là, nếu bạn sử dụng bất kỳ khung công tác bên ngoài nào như jQuery hoặc nguyên mẫu hoặc nếu bạn thêm phương thức vào các nguyên mẫu đối tượng trực tiếp, tại một điểm tôi sẽ trỏ đến những phương pháp đó.

Coi chừng!

Ví dụ: nếu bạn có một số thẻ script và bạn đang tìm kiếm thông tin trong các thuộc tính thẻ, bạn phải sử dụng thuộc tính .length với một vòng lặp for vì đó không phải là một mảng đơn giản mà là một đối tượng HTMLCollection.

https://developer.mozilla.org/en/DOM/HTMLCollection

Nếu bạn sử dụng câu lệnh foreach cho (var i trong yourList), nó sẽ trả về các biểu thức và phương thức của HTMLCollection trong hầu hết các trình duyệt!

var scriptTags = document.getElementsByTagName("script");

for(var i = 0; i < scriptTags.length; i++)
alert(i); // Will print all your elements index (you can get src attribute value using scriptTags[i].attributes[0].value)

for(var i in scriptTags)
alert(i); // Will print "length", "item" and "namedItem" in addition to your elements!

Ngay cả khi getElementsByTagName phải trả về NodeList, hầu hết các trình duyệt đều trả về HTMLCollection: https://developer.mozilla.org/en/DOM/document.getElementsByTagName

Đối với các vòng lặp trên Mảng không tương thích với Prototype. Nếu bạn nghĩ rằng bạn có thể cần phải sử dụng thư viện đó trong tương lai, thì sẽ rất hợp lý nếu bạn sử dụng các vòng lặp.

http://www.prototypejs.org/api/array

Tôi đã thấy các vấn đề với "cho mỗi" khi sử dụng các đối tượng và nguyên mẫu và mảng

sự hiểu biết của tôi là cho mỗi là cho các thuộc tính của các đối tượng và KHÔNG phải mảng

Nếu bạn thực sự muốn tăng tốc mã của mình, thì sao?

for( var i=0,j=null; j=array[i++]; foo(j) );

đó là loại có logic trong khi câu lệnh for và nó ít dư thừa hơn. Ngoài ra firefox có Array.forEach và Array.filter

Một mã ngắn hơn và tốt nhất theo jsperf là

keys  = Object.keys(obj);
for (var i = keys.length; i--;){
   value = obj[keys[i]];// or other action
}

Sử dụng vòng lặp Array (). ForEach để tận dụng sự song song

cho (;;) là cho Mảng : [20,55,33]

for..in dành cho Đối tượng : {x: 20, y: 55: z: 33}

Hãy cẩn thận!!! Tôi đang sử dụng Chrome 22.0 trong Mac OS và tôi gặp vấn đề với từng cú pháp.

Tôi không biết đây có phải là sự cố trình duyệt, sự cố javascript hoặc một số lỗi trong mã không, nhưng nó RẤT lạ. Bên ngoài đối tượng nó hoạt động hoàn hảo.

var MyTest = {
    a:string = "a",
    b:string = "b"
};

myfunction = function(dicts) {
    for (var dict in dicts) {
        alert(dict);
        alert(typeof dict); // print 'string' (incorrect)
    }

    for (var i = 0; i < dicts.length; i++) {
        alert(dicts[i]);
        alert(typeof dicts[i]); // print 'object' (correct, it must be {abc: "xyz"})
    }
};

MyObj = function() {
    this.aaa = function() {
        myfunction([MyTest]);
    };
};
new MyObj().aaa(); // This does not work

myfunction([MyTest]); // This works

Có một sự khác biệt quan trọng giữa cả hai. Lặp đi lặp lại trên các thuộc tính của một đối tượng, vì vậy khi trường hợp là một mảng, nó sẽ không chỉ lặp lại các phần tử của nó mà còn qua chức năng "loại bỏ" mà nó có.

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

//Output
0
1

for (var i in myArray) { 
    console.log(i) 
} 

// Output
0 
1 
remove

Bạn có thể sử dụng for-in với một if(myArray.hasOwnProperty(i)). Tuy nhiên, khi lặp qua các mảng, tôi luôn muốn tránh điều này và chỉ sử dụng câu lệnh for (;;).

Mặc dù cả hai đều rất giống nhau nhưng có một sự khác biệt nhỏ:

var array = ["a", "b", "c"];
array["abc"] = 123;
console.log("Standard for loop:");
for (var index = 0; index < array.length; index++)
{
  console.log(" array[" + index + "] = " + array[index]); //Standard for loop
}

trong trường hợp này, đầu ra là:

TIÊU CHUẨN CHO CUỘC ĐỜI:

ARRAY [0] = A

ARRAY [1] = B

ARRAY [2] = C

console.log("For-in loop:");
for (var key in array)
{
  console.log(" array[" + key + "] = " + array[key]); //For-in loop output
}

trong khi trong trường hợp này, đầu ra là:

CUỘC ĐỜI

ARRAY [1] = B

ARRAY [2] = C

ARRAY [10] = D

ARRAY [ABC] = 123

Câu lệnh for in cho phép lặp qua tên của tất cả các thuộc tính của một đối tượng. Thật không may, nó cũng lặp qua tất cả các thành viên được kế thừa thông qua chuỗi nguyên mẫu. Điều này có tác dụng phụ xấu trong việc phục vụ các chức năng của phương thức khi sự quan tâm đến các thành viên dữ liệu.