Một đối tượng là một trong những kiểu dữ liệu được sử dụng phổ biến nhất trong lập trình. Một đối tượng là một tập hợp các dữ liệu có liên quan được lưu trữ dưới dạng các cặp khóa-giá trị. Ví dụ:
let userDetails = {
name: "John Doe",
username: "jonnydoe",
age: 14,
}
Khi làm việc với các đối tượng, bạn có thể cần kiểm tra xem một đối tượng có trống không trước khi thực hiện một chức năng.
Trong JavaScript, có nhiều cách khác nhau để bạn có thể kiểm tra xem một đối tượng có trống không. Trong bài viết này, bạn sẽ tìm hiểu các cách khác nhau để thực hiện việc này, các tùy chọn có thể được đính kèm và lý do tại sao.
Ghi chú: Một đối tượng được coi là trống khi nó không có cặp khóa-giá trị.
Trong trường hợp bạn đang vội, đây là một ví dụ cơ bản:
const myEmptyObj = {};
// Works best with new browsers
Object.keys(myEmptyObj).length === 0 && myEmptyObj.constructor === Object
// Works with all browsers
_.isEmpty(myEmptyObj)
Cả hai phương pháp sẽ trở lại true. Bây giờ chúng ta hãy hiểu những điều này và nhiều tùy chọn khác mà bạn có thể sử dụng để kiểm tra xem một đối tượng có trống trong JavaScript hay không.
Cách kiểm tra xem một đối tượng có trống không với Object.keys()
Các Object.keys() method là một phương thức đối tượng tĩnh được giới thiệu trong ECMAScript6 (ES6) và được hỗ trợ trong tất cả các trình duyệt hiện đại. Phương thức này trả về một mảng với các khóa của một đối tượng. Ví dụ:
let userDetails = {
name: "John Doe",
username: "jonnydoe",
age: 14
};
console.log(Object.keys(userDetails)); // ["name","username","age"]
Với điều này, bây giờ bạn có thể áp dụng .length tài sản. Nếu nó trả về số không (0), đối tượng trống.
let userDetails = {
name: "John Doe",
username: "jonnydoe",
age: 14
};
let myEmptyObj = {};
console.log(Object.keys(userDetails).length); // 3
console.log(Object.keys(myEmptyObj).length); // 0
Bây giờ bạn có thể sử dụng phương pháp này để kiểm tra xem một đối tượng có trống không bằng câu lệnh if hoặc tạo một hàm để kiểm tra.
const isObjectEmpty = (objectName) => {
return Object.keys(objectName).length === 0
}
Điều này sẽ trở lại hoặc true hoặc false. Nếu đối tượng trống, nó sẽ trả về truenếu không, nó sẽ trở lại false.
let userDetails = {
name: "John Doe",
username: "jonnydoe",
age: 14
};
let myEmptyObj = {};
const isObjectEmpty = (objectName) => {
return Object.keys(objectName).length === 0
}
console.log(isObjectEmpty(userDetails)); // false
console.log(isObjectEmpty(myEmptyObj)); // true
Ghi chú: Chỉ kiểm tra độ dài không phải là lựa chọn tốt nhất khi kiểm tra xem một đối tượng có trống hay cho bất kỳ kiểu dữ liệu nào không. Tốt nhất là luôn xác nhận xem loại dữ liệu có đúng không.
Để làm điều này, bạn có thể sử dụng kiểm tra hàm tạo:
const isObjectEmpty = (objectName) => {
return Object.keys(objectName).length === 0 && objectName.constructor === Object;
}
Bằng cách này, bạn có trách nhiệm kiểm tra kỹ lưỡng hơn.
Cho đến nay, mọi thứ đã hoạt động tốt. Nhưng bạn cũng có thể muốn tránh ném một TypeError khi một biến là undefined hoặc một giá trị của null được thông qua thay vì {}. Để khắc phục điều này, bạn có thể thêm một kiểm tra bổ sung:
const isObjectEmpty = (objectName) => {
return (
objectName &&
Object.keys(objectName).length === 0 &&
objectName.constructor === Object
);
};
Trong đoạn mã trên, một kiểm tra bổ sung được thêm vào. Điều này có nghĩa là nó sẽ trở lại hoặc null hoặc undefined nếu nó không phải là một đối tượng rỗng, như trong ví dụ dưới đây:
let userDetails = {
name: "John Doe",
username: "jonnydoe",
age: 14
};
let myEmptyObj = {};
let nullObj = null;
let undefinedObj;
const isObjectEmpty = (objectName) => {
return (
objectName &&
Object.keys(objectName).length === 0 &&
objectName.constructor === Object
);
};
console.log(isObjectEmpty(userDetails)); // false
console.log(isObjectEmpty(myEmptyObj)); // true
console.log(isObjectEmpty(undefinedObj)); // undefined
console.log(isObjectEmpty(nullObj)); // null
Ghi chú: Điều này áp dụng cho các phương thức tĩnh đối tượng khác, nghĩa là bạn có thể sử dụng Object.entries() hoặc Object.values() thay vì Object.keys().
Cách kiểm tra xem một đối tượng có trống không với một for…in Vòng
Một phương pháp khác bạn có thể sử dụng là ES6 for…in vòng. Bạn có thể sử dụng vòng lặp này cùng với hasOwnProperty() phương pháp.
const isObjectEmpty = (objectName) => {
for (let prop in objectName) {
if (objectName.hasOwnProperty(prop)) {
return false;
}
}
return true;
};
Phương thức trên sẽ lặp qua từng thuộc tính đối tượng. Nếu nó tìm thấy một lần lặp, thì đối tượng không trống. Ngoài ra, các hasOwnProperty() sẽ trả về một giá trị boolean cho biết liệu đối tượng có thuộc tính được chỉ định làm thuộc tính của nó hay không.
let userDetails = {
name: "John Doe",
username: "jonnydoe",
age: 14
};
let myEmptyObj = {};
const isObjectEmpty = (objectName) => {
for (let prop in objectName) {
if (objectName.hasOwnProperty(prop)) {
return false;
}
}
return true;
};
console.log(isObjectEmpty(userDetails)); // false
console.log(isObjectEmpty(myEmptyObj)); // true
Cách kiểm tra xem một đối tượng có trống không với JSON.stringify()
Bạn cũng có thể tận dụng JSON.stingify() phương thức, được sử dụng để chuyển đổi giá trị JavaScript thành chuỗi JSON. Điều này có nghĩa là nó sẽ chuyển đổi các giá trị đối tượng của bạn thành một phần của đối tượng. Ví dụ:
let userDetails = {
name: "John Doe",
username: "jonnydoe",
age: 14
};
console.log(JSON.stringify(userDetails));
Output:
"{'name':'John Doe','username':'jonnydoe','age':14}"
Điều này có nghĩa là khi nó là một đối tượng trống, thì nó sẽ trả về "{}". Bạn có thể tận dụng điều này để kiểm tra đối tượng trống.
const isObjectEmpty = (objectName) => {
return JSON.stringify(objectName) === "{}";
};
Điều này sẽ trở lại true nếu đối tượng trống, nếu không false:
let userDetails = {
name: "John Doe",
username: "jonnydoe",
age: 14
};
let myEmptyObj = {};
const isObjectEmpty = (objectName) => {
return JSON.stringify(objectName) === "{}";
};
console.log(isObjectEmpty(userDetails)); // false
console.log(isObjectEmpty(myEmptyObj)); // true
Cách kiểm tra xem một đối tượng có trống không với Lodash
Cuối cùng, một số phương pháp tôi đã giải thích ở đây có thể hoạt động với các phiên bản trình duyệt cũ hơn, trong khi các phương pháp khác có thể không hoạt động. Nếu bạn lo lắng về một giải pháp sẽ hoạt động cho cả phiên bản trình duyệt cũ và hiện đại, bạn có thể sử dụng Lodash.
Lodash là một thư viện tiện ích JavaScript hiện đại có thể thực hiện nhiều chức năng JavaScript với cú pháp rất cơ bản.
Ví dụ, nếu bạn muốn kiểm tra xem một đối tượng có trống không, bạn chỉ cần sử dụng phương thức “isEmpty”.
_.isEmpty(objectName);
Cài đặt Lodash vào dự án của bạn khá dễ dàng. Tất cả những gì bạn phải làm là sử dụng lệnh này:
$ npm install lodash
Bây giờ bạn có thể khởi tạo phương thức gạch dưới và sử dụng phương thức này.
const _ = require('lodash');
let userDetails = {
name: "John Doe",
username: "jonnydoe",
age: 14
};
let myEmptyObj = {};
const isObjectEmpty = (objectName) => {
return _.isEmpty(objectName);
};
console.log(isObjectEmpty(userDetails)); // false
console.log(isObjectEmpty(myEmptyObj)); // true
Đó là nó! 💪
Tôi rất thích khám phá nhiều cách khác nhau mà bạn có thể kiểm tra xem một đối tượng có trống không. Vui lòng sử dụng phương pháp tốt nhất phù hợp với dự án hoặc nhiệm vụ của bạn.
Hãy mã hóa vui vẻ!
