Làm thế nào để bạn lặp lại dữ liệu trong javascript?

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à

1. sử dụng một cho. trong vòng lặp
2. Mục tiêu. phương pháp phím
3. Mục tiêu. phương pháp giá trị
4. 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ụ

Mụ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ụ

Để 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

Lặp lại trong JavaScript với ví dụ là gì?

Phép lặp hoạt động như thế nào trong JavaScript?

Làm cách nào để lặp qua một mảng trong JavaScript?

Bạn có thể lặp lại bao nhiêu cách trong JavaScript?