Cách khắc phục “[object Object]” trong JavaScript (Các cách tốt nhất để hiển thị đối tượng)

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Giới thiệu

Khi xây dựng các chương trình bằng JavaScript, bạn đôi khi có thể thấy chuỗi “[object Object]” khi cố gắng hiển thị một đối tượng. Đây là một tình huống phổ biến xảy ra khi các đối tượng JavaScript được xuất trực tiếp mà không có định dạng.

Trong bài viết này, chúng tôi sẽ giải thích “[object Object]” thực sự có nghĩa là gì và cách hiển thị nội dung của một đối tượng một cách dễ đọc.

Hướng dẫn này được thiết kế cho các nhà phát triển từ mới bắt đầu đến trung cấp, và nó bao gồm các ví dụ thực tế và đoạn mã để giúp bạn hiểu sâu hơn về chủ đề.

2. ‘[object Object]’ là gì?

Trong JavaScript, khi bạn cố gắng chuyển đổi một đối tượng thành chuỗi, hành vi mặc định thường cho ra “[object Object]”. Kết quả này đại diện cho thông tin kiểu của giá trị, nhưng không hiển thị nội dung thực tế của đối tượng.

Tại sao ‘[object Object]’ xuất hiện?

Các đối tượng JavaScript có một phương thức toString() mặc định. Phương thức này được gọi bất cứ khi nào một đối tượng được xử lý như một chuỗi. Tuy nhiên, theo tiêu chuẩn JavaScript, các đối tượng trả về định dạng sau theo mặc định khi được chuyển đổi thành chuỗi.

console.log({}); // Output: [object Object]

Hành vi này chỉ hiển thị thông tin kiểu là “object” và không bao gồm bất kỳ chi tiết nào về các khóa hoặc giá trị bên trong đối tượng. Đó là lý do tại sao các nhà phát triển cần sử dụng các phương pháp khác để kiểm tra và hiển thị dữ liệu đối tượng một cách chính xác.

3. Tại sao ‘[object Object]’ xuất hiện

Vai trò của phương thức toString()

Tất cả các đối tượng JavaScript kế thừa phương thức Object.prototype.toString(). Phương thức này tự động được gọi khi một đối tượng được chuyển đổi thành chuỗi.

Để xác nhận hành vi mặc định, hãy xem đoạn mã sau:

const obj = { key: "value" };
console.log(obj.toString()); // Output: [object Object]

Như bạn thấy, toString() được thiết kế để trả về “[object Object]” cho các đối tượng thông thường theo mặc định.

Các ví dụ do ép kiểu ngầm

Hành vi tương tự xảy ra khi một đối tượng được nối với một chuỗi.

const obj = { key: "value" };
console.log("Data: " + obj); // Output: Data: [object Object]

Trong ví dụ này, obj được chuyển đổi thành chuỗi, và toString() được gọi nội bộ—kết quả là đầu ra “[object Object]”.

4. Cách tránh ‘[object Object]’

4.1. Chuyển đổi Đối tượng thành Chuỗi bằng JSON.stringify()

Cách dễ nhất và phổ biến nhất là sử dụng JSON.stringify() để chuyển đổi một đối tượng thành chuỗi định dạng JSON.

Ví dụ: Sử dụng Cơ bản JSON.stringify

const obj = { key: "value", id: 123 };
console.log(JSON.stringify(obj)); // Output: {"key":"value","id":123}

Trong đoạn mã này, các khóa và giá trị của đối tượng được hiển thị chính xác dưới dạng JSON.

In ấn đẹp (Với thụt lề)

Bạn cũng có thể xuất JSON đã định dạng với thụt lề để cải thiện khả năng đọc.

console.log(JSON.stringify(obj, null, 2));

Kết quả:

{
  "key": "value",
  "id": 123
}

Vì JSON.stringify() có thể định dạng các đối tượng phức tạp và cấu trúc lồng nhau một cách sạch sẽ, nó cực kỳ hữu ích cho việc gỡ lỗi.

4.2. Kiểm tra Đối tượng chi tiết bằng console.dir()

Sử dụng console.dir(), bạn có thể kiểm tra các thuộc tính và phương thức của một đối tượng trong cấu trúc phân cấp.

Ví dụ: Cách sử dụng console.dir

const obj = { key: "value", nested: { a: 1, b: 2 } };
console.dir(obj);

Kết quả này được hiển thị dưới dạng cho phép bạn mở rộng và kiểm tra cấu trúc đối tượng trong DevTools.

Sự khác biệt giữa console.dir và console.log:

• console.log(obj) hiển thị đối tượng theo kiểu một dòng, không phù hợp để kiểm tra các cấu trúc phức tạp.
• console.dir(obj) giữ nguyên cấu trúc phân cấp, hữu ích cho các đối tượng và mảng lồng nhau.

4.3. Triển khai Phương thức toString() Tùy chỉnh

Bạn có thể tùy chỉnh đầu ra “[object Object]” mặc định bằng cách định nghĩa phương thức toString() riêng cho một đối tượng.

Ví dụ: Triển khai toString Tùy chỉnh

const obj = {
  key: "value",
  id: 123,
  toString() {
    return `Key: ${this.key}, ID: ${this.id}`;
  },
};
console.log(obj.toString()); // Output: Key: value, ID: 123

Với cách tiếp cận này, khi đối tượng được xử lý như một chuỗi, nó sẽ xuất ra định dạng tùy chỉnh của bạn thay vì giá trị mặc định.

4.4. In nội dung đối tượng bằng vòng lặp for…in

Một tùy chọn khác là lặp qua các khóa và giá trị của một đối tượng và in chúng một cách thủ công.

Ví dụ: Sử dụng vòng lặp for…in

const obj = { key: "value", id: 123 };
for (const key in obj) {
  console.log(`${key}: ${obj[key]}`);
}

Kết quả:

key: value
id: 123

Cách tiếp cận này đơn giản và dễ tùy chỉnh, phù hợp cho việc kiểm tra nhanh các đối tượng nhỏ.

4.5. Sử dụng Object.entries() hoặc Object.keys()

Từ ES6 trở đi, JavaScript cung cấp các phương thức để trích xuất khóa và giá trị dưới dạng mảng.

Ví dụ: Sử dụng Object.entries

const obj = { key: "value", id: 123 };
console.log(Object.entries(obj));

Kết quả:

[ [ 'key', 'value' ], [ 'id', 123 ] ]

Bằng cách lấy các cặp khóa-giá trị dưới dạng mảng, bạn có thể tận dụng các phương thức của mảng để xử lý tiếp theo.

5. Ví dụ nâng cao: Hiển thị các đối tượng và mảng phức tạp

5.1. Hiển thị các đối tượng lồng nhau

Khi một đối tượng chứa các đối tượng khác, hãy xem một cách dễ dàng để hiển thị nội dung một cách rõ ràng.

Ví dụ: Hiển thị một đối tượng lồng nhau

const data = {
  user: {
    name: "John",
    age: 30,
    address: {
      city: "Tokyo",
      country: "Japan",
    },
  },
  hobbies: ["reading", "traveling"],
};

console.log(JSON.stringify(data, null, 2));

Kết quả:

{
  "user": {
    "name": "John",
    "age": 30,
    "address": {
      "city": "Tokyo",
      "country": "Japan"
    }
  },
  "hobbies": [
    "reading",
    "traveling"
  ]
}

Như đã thấy ở trên, việc sử dụng JSON.stringify() giúp cấu trúc của các đối tượng lồng nhau dễ hiểu hơn.

5.2. Hiển thị các đối tượng chứa mảng

Nếu một đối tượng chứa một mảng, bạn có thể xử lý nó theo cách tương tự.

Ví dụ: Hiển thị một đối tượng có mảng

const order = {
  id: 101,
  items: [
    { name: "Apple", price: 150 },
    { name: "Banana", price: 100 },
    { name: "Cherry", price: 200 },
  ],
  total: 450,
};

console.table(order.items);

Kết quả:

Trong ví dụ này, console.table() hiển thị các phần tử của mảng dưới dạng bảng. Điều này giúp việc kiểm tra trực quan cấu trúc dữ liệu dễ dàng hơn và cải thiện hiệu quả gỡ lỗi.

5.3. Xử lý các đối tượng có tham chiếu vòng (circular references)

Trong JavaScript, nếu một đối tượng chứa tham chiếu vòng, việc sử dụng trực tiếp JSON.stringify() sẽ gây ra lỗi.

Ví dụ: Lỗi tham chiếu vòng

const objA = {};
const objB = { a: objA };
objA.b = objB;

console.log(JSON.stringify(objA)); // TypeError: Converting circular structure to JSON

Trong trường hợp này, bạn có thể giải quyết vấn đề bằng cách sử dụng thư viện bên thứ ba hoặc triển khai một hàm tùy chỉnh để xử lý các tham chiếu vòng.

Ví dụ giải pháp: Sử dụng thư viện flatted

const { stringify } = require("flatted");

console.log(stringify(objA));

Cách tiếp cận này cho phép bạn chuyển đổi thành chuỗi một cách an toàn các đối tượng có tham chiếu vòng.

5.4. Lấy chỉ các khóa từ đối tượng hoặc mảng

Khi khám phá một cấu trúc dữ liệu, việc trích xuất và hiển thị chỉ các khóa hoặc giá trị cũng có thể rất hữu ích.

Lấy danh sách các khóa:

const obj = { id: 101, name: "Alice", age: 25 };
console.log(Object.keys(obj)); // Output: [ 'id', 'name', 'age' ]

Lấy danh sách các giá trị:

console.log(Object.values(obj)); // Output: [ 101, 'Alice', 25 ]

Lấy các cặp khóa-giá trị:

console.log(Object.entries(obj)); // Output: [ [ 'id', 101 ], [ 'name', 'Alice' ], [ 'age', 25 ] ]

Các phương pháp này hữu ích cho việc phân tích dữ liệu và trích xuất thông tin cụ thể một cách hiệu quả.

6. Các lỗi thường gặp và cách khắc phục

6.1. Lỗi Tham chiếu Vòng tròn: “Converting circular structure to JSON”

Thông báo lỗi:

TypeError: Converting circular structure to JSON

Nguyên nhân:
Điều này xảy ra khi một thuộc tính của đối tượng tham chiếu lại chính đối tượng đó, tạo ra một cấu trúc vòng tròn.

Ví dụ:

const objA = {};
const objB = { parent: objA };
objA.child = objB;

console.log(JSON.stringify(objA)); // Error occurs

Giải pháp 1: Sử dụng hàm tuần tự hoá tùy chỉnh

function safeStringify(obj) {
  const seen = new WeakSet();
  return JSON.stringify(obj, (key, value) => {
    if (typeof value === "object" && value !== null) {
      if (seen.has(value)) return "[Circular]";
      seen.add(value);
    }
    return value;
  });
}

console.log(safeStringify(objA)); 
// Output: {"child":{"parent":"[Circular]"}}

Giải pháp 2: Sử dụng thư viện bên thứ ba

Nếu bạn sử dụng một thư viện được thiết kế cho các tham chiếu vòng tròn, chẳng hạn như flatted, bạn có thể tránh lỗi này một cách dễ dàng hơn.

const { stringify } = require("flatted");
console.log(stringify(objA));

Cách tiếp cận này cho phép bạn xử lý an toàn các cấu trúc vòng tròn phức tạp với sự trợ giúp của một thư viện.

6.2. Lỗi Khi Xử lý undefined hoặc null

Ví dụ lỗi:

const obj = undefined;
console.log(obj.key); // TypeError: Cannot read properties of undefined

Nguyên nhân:
Cố gắng truy cập một thuộc tính trên undefined hoặc null sẽ gây ra lỗi.

Giải pháp: Sử dụng Optional Chaining

const obj = undefined;
console.log(obj?.key); // Output: undefined (no error)

Optional chaining (?.) cho phép truy cập an toàn ngay cả khi đối tượng không tồn tại.

6.3. Lỗi Thuộc tính Undefined

Ví dụ lỗi:

const obj = {};
console.log(obj.value.toString()); // TypeError: Cannot read properties of undefined

Nguyên nhân:
Điều này xảy ra khi bạn cố gắng truy cập một thuộc tính không tồn tại.

Giải pháp 1: Đặt Giá trị Mặc định

console.log((obj.value || "default").toString()); // Output: default

Giải pháp 2: Kết hợp Optional Chaining và Nullish Coalescing

console.log(obj.value?.toString() ?? "default"); // Output: default

Điều này làm cho việc truy cập thuộc tính an toàn hơn và ngăn ngừa lỗi thời gian chạy.

6.4. Sai lầm Khi Sử dụng Object.assign()

Ví dụ lỗi:

const target = null;
Object.assign(target, { key: "value" }); // TypeError: Cannot convert undefined or null to object

Nguyên nhân:
Object.assign() yêu cầu một đối tượng làm đối số đầu tiên, vì vậy việc truyền null hoặc undefined sẽ gây ra lỗi.

Giải pháp:
Truyền một đối tượng rỗng làm giá trị khởi tạo.

const target = Object.assign({}, { key: "value" });
console.log(target); // Output: { key: "value" }

6.5. Lỗi JSON.parse: “Unexpected token”

Ví dụ lỗi:

const jsonString = "{key: 'value'}";
console.log(JSON.parse(jsonString)); // SyntaxError: Unexpected token k in JSON

Nguyên nhân:
JSON có các quy tắc cú pháp nghiêm ngặt. Sử dụng dấu nháy đơn hoặc bỏ qua dấu nháy quanh các khóa làm cho JSON không hợp lệ.

Giải pháp:
Sửa chuỗi thành định dạng JSON hợp lệ.

const jsonString = '{"key": "value"}';
console.log(JSON.parse(jsonString)); // Output: { key: 'value' }

7. Tóm tắt

Trong bài viết này, chúng tôi đã đề cập đến vấn đề hiển thị “[object Object]” phổ biến trong JavaScript, bao gồm lý do xảy ra và cách khắc phục bằng các giải pháp thực tế. Hãy xem lại các điểm chính và tổ chức lại những gì chúng ta đã học.

7.1. Ý nghĩa thực sự của ‘[object Object]’

• Các đối tượng JavaScript được chuyển thành chuỗi mặc định bằng phương thức toString().
• Do đó, các đối tượng thuần sẽ được hiển thị ở định dạng “[object Object]” .

7.2. Cách Hiển thị Nội dung Đối tượng Một cách Chính xác

Chúng tôi đã giới thiệu một số cách tiếp cận thực tế để kiểm tra và hiển thị dữ liệu đối tượng một cách rõ ràng hơn.

1. JSON.stringify() để chuyển đổi các đối tượng thành chuỗi có thể đọc được:
   * Hiển thị các đối tượng ở định dạng JSON và hỗ trợ pretty printing (đầu ra có định dạng).

2. console.dir() để kiểm tra đối tượng theo cấu trúc phân cấp:

• Cho phép bạn khám phá trực quan cấu trúc đối tượng chi tiết trong DevTools.

1. Triển khai phương thức toString() tùy chỉnh:

• Cho phép bạn định nghĩa định dạng hiển thị riêng cho các đối tượng.

1. Sử dụng vòng lặp và Object.entries():

• Trích xuất khóa và giá trị để in chúng thủ công.

7.3. Các trường hợp sử dụng nâng cao và xử lý đối tượng phức tạp

• Đối tượng và mảng lồng nhau: JSON.stringify() và console.table() giúp hiển thị dữ liệu ở định dạng sạch sẽ và dễ đọc.
• Cách xử lý lỗi tham chiếu vòng tròn:
• Sử dụng các hàm tùy chỉnh hoặc thư viện bên thứ ba để tránh thất bại.
• Trích xuất dữ liệu hiệu quả:
• Sử dụng Object.keys() , Object.values() , và Object.entries() để lấy thông tin một cách hiệu quả.

7.4. Ngăn ngừa lỗi và Mẹo gỡ lỗi

Chúng tôi cũng đã giải thích các lỗi phổ biến liên quan đến hoạt động đối tượng và cách sửa chúng.

1. Lỗi tham chiếu vòng tròn:

• Xử lý chúng bằng bộ tuần tự hóa tùy chỉnh hoặc thư viện.

1. Lỗi khi truy cập undefined hoặc null:

• Sử dụng chuỗi tùy chọn và đặt giá trị mặc định.

1. Lỗi JSON.parse:

• Đảm bảo chuỗi là định dạng JSON hợp lệ.

Bằng cách áp dụng các kỹ thuật này, bạn có thể ngăn ngừa lỗi trước và làm cho việc gỡ lỗi mượt mà hơn.

7.5. Những suy nghĩ cuối cùng

Các đối tượng JavaScript là công cụ mạnh mẽ để quản lý dữ liệu linh hoạt. Tuy nhiên, nếu không hiểu cách đối tượng hoạt động, bạn có thể gặp phải các vấn đề hiển thị như “[object Object]” hoặc lỗi thời gian chạy bất ngờ.

Sử dụng các kỹ thuật và chiến lược xử lý lỗi được giới thiệu trong bài viết này để viết mã sạch hơn, an toàn hơn và hiệu quả hơn.

Các bước tiếp theo:

• Để làm sâu sắc thêm hiểu biết về xử lý đối tượng, hãy kiểm tra các bài viết liên quan và tài liệu chính thức.
• Viết và chạy mã thực tế để xác nhận hành vi và củng cố kỹ năng của bạn.

Điều đó kết thúc giải thích của chúng tôi về vấn đề hiển thị đối tượng JavaScript. Cảm ơn bạn đã đọc!