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

for (variable in object)
  statement

variable

Nhận một tên thuộc tính chuỗi trên mỗi lần lặp. Có thể là một tuyên bố với const, let, hoặc var, hoặc một mục tiêu chuyển nhượng (e. g. một biến được khai báo trước đó hoặc một thuộc tính đối tượng)

Đối tượng có thuộc tính đếm được không phải là biểu tượng được lặp lại

Một câu lệnh sẽ được thực hiện trên mỗi lần lặp. Có thể tham khảo variable. Bạn có thể sử dụng một câu lệnh khối để thực thi nhiều câu lệnh

Vòng lặp sẽ lặp qua tất cả vô số thuộc tính của chính đối tượng và những thuộc tính mà đối tượng kế thừa từ chuỗi nguyên mẫu của nó (thuộc tính của các nguyên mẫu gần hơn được ưu tiên hơn các thuộc tính của các nguyên mẫu xa đối tượng hơn trong chuỗi nguyên mẫu của nó)

Vòng lặp for...in chỉ lặp qua vô số thuộc tính không phải ký hiệu. Các đối tượng được tạo từ các hàm tạo dựng sẵn như

const obj = { a: 1, b: 2, c: 3 };

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Logs:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

const obj = { a: 1, b: 2, c: 3 };

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Logs:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

const obj = { a: 1, b: 2, c: 3 };

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Logs:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

const obj = { a: 1, b: 2, c: 3 };

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Logs:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

const obj = { a: 1, b: 2, c: 3 };

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Logs:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

const obj = { a: 1, b: 2, c: 3 };

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Logs:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

const obj = { a: 1, b: 2, c: 3 };

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Logs:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

const obj = { a: 1, b: 2, c: 3 };

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Logs:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

Thứ tự truyền tải, theo đặc tả ECMAScript hiện đại, được xác định rõ ràng và nhất quán trong quá trình triển khai. Trong mỗi thành phần của chuỗi nguyên mẫu, tất cả các khóa số nguyên không âm (những khóa có thể là chỉ số mảng) sẽ được duyệt trước theo thứ tự tăng dần theo giá trị, sau đó là các khóa chuỗi khác theo thứ tự thời gian tăng dần của việc tạo thuộc tính

Phần variable của for...in chấp nhận mọi thứ có thể đến trước toán tử

const triangle = { a: 1, b: 2, c: 3 };

function ColoredTriangle() {
  this.color = "red";
}

ColoredTriangle.prototype = triangle;

const obj = new ColoredTriangle();

for (const prop in obj) {
  if (Object.hasOwn(obj, prop)) {
    console.log(`obj.${prop} = ${obj[prop]}`);
  }
}

// Logs:
// "obj.color = red"

const triangle = { a: 1, b: 2, c: 3 };

function ColoredTriangle() {
  this.color = "red";
}

ColoredTriangle.prototype = triangle;

const obj = new ColoredTriangle();

for (const prop in obj) {
  if (Object.hasOwn(obj, prop)) {
    console.log(`obj.${prop} = ${obj[prop]}`);
  }
}

// Logs:
// "obj.color = red"

A cho phép các khai báo var của biến vòng lặp có bộ khởi tạo. Điều này gây ra lỗi cú pháp ở chế độ nghiêm ngặt và bị bỏ qua ở chế độ không nghiêm ngặt

Nếu một thuộc tính được sửa đổi trong một lần lặp và sau đó được truy cập sau đó, giá trị của nó trong vòng lặp là giá trị của nó tại thời điểm sau đó. Thuộc tính bị xóa trước khi nó được truy cập sẽ không được truy cập sau. Các thuộc tính được thêm vào đối tượng mà quá trình lặp đang diễn ra có thể được truy cập hoặc bỏ qua khỏi quá trình lặp

Nói chung, tốt nhất là không thêm, sửa đổi hoặc xóa các thuộc tính khỏi đối tượng trong quá trình lặp lại, ngoài thuộc tính hiện đang được truy cập. Không có gì đảm bảo liệu một thuộc tính được thêm vào sẽ được truy cập hay không, liệu một thuộc tính đã sửa đổi (không phải thuộc tính hiện tại) sẽ được truy cập trước hay sau khi nó được sửa đổi hay liệu một thuộc tính đã xóa sẽ được truy cập trước khi nó bị xóa

Các chỉ mục mảng chỉ là các thuộc tính có thể đếm được với tên số nguyên và giống hệt với các thuộc tính đối tượng chung. Vòng lặp for...in sẽ duyệt qua tất cả các khóa số nguyên trước khi duyệt qua các khóa khác và theo thứ tự tăng dần nghiêm ngặt, làm cho hành vi của for...in gần với phép lặp mảng bình thường. Tuy nhiên, vòng lặp for...in sẽ trả về tất cả các thuộc tính có thể đếm được, bao gồm cả những thuộc tính có tên không phải là số nguyên và những thuộc tính được kế thừa. Không giống như for...in1, for...in sử dụng phép liệt kê thuộc tính thay vì trình vòng lặp của mảng. Trong , for...in1 sẽ truy cập vào các ô trống, nhưng for...in sẽ không

Tốt hơn là sử dụng vòng lặp for...in5 có chỉ số, for...in6 hoặc vòng lặp for...in1, vì chúng sẽ trả về chỉ mục dưới dạng số thay vì chuỗi và cũng tránh các thuộc tính không có chỉ mục

Nếu bạn chỉ muốn xem xét các thuộc tính gắn liền với chính đối tượng chứ không phải nguyên mẫu của nó, bạn có thể sử dụng một trong các kỹ thuật sau

• for...in8
• for...in9

variable0 sẽ trả về một danh sách các thuộc tính chuỗi riêng có thể đếm được, trong khi variable1 cũng sẽ chứa các thuộc tính không thể đếm được

Nhiều hướng dẫn và trình hướng dẫn về phong cách JavaScript khuyên không nên sử dụng for...in, bởi vì nó lặp lại trên toàn bộ chuỗi nguyên mẫu, điều hiếm khi người ta muốn và có thể gây nhầm lẫn với vòng lặp for...in1 được sử dụng rộng rãi hơn. for...in được sử dụng thực tế nhất cho mục đích gỡ lỗi, là một cách dễ dàng để kiểm tra các thuộc tính của một đối tượng (bằng cách xuất ra bàn điều khiển hoặc cách khác). Trong trường hợp các đối tượng được sử dụng làm cặp khóa-giá trị đặc biệt, for...in cho phép bạn kiểm tra xem có bất kỳ khóa nào trong số đó giữ một giá trị cụ thể không

Vòng lặp for...in bên dưới lặp lại trên tất cả các thuộc tính không phải ký hiệu, có thể đếm được của đối tượng và ghi lại một chuỗi tên thuộc tính và giá trị của chúng

const obj = { a: 1, b: 2, c: 3 };

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Logs:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

Hàm sau minh họa việc sử dụng variable7. các thuộc tính kế thừa không được hiển thị

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

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

Vòng lặp nào được sử dụng cho mảng đối tượng?

Bạn có thể lặp qua một mảng trong JavaScript không?