Làm thế nào kiểm tra object đang rỗng trong JS

Hôm nay mình sẽ giới thiệu đến các bạn cách để kiểm tra một object rỗng hoặc kiểm tra object không chứa bất kỳ một thuộc tính nào bằng Js thuần nhé. Okie, let’s go.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// plain js cho đa số trình duyệt hiện nay
function isObjectEmpty(obj) {
return (obj && Object.keys(obj).length === 0 && obj.constructor === Object);
}

isObjectEmpty({}); // -> kết quả true

// plain js cho vài trình duyệt cũ
// null và undefined sẽ cho ra [object Null] và [object Undefined]
// new Object() sẽ thành [object Object] nhưng vì check JSON.stringify nên sẽ biết nó có rỗng hay không
function isObjectEmpty2(obj) {
return (Object.prototype.toString.call(obj) === '[object Object]' && JSON.stringify(obj) === '{}')
}

// dùng jquery
$.isEmptyObject({}); // kết quả true

// dùng lodash/underscore
_.isEmpty({}); // kết quả true

Tại sao cần check obj &&

Đơn giản là vì để tránh bị null và undefined. Khi gặp null và undefined thì return false ngay lập tức. Nhưng thực ra mục đích chính là để tránh bị lỗi TypeError: Cannot covert undefined or null ot object. 😂😂😂

Tại sao cần check constructor

Có thể bạn sẽ thấy sao lằng nhằng, gì mà check constructor làm gì nữa vậy. 🙄🙄🙄
obj.constructor === Object
Object.prototype.toString.call(obj) === '[object Object]'
Thật ra trong JS có tận 9 objects, nên chúng ta cần check như vậy để biết chính xác cái chúng ta cần check:

1
2
3
4
5
6
7
8
new Object();
new String();
new Number();
new Boolean();
new Array();
new RegExp();
new Function();
new Date();

Ngoại trừ cái đầu tiên chúng ta cần để check (new Object(), 8 cái còn lại là những cái không mong đợi. Vì khi 8 cái này bỏ vào Object.keys() thì kết quả nhận về là một array rỗng, mà array rỗng === 0 là true rồi còn gì. 😱😱😱

1
2
3
Object.keys(new String()).length === 0; // => true
Object.keys(new Number()).length === 0; // => true
// ...

Vậy nên chốt lại chúng ta cần check constructor tại đây, để biết chính xác liệu có đúng là object hay không nhé. 👌👌👌

Tóm lại

Nếu dùng thư viện, nó sẽ cover phần trình duyệt mới cũ cho bạn, bạn khỏi lăng tăng. Nhưng với app nhỏ thì như vậy phụ thuộc quá, nặng chương trình thêm. Tự code thì cần chú ý chút thôi là ổn cả. Vậy nhé, happy coding. =))))

 Comments
Comment plugin failed to load
Loading comment plugin