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

Hàm

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

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

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

4 của JavaScript cho phép bạn lặp qua một mảng nhưng không lặp qua một đối tượng. Nhưng bạn có thể lặp lại một đối tượng JavaScript bằng cách sử dụng

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

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

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

5 nếu trước tiên bạn chuyển đổi đối tượng thành một mảng, bằng cách sử dụng

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

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

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

6,

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

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

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

7 hoặc

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

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

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

8

Sử dụng const birds = { owl: '🦉', eagle: '🦅', duck: '🦆', chicken: '🐔' } for (const key in birds) { console.log(`${key} -> ${birds[key]}`) } // owl -> 🦉 // eagle -> 🦅 // duck -> 🦆 // chicken -> 🐔 6

Hàm

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

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

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

6 trả về một mảng gồm vô số thuộc tính của chính đối tượng. Sau đó, bạn có thể lặp lại từng khóa trong đối tượng bằng cách sử dụng

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

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

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

5

Sử dụng const birds = { owl: '🦉', eagle: '🦅', duck: '🦆', chicken: '🐔' } for (const key in birds) { console.log(`${key} -> ${birds[key]}`) } // owl -> 🦉 // eagle -> 🦅 // duck -> 🦆 // chicken -> 🐔 7

Hàm

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

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

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

7 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. Nói cách khác, nó trả về một mảng trên các giá trị của đối tượng mà bạn có thể lặp lại bằng cách sử dụng

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

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

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

5

Sử dụng const birds = { owl: '🦉', eagle: '🦅', duck: '🦆', chicken: '🐔' } for (const key in birds) { console.log(`${key} -> ${birds[key]}`) } // owl -> 🦉 // eagle -> 🦅 // duck -> 🦆 // chicken -> 🐔 8

Hàm

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

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

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

8 trả về một mảng các mục nhập. Mục nhập là một mảng có độ dài 2, trong đó

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

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

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

53 là khóa và

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

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

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

54 là giá trị. Bạn có thể lặp lại đồng thời cả khóa và giá trị

Phương thức

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

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

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

6 đã đượ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]}`)
  }
}

0 và

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

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

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

7 đã được thêm vào trong ES8. Các phương thức này chuyển đổi đối tượng thành một mảng và sau đó sử dụng các phương thức lặp mảng để lặp lại mảng đó

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

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 (const key in birds) {
  if (birds.hasOwnProperty(key)) {
    console.log(`${key} -> ${birds[key]}`)
  }
}

1

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 (const key in birds) {
  if (birds.hasOwnProperty(key)) {
    console.log(`${key} -> ${birds[key]}`)
  }
}

1 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 (const key in birds) {
  if (birds.hasOwnProperty(key)) {
    console.log(`${key} -> ${birds[key]}`)
  }
}

1 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ừ nguyên mẫu của nó, nên vòng lặp

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

1 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 thức

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

9 để loại trừ các thuộc tính kế thừa

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 const birds = { owl: '🦉', eagle: '🦅', duck: '🦆', chicken: '🐔' } for (const key in birds) { console.log(`${key} -> ${birds[key]}`) } // owl -> 🦉 // eagle -> 🦅 // duck -> 🦆 // chicken -> 🐔 6

Phương thức

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

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

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

6 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' ]

2 để lặp lại mảng và lấy giá trị của từng thuộc tính

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 const birds = { owl: '🦉', eagle: '🦅', duck: '🦆', chicken: '🐔' } for (const key in birds) { console.log(`${key} -> ${birds[key]}`) } // owl -> 🦉 // eagle -> 🦅 // duck -> 🦆 // chicken -> 🐔 7

Phương thức

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

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

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

7, không giống như

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

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

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

6, 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 thức for (const key in birds) { if (birds.hasOwnProperty(key)) { console.log(`${key} -> ${birds[key]}`) } } 0

Phương thức

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

0 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: '🐔'
}

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

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

0

Để 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]}`)
  }
}

0, hãy 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' ]

9 hoặc phương thức

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

const keys = Object.keys(birds)

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

2 như hình bên dưới

Chúng ta có thể lặp lại đối tượng JavaScript không?

Bạn có thể sử dụng vòng lặp for cho các đối tượng không?

Tôi có thể sử dụng forEach trên một đối tượng không?

Có bao nhiêu cách bạn có thể lặp lại các đối tượng trong JavaScript?