() translation by (you can also view the original English article)
En este artículo rápido, te mostraré cómo puedes comprobar si un objeto está vacío en JavaScript.
Durante tu desarrollo diario con JavaScript, es posible que necesites comprobar si un objeto está vacío o no. Y si has tenido que hacer esto, probablemente sepas que no existe una única solución directa. Sin embargo, existen diferentes técnicas que puedes usar para crear una solución personalizada para tu propio caso. Además de eso, si estás utilizando una biblioteca de utilidad de JavaScript en tu proyecto, existe la posibilidad de que dicha biblioteca ya proporcione un método integrado para comprobar si un objeto está vacío.
La manera anterior a ES5
En esta sección analizaremos una solución que funcionaría incluso con navegadores más antiguos. Este método se usaba con frecuencia antes de la era de JavaScript ES5, cuando no habían métodos integrados disponibles para comprobar si un objeto está vacío.
Revisemos el siguiente ejemplo.
1 |
function isEmptyObject(obj) { |
2 |
for (var property in obj) { |
3 |
if (obj.hasOwnProperty(property)) { |
4 |
return false; |
5 |
}
|
6 |
}
|
7 |
|
8 |
return true; |
9 |
}
|
10 |
|
11 |
console.log(isEmptyObject({})); // output: true |
12 |
console.log(isEmptyObject({"foo":"1"})); // output: false |
En el ejemplo anterior, hemos creado una función personalizada que puedes llamar para comprobar si un objeto está vacío. Recibe un único argumento, y debes enviar un objeto que quieras verificar. En la función isEmptyObject, intentamos recorrer las propiedades del objeto mediante un bucle. Si el objeto tiene alguna propiedad, devolveremos FALSE; de lo contrario devolveremos TRUE.
Puedes continuar y probar la función isEmptyObject con diferentes valores. Como se muestra en el ejemplo anterior, hemos llamado a dicha función con diferentes valores y registramos la salida con la función console.log.
Así es como puedes comprobar si un objeto está vacío en navegadores que no son compatibles con la edición ES5. En la siguiente sección analizaremos el procedimiento en el contexto de los navegadores modernos.
Las maneras posteriores a ES5
En esta sección analizaremos los diferentes métodos que puedes utilizar en los navegadores modernos que son compatibles con la edición ES5.
1. Object.keys()
El método Object.keys() devuelve una matriz de nombres de propiedad enumerables de un objeto dado. Y así, podemos usarlo para comprobar si un objeto tiene propiedades calculando la longitud de esta matriz.
Echemos un vistazo al siguiente ejemplo.
1 |
function isEmptyObject(obj) { |
2 |
return Object.keys(obj).length === 0; |
3 |
}
|
4 |
|
5 |
console.log(isEmptyObject({})); // output: true |
6 |
|
7 |
var bar = {"foo": "1"}; |
8 |
console.log(Object.keys(bar).length); // output: 1 |
9 |
console.log(isEmptyObject(bar)); // output: false |
Como puedes ver en el ejemplo anterior, el objeto bar tiene adjunta la propiedad foo y, por lo tanto, la expresión bar.keys(obj).length devolvería un valor mayor que cero. Entonces, en este caso la función isEmptyObject devolvería FALSE.
Continúa y prueba la función isEmptyObject con diferentes valores.
2. Object.getOwnPropertyNames()
El método Object.getOwnPropertyNames() devuelve una matriz de todas las propiedades de un objeto determinado. Aunque puede parecer idéntico al método Object.keys(), existe una diferencia. El método Object.getOwnPropertyNames() también considera las propiedades no enumerables, mientras que Object.keys() solamente considera las propiedades enumerables. La mayoría de las veces estos métodos serán equivalentes, pero existe el riesgo de que Object.keys() omita ciertas propiedades que hayan sido declaradas como no enumerables.
Revisemos el siguiente ejemplo.
1 |
function isEmptyObject(obj) { |
2 |
return Object.getOwnPropertyNames(obj).length === 0; |
3 |
}
|
4 |
|
5 |
console.log(isEmptyObject({})); // output: true |
6 |
|
7 |
var bar = {"foo": "1"}; |
8 |
console.log(Object.getOwnPropertyNames(bar).length); // output: 1 |
9 |
console.log(isEmptyObject(bar)); // output: false |
Como puedes ver, la comprobación para saber si un objeto está vacío con Object.getOwnPropertyNames() funciona de manera similar al uso de Object.keys().
3. JSON.stringify
El método JSON.stringify se usa para convertir un objeto JavaScript a una cadena JSON. Por lo tanto, podemos usarlo para convertir un objeto a una cadena, y podemos comparar el resultado con {} para comprobar si el objeto dado está vacío.
Revisemos el siguiente ejemplo.
1 |
function isEmptyObject(obj){ |
2 |
return JSON.stringify(obj) === '{}'; |
3 |
}
|
4 |
|
5 |
console.log(isEmptyObject({})); // output: true |
6 |
|
7 |
var bar = {"foo":"1"}; |
8 |
console.log(JSON.stringify(bar)); // output: {"foo":"1"} |
9 |
console.log(isEmptyObject(bar)); // output: false |
4. Object.entries()
El método Object.entries() devuelve una matriz de matrices, y cada elemento es una matriz de pares clave-valor de la propiedad de un objeto.
Revisemos el siguiente ejemplo para comprender cómo funciona exactamente.
1 |
function isEmptyObject(obj) { |
2 |
return Object.entries(obj).length === 0; |
3 |
}
|
4 |
|
5 |
console.log(isEmptyObject({})); // output: true |
6 |
|
7 |
var bar = {"foo":"1"}; |
8 |
console.log(Object.entries(bar)); // output: [['foo', '1']] |
9 |
console.log(Object.entries(bar).length); // output: 1 |
10 |
console.log(isEmptyObject(bar)); // output: false |
Como puedes ver, el método Object.entries() convierte un objeto a una matriz, y podemos calcular la longitud de esa matriz para comprobar si el objeto en cuestión está vacío.
Continúa y prueba la función isEmptyObject usando diferentes valores.
La manera con jQuery
Es realmente sencillo comprobar si un objeto está vacío si ya estás usando la biblioteca jQuery en tu proyecto, debido a que la biblioteca jQuery ya proporciona el método isEmptyObject, que te permite comprobar si un objeto está vacío.
Revisemos rápidamente el siguiente ejemplo.
1 |
jQuery.isEmptyObject({}); // true |
2 |
jQuery.isEmptyObject({"foo":"1"}); // false |
Como puedes ver, usar el método isEmptyObject con jQuery es bastante sencillo.
De manera similar, las bibliotecas Lodash y Underscore.js tienen _.isEmpty().
Conclusión
En este artículo, analizamos varias formas diferentes para comprobar si un objeto está vacío o no en JavaScript. ¡Consulta algunos de nuestros otros tutoriales sobre la programación en JavaScript!
HTML5Los 19 mejores motores y plantillas de juegos en HTML5 y JavaScript
HTML5Los 15 mejores reproductores de video en HTML5 y JavaScript (además de los 5 mejores reproductores gratuitos)
JavaScriptCómo usar map, filter y reduce en JavaScript
JavaScriptCómo crear un visor de PDF en JavaScript- JavaScriptCómo crear un visor de PDF en JavaScript
