Colecciones de datos en JavaScript

Arrays

AsuntoExplicación
ArraySon como listas que pueden contener una serie de elementos. Estos elementos pueden ser números, textos, o incluso otras listas y objetos. Los arrays son muy útiles porque permiten organizar y almacenar datos de manera eficiente.

            let miArray = [1, 2, 3, "cuatro", "cinco"];
            
Acceder a elementos del arrayPuedes acceder a cualquier elemento de un array utilizando su índice. Los índices en JavaScript comienzan en 0. Por ejemplo, para acceder al primer elemento de miArray, usarías miArray[0], que devolvería 1.

Métodos para arrays

MétodoExplicación
.push()Este método se utiliza para añadir uno o más elementos al final de un array. Modifica el array original y devuelve la nueva longitud del array.

            let frutas = ['manzana', 'banana'];
            frutas.push('naranja'); // Añade 'naranja' al final del array
            // Ahora frutas es ['manzana', 'banana', 'naranja']
            
.pop()Este método elimina el último elemento de un array y lo devuelve. Este método cambia la longitud del array.

            let numeros = [1, 2, 3];
            let ultimoNumero = numeros.pop(); // Elimina y devuelve 3
            // Ahora numeros es [1, 2] y ultimoNumero es 3
            
.slice()Se utiliza para crear una copia de una parte de un array, o para seleccionar una sección de un array y devolverla como un nuevo array, sin modificar el array original. Es una herramienta útil cuando necesitas trabajar con solo una parte de un array o cuando quieres evitar alterar el array original.
Sintáxis básica de .slice()inicio (opcional): El índice en el que comienza la extracción. Si se omite, .slice() empieza desde el inicio del array (índice 0).
Sintáxis básica de .slice()fin (opcional): El índice antes del cual se detiene la extracción. El elemento en este índice no se incluye. Si se omite, .slice() extrae hasta el final del array.
Crear una copia completaSi usas .slice() sin argumentos, crea una copia completa del array.

            let numeros = [1, 2, 3, 4, 5];
            let copiaNumeros = numeros.slice();
            // copiaNumeros es [1, 2, 3, 4, 5]
            
Seleccionar una parte del arrayPuedes especificar desde qué índice empezar y hasta cuál llegar. En el siguiente ejemplo, .slice(1, 3) empieza en el índice 1 (incluyendo 'banana') y extrae hasta el índice 3 (sin incluir 'dátil').

            let frutas = ['manzana', 'banana', 'cereza', 'dátil'];
            let frutasSeleccionadas = frutas.slice(1, 3);
            // frutasSeleccionadas es ['banana', 'cereza']
            
Índices negativosSi usas índices negativos, .slice() cuenta hacia atrás desde el final del array. En el siguiente ejemplo, .slice(-3) extrae los últimos tres elementos del array.

            let numeros = [1, 2, 3, 4, 5];
            let parteNumeros = numeros.slice(-3);
            // parteNumeros es [3, 4, 5]
            
forEachEs utilizado para ejecutar una función en cada elemento de un array. Es una forma de iterar sobre un array, es decir, pasar por cada uno de sus elementos para realizar alguna operación. Este método es muy útil para aplicar una misma acción a todos los elementos de un array de manera sencilla y clara.
Sintáxis básicaarray.forEach(function(elemento, indice, arr) { ... })
Sintáxis básicaelemento: El elemento actual del array que se está procesando. indice (opcional): El índice del elemento actual en el array. arr (opcional): El array sobre el cual se llama forEach()
Ejemplo de usoSupongamos que tienes un array de números y quieres imprimir cada número en la consola. El siguiente código imprimirá cada número del array numeros en la consola.

            let numeros = [1, 2, 3, 4, 5];
            numeros.forEach(function(numero) {
                console.log(numero);
            });
            
Funciones flechaCon las funciones flecha de ES6, puedes escribir el mismo código de manera más concisa.

            let numeros = [1, 2, 3, 4, 5];
            numeros.forEach(numero => console.log(numero));
            
.map()Se utiliza para transformar los elementos de un array. Este método te permite crear un nuevo array tomando el array original y aplicando una función a cada uno de sus elementos. Es una herramienta muy poderosa y útil en la programación funcional y en situaciones donde necesitas modificar o transformar los datos en un array.
Sintáxis básicaarray.map(function(elemento, indice, arr) { ... })
Sintáxis básicaelemento: El elemento actual del array que se está procesando. indice (opcional): El índice del elemento actual en el array. arr (opcional): El array sobre el cual se llama .map()
Ejemplo de usoImagina que tienes un array de números y quieres crear un nuevo array con cada número multiplicado por dos. Aquí, .map() toma cada número del array numeros, lo multiplica por dos y retorna un nuevo array con estos valores.

            let numeros = [1, 2, 3, 4, 5];
            let dobles = numeros.map(function(numero) {
                return numero * 2;
            });
            // dobles es ahora [2, 4, 6, 8, 10]
            
Funciones flechaCon las funciones flecha de ES6, puedes escribir el mismo código de manera más concisa.

            let numeros = [1, 2, 3, 4, 5];
            let dobles = numeros.map(numero => numero * 2);
            
.filter()Se utiliza para crear un nuevo array con todos los elementos que cumplen una condición especificada por una función. Es muy útil cuando necesitas seleccionar un subconjunto de elementos de un array basándote en ciertos criterios. .filter() es una de las herramientas clave en la programación funcional dentro de JavaScript, ya que permite manejar datos de manera eficiente y declarativa.
Sintáxis básicaarray.filter(function(elemento, indice, arr) { ... })
Sintáxis básicaelemento: El elemento actual del array que se está procesando. indice (opcional): El índice del elemento actual en el array. arr (opcional): El array sobre el cual se llama .filter()
Ejemplo de usoSupongamos que tienes un array de números y solo quieres mantener los números que son mayores que 3. Aquí, .filter() revisa cada número en el array numeros. Si el número es mayor que 3, lo incluye en el nuevo array mayoresQueTres.

            let numeros = [1, 2, 3, 4, 5];
            let mayoresQueTres = numeros.filter(function(numero) {
                return numero > 3;
            });
            // mayoresQueTres es ahora [4, 5]
            
Funciones flechaCon las funciones flecha de ES6, puedes escribir el mismo código de manera más concisa.

            let numeros = [1, 2, 3, 4, 5];
            let mayoresQueTres = numeros.filter(numero => numero > 3);
            
.find()Se utiliza para buscar en un array y encontrar el primer elemento que cumpla con una condición especificada en una función de prueba. A diferencia de .filter(), que devuelve un array con todos los elementos que cumplen la condición, .find() devuelve el primer elemento que la satisface, o undefined si ningún elemento cumple la condición. Este método es útil cuando solo necesitas encontrar un solo elemento en un array basado en algún criterio.
Sintáxis básicaarray.find(function(elemento, indice, arr) { ... })
Sintáxis básicaelemento: El elemento actual del array que se está procesando. indice (opcional): El índice del elemento actual en el array. arr (opcional): El array sobre el cual se llama .find()
Ejemplo de usoImagina que tienes un array de objetos que representan a personas, y quieres encontrar a la primera persona que tenga más de 30 años. En este caso, .find() devuelve el primer objeto en el array personas cuya propiedad edad es mayor que 30.

            let personas = [
                { nombre: "Ana", edad: 25 },
                { nombre: "Juan", edad: 32 },
                { nombre: "Luisa", edad: 28 }
            ];
            let mayorDeTreinta = personas.find(function(persona) {
                return persona.edad > 30;
            });
            // mayorDeTreinta es ahora { nombre: "Juan", edad: 32 }
            
Funciones flechaCon las funciones flecha de ES6, puedes escribir el mismo código de manera más concisa.

            let personas = [
                { nombre: "Ana", edad: 25 },
                { nombre: "Juan", edad: 32 },
                { nombre: "Luisa", edad: 28 }
            ];
            let mayorDeTreinta = personas.find(persona => persona.edad > 30);
            
.includes()Se utiliza para verificar si un array o string contiene un elemento o valor específico. Retorna true si el elemento está presente y false si no lo está. Este método es muy útil para comprobar rápidamente la presencia de un valor en un array o string sin la necesidad de un bucle.
Sintáxis básicaarray.includes(elemento)
Sintáxis básicaelemento: El valor que quieres comprobar si está presente en el array.
Ejemplo de usoSupongamos que tienes un array de números y quieres verificar si el número 3 está incluido en él. En este caso, .includes(3) devuelve false porque el número 3 no está en el array numeros.

            let numeros = [1, 2, 4, 5];
            let contieneTres = numeros.includes(3); // false
            
.some()Se utiliza para verificar si al menos uno de los elementos de un array cumple con una condición especificada en una función de prueba. Retorna true si la condición se cumple para al menos un elemento del array, y false en caso contrario. Este método es útil cuando necesitas comprobar si un array contiene algún elemento que satisface una determinada condición.
Sintáxis básicaarray.find(function(elemento, indice, arr) { ... })
Sintáxis básicaelemento: El elemento actual del array que se está procesando. indice (opcional): El índice del elemento actual en el array. arr (opcional): El array sobre el cual se llama .some()
Ejemplo de usoImagina que tienes un array de números y quieres saber si al menos uno de ellos es mayor que 10. Aquí, .some() evalúa cada elemento del array numeros. Retorna true porque encuentra que 12 cumple la condición de ser mayor que 10.

            let numeros = [1, 5, 8, 12, 4];
            let existeMayorQueDiez = numeros.some(function(numero) {
                return numero > 10;
            });
            // existeMayorQueDiez es true porque 12 es mayor que 10
            
Funciones flechaCon las funciones flecha de ES6, puedes escribir el mismo código de manera más concisa.

            let numeros = [1, 5, 8, 12, 4];
            let existeMayorQueDiez = numeros.some(numero => numero > 10);
            
.split()Es utilizado para dividir un string (cadena de texto) en un array de subcadenas, basándose en un separador que se especifica. Este método es muy útil para descomponer un texto largo en partes más pequeñas, como palabras o frases, o para procesar y manipular datos de texto.
Sintáxis básicastring.split(separador, [limite])
Sintáxis básicaseparador: El carácter o patrón que se utiliza para determinar dónde se divide el string. Puede ser un string o una expresión regular. Límite (opcional): Un número que especifica el máximo de divisiones a realizar. El array resultante tendrá a lo máximo este número de elementos.
Ejemplo de usoSi tienes un string de palabras separadas por espacios y quieres obtener un array de estas palabras, en este caso, .split(" ") divide el string frase en cada espacio, resultando en un array de palabras.

            let frase = "Hola mundo, bienvenido a JavaScript";
            let palabras = frase.split(" ");
            // palabras es ahora ["Hola", "mundo,", "bienvenido", "a", "JavaScript"]
            
Uso de .split() en expresiones regularesTambién puedes usar expresiones regulares como separador. Por ejemplo, para dividir un string cada vez que encuentre una coma seguida de un espacio.

            let lista = "manzanas, peras, plátanos, uvas";
            let frutas = lista.split(", ");
            // frutas es ahora ["manzanas", "peras", "plátanos", "uvas"]
            
.toString()Convierte un valor a su representación de string. Disponible en muchos tipos de datos, como números, arrays y objetos.

            let numero = 123;
            let texto = numero.toString(); // "123"
            
.toFixed()Convierte un número a un string, manteniendo un número especificado de decimales. Usualmente se usa con números flotantes.

            let numero = 2.456;
            let texto = numero.toFixed(2); // "2.46"
            
.toPrecision()Convierte un número a un string con una longitud total de dígitos especificados. Útil para controlar la precisión total de un número (dígitos enteros y decimales).

            let numero = 7.12345;
			let texto = numero.toPrecision(4); // "7.123"
            
.toLocaleString()Convierte un número a un string utilizando convenciones de formato locales. Útil para la presentación de números, fechas y otros datos en el formato local del usuario.

            let numero = 123456.789;
            let texto = numero.toLocaleString('es-ES'); // "123.456,789" en un entorno de idioma español
            
.toUpperCase()Convierte un string a mayúsculas.

            let texto = "Hola Mundo";
            let mayusculas = texto.toUpperCase(); // "HOLA MUNDO"
            
.toLowerCase()Convierte un string a minúsculas.

            let texto = "Hola Mundo";
			let minusculas = texto.toLowerCase(); // "hola mundo"
            
.toJSON()Convierte un objeto a un string en formato JSON. Muy usado en la serialización de datos para almacenamiento o transmisión.

            let objeto = { nombre: "Ana", edad: 25 };
            let json = JSON.stringify(objeto); // '{"nombre":"Ana","edad":25}'
            

Métodos para objetos

MétodoExplicación
Object.values()Es un método que se utiliza para obtener los valores de todas las propiedades enumerables de un objeto. Este método devuelve un array que contiene los valores de dichas propiedades. Es especialmente útil cuando necesitas iterar sobre los valores de un objeto o cuando necesitas convertir los valores del objeto en un array.
Sintaxis básicaObject.values(objeto)
objetoEl objeto del cual se extraerán los valores.
Ejemplo de usoSupongamos que tienes un objeto que representa a una persona con varias propiedades y quieres obtener solo los valores de esas propiedades. En este caso, Object.values(persona) devuelve un array que contiene "Ana", 30 y "Ingeniera", que son los valores de las propiedades del objeto persona.

              let persona = {
                  nombre: "Ana",
                  edad: 30,
                  ocupacion: "Ingeniera"
              };

              let valores = Object.values(persona);
              // valores es ahora ["Ana", 30, "Ingeniera"]
              
Object.keys()Es un método que se utiliza para obtener un array que contiene los nombres de todas las propiedades enumerables de un objeto. Este método es útil cuando necesitas trabajar con las claves (o nombres de las propiedades) de un objeto, como por ejemplo para iterar sobre ellas o para realizar alguna operación específica con las claves.
Sintaxis básicaObject.keys(objeto)
objetoEl objeto del cual se extraerán los valores.
Ejemplo de usoSi tienes un objeto que representa a una persona con varias propiedades y quieres obtener los nombres de estas propiedades. Aquí, Object.keys(persona) devuelve un array que contiene "nombre", "edad" y "ocupacion", que son las claves de las propiedades del objeto persona.

              let persona = {
                  nombre: "Ana",
                  edad: 30,
                  ocupacion: "Ingeniera"
              };

              let claves = Object.keys(persona);
              // claves es ahora ["nombre", "edad", "ocupacion"]
              

Objeto Math

AsuntoExplicación
MathProporciona numerosas propiedades y métodos para realizar tareas matemáticas comunes y avanzadas. Estos métodos son funciones estáticas que se pueden usar sin necesidad de crear una instancia de Math.
Math.abs(x)Devuelve el valor absoluto de un número (x)

              Math.abs(-5); // 5
              
Math.ceil(x)Redondea un número hacia arriba al entero más cercano.

              Math.ceil(4.2); // 5
              
Math.floor(x)Redondea un número hacia abajo al entero más cercano.

              Math.floor(4.9); // 4
              
Math.round(x)Redondea un número al entero más cercano.

              Math.round(4.5); // 5
              
Math.max(x)Devuelve el mayor de cero o más números.

              Math.max(1, 3, 2, 8, 4); // 8
              
Math.min(x)Devuelve el menor de cero o más números.

              Math.min(1, 3, 2, 8, 4); // 1
              
Math.pow(x)Devuelve la base x elevada a la potencia y

              Math.pow(2, 3); // 8
              
Math.sqrt(x)Devuelve la raíz cuadrada de un número.

              Math.sqrt(9); // 3
              
Math.random(x)Devuelve un número pseudoaleatorio entre 0 (incluido) y 1 (excluido).

              Math.random(); // un número aleatorio entre 0 y 1
              
Math.sin(x), Math.cos(x), Math.tan(x)Devuelven el seno, coseno y tangente de un ángulo x (en radianes), respectivamente

              Math.sin(Math.PI / 2); // 1
              
Math.log(x)Devuelve el logaritmo natural (log base e) de un número.

              Math.log(Math.E); // 1
              

Constructor Date()

AsuntoExplicación
Date()Es un constructor que se utiliza para crear instancias de objetos Date, los cuales representan un único momento en el tiempo. Estos objetos Date son muy útiles para trabajar con fechas y horas, permitiendo realizar operaciones como obtener la fecha actual, manipular fechas, comparar fechas, entre otras.
Fecha y hora actualPara obtener la fecha y hora actuales.

              let ahora = new Date();
              
Fecha específicaPara crear una fecha específica (año, mes, día, horas, minutos, segundos, milisegundos). Los meses en JavaScript comienzan en 0 (Enero), por lo que 0 corresponde a Enero, 1 a Febrero, y así sucesivamente.

              let fechaEspecifica = new Date(2020, 0, 1, 10, 30, 0, 0); // 1 de enero de 2020, 10:30:00
              
Fecha desde StringPuedes crear un Date a partir de un string de fecha.

              let fechaDesdeString = new Date("2020-01-01T10:30:00");
              
Fecha desde milisegundosTambién puedes crear una fecha a partir de la cantidad de milisegundos desde la Época Unix (1 de enero de 1970).

              let fechaDesdeEpoch = new Date(1577885400000);
              
Métodos como getFullYear(), getMonth(), getDate(), getHours(), getMinutes(), getSeconds()Obtener componentes de la fecha

              let ahora = new Date();
              let año = ahora.getFullYear();
              let mes = ahora.getMonth() + 1; // +1 porque los meses comienzan en 0
              
Métodos como setFullYear(), setMonth(), setDate(), setHours(), setMinutes(), setSeconds()Modificar la fecha.

              ahora.setFullYear(2021);
              ahora.setHours(20);
              
toString(), toLocaleDateString(), toLocaleTimeString()Formato de fecha y hora.

              let fechaComoString = ahora.toString(); // Fecha y hora en formato de string
              let soloFecha = ahora.toLocaleDateString(); // Fecha en formato local
              
getTime()Puedes comparar fechas convirtiéndolas en milisegundos con getTime().

              let fecha1 = new Date(2020, 0, 1);
              let fecha2 = new Date(2021, 0, 1);
              let sonIguales = fecha1.getTime() === fecha2.getTime();
              

Comentarios

Haz comentarios o preguntas acerca de este artículo respetando las normas de la comunidad ¡Les damos la bienvenida!