Hướng dẫn how to loop through an object in javascript - cách lặp qua một đối tượng trong javascript

Thử nó

Cú pháp

for (variable in object)
  statement

Thông số

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ục tiêu gán (ví dụ: biến được khai báo trước đó hoặc thuộc tính đối tượng).

Đối tượng có các thuộc tính không thể phân tích được symbol được lặp lại.

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

Sự mô tả

Vòng lặp sẽ lặp lại trên tất cả các thuộc tính có thể suy giảm của chính đối tượng và các đối tượng được thừa hưởng từ chuỗi nguyên mẫu của nó (các thuộc tính của các nguyên mẫu gần hơn được ưu tiên hơn so với các nguyên mẫu cách xa đối tượng trong chuỗi nguyên mẫu của nó).

Một vòng lặp for...in chỉ lặp đi lặp lại trên các thuộc tính không thể đo lường, không symbol. Các đối tượng được tạo từ các nhà xây dựng được xây dựng 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"

Thứ tự truyền tải, theo đặc điểm kỹ thuật ECMAscript hiện đại, được xác định rõ và nhất quán trong các 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 (các khóa có thể là chỉ số mảng) sẽ được chuyển qua đầu tiên theo thứ tự tăng dần theo giá trị, sau đó các khóa chuỗi khác theo thứ tự thời gian tăng dần của việc tạo tài sản.

Phần variable của for...in chấp nhận bất cứ điều gì 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"

Một cú pháp kế thừa cho phép khai báo var của biến vòng lặp có trình khởi tạo. Điều này ném một lỗi cú pháp trong chế độ nghiêm ngặt và bị bỏ qua trong chế độ không đóng cửa.

Các thuộc tính đã xóa, thêm hoặc sửa đổi

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ó sau đó. Một tài sản 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à lần lặp đang xảy ra có thể được truy cập hoặc bỏ qua từ 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, ngoài tài sản hiện đang được truy cập. Không có gì đảm bảo cho dù một thuộc tính được thêm sẽ được truy cập, liệu một thuộc tính đã được sửa đổi (trừ tệp hiện tại) sẽ được truy cập trước hay sau khi nó được sửa đổi, hoặc liệu một thuộc tính đã bị xóa sẽ được truy cập trước khi nó bị xóa.

Lặp lại mảng và cho ... trong

Các chỉ mục mảng chỉ là các thuộc tính có thể suy định với tên số nguyên và khác giống hệt với các thuộc tính đối tượng chung. Vòng lặp for...in sẽ đi qua tất cả các khóa số nguyên trước khi đi qua các phím khác và theo thứ tự tăng nghiêm ngặt, làm cho hành vi của for...in gần với lần 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ể gây được, bao gồm cả những thuộc tính có tên số nguyên và các thuộc tính được kế thừa. Không giống như for...in1, for...in sử dụng liệt kê thuộc tính thay vì trình lặp của mảng. Trong các mảng thưa thớt, for...in1 sẽ ghé thăm các khe trống, nhưng for...in thì không.

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

Chỉ lặp lại các thuộc tính riêng

Nếu bạn chỉ muốn xem xét các thuộc tính được gắn vào 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 có thể khởi động, trong khi variable1 cũng sẽ chứa các thuộc tính không thể kích hoạt.

Nhiều hướng dẫn và lớp lót kiểu JavaScript đề xuất chống lại việc sử dụng for...in, bởi vì nó lặp đi lặp lại trên toàn bộ chuỗi nguyên mẫu, điều này hiếm khi mà người ta muốn, và có thể là một sự nhầm lẫn với vòng lặp for...in1 được sử dụng rộng rãi hơn. for...in thực tế được sử dụng một cách 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 vào bảng điều khiển hoặc cách khác). Trong các tình huống trong đó các đối tượng được sử dụng làm cặp giá trị khóa ad hoc, for...in cho phép bạn kiểm tra xem bất kỳ khóa nào trong số các khóa đó có giữ một giá trị cụ thể không.

Ví dụ

Sử dụng cho ... trong

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 là symbol của đối tượng và ghi lại một chuỗi các 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"

Lặp lại các thuộc tính riêng

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

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"

Xem thêm