Làm thế nào để lặp lại một đối tượng JavaScript?

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

{
    abc: '...',
    bca: '...',
    zzz: '...',
    xxx: '...',
    ccc: '...',
    // ...
}

Tôi muốn sử dụng một forvòng lặp để có được các thuộc tính của nó. Và tôi muốn lặp lại nó trong các phần (không phải tất cả các thuộc tính đối tượng cùng một lúc).

Với một mảng đơn giản tôi có thể làm điều đó với một forvòng lặp tiêu chuẩn :

for (i = 0; i < 100; i++) { ... } // first part
for (i = 100; i < 300; i++) { ... } // second
for (i = 300; i < arr.length; i++) { ... } // last

Nhưng làm thế nào để làm điều đó với các đối tượng?

Đối với hầu hết các đối tượng, sử dụng for .. in:

for (let key in yourobject) {
  console.log(key, yourobject[key]);
}

Với ES6, nếu bạn cần cả khóa và giá trị cùng một lúc, hãy làm

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

Để tránh đăng nhập các thuộc tính được kế thừa, hãy kiểm tra với hasOwnProperty :

for (let key in yourobject) {
   if (yourobject.hasOwnProperty(key)) {
      console.log(key, yourobject[key]);
   }
}

Bạn không cần kiểm tra hasOwnPropertykhi lặp lại trên các phím nếu bạn đang sử dụng một đối tượng đơn giản (ví dụ: đối tượng bạn tự tạo {}).

Tài liệu MDN này giải thích chung hơn về cách xử lý các đối tượng và thuộc tính của chúng.

Nếu bạn muốn làm điều đó "trong khối", tốt nhất là trích xuất các khóa trong một mảng. Vì đơn hàng không được đảm bảo, đây là cách thích hợp. Trong các trình duyệt hiện đại, bạn có thể sử dụng

let keys = Object.keys(yourobject);

Để tương thích hơn, bạn nên làm điều này:

 let keys = [];
 for (let key in yourobject) {      
     if (yourobject.hasOwnProperty(key)) keys.push(key);
 }

Sau đó, bạn có thể lặp lại các thuộc tính của mình theo chỉ mục yourobject[keys[i]]::

for (let i=300; i < keys.length && i < 600; i++) { 
   console.log(keys[i], yourobject[keys[i]]);
}

Đây là một giải pháp lặp khác cho các trình duyệt hiện đại:

Object.keys(obj)
  .filter((k, i) => i >= 100 && i < 300)
  .forEach(k => console.log(obj[k]));

Hoặc không có chức năng lọc:

Object.keys(obj).forEach((k, i) => {
    if (i >= 100 && i < 300) {
        console.log(obj[k]);
    }
});

Tuy nhiên, bạn phải xem xét rằng các thuộc tính trong đối tượng JavaScript không được sắp xếp, tức là không có thứ tự.

Sử dụng Object.entriesbạn làm một cái gì đó như thế này.

 // array like object with random key ordering
 const anObj = { 100: 'a', 2: 'b', 7: 'c' };
 console.log(Object.entries(anObj)); // [ ['2', 'b'],['7', 'c'],['100', 'a'] ]

Phương thức Object.entries () trả về một mảng thuộc tính liệt kê riêng của đối tượng đã cho [khóa, giá trị]

Vì vậy, bạn có thể lặp lại qua Object và có keyvà valuecho từng đối tượng và nhận được một cái gì đó như thế này.

const anObj = { 100: 'a', 2: 'b', 7: 'c' };
Object.entries(anObj).map(obj => {
   const key   = obj[0];
   const value = obj[1];

   // do whatever you want with those values.
});

hoặc như thế này

// Or, using array extras
Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});

Để tham khảo, hãy xem tài liệu MDN cho mục nhập đối tượng

Với các tính năng ES6 / ES2015 mới, bạn không phải sử dụng một đối tượng nữa để lặp lại hàm băm. Bạn có thể sử dụng Bản đồ . Bản đồ Javascript giữ các khóa theo thứ tự chèn, nghĩa là bạn có thể lặp lại chúng mà không cần phải kiểm tra hasOwnProperty, thứ luôn thực sự là một hack.

Lặp lại trên bản đồ:

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}
// Will show 2 logs; first with "0 = zero" and second with "1 = one"

for (var key of myMap.keys()) {
  console.log(key);
}
// Will show 2 logs; first with "0" and second with "1"

for (var value of myMap.values()) {
  console.log(value);
}
// Will show 2 logs; first with "zero" and second with "one"

for (var [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
// Will show 2 logs; first with "0 = zero" and second with "1 = one"

hoặc sử dụng forEach:

myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
}, myMap)
// Will show 2 logs; first with "0 = zero" and second with "1 = one"

Nếu bạn muốn khóa và giá trị khi lặp, bạn có thể sử dụng vòng lặp for cho ... với Object.entries .

const myObj = {a: 1, b: 2}

for (let [key, value] of Object.entries(myObj)) {
    console.log(`key=${key} value=${value}`)
}

// output: 
// key=a value=1
// key=b value=2

Cách đáng tin cậy duy nhất để làm điều này là lưu dữ liệu đối tượng của bạn vào 2 mảng, một trong các khóa và một cho dữ liệu:

var keys = [];
var data = [];
for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        keys.push(key);
        data.push(obj[key]); // Not necessary, but cleaner, in my opinion. See the example below.
    }
}

Sau đó, bạn có thể lặp lại các mảng như bạn thường làm:

for(var i = 0; i < 100; i++){
    console.log(keys[i], data[i]);
    //or
    console.log(keys[i], obj[keys[i]]); // harder to read, I think.
}
for(var i = 100; i < 300; i++){
    console.log(keys[i], data[i]);
}

Tôi không sử dụng Object.keys(obj), vì đó là IE 9+.

-> nếu chúng ta lặp lại một đối tượng JavaScript bằng cách sử dụng và tìm khóa của mảng các đối tượng

Object.keys(Array).forEach(key => {

 console.log('key',key)

})

Nếu bạn muốn lặp lại toàn bộ đối tượng cùng một lúc, bạn có thể sử dụng for invòng lặp:

for (var i in obj) {
  ...
}

Nhưng nếu bạn muốn chia đối tượng thành các phần trong thực tế thì bạn không thể. Không có gì đảm bảo rằng các thuộc tính trong đối tượng theo bất kỳ thứ tự cụ thể nào. Do đó, tôi có thể nghĩ ra hai giải pháp.

Đầu tiên là "loại bỏ" các thuộc tính đã đọc:

var i = 0;
for (var key in obj) {
    console.log(obj[key]);
    delete obj[key];
    if ( ++i > 300) break;
}

Một giải pháp khác tôi có thể nghĩ đến là sử dụng Array of Mảng thay vì đối tượng:

var obj = [['key1', 'value1'], ['key2', 'value2']];

Sau đó, forvòng lặp tiêu chuẩn sẽ hoạt động.

Cuối cùng tôi đã đưa ra một chức năng tiện ích tiện dụng với giao diện hợp nhất để lặp lại các Đối tượng, Chuỗi, Mảng, TypedArrays, Bản đồ, Bộ, (bất kỳ Iterables nào).

const iterate = require('@a-z/iterate-it');
const obj = { a: 1, b: 2, c: 3 };

iterate(obj, (value, key) => console.log(key, value)); 
// a 1
// b 2
// c 3

https://github.com/alrik/iterate-javascript

Bạn có thể thử sử dụng lodash- Một thư viện tiện ích JavaScript hiện đại cung cấp mô đun, hiệu suất và tính năng bổ sung js cho đối tượng nhanh lặp lại: -

var  users  =   {
    'fred':     { 
        'user':   'fred',
            'age':  40 
    },
    'pebbles':  { 
        'user':   'pebbles',
         'age':  1 
    }
}; 
_.mapValues(users,  function(o)  { 
    return  o.age; 
});
// => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)
// The `_.property` iteratee shorthand.
console.log(_.mapValues(users,  'age')); // returns age property & value 
console.log(_.mapValues(users,  'user')); // returns user property & value 
console.log(_.mapValues(users)); // returns all objects 
// => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash-compat/3.10.2/lodash.js"></script>

Đối với việc lặp lại đối tượng, chúng ta thường sử dụng một for..invòng lặp. Cấu trúc này sẽ lặp qua tất cả các thuộc tính có thể đếm được , bao gồm cả các thuộc tính được kế thừa thông qua thừa kế nguyên mẫu. Ví dụ:

let obj = {
  prop1: '1',
  prop2: '2'
}

for(let el in obj) {
  console.log(el);
  console.log(obj[el]);
}

Tuy nhiên, for..insẽ lặp qua tất cả các phần tử có thể đếm được và điều này sẽ không thể phân chia số lần lặp trong các phần. Để đạt được điều này, chúng ta có thể sử dụng hàm dựng sẵn Object.keys()để lấy tất cả các khóa của một đối tượng trong một mảng. Sau đó chúng ta có thể chia vòng lặp thành nhiều vòng lặp và truy cập các thuộc tính bằng cách sử dụng mảng phím. Ví dụ:

let obj = {
  prop1: '1',
  prop2: '2',
  prop3: '3',
  prop4: '4',
};

const keys = Object.keys(obj);
console.log(keys);


for (let i = 0; i < 2; i++) {
  console.log(obj[keys[i]]);
}


for (let i = 2; i < 4; i++) {
  console.log(obj[keys[i]]);
}

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

Thực sự là một PITA, đây không phải là một phần của Javascript tiêu chuẩn.

/**
 * Iterates the keys and values of an object.  Object.keys is used to extract the keys.
 * @param object The object to iterate
 * @param fn (value,key)=>{}
 */
function objectForEach(object, fn) {
    Object.keys(object).forEach(key => {
        fn(object[key],key, object)
    })
}

Lưu ý: Tôi đã chuyển các tham số gọi lại thành (giá trị, khóa) và thêm một đối tượng thứ ba để làm cho API phù hợp với các API khác.

Sử dụng nó như thế này

const o = {a:1, b:true};
objectForEach(o, (value, key, obj)=>{
    // do something
});

Đúng. Bạn có thể lặp qua một đối tượng bằng vòng lặp for. Đây là một ví dụ

var myObj = {
    abc: 'ABC',
    bca: 'BCA',
    zzz: 'ZZZ',
    xxx: 'XXX',
    ccc: 'CCC',
}

var k = Object.keys (myObj);
for (var i = 0; i < k.length; i++) {
    console.log (k[i] + ": " + myObj[k[i]]);
}

LƯU Ý: ví dụ được đề cập ở trên sẽ chỉ hoạt động trong IE9 +. Xem hỗ trợ trình duyệt Objec.keys tại đây .

const o = {
  name: "Max",
  location: "London"
};

for (const [key, value] of Object.entries(o)) {
  console.log(`${key}: ${value}`);
}

Thử trực tuyến