Làm cách nào để lặp lại đối tượng đối tượng trong JavaScript?

Phương thức Object.keys() đã được thêm vào trong ES6, trong khi đó, phương thức

for (const key in birds) {
  if (birds.hasOwnProperty(key)) {
    console.log(`${key} -> ${birds[key]}`)
  }
}

Lặp lại đối tượng bằng cách sử dụng vòng lặp for...in

Cách đơn giản và phổ biến nhất để lặp lại các khóa và giá trị của một đối tượng là sử dụng vòng lặp for...in

const birds = {
  owl: '🦉',
  eagle: '🦅',
  duck: '🦆',
  chicken: '🐔'
}

for (const key in birds) {
  console.log(`${key} -> ${birds[key]}`)
}

// owl -> 🦉
// eagle -> 🦅
// duck -> 🦆
// chicken -> 🐔

Vòng lặp for...in hoạt động trong tất cả các trình duyệt hiện đại và cũ, bao gồm cả Internet Explorer 6+

Vấn đề duy nhất với vòng lặp for...in là nó lặp qua các thuộc tính trong chuỗi nguyên mẫu

Vì đối tượng JavaScript kế thừa các thuộc tính từ đối tượng đó, nên vòng lặp for...in cũng sẽ lặp lại các thuộc tính đó

Tuy nhiên, bạn có thể sử dụng phương pháp

for (const key in birds) {
  if (birds.hasOwnProperty(key)) {
    console.log(`${key} -> ${birds[key]}`)
  }
}

for (const key in birds) {
  if (birds.hasOwnProperty(key)) {
    console.log(`${key} -> ${birds[key]}`)
  }
}

Lặp lại đối tượng bằng phương thức Object.keys()

Phương thức Object.keys() lấy một đối tượng làm đầu vào và trả về một mảng các tên thuộc tính có thể đếm được của chính đối tượng đó

const birds = {
  owl: '🦉',
  eagle: '🦅',
  duck: '🦆',
  chicken: '🐔'
}

const keys = Object.keys(birds)

console.log(keys)
// [ 'owl', 'eagle', 'duck', 'chicken' ]

Bây giờ chúng ta có thể sử dụng vòng lặp

const birds = {
  owl: '🦉',
  eagle: '🦅',
  duck: '🦆',
  chicken: '🐔'
}

const keys = Object.keys(birds)

console.log(keys)
// [ 'owl', 'eagle', 'duck', 'chicken' ]

keys.forEach(key => {
  console.log(`${key} -> ${birds[key]}`)
})

// owl -> 🦉
// eagle -> 🦅
// duck -> 🦆
// chicken -> 🐔

Lặp lại đối tượng bằng phương thức Object.values()

Phương thức này, không giống như Object.keys(), trả về một mảng các giá trị thuộc tính có thể đếm được của chính đối tượng đã cho

const birds = {
  owl: '🦉',
  eagle: '🦅',
  duck: '🦆',
  chicken: '🐔'
}

Object.values(birds).forEach(item => console.log(item))

// 🦉
// 🦅
// 🦆
// 🐔

Lặp lại đối tượng bằng phương pháp for (const key in birds) { if (birds.hasOwnProperty(key)) { console.log(`${key} -> ${birds[key]}`) } } 0

Phương thức trả về một mảng các mảng, theo đó mỗi mảng lồng nhau có hai phần tử. Phần tử đầu tiên là thuộc tính và phần tử thứ hai là giá trị

const birds = {
  owl: '🦉',
  eagle: '🦅',
  duck: '🦆',
  chicken: '🐔'
}

const entries = Object.entries(birds)
console.log(entries)

// [
//     [ 'owl', '🦉' ],
//     [ 'eagle', '🦅' ],
//     [ 'duck', '🦆' ],
//     [ 'chicken', '🐔' ]
// ]

Để lặp lại mảng lồng nhau được trả về bởi

for (const key in birds) {
  if (birds.hasOwnProperty(key)) {
    console.log(`${key} -> ${birds[key]}`)
  }
}

const birds = {
  owl: '🦉',
  eagle: '🦅',
  duck: '🦆',
  chicken: '🐔'
}

const keys = Object.keys(birds)

console.log(keys)
// [ 'owl', 'eagle', 'duck', 'chicken' ]

const birds = {
  owl: '🦉',
  eagle: '🦅',
  duck: '🦆',
  chicken: '🐔'
}

const keys = Object.keys(birds)

console.log(keys)
// [ 'owl', 'eagle', 'duck', 'chicken' ]

Làm cách nào để lặp qua đối tượng của các đối tượng trong JavaScript?

Bạn có thể lặp qua một đối tượng JavaScript không?

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

Làm cách nào để lặp lại các thuộc tính của đối tượng trong JavaScript?