Métodos de Arrays en JavaScript

JavaScript es un robusto lenguaje de programación que se puede aplicar a un documento HTML y usarse para crear interactividad dinámica en los sitios web.

Fue inventado por Brendan Eich, cofundador del proyecto Mozilla, Mozilla Foundation y la Corporación Mozilla.

Puedes hacer casi cualquier cosa con JavaScript. Puedes empezar con pequeñas cosas como carruseles, galerías de imágenes, diseños fluctuantes, y respuestas a las pulsaciones de botones. Con más experiencia, serás capaz de crear juegos, animaciones 2D y gráficos 3D, aplicaciones integradas basadas en bases de datos ¡y mucho más!

¿Qué son los Arrays?

Son un conjunto de datos ordenados por posiciones y todos asociados en una sola variable. Los datos pueden ser de cualquier tipo de dato,  es decir, es posible crear una array que tenga una cadena en la primera posición, un número en el segundo, un objeto en el tercero y así sucesivamente. Podremos acceder a estos distintos datos de manera independiente o agrupándolos.

Formas de crear un Array

Existen dos formas de crear un Array y son las siguientes:

La primera forma, nos permite crear un array colores estableciendo número de posiciones e indicando sus elementos como se muestra a continuación:

var colores = new array();

De esta manera ya creamos el array colores, pero sin ninguna posición, entonces para establecer un número de posiciones para un array, seria:

var colores = new Array(10); 

Como hemos visto dentro de los paréntesis o mejor llamado constructor, se establece el número de elementos que puede contener este array, asu vez, se podría indicar los elementos del array:

var colores = new Array("rojo","azul","verde"); 

De igual manera así como lo creamos entre paréntesis () también puede ser creado entre corchetes []

Acceder a los elementos de un Array

Hablemos ahora de la forma en que podemos acceder a algunos de los elementos del Array. Esto se logra, a través del nombre establecido junto a dos corchetes, entre ellos la posición del elemento, de la siguiente manera:

Tenemos al siguiente array:

var colores = ["rojo", "azul", "verde"]
Colores [1]; 
"azul"

Este array mostrará azul, pero debes tener en cuenta que las posiciones empiezan desde 0, es decir que nuestros valores del array serán: 0 = rojo, 1 = azul, 2 = verde.

Métodos de Arrays en JavaScript.

Es importante tomar en consideración que existe gran cantidad de métodos de arrays, en el blog de hoy nos estamos basando en el video de dos grandes del Javascript como lo son Carlos Azustre del canal aprende javaScript y Miguel Angel Duran del cana midudev.

1. map() : Permite recorrer el array y modificar los elementos presentes en él, retornando un nuevo array con la misma longitud que el original.

const array = [1,2,3,4,5,6,7]
const resultArray = array.map(element => element + 10)
console.log(resultArray) // [11,12,13,14,15,16,17]

2. filter() : Recorre el array y retorna un nuevo array con aquellos elementos que pasen una determinada condición.

const array = [1,2,3,4,5,6,7]
const resultArray = array.filter(element => element === 3 || element === 7)
console.log(resultArray) // [3,7]

3. forEach() : Permite iterar el contenido de un array. Recibe un callback que toma como parámetro el elemento actual de la iteración y el indice del mismo.

const array = ['banana', 'apple', 'orange', 'pear']
const resultArray = array.foreach((element, i) => {
    console.log('${element} se encuentra en el indice ${i}')
})
// banana se encuentra en el indice 0
// apple se encuentra en el indice 1 
// orange se encuentra en el indice 2
// pear se encuentra en el indice 3

4. find() : Recorre el array y retorna la primera coincidencia del elemento que se busca.

 const array = [1,2,3,4,5,6,7]
const resultArray = array.find(element => elemnt > 3 )
console.log (resultArray) // [4]

5. sort() : Ordena los elementos del array y retorna el arreglo ordenado. Los elementos se ordenarán en orden ascendente (de la A a la Z) por defecto.

 const array = [1,2,3,4,5,6,7]
const alphabets = ['g', 'd', 'c', 'o', 'd', 'e', 'v']

// ordenar en forma descendente 
const descArray =array.sort((a,b) => a > b ? -1 : 1)
console.log (descarray) // [7,6,5,4,3,2,1]

// ordenar en forma ascendente 
const ascArray = alphabets.sort ((a,b) => a > b ? 1 : -1)
console.log (asc.Array) // ['c', 'd', 'd', 'e', 'g', 'v']

6. some() : Itera el array y retorna un booleano si como mínimo uno de los elementos presentes en el array pasa una condición determinada. Recibe un callback que se encargara de preguntar aquello que queremos dentro del array.

const array = [1,2,3,4,5,6,7]

// los elementos son mayores que 4 
const isGreaterThanFour = array.some(element => elemnt > 4)
console.log(isGreaterThanFour) // true

// Los elementos son menores que 0
const isLessThanTen = array.some (element => element < 0)
console.log(isLessThanTen) // false

7. every() : Es similar al some(), ya que itera el array y retorna un booleano. Pero esta vez, para que dicho booleano sea true todos los elementos del array deberán pasar la condición dada.

const array = [1,2,3,4,5,6,7]

// Los elementos son mayores que 4
const isGreaterThanFour = array.every(element => element > 4)
console.log(isGreaterThanFour)  // false

// Los elementos son menores que 10 
const isLessThanTen = array.every(element => element < 10)
console.log(isLessThanTen) // true 

8. concat() : Se utiliza para unir dos o más arrays. Este método no cambia los arrays existentes, sino que devuelve un nuevo array

const array1 = ['a', 'b', 'c']
const array2 = ['d','e','f']

const resultArray = array1.concat(array2)
console.log(resultArray) // ['a', 'b', 'c', 'd', 'e', 'f']

9.includes() : Determina si un array incluye un determinado elemento y retorna un booleano según corresponda.

const array = [1,2,3,4,5,6,7]

console.log(array.incluides(2)) // true
console.log(array.incluides(8)) // false

10. join() : Une todos los elementos de un array en una cadena. Podemos pasarle como parámetro el carácter de separación que debe agregar entre los elementos.

const array = ['g', 'd', 'c', 'o', 'd', 'e', 'v']

console.log(array.join('')) // gdcodev
console.log(array.join('-')) // g-d-c-o-d-e-v

11. reduce() : Aplica una función a un acumulador y a cada valor de una array (de izquierda a derecha) para reducirlo a un único valor.

const array = [1,2,3,4,5,6,7]
const resultArray = array.reduce ((acomulator, current) => Acomulator + current)

console.log(resultArray) // 28

12. indexOf() : Retorna el primer índice en el que se puede encontrar un elemento dado en el array, ó retorna -1 si el elemento no esta presente.

const array = ['steve','bruce','tony','chris']
const resultArray = array.indexOf('bruce')

console.log(resultArray) // 1

13. findIndex() : Retorna el índice del primer elemento de un array que cumpla con la función de prueba proporcionada. En caso contrario devuelve -1.

const array = ['steve','bruce','tony','chris']
const resultArray = array.indexOf('bruce')

console.log(resultArray) // 1

14. fill() : Cambia todos los elementos de un array por un valor estático, desde el índice de inicio hasta el índice final. Retorna el array modificado.

const array = [1,2,3,4,5,6,7]

// llenar con 10 desde la posición 3 
console.log(array.fill(10,3)) // [1,2,3,10,10,10,10]

// llenar con 8 desde la posición 4 hasta la posición 6.
console.log(array.fill(8,4,6)) // [1,2,3,10,8,8,10]

15. push() : Añade uno o más elementos al final de un array y devuelve la nueva longitud del array.

const array = ['apple', 'orange', 'pear']

console.log(array.push('banana')) // 4
console.log(array) // ['apple', 'orange', 'pear','banana']

16. pop() : Elimina el último elemento de un array y lo devuelve. Este método cambia la longitud del array.

const array = ['apple','orange','pear']
array.pop()

console.log(array) // ['apple', 'orange']

17. shift() : Elimina el primer elemento del array y lo retorna. Este método modifica la longitud del array.

const array = ['apple','orange','pear']
array.shift()

console.log(array) // ['orange','pear']

18. unshift() : Agrega uno o más elementos al inicio del array, y devuelve la nueva longitud del array.

const array = ['apple','orange','pear']

console.log(array.unshift('banana')) // 4
console.log(array) // ['banana', 'apple','orange','pear']

19. slice() : Devuelve una copia de una parte del array dentro de un nuevo array empezando por inicio hasta fin (fin no incluido). El array original no se modificará.

const array =  ['a', 'b', 'c', 'd', 'e', 'f']
const resultArray = array.slice(2,4)

console.log(resultArray) //['c', 'd']

20. reverse() : Invierte el orden de los elementos de un array. El primer elemento pasa a ser el último y el último pasa a ser el primero.

const array =  [1, 2, 3, 4, 5, 6,7]

console.log(array.reverse()) // [7,6,5,4,3,2,1]

21. splice() : Cambia el contenido de un array eliminando elementos existentes y/o agregando nuevos elementos.

const array =  ['apple','orange','pear']

array.splice(1,0,'banana')
console.log(array) // ['apple', 'banana', 'orange', 'pear']

22. lastIndexOf() : Busca un elemento en un array y devuelve su posición. Comienza buscando por el final del array. Retorna -1 si el elemento no se encontrara.

const array =  ['apple','orange','pear','apple']

console.log(array.lastIndexOf('apple')) // 3

23. flat() : Crea una nuevo array con todos los elementos de sub-array concatenados recursivamente hasta la profundidad especificada.

const array =  [1,2,3,4,5,[6,7]]

console.log(array.flat()) // [1,2,3,4,5,6,7]

24. isArray() : Determina si el valor pasado es un Array.

console.log(Array.isArray([1,2,3,4,5,6,7])); // True
console.log(Array.isArray({nombre: 'gdcodev'})) // False
console.log(Array.isArray('apple')) // False
console.log(Array.isArray('undefined')) // False

25. from() : Crea una nueva instancia de Array a partir de un objeto iterable.

console.log(Array.from('gdcodev')) // ['g', 'd', 'c', 'o', 'd', 'e', 'v']

Fuente