Lặp lại thông qua các thuộc tính đối tượng

var obj = {
    name: "Simon",
    age: "20",
    clothing: {
        style: "simple",
        hipster: false
    }
}

for(var propt in obj){
    console.log(propt + ': ' + obj[propt]);
}

Làm thế nào để biến proptđại diện cho các thuộc tính của đối tượng? Đây không phải là một phương thức hoặc tài sản tích hợp. Tại sao nó đến với mọi tài sản trong đối tượng?

Lặp lại các thuộc tính yêu cầu hasOwnPropertykiểm tra bổ sung này :

for (var prop in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, prop)) {
        // do stuff
    }
}

Điều đó là cần thiết bởi vì nguyên mẫu của một đối tượng chứa các thuộc tính bổ sung cho đối tượng là một phần kỹ thuật của đối tượng. Các thuộc tính bổ sung này được kế thừa từ lớp đối tượng cơ sở, nhưng vẫn là các thuộc tính của obj.

hasOwnProperty chỉ cần kiểm tra xem liệu đây có phải là một thuộc tính dành riêng cho lớp này không và không được thừa kế từ lớp cơ sở.

Cũng có thể gọi hasOwnPropertyqua chính đối tượng:

if (obj.hasOwnProperty(prop)) {
    // do stuff
}

Nhưng điều này sẽ thất bại nếu đối tượng có trường không liên quan có cùng tên:

var obj = { foo: 42, hasOwnProperty: 'lol' };
obj.hasOwnProperty('foo');  // TypeError: hasOwnProperty is not a function

Đó là lý do tại sao an toàn hơn để gọi nó qua Object.prototypethay thế:

var obj = { foo: 42, hasOwnProperty: 'lol' };
Object.prototype.hasOwnProperty.call(obj, 'foo');  // true

Kể từ JavaScript 1.8.5, bạn có thể sử dụng Object.keys(obj)để lấy Mảng thuộc tính được xác định trên chính đối tượng (những thuộc tính trả về true obj.hasOwnProperty(key)).

Object.keys(obj).forEach(function(key,index) {
    // key: the name of the object key
    // index: the ordinal position of the key within the object 
});

Điều này tốt hơn (và dễ đọc hơn) so với sử dụng vòng lặp for-in.

Nó được hỗ trợ trên các trình duyệt này:

• Firefox (Tắc kè): 4 (2.0)
• Chrome: 5
• Internet Explorer: 9

Xem tài liệu tham khảo của Mozilla Developer Network Object.keys () để biết thêm thông tin.

Các cô gái và các chàng trai chúng ta đang ở trong năm 2019 và chúng ta không có nhiều thời gian để gõ ... Vì vậy, hãy làm điều này ECMAScript 2016 thú vị mới này:

Object.keys(obj).forEach(e => console.log(`key=${e}  value=${obj[e]}`));

Đó là for...in statement(thông số MDN , ECMAScript ).

Bạn có thể đọc nó như là " CHO mỗi tài sản TRÊN các objđối tượng, chuyển nhượng mỗi tài sản cho PROPT biến lần lượt".

Trong các triển khai ES cập nhật, bạn có thể sử dụng Object.entries:

for (const [key, value] of Object.entries(obj)) { }

hoặc là

Object.entries(obj).forEach(([key, value]) => ...)

Nếu bạn chỉ muốn lặp lại các giá trị, thì hãy sử dụng Object.values:

for (const value of Object.values(obj)) { }

hoặc là

Object.values(obj).forEach(value => ...)

Nó chỉ là một for...invòng lặp. Kiểm tra tài liệu tại Mozilla .

Nếu môi trường của bạn hỗ trợ ES2017 thì tôi sẽ khuyên dùng Object.entries :

Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key} ${value}`);
});

Như thể hiện trong tài liệu Mozillas Object.entries () :

Phương thức Object.entries () trả về một mảng các cặp thuộc tính [khóa, giá trị] riêng của một đối tượng đã cho, theo cùng thứ tự được cung cấp bởi một vòng lặp for ... trong vòng lặp (sự khác biệt là một vòng lặp for tính chất trong chuỗi nguyên mẫu là tốt).

Về cơ bản với Object.entries, chúng ta có thể bỏ qua bước bổ sung sau được yêu cầu với vòng lặp cũ hơn cho ... trong vòng lặp:

// This step is not necessary with Object.entries
if (object.hasOwnProperty(property)) {
  // do stuff
}

jquery cho phép bạn làm điều này ngay bây giờ:

$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});

Câu trả lời của Dominik là hoàn hảo, tôi chỉ thích làm theo cách đó, vì nó dễ đọc hơn:

for (var property in object) {
    if (!object.hasOwnProperty(property)) continue;

    // Do stuff...
}

Các câu trả lời ở trên hơi khó chịu vì chúng không giải thích những gì bạn làm trong vòng lặp for sau khi bạn đảm bảo đó là một đối tượng: BẠN KHÔNG TIẾP CẬN NÓ TRỰC TIẾP! Bạn thực sự chỉ được cung cấp KHÓA mà bạn cần áp dụng cho OBJ:

var obj = {
  a: "foo",
  b: "bar",
  c: "foobar"
};

// We need to iterate the string keys (not the objects)
for(var someKey in obj)
{
  // We check if this key exists in the obj
  if (obj.hasOwnProperty(someKey))
  {
    // someKey is only the KEY (string)! Use it to get the obj:
    var myActualPropFromObj = obj[someKey]; // Since dynamic, use [] since the key isn't literally named "someKey"

    // NOW you can treat it like an obj
    var shouldBeBar = myActualPropFromObj.b;
  }
}

Đây là tất cả ECMA5 an toàn. Thậm chí hoạt động trong các phiên bản JS khập khiễng như Rhino;)

Để thêm cách sử dụng của ES2015 Reflect.ownKeys(obj)và cũng lặp lại các thuộc tính thông qua một trình vòng lặp.

Ví dụ:

let obj = { a: 'Carrot', b: 'Potato', Car: { doors: 4 } };

có thể được lặp đi lặp lại bởi

// logs each key
Reflect.ownKeys(obj).forEach(key => console.log(key));

Nếu bạn muốn lặp lại trực tiếp các giá trị của các khóa của một đối tượng, bạn có thể định nghĩa một iterator, giống như các trình lặp mặc định của JavaScipts cho các chuỗi, mảng, mảng được gõ, Map và Set.

JS sẽ cố gắng lặp lại thông qua thuộc tính iterator mặc định, phải được định nghĩa là Symbol.iterator.

Nếu bạn muốn có thể lặp lại trên tất cả các đối tượng, bạn có thể thêm nó làm nguyên mẫu của Object:

Object.prototype[Symbol.iterator] = function*() { 
    for(p of Reflect.ownKeys(this)){ yield this[p]; }
}

Điều này sẽ cho phép bạn lặp lại các giá trị của một đối tượng với ... vòng lặp, ví dụ:

for(val of obj) { console.log('Value is:' + val ) }

Thận trọng : Khi viết câu trả lời này (tháng 6 năm 2018) tất cả các trình duyệt khác, nhưng IE, hỗ trợ trình tạo và for...oflặp quaSymbol.iterator

if(Object.keys(obj).length) {
    Object.keys(obj).forEach(key => {
        console.log("\n" + key + ": " + obj[key]);
    });
}

// *** Explanation line by line ***

// Explaining the bellow line
// It checks if obj has at least one property. Here is how:
// Object.keys(obj) will return an array with all keys in obj
// If there is no keys in obj, it will return empty array = []
// Then it will get it's length, if it has at least one element,
// it's bigger than 0 which evaluates to true and the bellow 
// code will be executed.
// Else means it's length = 0 which evaluates to false
// NOTE: you can use Object.hasOwnProperty() instead of Object.keys(obj).length
if(Object.keys(obj).length) {

    // Explaining the bellow line
    // Just like in the previous line, this returns an array with
    // all keys in obj (because if code execution got here, it means 
    // obj has keys.) 
    // Then just invoke built-in javascript forEach() to loop
    // over each key in returned array and calls a call back function 
    // on each array element (key), using ES6 arrow function (=>)
    // Or you can just use a normal function ((key) { blah blah }).
    Object.keys(obj).forEach(key => {

        // The bellow line prints out all keys with their 
        // respective value in obj.
        // key comes from the returned array in Object.keys(obj)
        // obj[key] returns the value of key in obj
        console.log("\n" + key + ": " + obj[key]);
    });
}

Vòng lặp for ... in đại diện cho mỗi thuộc tính trong một đối tượng vì nó giống như vòng lặp for. Bạn đã xác định propt trong vòng lặp for ... bằng cách thực hiện:

    for(var propt in obj){
alert(propt + ': ' + obj[propt]);
}

A cho ... trong vòng lặp lặp qua các thuộc tính vô số của một đối tượng. Bất kỳ biến nào bạn xác định hoặc đặt vào vòng lặp for ... trong vòng lặp, sẽ thay đổi mỗi lần nó chuyển sang thuộc tính tiếp theo mà nó lặp lại. Biến trong vòng lặp for ... lặp lại thông qua các khóa, nhưng giá trị của nó là giá trị của khóa. Ví dụ:

    for(var propt in obj) {
      console.log(propt);//logs name
      console.log(obj[propt]);//logs "Simon"
    }

Bạn có thể thấy biến khác với giá trị của biến như thế nào. Ngược lại, một ... cho vòng lặp làm ngược lại.

Tôi hi vọng cái này giúp được.

let obj = {"a": 3, "b": 2, "6": "a"}

Object.keys(obj).map((item) => {console.log("item", obj[item])})

// a
// 3
// 2

Object.keys(obj).forEach(key =>
  console.log(`key=${key} value=${obj[key]}`)
);

Bạn có thể sử dụng Lodash. Tài liệu

var obj = {a: 1, b: 2, c: 3};
_.keys(obj).forEach(function (key) {
    ...
});

forVòng lặp của bạn đang lặp lại trên tất cả các thuộc tính của đối tượng obj. proptđược định nghĩa trong dòng đầu tiên của vòng lặp for của bạn. Nó là một chuỗi là tên của một thuộc tính của objđối tượng. Trong lần lặp đầu tiên của vòng lặp, proptsẽ là "tên".

Các đối tượng trong JavaScript là tập hợp các thuộc tính và do đó có thể được lặp trong một câu lệnh cho mỗi câu lệnh.

Bạn nên nghĩ về objmột bộ sưu tập giá trị quan trọng.

Ngày nay, bạn có thể chuyển đổi một đối tượng JS tiêu chuẩn thành một đối tượng có thể lặp lại chỉ bằng cách thêm một phương thức Symbol.iterator. Sau đó, bạn có thể sử dụng một for ofvòng lặp và nhận trực tiếp các giá trị của nó hoặc thậm chí có thể sử dụng toán tử trải trên đối tượng. Mát mẻ. Hãy xem cách chúng tôi có thể làm cho nó:

var o = {a:1,b:2,c:3},
    a = [];
o[Symbol.iterator] = function*(){
                       var ok = Object.keys(this);
                            i = 0;
                       while (i < ok.length) yield this[ok[i++]];
                     };
for (var value of o) console.log(value);
// or you can even do like
a = [...o];
console.log(a);

Nếu chạy Node, tôi khuyên bạn nên:

Object.keys(obj).forEach((key, index) => {
    console.log(key);
});

Mặc dù câu trả lời được xếp hạng cao nhất là chính xác, đây là trường hợp sử dụng thay thế, tức là nếu bạn đang lặp lại một đối tượng và muốn tạo một mảng cuối cùng. Sử dụng .mapthay vìforEach

const newObj = Object.keys(obj).map(el => {
    //ell will hold keys 
   // Getting the value of the keys should be as simple as obj[el]
})

Ngoài ra, thêm cách đệ quy:

function iterate(obj) {
    // watch for objects we've already iterated so we won't end in endless cycle
    // for cases like var foo = {}; foo.bar = foo; iterate(foo);
    var walked = [];
    var stack = [{obj: obj, stack: ''}];
    while(stack.length > 0)
    {
        var item = stack.pop();
        var obj = item.obj;
        for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                if (typeof obj[property] == "object") {
                  // check if we haven't iterated through the reference yet
                  var alreadyFound = false;
                  for(var i = 0; i < walked.length; i++)
                  {
                    if (walked[i] === obj[property])
                    {
                      alreadyFound = true;
                      break;
                    }
                  }
                  // new object reference
                  if (!alreadyFound)
                  {
                    walked.push(obj[property]);
                    stack.push({obj: obj[property], stack: item.stack + '.' + property});
                  }
                }
                else
                {
                    console.log(item.stack + '.' + property + "=" + obj[property]);
                }
            }
        }
    }
}

Sử dụng:

iterate({ foo: "foo", bar: { foo: "foo"} }); 

Vòng lặp for..in làm gì là nó tạo ra một biến mới (var someVariable) và sau đó lưu trữ từng thuộc tính của đối tượng đã cho trong biến mới này (someVariable) từng cái một. Do đó, nếu bạn sử dụng khối {}, bạn có thể lặp lại. Hãy xem xét ví dụ sau.

var obj = {
     name:'raman',
     hobby:'coding',
     planet:'earth'
     };

for(var someVariable in obj) {
  //do nothing..
}

console.log(someVariable); // outputs planet

Ở đây tôi đang lặp lại từng nút và tạo tên nút có ý nghĩa. Nếu bạn để ý, instanceOf Array và instanceOf Object thực hiện khá nhiều điều tương tự (trong ứng dụng của tôi, tôi đang đưa ra logic khác nhau)

function iterate(obj,parent_node) {
    parent_node = parent_node || '';
    for (var property in obj) {
        if (obj.hasOwnProperty(property)) {
            var node = parent_node + "/" + property;
            if(obj[property] instanceof Array) {
                //console.log('array: ' + node + ":" + obj[property]);
                iterate(obj[property],node)
            } else if(obj[property] instanceof Object){
                //console.log('Object: ' + node + ":" + obj[property]);
                iterate(obj[property],node)
            }
            else {
                console.log(node + ":" + obj[property]);
            }
        }
    }
}

lưu ý - Tôi lấy cảm hứng từ câu trả lời của Ondrej Svejdar. Nhưng giải pháp này có hiệu suất tốt hơn và ít mơ hồ hơn

Về cơ bản, bạn muốn lặp qua từng thuộc tính trong đối tượng.

Câu đố

var Dictionary = {
  If: {
    you: {
      can: '',
      make: ''
    },
    sense: ''
  },
  of: {
    the: {
      sentence: {
        it: '',
        worked: ''
      }
    }
  }
};

function Iterate(obj) {
  for (prop in obj) {
    if (obj.hasOwnProperty(prop) && isNaN(prop)) {
      console.log(prop + ': ' + obj[prop]);
      Iterate(obj[prop]);
    }
  }
}
Iterate(Dictionary);

Tôi muốn thêm vào các câu trả lời ở trên, vì bạn có thể có ý định khác với Javascript. Một đối tượng JSON và một đối tượng Javascript là những thứ khác nhau và bạn có thể muốn lặp lại thông qua các thuộc tính của đối tượng JSON bằng các giải pháp được đề xuất ở trên, sau đó sẽ ngạc nhiên.

Giả sử rằng bạn có một đối tượng JSON như:

var example = {
    "prop1": "value1",
    "prop2": [ "value2_0", value2_1"],
    "prop3": {
         "prop3_1": "value3_1"
    }
}

Cách sai để lặp qua 'thuộc tính' của nó:

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        recursivelyIterateProperties(jsonObject[prop]);
    }
}

Bạn có thể ngạc nhiên khi thấy giao diện điều khiển khai thác gỗ 0, 1vv khi iterating thông qua các thuộc tính của prop1và prop2và của prop3_1. Các đối tượng đó là các chuỗi và các chỉ mục của một chuỗi là các thuộc tính của đối tượng đó trong Javascript.

Một cách tốt hơn để lặp lại đệ quy thông qua các thuộc tính đối tượng JSON là trước tiên hãy kiểm tra xem đối tượng đó có phải là một chuỗi hay không:

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        if (!(typeof(jsonObject[prop]) === 'string')
            && !(jsonObject[prop] instanceof Array)) {
                recursivelyIterateProperties(jsonObject[prop]);

            }

     }
}

Để tiếp tục tinh chỉnh câu trả lời được chấp nhận, điều đáng chú ý là nếu bạn khởi tạo đối tượng bằng một var object = Object.create(null)thì object.hasOwnProperty(property)sẽ kích hoạt TypeError. Vì vậy, để an toàn, bạn cần gọi nó từ nguyên mẫu như thế này:

for (var property in object) {
    if (Object.prototype.hasOwnProperty.call(object, property)) {
        // do stuff
    }
}

Kiểm tra liên kết này, nó sẽ giúp https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_state_forin

var person = {fname:"John", lname:"Doe", age:25}; 

  var text = "";
  var x;
  for (x in person) {
    text += person[x] + " "; // where x will be fname,lname,age
   }
Console.log(text);