Biến Object thành Array trong Javascript với ES7
Bài đăng này đã không được cập nhật trong 4 năm
Trả là hôm nọ mình có đọc qua một số tài liệu về ES7
và thấy có một số tính mới khá là hay và tiện ích, đặc biệt là 2 method
mới giúp chúng ta biến một Object
thành một Array
chỉ trong một nốt nhạc . Không dài dòng văn tự nữa, hay xem 2 method
này hữu ích như thế nào nhé .
Khi không có ES7
...
Trước khi đi vào tìm hiểu 2 method
thần thánh như đã giới thiệu thì mình muốn cho các bạn thấy việc biến biến một Object
thành Array
khi chưa có ES7
nó khổ sở như thế nào .
1. Dưới đây là một ví dụ khi các bạn muốn lấy ra các key
của một Object
rồi cho vào một Array
.
Khi không có ES6
:
const object = {
prop1: 1,
prop2: 2
};
const objectKeys = [];
for (let objectKey in object) {
objectKeys.push(objectKey);
}
console.log(objectKeys); // *** Array ["prop1", "prop2"]
Với ES6
: Cho những ai chưa biết thì Object.keys
sẽ trả về một mảng chứa các key
của một Object
nhé.
const object = {
prop1: 1,
prop2: 2
};
const objectKeys = Object.keys(object);
console.log(objectKeys); // *** Array ["prop1", "prop2"]
2. Một ví dụ nữa khi các bạn muốn lấy ra tất cả các giá trị của một Object
và cho vào một Array
.
Khi không có ES6
:
const object = {
prop1: 1,
prop2: 2
};
const objectValues = [];
for (let objectKey in object) {
objectValues.push(object[objectKey]);
}
console.log(objectValues); // *** Array [1, 2]
Đây là khi ES6
và cuộc, và tình hình cũng không tốt hơn là mấy .
const object = {
prop1: 1,
prop2: 2
};
var objectValues = [];
Object.keys(object).forEach(objectKey => {
objectValues.push(object[objectKey]);
});
console.log(objectValues); // *** Array [1, 2]
Tuy không hề khó viết chút nào, những những cách trên khá là dài dòng. Không biết các bạn thấy thế nào, nhưng việc viết lại một function
để biến một Object
thành một Array
cho mỗi dự án mới thực sự là một cực hình đối với mình.
Và rồi ES7
xuất hiện...
Mọi thứ trở nên dễ dàng hơn rất rất rất rất ... nhiều .
Object.values
Method
này sẽ đưa tất cả giá trị của một Object
vào một Array
.
const object = {
prop1: 1,
prop2: 2
};
const objectValues = Object.values(object);
console.log(objectValues); // *** Array [1, 2]
Object.entries
Method
thứ 2 sẽ biến một Object
vào một Array
theo đúng nghĩa đen luôn . Hơi khó giải thích, các bạn hãy xem ví dụ phía dưới để xem cách nó hoạt động nhé.
const object = {
prop1: 1,
prop2: 2
};
const objectValues = Object.entries(object);
console.log(objectValues); // Array [["prop1", 1], ["prop2", 2]]
method
này cực kỳ hữu dụng khi bạn kết hợp nó với Array destructuring
trong ES6
.
const object = {
prop1: 1,
prop2: 2
};
const objectInArray = Object.entries(object);
objectInArray.forEach(([key, value]) => {
console.log(key);
console.log(value);
});
/*
*** kết quả:
prop1
1
prop2
2
*/
Lời kết
Các bạn thấy thế nào, 2 method
mới này quả là hữu ích phải không , vừa ngắn gọn, vừa dễ dùng. Có điều là chúng không được nhiều trình duyệt hỗ trợ đâu nhé !. Những đây cũng không phải là một vấn đề quá lớn khi mà các các bạn hoàn toàn có thể dùng Babel
để thêm polyfill
cho 2 method
này. Vậy thôi, chúc các bạn một ngày vui vẻ, nếu thấy hay thì các bạn hãy cho mình một like và share nhé. Bye .
All rights reserved
Bình luận