La autora del artículo, una traducción de la cual estamos publicando hoy, dice que uno de los temas del podcast
Syntax FM , que dio una visión general de los métodos útiles de objetos y matrices en JavaScript, impulsó su idea. Estos métodos ayudan a los desarrolladores a escribir código limpio y legible. Su uso reduce la necesidad de bibliotecas de terceros como
Lodash .
Array.prototype.filter ()
El método
Array.prototype.filter () crea una nueva matriz en la que solo caen los elementos de la matriz original que coinciden con la condición especificada.
▍ Ejemplo
Sobre la base de una matriz que contiene información sobre los estudiantes, crearemos una nueva matriz en la que se incluirán registros solo sobre aquellos estudiantes cuya edad les permite comprar alcohol.
const studentsAge = [17, 16, 18, 19, 21, 17]; const ableToDrink = studentsAge.filter( age => age > 18 );
Array.prototype.map ()
El método
Array.prototype.map () le permite crear una nueva matriz basada en valores procesados de alguna manera de otra matriz. Este método es excelente para modificar datos; debido al hecho de que no realiza cambios en la matriz original, a menudo se usa en React.
▍ Ejemplo
Según la matriz de números, cree una nueva matriz, al comienzo de cada elemento del cual se colocará el signo
$ .
const numbers = [2, 3, 4, 5]; const dollars = numbers.map( number => '$' + number); // dollars: ['$2', '$3', '$4', '$5']
Array.prototype.reduce ()
El método
Array.prototype.reduce () a menudo se pasa por alto inmerecidamente. Le permite reducir la matriz a un solo valor que se acumula en el elemento receptor. El valor devuelto por este método puede ser de cualquier tipo. Por ejemplo, podría ser un objeto, una matriz, una cadena o un número.
▍ Ejemplo
Usaremos el método
.reduce() para obtener la suma de los elementos de una matriz numérica.
const numbers = [5, 10, 15]; const total = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue);
De hecho, este método puede usarse de muchas maneras interesantes. Se pueden encontrar ejemplos relevantes en la
documentación de MDN . En particular, estamos hablando de expandir matrices de matrices, agrupar objetos por propiedades y eliminar elementos duplicados de las matrices.
Array.prototype.forEach ()
El método
Array.prototype.forEach () aplica la función que se le pasa a cada elemento de la matriz.
▍ Ejemplo
Aquí se explica cómo generar cada elemento de la matriz en la consola utilizando el método
.forEach() .
const emotions = ['happy', 'sad', 'angry']; emotions.forEach( emotion => console.log(emotion) ); // : // 'happy' // 'sad' // 'angry'
Array.prototype.some ()
El método
Array.prototype.some () comprueba si al menos un elemento de la matriz coincide con la condición especificada por la función que se le pasa. Este método, por ejemplo, puede mostrarse bien al resolver la tarea de verificar los privilegios del usuario. Se puede considerar como un análogo del
.forEach() considerado anteriormente, con la diferencia de que, cuando se usa con la ayuda de la función que se le pasa, es posible realizar ciertas acciones en los elementos de la matriz hasta que esta función devuelva el valor verdadero, luego interrumpir el procesamiento.
▍ Ejemplo
Compruebe si la matriz contiene al menos una cadena de
admin .
const userPrivileges = ['user', 'user', 'user', 'admin']; const containsAdmin = userPrivileges.some( element => element === 'admin');
Array.prototype.every ()
El método
Array.prototype.every () es similar al método
.some() descrito anteriormente, pero devuelve
true solo si todos los elementos de la matriz cumplen la condición especificada por la función pasada a este método.
▍ Ejemplo
Compruebe si todas las estimaciones almacenadas en la matriz son iguales o mayores que 3.
const ratings = [3, 5, 4, 3, 5]; const goodOverallRating = ratings.every( rating => rating >= 3 );
Array.prototype.includes ()
El método
Array.prototype.includes () le permite saber si una matriz contiene un valor dado. Es similar al método
.some() , pero no comprueba si los elementos de la matriz coinciden con una determinada condición, sino más bien si la matriz contiene el valor especificado cuando se llamó.
▍ Ejemplo
Compruebe si hay un elemento de cadena
waldo en la matriz:
const names = ['sophie', 'george', 'waldo', 'stephen', 'henry']; const includesWaldo = names.includes('waldo');
Array.from ()
El método estático
Array.from () le permite crear matrices basadas en otras matrices o cadenas. Si es necesario, este método puede pasar una función para realizar el mapeo, lo que le permite influir en los datos que caerán en la nueva matriz. De hecho, se proporciona un método especial para la asignación:
Array.prototype.map () , por lo que no está del todo claro por qué alguien podría necesitar esta función del método
Array.from() .
▍ Ejemplo
Crea una matriz basada en la cadena.
const newArray = Array.from('hello'); // newArray ['h', 'e', 'l', 'l', 'o']
Cree una matriz que contenga valores duplicados de los elementos de la matriz numérica original.
const doubledValues = Array.from([2, 4, 6], number => number * 2);
Object.values ()
El método
Object.values () devuelve una matriz de valores de propiedad del objeto que se le pasa.
▍ Ejemplo
Formamos una matriz de valores de propiedad de objeto.
const icecreamColors = { chocolate: 'brown', vanilla: 'white', strawberry: 'red', } const colors = Object.values(icecreamColors); // colors ["brown", "white", "red"]
Object.keys ()
El método
Object.keys () devuelve una matriz que consta de nombres de propiedad de objeto (claves).
▍ Ejemplo
Formaremos una matriz de nombres de propiedades de objeto.
const icecreamColors = { chocolate: 'brown', vanilla: 'white', strawberry: 'red', } const types = Object.keys(icecreamColors); // types: ["chocolate", "vanilla", "strawberry"]
Object.entries ()
El método
Object.entries () devuelve, después de procesar el objeto que se le pasó, una matriz que contiene matrices que son pares de la forma
[, ] , que son nombres de propiedades y valores de estas propiedades.
▍ Ejemplo
Formamos una matriz que contiene, para el objeto que nos interesa, datos sobre los nombres de las propiedades y sus valores.
const weather = { rain: 0, temperature: 24, humidity: 33, } const entries = Object.entries(weather); // entries // [['rain', 0], ['temperature', 24], ['humidity', 33]]
Operador de extensión y matrices
El operador de extensión (operador de
propagación , ...), tal como se aplica a las matrices, le permite expandirlas extrayendo sus elementos de ellas. Este operador es útil, por ejemplo, cuando necesita combinar varias matrices. Además, su uso elimina la necesidad de usar el método
.splice() si necesita eliminar algunos elementos de la matriz, ya que se puede combinar con el método
.slice() , lo que evita cambiar la matriz original.
▍ Ejemplo
Combina las dos matrices.
const spreadableOne = [1, 2, 3, 4]; const spreadableTwo = [5, 6, 7, 8]; const combined = [...spreadableOne, ...spreadableTwo]; // combined : [1, 2, 3, 4, 5, 6, 7, 8]
Formamos una nueva matriz, que es la matriz original de la que se eliminó el elemento. En este caso, la matriz original no debe cambiarse.
const animals = ['squirrel', 'bear', 'deer', 'salmon', 'rat']; const mammals = [...animals.slice(0,3), ...animals.slice(4)]; // mammals : ['squirrel', 'bear', 'deer', 'rat']
Operador de extensión y objetos
La aplicación del operador de extensión a los objetos le permite agregarles nuevas propiedades y valores sin cambiar los objetos originales (es decir, se crean nuevos objetos como resultado de tales operaciones). Además, este operador se puede utilizar para combinar objetos. Vale la pena señalar aquí que el operador de extensión aplicado a un objeto no afecta a los objetos anidados en él.
▍ Ejemplo
Cree un nuevo objeto agregando una nueva propiedad al objeto original sin cambiar el objeto original.
const spreadableObject = { name: 'Robert', phone: 'iPhone' }; const newObject = { ...spreadableObject, carModel: 'Volkswagen' }
La sintaxis de los parámetros de función restantes
Al trabajar con funciones, puede usar la
sintaxis de los parámetros restantes para organizar la recepción de cualquier número de argumentos en forma de matriz.
▍ Ejemplo
Imprimimos una matriz que contiene los argumentos pasados a la función.
function displayArgumentsArray(...theArguments) { console.log(theArguments); } displayArgumentsArray('hi', 'there', 'bud');
Object.freeze ()
El método
Object.freeze () "congela" un objeto, evitando que las propiedades existentes de este objeto cambien o agreguen nuevas propiedades y valores al objeto. Existe la idea errónea de que este método es similar a declarar objetos usando la palabra clave
const , sin embargo, los objetos constantes pueden modificarse.
▍ Ejemplo
"Congelamos" un objeto, después de lo cual tratamos de cambiar su propiedad y nos aseguramos de que esto no se pueda hacer.
const frozenObject = { name: 'Robert' } Object.freeze(frozenObject); frozenObject.name = 'Henry'; // frozenObject , { name: 'Robert' }
Object.seal ()
El método
Object.seal () le permite "sellar" el objeto, evitando la adición de nuevas propiedades. Al mismo tiempo, las propiedades existentes se pueden cambiar.
▍ Ejemplo
"Sellamos" el objeto, lo que no nos permitirá agregarle una nueva propiedad, pero permitirá cambiar las propiedades existentes.
const sealedObject = { name: 'Robert' } Object.seal(sealedObject); sealedObject.name = 'Bob'; sealedObject.wearsWatch = true; // sealedObject : { name: 'Bob' }
Object.assign ()
El método
Object.assign () le permite combinar objetos copiando propiedades de un objeto a otro. De hecho, se puede lograr el mismo efecto utilizando el operador de expansión descrito anteriormente, por lo que se puede prescindir completamente de este método. Cabe señalar que este método, como el operador de extensión, no realiza una clonación profunda de objetos. Si necesita una herramienta preparada para la clonación profunda de objetos, eche un vistazo a las herramientas de la biblioteca
Lodash .
▍ Ejemplo
Creemos uno a partir de dos objetos.
const firstObject = { firstName: 'Robert' } const secondObject = { lastName: 'Cooper' } const combinedObject = Object.assign(firstObject, secondObject);
Resumen
En este artículo, hablamos sobre métodos útiles de matrices y objetos en JavaScript. Muchos de los métodos discutidos aquí devuelven nuevas matrices u objetos. Esto hace posible combinarlos en cadenas. Estos métodos no modifican los datos de origen, lo cual es especialmente importante en el desarrollo de React. Además, el uso de estos métodos, en la gran mayoría de los casos, le permite abandonar bucles como
for while .
Estimados lectores! ¿Qué métodos de matrices y objetos en JavaScript utiliza con más frecuencia?
