3 Cách Đơn Giản Chuyển Từ Object Sang Array Trong JS

3 Cách Đơn Giản Chuyển Từ Object Sang Array Trong JS

Có rất nhiều trường hợp bạn cần phải chuyển kiểu dữ liệu từ Object sang Array. Bởi vì, Array có một số phương thức hữu ích để bạn tương tác với các phần tử trong mảng như: filter(), map(), some()... điều mà Object không có.

Trong khi học Javascript, bạn có 3 cách để chuyển đổi kiểu dữ liệu từ object sang array. Chúng ta sẽ cùng nhau khám phá nhé.

Một câu chuyện của ngày xưa...

Ngày xửa ngày xưa khi mình mới bắt đầu với Javascript, mỗi khi cần phải chuyển một Object sang Array, mình toàn làm thủ công, kiểu như sau:

var numbers = {
  one: 1,
  two: 2
};

var keys = [];for (var number in numbers) {
  if(numbers.hasOwnProperty(number)){
    keys.push(number)
  }
}

console.log(keys); //kết quả in ra: [ 'one', 'two' ]

Thực sự thì cách làm trên quá thủ công. Từ ES6, Javascript đã cung cấp sẵn các API để làm công việc một cách tự động chỉ với một câu lệnh.

Object.keys

Từ phiên bản ES6, mọi chuyện đã thay đổi, chúng ta đã có một cách chuyển Object sang Array đơn giản hơn bao giờ hết.

const numbers = {
  one: 1,
  two: 2
}

const array = Object.keys(numbers);
console.log(array); //Kết quả in ra: [ 'one', 'two' ]

Tuy nhiên, với API này, bạn chỉ thu được mảng các key mà thôi. Nhưng nhiều khi, mình còn muốn hơn thế, mình muốn có mảng các values nữa cơ. Câu trả lời chính là phần tiếp theo bài viết đây.

Object.values

Từ phiên bản ES7, bạn có thể dễ dàng trích xuất các values thành một mảng, cũng chỉ với một câu lệnh đơn giản.

const numbers = {
  one: 1,
  two: 2
}

const array = Object.values(numbers);
console.log(array); //Kết quả in ra: [ '1', '2' ]

Object.entries

Chúng ta vẫn chưa dừng ở đây!

Nếu bạn muốn trích xuất cả object thành một mảng gồm key và value thì sao? Cũng đơn giản không kém.

const numbers = {
  one: 1,
  two: 2
}

const array = Object.entries(numbers);
console.log(array); //Kết quả in ra: [ ['one', 1], ['two', 2] ]

Tất nhiên, kết quả sẽ là một mảng 2 chiều. Nếu bạn không thích kiểu mảng 2 chiều lồng nhau như thế kìa thì vẫn có cách khác :) Lúc này bạn sẽ cần kết hợp với phương pháp destructuring để tách chúng.

const numbers = {
  one: 1,
  two: 2
};

const objectArray = Object.entries(numbers);

objectArray.forEach(([key, value]) => {
  console.log(key); // 'one'
  console.log(value); // 1
});

Thật tuyệt vời phải không?!

Tạm kết

Trong các phương pháp trên thì sử dụng Object.key là tốt nhất. Tại sao? Vì nó support tất cả các trình duyệt, bao gồm cả IE thần thánh. Hoặc bạn có thể quay trở lại với phương pháp thủ công mà mình đã trình bày ở đầu bài viết.