113

Có thể trùng lặp:
Lặp lại các giá trị theo nghĩa đen của đối tượng

Tôi có đối tượng trong JavaScript:

var object = someobject;

Object { aaa=true, bbb=true, ccc=true }

Làm thế nào tôi có thể sử dụng từng cho việc này?

 object.each(function(index, value)) {
      console.log(value);
 }

Không làm việc.

|
296

Đối tượng javascript không có chức năng .each tiêu chuẩn. jQuery cung cấp một hàm. Xem http://api.jquery.com/jQuery.each/ Dưới đây sẽ hoạt động

$.each(object, function(index, value) {
    console.log(value);
}); 

Một tùy chọn khác là sử dụng vanilla Javascript bằng cách sử dụng các hàm Object.keys()Array và .map()như thế này

Object.keys(object).map(function(objectKey, index) {
    var value = object[objectKey];
    console.log(value);
});

Xem https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Object/keyshttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_bject / Mảng / bản đồ

Chúng thường tốt hơn so với sử dụng vòng lặp Javascript vanilla, trừ khi bạn thực sự hiểu ý nghĩa của việc sử dụng vòng lặp for thông thường và xem sử dụng cho các đặc điểm cụ thể của nó như lặp qua chuỗi thuộc tính.

Nhưng thông thường, một vòng lặp for không hoạt động tốt hơn jQueryhoặc Object.keys().map(). Tôi sẽ đi vào hai vấn đề tiềm ẩn khi sử dụng vòng lặp for bên dưới.


Đúng vậy, cũng đã chỉ ra trong các câu trả lời khác, một sự thay thế Javascript đơn giản sẽ là

for(var index in object) { 
    var attr = object[index]; 
}

Có hai vấn đề tiềm ẩn với điều này:

1. Bạn muốn kiểm tra xem thuộc tính mà bạn đang tìm có phải từ chính đối tượng đó không phải từ chuỗi nguyên mẫu. Điều này có thể được kiểm tra với hasOwnPropertychức năng như vậy

for(var index in object) { 
   if (object.hasOwnProperty(index)) {
       var attr = object[index];
   }
}

Xem https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty để biết thêm thông tin.

Các chức năng jQuery.eachObject.keyschăm sóc này tự động.

2. Một vấn đề tiềm năng khác với một vòng lặp for đơn giản là phạm vi và không đóng. Điều này hơi phức tạp, nhưng lấy ví dụ mã sau đây. Chúng tôi có một loạt các nút với id nút0, button1, button2, v.v. và chúng tôi muốn đặt một onclick trên chúng và làm console.lognhư thế này:

<button id='button0'>click</button>
<button id='button1'>click</button>
<button id='button2'>click</button>

var messagesByButtonId = {"button0" : "clicked first!", "button1" : "clicked middle!", "button2" : "clicked last!"];
for(var buttonId in messagesByButtonId ) { 
   if (messagesByButtonId.hasOwnProperty(buttonId)) {
       $('#'+buttonId).click(function() {
           var message = messagesByButtonId[buttonId];
           console.log(message);
       });
   }
}

Nếu sau một thời gian, chúng tôi nhấp vào bất kỳ nút nào chúng tôi sẽ luôn nhận được "lần nhấp cuối cùng!" trong bảng điều khiển và không bao giờ "nhấp vào trước!" hoặc "nhấp vào giữa!". Tại sao? Bởi vì tại thời điểm chức năng onclick được thực thi, nó sẽ hiển thị messagesByButtonId[buttonId]bằng cách sử dụng buttonIdbiến tại thời điểm đó . Và vì vòng lặp đã kết thúc tại thời điểm đó, buttonIdbiến vẫn sẽ là "button2" (giá trị mà nó có trong lần lặp vòng lặp cuối cùng), và do đó messagesByButtonId[buttonId]sẽ messagesByButtonId["button2"]là "lần nhấp cuối cùng!"

Xem https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures để biết thêm thông tin về việc đóng cửa. Đặc biệt là phần cuối cùng của trang đó bao gồm ví dụ của chúng tôi.

Một lần nữa, jQuery.eachObject.keys().map()tự động giải quyết vấn đề này cho chúng tôi, vì nó cung cấp cho chúng tôi function(index, value)(đã đóng) nên chúng tôi an toàn sử dụng cả chỉ số và giá trị và yên tâm rằng chúng có giá trị mà chúng tôi mong đợi.

|
69
for(var key in object) {
   console.log(object[key]);
}
|
  • 1

    cảm ơn, nhưng điều này trả lại cho tôi "đúng", thay vì aaa, bbb, ccc :(

    – Võ Trọng Kiên 13:19:47 07/08/2012
  • 1

    vâng, đó là những gì nó được khuyến khích để điều khiển giá trị của các thuộc tính đúng với mọi khóa, nếu bạn muốn xem aaa, bbb, ccc thì hãy sử dụngconsole.log(key);

    – Hoàng Mạnh Nghiêm 17:34:55 07/08/2012
  • 1

    Lưu ý rằng bạn có thể muốn kiểm tra xem khóa tìm thấy đến từ chính đối tượng hay từ chuỗi nguyên mẫu. Sử dụng object.hasOwnProperty (key) để kiểm tra xem

    – Hoàng Lan Anh 11:26:32 03/10/2013
  • 1

    đúng là như vậy, nhưng việc thêm thuộc tính vào nguyên mẫu đối tượng luôn là một điều tồi tệ :) vì điều đó sẽ ảnh hưởng đến tất cả các mảng, chuỗi, v.v.

    – Đỗ Xuân Thu 13:23:19 03/10/2013

Câu trả lời của bạn (> 20 ký tự)

Bằng cách click "Đăng trả lời", bạn đồng ý với Điều khoản dịch vụ, Chính sách bảo mật and Chính sách cookie của chúng tôi.

Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ hoặc hỏi câu hỏi của bạn.