Một vấn đề phổ biến mà các lập trình viên gặp phải là lặp qua một tập dữ liệu có thể đếm được. Dữ liệu này có thể ở dạng mảng, danh sách, bản đồ hoặc các đối tượng khác. Trong bài viết này, chúng ta sẽ giải quyết vấn đề này và tìm hiểu 4 cách lặp qua các đối tượng bằng javascript để truy xuất nhiều cặp khóa-giá trị
Làm cách nào để lặp qua các đối tượng trong JavaScript?
Các phương thức khác nhau có thể được sử dụng để lặp qua các đối tượng trong JavaScript là
- sử dụng một cho. trong vòng lặp
- Mục tiêu. phương pháp phím
- Mục tiêu. phương pháp giá trị
- Mục tiêu. phương pháp nhập
Tiếp tục đọc để tìm hiểu thêm về các phương pháp khác nhau
Mục lục
- Giới thiệu về các giá trị không xác định và null trong Javascript
- Các phương thức lặp qua các đối tượng bằng javascript
- lời chia tay
- Các khái niệm liên quan khác
Giới thiệu về lặp qua các đối tượng bằng javascript
Nếu bạn có một mảng được coi là một đối tượng trong javascript, thì bạn không thể lặp qua mảng đó bằng cách sử dụng map[], forEach[] hoặc for. của vòng lặp
Bạn sẽ nhận được lỗi
const items = {
'first': new Date[],
'second': 2,
'third': 'test'
}
map[] sẽ cung cấp cho bạn TypeError. mặt hàng. bản đồ không phải là một chức năng
items.map[item => {}]
forEach[] sẽ cung cấp cho bạn TypeError. mặt hàng. forEach không phải là một chức năng
items.forEach[item => {}]
vì. của sẽ cung cấp cho bạn TypeError. các mục không thể lặp lại
for [const item of items] {}
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ố. Phương pháp này hoạt động trong tất cả các trình duyệt hiện đại và cũ bao gồm Internet Explorer 6 trở lên
Đây là một ví dụ sử dụng for. trong vòng lặp để lặp qua một đối tượng
const user = {
name: 'John Doe',
email: '[email protected]',
age: 25,
dob: '08/02/1989',
active: true
};
// iterate over the user object
for [const key in user] {
console.log[`${key}: ${user[key]}`];
}
// name: John Doe
// email: [email protected]
// age: 25
// dob: 08/02/1989
// active: true
Một vấn đề trong việc sử dụng for. trong phương thức là nó cũng lặp qua các thuộc tính trong chuỗi nguyên mẫu. Vì các đối tượng trong JavaScript có thể kế thừa các thuộc tính từ các nguyên mẫu của chúng, nên for. trong câu lệnh cũng sẽ lặp qua các thuộc tính đó
Để tránh vấn đề này, bạn phải kiểm tra rõ ràng xem thuộc tính có thuộc về đối tượng hay không bằng cách sử dụng phương thức hasOwnProperty[]
for [const key in user] {
if [user.hasOwnProperty[key]] {
console.log[`${key}: ${user[key]}`];
}
}
Để khắc phục rắc rối này, sau này trong ES8, hai phương thức khác đã được thêm vào, Object. các mục [] và Đối tượng. giá trị[]. 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 qua mảng đó
Mục tiêu. 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. đối tượng. keys[] đã được giới thiệu trong ES6 để giúp lặp qua các đối tượng dễ dàng hơn
Nó lấy đối tượng mà bạn muốn lặp lại làm đối số và trả về một mảng chứa tất cả tên thuộc tính [hoặc khóa]
Sau đó, bạn có thể sử dụng bất kỳ phương thức lặp mảng nào, chẳng hạn như forEach[], để lặp qua mảng và truy xuất giá trị của từng thuộc tính
Đây là một ví dụ
const courses = {
java: 10,
javascript: 55,
nodejs: 5,
php: 15
};
// convert object to key's array
const keys = Object.keys[courses];
// print all keys
console.log[keys];
// [ 'java', 'javascript', 'nodejs', 'php' ]
// iterate over object
keys.forEach[[key, index] => {
console.log[`${key}: ${courses[key]}`];
}];
// java: 10
// javascript: 55
// nodejs: 5
// php: 15
Mục tiêu. phương thức value[]
đối tượng. Các giá trị [] đã được giới thiệu trong ES8 và nó hoạt động ngược lại với phương thức của Object. Chìa khóa[]. Nó trả về các giá trị của tất cả các thuộc tính trong đối tượng dưới dạng một mảng. Sau đó, bạn có thể lặp qua mảng giá trị bằng cách sử dụng bất kỳ phương thức lặp mảng nào
Chúng ta hãy xem xét một ví dụ
>______7Mục tiêu. các mục [] Phương thức
đối tượng. các mục [], một phương thức ES8 khác có thể được sử dụng để duyệt qua một mảng. . Mục tiêu. các mục [] xuất ra một mảng các mảng, với mỗi mảng bên trong 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ị
Đây là một ví dụ
________số 8Để lặp qua mảng được trả về bởi Object. các mục [], bạn có thể sử dụng for. của vòng lặp hoặc phương thức forEach[] như hình bên dưới
// `for...of` loop
for [const [key, value] of Object.entries[animals]] {
console.log[`${key}: ${value}`];
}
// `forEach[]` method
Object.entries[animals].forEach[[[key, value]] => {
console.log[`${key}: ${value}`]
}];
lời chia tay
Chúng ta đã tìm hiểu sơ qua về 4 cách khác nhau để lặp qua các đối tượng trong javascript. Nếu bạn đang sử dụng các trình duyệt cũ, đối với. in vẫn là một lựa chọn tốt, nếu không, bạn có thể sử dụng bất kỳ phương pháp mới nhất nào được thảo luận ở trên