Cách lấy khóa trong forEach trong JavaScript

Question

Trong JavaScript, khi bạn nghe thuật ngữ "vòng lặp", có lẽ bạn sẽ nghĩ đến việc sử dụng các phương thức vòng lặp khác nhau như vòng lặp

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

6, vòng lặp

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

7,

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

8 và các vòng lặp khác

Nội dung chính Show

Cách lặp qua một đối tượng trong JavaScript bằng vòng lặp const population = { male: 4, female: 93, others: 10 }; // Iterate through the object for (const key in population) { if (population.hasOwnProperty(key)) { console.log(`${key}: ${population[key]}`); } } 9
Cách lặp qua một đối tượng trong JavaScript bằng các phương thức tĩnh đối tượng
Cách lặp qua một đối tượng trong JavaScript bằng phương thức const population = { male: 4, female: 93, others: 10 }; let genders = Object.keys(population); console.log(genders); // ["male","female","others"] 8
Cách lặp qua một đối tượng trong JavaScript bằng phương thức const population = { male: 4, female: 93, others: 10 }; let genders = Object.keys(population); console.log(genders); // ["male","female","others"] 9
Cách lặp qua một đối tượng trong JavaScript với Object. phương thức entry()
kết thúc
Làm cách nào để lấy khóa bằng forEach trong JavaScript?
Làm cách nào để lấy giá trị từ khóa trong JavaScript?
Làm cách nào để chuyển khóa vào vòng lặp trong JavaScript?
Làm cách nào để lấy giá trị từ cặp giá trị khóa trong JavaScript?

Nhưng thật không may, trong trường hợp của các đối tượng, các phương thức này không hoạt động vì các đối tượng không thể lặp lại

Điều này không có nghĩa là chúng ta không thể lặp qua một đối tượng – nhưng điều này có nghĩa là chúng ta không thể lặp trực tiếp qua một đối tượng giống như cách chúng ta làm với một mảng

let arr = [24, 33, 77];
arr.forEach((val) => console.log(val)); // ✅✅✅

for (val of arr) {
  console.log(val); // ✅✅✅
}

let obj = { age: 12, name: "John Doe" };
obj.forEach((val) => console.log(val)); // ❌❌❌

for (val of obj) {
  console.log(val); // ❌❌❌
}

Trong bài viết này, Bạn sẽ tìm hiểu cách bạn có thể lặp qua một đối tượng trong JavaScript. Có hai phương pháp bạn có thể sử dụng - và một trong số đó có trước ngày giới thiệu ES6

Cách lặp qua một đối tượng trong JavaScript bằng vòng lặp const population = { male: 4, female: 93, others: 10 }; // Iterate through the object for (const key in population) { if (population.hasOwnProperty(key)) { console.log(`${key}: ${population[key]}`); } } 9

Trước ES6, chúng tôi dựa vào phương thức

const population = {
  male: 4,
  female: 93,
  others: 10
};

let genders = Object.keys(population);

console.log(genders); // ["male","female","others"]

0 bất cứ khi nào chúng tôi muốn lặp qua một đối tượng

Vòng lặp

const population = {
  male: 4,
  female: 93,
  others: 10
};

let genders = Object.keys(population);

console.log(genders); // ["male","female","others"]

0 lặp qua các thuộc tính trong chuỗi nguyên mẫu. Điều này có nghĩa là chúng ta cần kiểm tra xem thuộc tính có thuộc về đối tượng hay không bằng cách sử dụng

const population = {
  male: 4,
  female: 93,
  others: 10
};

let genders = Object.keys(population);

console.log(genders); // ["male","female","others"]

2 bất cứ khi nào chúng ta lặp qua một đối tượng bằng vòng lặp

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

9

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

Để tránh căng thẳng và khó lặp lại và sử dụng phương thức

const population = {
  male: 4,
  female: 93,
  others: 10
};

let genders = Object.keys(population);

console.log(genders); // ["male","female","others"]

2, ES6 và ES8 đã giới thiệu các phương thức tĩnh đối tượng. Chúng chuyển đổi các thuộc tính đối tượng thành mảng, cho phép chúng ta sử dụng trực tiếp các phương thức mảng

Cách lặp qua một đối tượng trong JavaScript bằng các phương thức tĩnh đối tượng

Một đối tượng được tạo thành từ các thuộc tính có các cặp khóa-giá trị, tức là mỗi thuộc tính luôn có một giá trị tương ứng

Các phương thức tĩnh đối tượng cho phép chúng tôi trích xuất

const population = {
  male: 4,
  female: 93,
  others: 10
};

let genders = Object.keys(population);

console.log(genders); // ["male","female","others"]

5,

const population = {
  male: 4,
  female: 93,
  others: 10
};

let genders = Object.keys(population);

console.log(genders); // ["male","female","others"]

6 hoặc cả khóa và giá trị dưới dạng

const population = {
  male: 4,
  female: 93,
  others: 10
};

let genders = Object.keys(population);

console.log(genders); // ["male","female","others"]

7 trong một mảng, cho phép chúng tôi có nhiều sự linh hoạt đối với chúng như chúng tôi làm với các mảng thực tế

Chúng tôi có ba phương thức tĩnh đối tượng, đó là

const population = {
  male: 4,
  female: 93,
  others: 10
};

let genders = Object.keys(population);

console.log(genders); // ["male","female","others"]

8

const population = {
  male: 4,
  female: 93,
  others: 10
};

let genders = Object.keys(population);

console.log(genders); // ["male","female","others"]

9

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

60

Cách lặp qua một đối tượng trong JavaScript bằng phương thức const population = { male: 4, female: 93, others: 10 }; let genders = Object.keys(population); console.log(genders); // ["male","female","others"] 8

Phương thức

const population = {
  male: 4,
  female: 93,
  others: 10
};

let genders = Object.keys(population);

console.log(genders); // ["male","female","others"]

8 được giới thiệu trong ES6. Nó lấy đối tượng mà chúng ta muốn lặp lại làm đối số và trả về một mảng chứa tất cả các tên thuộc tính (còn được gọi là khóa)

const population = {
  male: 4,
  female: 93,
  others: 10
};

let genders = Object.keys(population);

console.log(genders); // ["male","female","others"]

Điều này bây giờ mang lại cho chúng ta lợi thế khi áp dụng bất kỳ phương thức lặp mảng nào để lặp qua mảng và truy xuất giá trị của từng thuộc tính

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

6

Điều này sẽ trở lại

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

1

Chúng tôi cũng có thể sử dụng khóa để lấy giá trị bằng cách sử dụng ký hiệu ngoặc, chẳng hạn như

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

63 như bên dưới

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

3

Điều này sẽ trở lại

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

4

Trước khi tiếp tục, hãy sử dụng phương pháp này để tổng hợp tất cả dân số bằng cách lặp qua để biết tổng dân số

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

5

Cách lặp qua một đối tượng trong JavaScript bằng phương thức const population = { male: 4, female: 93, others: 10 }; let genders = Object.keys(population); console.log(genders); // ["male","female","others"] 9

Phương thức

const population = {
  male: 4,
  female: 93,
  others: 10
};

let genders = Object.keys(population);

console.log(genders); // ["male","female","others"]

9 rất giống với phương thức

const population = {
  male: 4,
  female: 93,
  others: 10
};

let genders = Object.keys(population);

console.log(genders); // ["male","female","others"]

8 và được giới thiệu trong ES8. Phương thức này lấy Đối tượng mà chúng ta muốn lặp lại làm đối số và trả về một mảng chứa tất cả các giá trị khóa

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

9

Điều này bây giờ mang lại cho chúng ta lợi thế khi áp dụng bất kỳ phương thức lặp mảng nào để lặp qua mảng và truy xuất

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

67 của mỗi thuộc tính

let arr = [24, 33, 77];
arr.forEach((val) => console.log(val)); // ✅✅✅

for (val of arr) {
  console.log(val); // ✅✅✅
}

let obj = { age: 12, name: "John Doe" };
obj.forEach((val) => console.log(val)); // ❌❌❌

for (val of obj) {
  console.log(val); // ❌❌❌
}

1

Điều này sẽ trở lại

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

0

Chúng ta có thể thực hiện phép tính tổng một cách hiệu quả vì chúng ta có thể lặp trực tiếp

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

1

Cách lặp qua một đối tượng trong JavaScript với Object. phương thức entry()

Phương pháp

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

60 cũng được giới thiệu với ES8. Theo nghĩa cơ bản, những gì nó làm là xuất ra một mảng các mảng, theo đó mỗi mảng bên trong có hai phần tử là thuộc tính và giá trị

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

2

kết quả này

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

3

Điều này trả về một mảng các mảng, với mỗi mảng bên trong có

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

69. Bạn có thể sử dụng bất kỳ phương thức mảng nào để lặp qua

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

4

Chúng tôi có thể quyết định hủy cấu trúc mảng, vì vậy chúng tôi nhận được

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

10 và giá trị

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

5

Bạn có thể tìm hiểu thêm về cách lặp qua mảng trong bài viết này

kết thúc

Trong hướng dẫn này, bạn đã biết rằng cách tốt nhất để lặp qua một đối tượng là sử dụng bất kỳ phương thức tĩnh nào của đối tượng dựa trên nhu cầu của bạn để chuyển đổi thành một mảng trước khi lặp

Chúc các bạn code vui vẻ

QUẢNG CÁO

Cách lấy khóa trong forEach trong JavaScript

Joel Olawanle

Nhà phát triển Frontend & Người viết kỹ thuật

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Làm cách nào để lấy khóa bằng forEach trong JavaScript?

Đối tượng. keys(obj). forEach(function(k, v){ console. log(k + ' - ' + v);

Làm cách nào để lấy giá trị từ khóa trong JavaScript?

Làm cách nào để lấy Khóa, Giá trị và Mục nhập trong Đối tượng JavaScript? .

Mục tiêu. keys(obj) – trả về tất cả các khóa của đối tượng dưới dạng mảng

Mục tiêu. giá trị (obj) – trả về tất cả các giá trị của đối tượng dưới dạng mảng

Mục tiêu. entry(obj) – trả về một mảng [key, value]

Làm cách nào để chuyển khóa vào vòng lặp trong JavaScript?

Các phương thức lặp qua các đối tượng bằng javascript .

vì. trong vòng lặp. Cách đơn giản nhất để lặp qua các thuộc tính của đối tượng là sử dụng lệnh for. trong tuyên bố. .

keys() Phương thức. Trước ES6, cách duy nhất để lặp qua một đối tượng là sử dụng lệnh for. trong vòng lặp. .

phương thức value(). đối tượng. .

các mục () Phương thức

Làm cách nào để lấy giá trị từ cặp giá trị khóa trong JavaScript?

Phương pháp 1. Sử dụng một đối tượng để lưu trữ các cặp khóa => giá trị. .

Phương pháp 2. Sử dụng phương thức map(). .

phương thức keys(). .

phương thức value(). .

phương thức map()

programming javascript

Cách lấy khóa trong forEach trong JavaScript

Cách lặp qua một đối tượng trong JavaScript bằng vòng lặp const population = { male: 4, female: 93, others: 10 }; // Iterate through the object for (const key in population) { if (population.hasOwnProperty(key)) { console.log(`${key}: ${population[key]}`); } } 9

Cách lặp qua một đối tượng trong JavaScript bằng các phương thức tĩnh đối tượng

Cách lặp qua một đối tượng trong JavaScript bằng phương thức const population = { male: 4, female: 93, others: 10 }; let genders = Object.keys(population); console.log(genders); // ["male","female","others"] 8

Cách lặp qua một đối tượng trong JavaScript bằng phương thức const population = { male: 4, female: 93, others: 10 }; let genders = Object.keys(population); console.log(genders); // ["male","female","others"] 9

Cách lặp qua một đối tượng trong JavaScript với Object. phương thức entry()

kết thúc

Làm cách nào để lấy khóa bằng forEach trong JavaScript?

Làm cách nào để lấy giá trị từ khóa trong JavaScript?

Làm cách nào để chuyển khóa vào vòng lặp trong JavaScript?

Làm cách nào để lấy giá trị từ cặp giá trị khóa trong JavaScript?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội