Cách Chuyển Object Sang Array Trong JavaScript Đơn Giản Và Hiệu Quả

Trong quá trình lập trình với JavaScript, đôi khi bạn sẽ gặp tình huống cần chuyển đổi một Object sang Array. Điều này đặc biệt quan trọng khi bạn muốn tận dụng các phương thức mạnh mẽ mà Array cung cấp như map, filter, reduce, v.v.

Vậy làm sao để chuyển một Object sang Array một cách hiệu quả và tối ưu? Trong bài viết này, BaoTrongIT sẽ giới thiệu đến bạn các cách phổ biến và chuyên nghiệp để thực hiện điều đó.

📌 Vì sao cần chuyển Object sang Array?

• Dễ dàng xử lý dữ liệu: Array hỗ trợ nhiều hàm xử lý dữ liệu giúp bạn viết code gọn hơn.
• Hiển thị dữ liệu dễ dàng hơn: Khi bạn cần render dữ liệu ra bảng, danh sách,...
• Tương thích với nhiều thư viện: Nhiều thư viện chỉ nhận array làm input.

🔍 Ví dụ thực tế cần chuyển Object sang Array

Giả sử bạn có object sau từ một API:

const products = {
  p01: { name: "Laptop", price: 1500 },
  p02: { name: "Mouse", price: 25 },
  p03: { name: "Keyboard", price: 70 }
};

Giờ bạn muốn hiển thị danh sách sản phẩm và tính tổng giá? Lúc này bạn cần chuyển Object này sang Array.

1. Object.values() – Lấy mảng các value

const productArray = Object.values(products);
console.log(productArray);
/* Output:
[
  { name: "Laptop", price: 1500 },
  { name: "Mouse", price: 25 },
  { name: "Keyboard", price: 70 }
]
*/

Giờ bạn có thể dễ dàng tính tổng giá:

const total = productArray.reduce((sum, item) => sum + item.price, 0);
console.log(total); // 1595

2. Object.keys() – Lấy mảng các key

const ids = Object.keys(products);
console.log(ids); // ["p01", "p02", "p03"]

Có thể dùng để tìm sản phẩm theo ID dễ dàng.

3. Object.entries() – Lấy mảng [key, value]

const entries = Object.entries(products);
console.log(entries);
/* Output:
[
  ["p01", { name: "Laptop", price: 1500 }],
  ["p02", { name: "Mouse", price: 25 }],
  ["p03", { name: "Keyboard", price: 70 }]
]
*/

Giờ bạn có thể truy xuất cả key lẫn giá trị trong một lần lặp:

entries.forEach(([id, product]) => {
  console.log(`${id}: ${product.name} - $${product.price}`);
});

⚙️ Nâng cao: Chuyển object sang array có thêm ID

Nếu bạn muốn mỗi object con có thêm trường id (lấy từ key), bạn có thể làm như sau:

const arrayWithId = Object.entries(products).map(([id, value]) => ({
  id,
  ...value
}));

console.log(arrayWithId);
/* Output:
[
  { id: "p01", name: "Laptop", price: 1500 },
  { id: "p02", name: "Mouse", price: 25 },
  { id: "p03", name: "Keyboard", price: 70 }
]
*/

Cách này cực kỳ hữu ích nếu bạn cần render danh sách có ID duy nhất.

📌 Tổng kết

Việc convert Object to Array trong JavaScript là một thao tác đơn giản nhưng cực kỳ quan trọng trong thực tế. Tùy theo mục đích sử dụng, bạn có thể dùng Object.keys, Object.values, hoặc Object.entries. Mỗi method đều có ưu điểm riêng và phù hợp với các use-case khác nhau.

Hãy chọn đúng công cụ cho đúng việc – đó là cách để bạn trở thành một lập trình viên JavaScript chuyên nghiệp hơn mỗi ngày!

👉 Theo dõi thêm tại baotrongit.com để đọc nhiều bài viết hữu ích khác nhé!