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

Phương thức

name - John
age - 20
hobbies - ["reading", "games", "coding"]

2 trả về một mảng gồm các cặp khóa/giá trị của đối tượng đã cho. Vòng lặp

name - John
age - 20
hobbies - ["reading", "games", "coding"]

3 dùng để lặp qua một mảng

Trong bài viết này, chúng ta sẽ tìm hiểu các cách khác nhau để lặp lại các thuộc tính của một đối tượng trong JavaScript

Đối tượng trong JavaScript là gì?

Một đối tượng là một tập hợp dữ liệu đặc biệt trong một ngôn ngữ lập trình như JavaScript—nó được sử dụng để biểu diễn các đối tượng trong thế giới thực hoặc để lưu trữ trạng thái chương trình hoặc sắp xếp dữ liệu chương trình. Một đối tượng có thể có một hoặc nhiều thuộc tính để mô tả nó và cũng có thể có các phương thức để thực hiện các tác vụ chung

Ví dụ: tài khoản ngân hàng có thể được coi là một đối tượng, với các thuộc tính như số dư ngân hàng, loại tài khoản và tiền tệ của tài khoản, tất cả đều mô tả tài khoản ngân hàng

Các tác vụ như trừ hoặc thêm tiền vào tài khoản, đóng tài khoản và gửi tiền từ tài khoản đều có thể được biểu diễn dưới dạng các phương thức.  

Cách phổ biến nhất để biểu diễn một đối tượng trong JavaScript là sử dụng dấu ngoặc nhọn kép [còn gọi là đối tượng chữ]. Trên đối tượng, chúng ta có thể định nghĩa các thuộc tính, phương thức hoặc cả hai

1

const bankAccount = {

2

    balance: 100,

3

    currency: "USD",

4

    type: "savings",

name - John
age - 20
hobbies - ["reading", "games", "coding"]

0

name - John
age - 20
hobbies - ["reading", "games", "coding"]

1

const bankAccount = {

0

const bankAccount = {

1

const bankAccount = {

2

const bankAccount = {

3

const bankAccount = {

4

const bankAccount = {

5

const bankAccount = {

6

const bankAccount = {

7

Mỗi thuộc tính đối tượng bao gồm bộ truy cập thuộc tính [e. g.

const bankAccount = {

60] và giá trị tài sản [e. g.

const bankAccount = {

61]. Phương thức là các chức năng thực hiện các tác vụ cụ thể trong đối tượng.  

Bên trong phương pháp

const bankAccount = {

62 trừ chi phí mới khỏi số dư ngân hàng, chúng tôi đã truy cập thuộc tính số dư bằng cách sử dụng

const bankAccount = {

63. Chúng ta có thể truy cập bất kỳ thuộc tính hoặc phương thức nào từ bên trong đối tượng bằng cách sử dụng tham chiếu

const bankAccount = {

63

Chúng ta cũng có thể lặp lại các thuộc tính của đối tượng để xử lý từng cái một. Nói một cách đơn giản, phép lặp là quá trình lặp lại các bước thuật toán nhất định cho đến khi một điều kiện cụ thể được đáp ứng. Điều này thường được gọi là một vòng lặp. Trong trường hợp này, lặp lại một tập dữ liệu có nghĩa là chạy một số mã cho từng mục trong tập hợp

Chúng ta hãy xem xét một số cách hiện đại để lặp lại các thuộc tính của đối tượng trong JavaScript

Lặp lại các khóa thuộc tính với đối tượng. phím[]

const bankAccount = {

65 trả về một mảng chứa các khóa của tất cả các thuộc tính trên bất kỳ đối tượng đã cho nào

1

const bankAccount = {

9

2

2

1

3

2

3

4

2

5

name - John
age - 20
hobbies - ["reading", "games", "coding"]

0

const bankAccount = {

7

const bankAccount = {

0

const bankAccount = {

2

    balance: 100,

0

const bankAccount = {

4

const bankAccount = {

6

    balance: 100,

3

Vì vậy, chúng ta có thể kết hợp

const bankAccount = {

65 với một vòng lặp

const bankAccount = {

67 để lặp qua tất cả các thuộc tính của một đối tượng bằng cách lặp qua các khóa của nó như vậy

1

const bankAccount = {

9

2

2

1

3

2

3

4

2

5

name - John
age - 20
hobbies - ["reading", "games", "coding"]

0

const bankAccount = {

7

const bankAccount = {

0

const bankAccount = {

2

3

6

const bankAccount = {

4

3

8

const bankAccount = {

6

const bankAccount = {

7

    currency: "USD",

1

    currency: "USD",

2

    currency: "USD",

3

    currency: "USD",

4

    currency: "USD",

5

    currency: "USD",

6

    currency: "USD",

7

    currency: "USD",

8

    currency: "USD",

9

4

0

4

1

Bởi vì trình lặp của chúng tôi cung cấp cho chúng tôi các khóa đối với các thuộc tính của đối tượng, nên chúng tôi có thể truy cập các giá trị trực tiếp từ đối tượng

const bankAccount = {

68 bằng cú pháp trình truy cập thuộc tính.

const bankAccount = {

69

Lặp lại trực tiếp các giá trị thuộc tính với

const bankAccount = {

70

const bankAccount = {

70 hoạt động theo cách rất giống với

const bankAccount = {

72. Sự khác biệt chính giữa hai loại này là trong khi

const bankAccount = {

65 chỉ trả về các khóa thuộc tính, thì thay vào đó,

const bankAccount = {

70 trả về các giá trị

Hãy xem xét đoạn mã sau chỉ trả về các giá trị cho tất cả các thuộc tính

1

const bankAccount = {

9

2

2

1

3

2

3

4

2

5

name - John
age - 20
hobbies - ["reading", "games", "coding"]

0

const bankAccount = {

7

const bankAccount = {

0

const bankAccount = {

2

    type: "savings",

4

const bankAccount = {

4

const bankAccount = {

6

    type: "savings",

7

Sử dụng vòng lặp

const bankAccount = {

67, lặp lại các thuộc tính của một đối tượng với

const bankAccount = {

70

1

const bankAccount = {

9

2

2

1

3

2

3

4

2

5

name - John
age - 20
hobbies - ["reading", "games", "coding"]

0

const bankAccount = {

7

const bankAccount = {

0

const bankAccount = {

2

name - John
age - 20
hobbies - ["reading", "games", "coding"]

10

const bankAccount = {

4

name - John
age - 20
hobbies - ["reading", "games", "coding"]

12

const bankAccount = {

6

const bankAccount = {

7

    currency: "USD",

1

    currency: "USD",

2

    currency: "USD",

3

    currency: "USD",

4

name - John
age - 20
hobbies - ["reading", "games", "coding"]

19

    currency: "USD",

6

const bankAccount = {

01

    currency: "USD",

8

const bankAccount = {

03

4

0

4

1

Vì các khóa thuộc tính sẽ được yêu cầu trong nhiều trường hợp nên đây có thể không phải là phương thức bạn muốn sử dụng khi lặp qua một đối tượng

Lặp lại các thuộc tính đối tượng với đối tượng. mục[]

const bankAccount = {

77 cung cấp một cách rõ ràng hơn để truy cập cả khóa và giá trị của bất kỳ đối tượng cụ thể nào trong vòng lặp JavaScript

Phương thức này trả về một mảng nhiều chiều [còn gọi là mảng của các mảng] cho bất kỳ đối tượng nào. Mỗi mảng con chứa cả khóa và giá trị cho một thuộc tính cụ thể

1

const bankAccount = {

9

2

2

1

3

2

3

4

2

5

name - John
age - 20
hobbies - ["reading", "games", "coding"]

0

const bankAccount = {

7

const bankAccount = {

0

const bankAccount = {

2

const bankAccount = {

18

const bankAccount = {

4

const bankAccount = {

6

const bankAccount = {

21

Bây giờ chúng ta có thể sử dụng

const bankAccount = {

77 với vòng lặp for để dễ dàng truy xuất cả khóa và giá trị cho từng thuộc tính như vậy

1

const bankAccount = {

9

2

2

1

3

2

3

4

2

5

name - John
age - 20
hobbies - ["reading", "games", "coding"]

0

const bankAccount = {

7

const bankAccount = {

0

const bankAccount = {

2

const bankAccount = {

4

const bankAccount = {

35

const bankAccount = {

6

const bankAccount = {

37

    currency: "USD",

1

const bankAccount = {

7

    currency: "USD",

2

    currency: "USD",

4

    currency: "USD",

3

    currency: "USD",

6

    currency: "USD",

5

    currency: "USD",

8

    currency: "USD",

7

4

0

    currency: "USD",

9

const bankAccount = {

49

4

1

Ở đây, đối với mỗi mục nhập, chúng tôi tìm thấy giá trị mục nhập tại chỉ mục 1 và khóa tại chỉ mục 0.  

Để đơn giản hóa hơn nữa mã, chúng ta có thể sử dụng phá hủy mảng để lấy khóa và giá trị cho từng thuộc tính thành các biến riêng biệt

1

____352____4____354

3

const bankAccount = {

7

4

name - John
age - 20
hobbies - ["reading", "games", "coding"]

0

const bankAccount = {

59

So với các phương pháp khác, phương pháp này sạch hơn và dễ đọc hơn nhiều.  

Phần kết luận

const bankAccount = {

77 là phương pháp được đề xuất để lặp lại các thuộc tính của đối tượng trong JavaScript.  

Vì phương thức này trả về một mảng nhiều chiều, nên chúng ta có thể đơn giản hóa rất nhiều mã của mình bằng cách sử dụng cú pháp phá hủy mảng để truy xuất từng thuộc tính thành một biến riêng biệt. Điều này giúp giữ cho mọi thứ linh hoạt

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

Bạn sẽ sử dụng phương pháp nào để lặp lại các thuộc tính của một đối tượng?

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

Chúng ta có thể lặp một đối tượng giống như các cặp giá trị chính không?