Đối tượng vòng lặp JavaScript

Hôm qua, chúng ta đã xem xét cách tiếp cận khác nhau để lặp qua mảng và phần tử bằng JavaScript. Hôm nay, chúng ta sẽ xem xét một vài phương pháp để lặp qua các đối tượng

Nào cùng đào vào bên trong

Đối tượng ví dụ

Đối với bài viết hôm nay, hãy sử dụng một đối tượng với các chi tiết của một đơn đặt hàng

// logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
for [let key in lunch] {
	console.log[key];        // key
	console.log[lunch[key]]; // value
}

2 làm ví dụ

let lunch = {
	sandwich: 'turkey',
	chips: 'cape cod',
	drink: 'soda'
};

Chúng tôi sẽ lặp lại nó và ghi từng mục vào bảng điều khiển, nhưng trong một trang web hoặc ứng dụng thực, bạn có thể muốn thao tác dữ liệu theo một cách nào đó

Vòng lặp

// logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
for [let key in lunch] {
	console.log[key];        // key
	console.log[lunch[key]]; // value
}

3

Vòng lặp

// logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
for [let key in lunch] {
	console.log[key];        // key
	console.log[lunch[key]]; // value
}

3 tương tự như , nhưng được sử dụng để lặp qua các đối tượng

Trong một vòng lặp

// logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
for [let key in lunch] {
	console.log[key];        // key
	console.log[lunch[key]]; // value
}

3, bạn xác định một biến để đại diện cho

// logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
for [let key in lunch] {
	console.log[key];        // key
	console.log[lunch[key]]; // value
}

2 của mục hiện tại

// logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
for [let key in lunch] {
	console.log[key];        // key
	console.log[lunch[key]]; // value
}

3 đối tượng mà bạn đang lặp qua. Bên trong khối [phần nằm giữa dấu ngoặc nhọn], bạn có thể sử dụng biến đó để tham chiếu mục hiện tại

// logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
for [let key in lunch] {
	console.log[key];        // key
	console.log[lunch[key]]; // value
}

Đây là một bản demo

Bỏ qua và kết thúc vòng lặp

Cũng giống như vòng lặp

// logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
for [let key in lunch] {
	console.log[key];        // key
	console.log[lunch[key]]; // value
}

4 và

// logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
for [let key in lunch] {
	console.log[key];        // key
	console.log[lunch[key]]; // value
}

0, bạn có thể sử dụng toán tử

// logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
for [let key in lunch] {
	console.log[key];        // key
	console.log[lunch[key]]; // value
}

6 và

// logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
for [let key in lunch] {
	console.log[key];        // key
	console.log[lunch[key]]; // value
}

7 trong vòng lặp

// logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
for [let key in lunch] {
	console.log[key];        // key
	console.log[lunch[key]]; // value
}

3

________số 8

Đây là một bản demo khác

Phương pháp

// logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
for [let key in lunch] {
	console.log[key];        // key
	console.log[lunch[key]]; // value
}

9

Phương thức

// logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
for [let key in lunch] {
	console.log[key];        // key
	console.log[lunch[key]]; // value
}

9 trả về một mảng khóa từ một đối tượng. Bạn chuyển vào đối tượng làm đối số

// logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
for [let key in lunch] {
	console.log[key];        // key
	console.log[lunch[key]]; // value
}

1

Bạn có thể kết hợp nó với một vòng lặp

// logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
for [let key in lunch] {
	console.log[key];        // key
	console.log[lunch[key]]; // value
}

0 [hoặc bất kỳ kỹ thuật mảng nào khác mà chúng ta đã xem ngày hôm qua] để lặp qua đối tượng

// logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
for [let key in lunch] {
	console.log[key];        // key
	console.log[lunch[key]]; // value
}

3

Đây là bản demo của kỹ thuật này đang hoạt động

Phương pháp

for [let key in lunch] {
	if [key === 'drink'] break;
	console.log[lunch[key]];
}

2

Phương thức

for [let key in lunch] {
	if [key === 'drink'] break;
	console.log[lunch[key]];
}

2 trả về một mảng gồm các cặp khóa/giá trị từ một đối tượng, cũng được biểu diễn dưới dạng mảng. Truyền vào đối tượng dưới dạng đối số

// logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
for [let key in lunch] {
	console.log[key];        // key
	console.log[lunch[key]]; // value
}

6

Bạn có thể kết hợp kỹ thuật này với một vòng lặp

// logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
for [let key in lunch] {
	console.log[key];        // key
	console.log[lunch[key]]; // value
}

0 và lặp qua đối tượng

// logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
for [let key in lunch] {
	console.log[key];        // key
	console.log[lunch[key]]; // value
}

8

Đây là bản demo cuối cùng dành cho bạn

Bạn nên sử dụng phương pháp nào, và tại sao?

cái này khá đơn giản đối với tôi.

for [let key in lunch] {
	if [key === 'drink'] break;
	console.log[lunch[key]];
}

2 với

// logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
for [let key in lunch] {
	console.log[key];        // key
	console.log[lunch[key]]; // value
}

0. Có một biến dành riêng cho

for [let key in lunch] {
	if [key === 'drink'] break;
	console.log[lunch[key]];
}

7 trong vòng lặp thực sự rất tuyệt

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

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

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

Làm cách nào để lặp lại đối tượng giá trị khóa trong JavaScript?