10. Arrays | my

Un array es un tipo de estructura de datos, objeto. Puede guardar datos distintos dentro, guarda datos en forma de lista (del mismo tipo).

Métodos

En los arrays tenemos algo llamado métodos que básicamente su función será ayudar a manipular los datos dentro del array.

Ejemplos métodos

.lenght() Devuelve la longitud del array.
.push() Agrega elementos al final de array.
.pop() Elimina el ultimo elemento del array.
.unshift() Agrega un elemento al array, pero lo agrega en primer lugar.
.shift() Elimina el elemento que esta al inicio del array.
.indexof() Devuelve la posición de un elemento del array.

Sintaxis de un Array

var nombre = ["Objeto 1", "Objeto 2", "Objeto 3"];

Métodos de recorridos de Arrays

Los arrays (también llamados arreglos o matrices) cuentan con muchos métodos. Para hacer las cosas más sencillas, en este capítulo se encuentran divididos en dos partes.

.filter

Nos permite filtrar solo los elementos que deseamos (según ciertos criterios) y devolverlos en un nuevo array.
Nos ayudara a filtrar cosas especificas de nuestro array generando un nuevo array.
Devuelve todos los elementos del array que cumplan con la condición dada.
El método filter () devuelve los valores coincidentes en una matriz de la colección. Verificará todos los valores de la colección y devolverá los valores coincidentes en una matriz.

Ejemplo:

var articulos = [
	{nombre: "Bici", costo: 3000},
	{nombre: "TV", costo: 2500},
	{nombre: "Libro", costo: 320},
	{nombre: "Celular", costo: 10000},
	{nombre: "Laptop", costo: 20000},
	{nombre: "Teclado", costo: 500},
	{nombre: "Audifono", costo: 1700},
];

var encuentraArticulo = articulos.find(function(articulo){
	return articulo.nombre === "Laptop"
});

.map

Crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos.
Nos permite mapear todo el contenido del array y nos trae lo que queremos en otro array.

Ejemplo:

var articulos = [
	{nombre: "Bici", costo: 3000},
	{nombre: "TV", costo: 2500},
	{nombre: "Libro", costo: 320},
	{nombre: "Celular", costo: 10000},
	{nombre: "Laptop", costo: 20000},
	{nombre: "Teclado", costo: 500},
	{nombre: "Audifono", costo: 1700},
];

var nombreArticulos = articulos.map(function(articulo){
	return articulo.nombre
});

Lecturas recomendadas

Recorriendo Arrays con .find(), .forEach() y .some()

.find()

Devuelve el primer elemento del array que cumpla con la condición dada.
El método find () devuelve el primer valor que coincide de la colección. Una vez que coincida con el valor en los resultados, no verificará los valores restantes en la colección de matriz.
Nos ayuda a encontrar un objetivo del array creando un nuevo array por medio de la validación (True and False).

Ejemplo:

var articulos = [
	{nombre: "Bici", costo: 3000},
    {nombre: "TV", costo: 2500},
    {nombre: "Libro", costo: 320},
    {nombre: "Celular", costo: 10000},
    {nombre: "Laptop", costo: 20000},
    {nombre: "Teclado", costo: 500},
    {nombre: "Audifono", costo: 1700},
];
	
var encuentraArticulo = articulos.find(function(articulo){
	    return articulo.nombre === "Laptop"
});

.foreach()

Ejecuta lo que le definamos una vez por cada elemento de nuestro array
Nos permite filtrar en nuestro array sin la necesidad de crear otro array.

Ejemplo:

var articulos = [
    {nombre: "Bici", costo: 3000},
    {nombre: "TV", costo: 2500},
    {nombre: "Libro", costo: 320},
    {nombre: "Celular", costo: 10000},
    {nombre: "Laptop", costo: 20000},
    {nombre: "Teclado", costo: 500},
    {nombre: "Audifono", costo: 1700},
];
	
articulos.forEach(function(articulo){
	    console.log(articulo.nombre);
});

.some():

Comprueba si al menos un elemento del array cumple con la condición que le damos
Nos permite validar si el objetivo o propiedades de este existen en el array, creando un nuevo array, devolviendo un valor true or false.
Ejemplo:

var articulos = [
	{nombre: "Bici", costo: 3000},
	{nombre: "TV", costo: 2500},
    {nombre: "Libro", costo: 320},
    {nombre: "Celular", costo: 10000},
    {nombre: "Laptop", costo: 20000},
    {nombre: "Teclado", costo: 500},
    {nombre: "Audifono", costo: 1700},
];
    	
var articulosBaratos = articulos.some(function(articulo){
    return articulo.costo <= 700;
});

Acá te dejo la documentación de cada uno: find() - foreach() - some() - filter()

¿Cuál es la diferencia entre find y filter?

filter retorna todas las coincidencias y find retorna solo la primer coincidencia

Agregando o Eliminando elementos de un Array

.push()

El método .push() nos permite agregar uno o más elementos al final de un array.

	// Array inicial
	let numArray = [1,2,3,4,5];
	
	// Funcion
	function newNum(){
	    // Arreglo elementos
	    numArray.push(6,7);
	    // Reviso el array que ahora tiene los numeros agregados
	    console.log(numArray);
	}
	```

Como podemos ver, al momento de ejecutar la función se agregan los números 6 y 7 al array.
Ahora revisemos un ejemplo con strings:

  	// -- Ejemplo con strings
  	// Array inicial
  	let txtArray = ["Ana", "Juan", "Duegi", "Lautaro"];
  	
  	// Funcion
  	function addCharacters(){
  		// Arreglo elementos
  		txtArray.push("Chris", "Maria");
  		// Reviso el array que ahora tiene los nombres agregados
  		console.log(txtArray);
  	}
  	```

Como podemos ver, agregamos dos cadenas de strings al ejecutar la función donde tenemos txtArray.push(). Es decir, indico el array al que voy agregar elementos, uso el método .push(), y dentro de .push() indico los elementos que quiero agregar al string. Finalmente, el console.log() lo uso para revisar en la consola si esto sucedió o no.

.shift()

El método .shift() nos permite eliminar el primer elemento de un array, es decir, elimina el elemento que esté en el índice 0.

// Creamos el array
let array = [1,2,3,4,5];
console.log(array);

//Aplicamos .shift()
let shiftArray = array.shift();

// Revisamos, el output debe de ser [2,3,4,5]
console.log(array);

Como vemos, luego de aplicar .shift() se eliminó exitosamente el primer elemento del array.

.pop()

El método .pop() eliminará el último elemento de un array. En este sentido, si tenemos un array de 5 elementos, pop() eliminará el elemento en el índice 4. Usemos el mismo ejemplo pero usando este método.

// Creamos el array
let array = [1,2,3,4,5];
console.log(array);

//Aplicamos .pop()
let shiftArray = array.pop();

// Revisamos, el output debe de ser [1,2,3,4]
console.log(array);

Lecturas recomendadas

Métodos

Métodos de recorridos de Arrays

Recorriendo Arrays con .find(), .forEach() y .some()

Agregando o Eliminando elementos de un Array

Links to this page: