19 - Métodos de Arrays

Estructura inicial

En nuestra carpeta de proyecto crearemos la siguiente estructura:

/
├── js/
│   └── 19-metodos-de-arrays.js
└── index.html

Y un código sencillo para nuestro HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/19-metodos-de-arrays.js"></script>
    <title>19 - Métodos de Arrays</title>
</head>
<body>
    <h1>Temario de JavaScript</h1>
</body>
</html>

Método forEach()

Permite recorrer todos los elementos de un Array:

let frutas = ["Piña", "Manzana", "Limón", "Cerezas"]

/* fruta es el nombre del elemento e index el índice de ese elemento (este último puede omitirse si no lo vamos a usar). */
frutas.forEach((fruta, index) => {
    console.log(`La fruta ${index} es ${fruta}.`)
    //La fruta 0 es Piña.
    //...
    //La fruta 3 es Cerezas.
})

Método for(in)

Al igual que forEach(), permite recorrer todos los elementos de un Array:

let lenguajes = ["JavaScript", "PHP", "C++", "C#"]

for(lenguaje in lenguajes) {
    console.log(lenguajes[lenguaje]) //JavaScript, PHP...
}

Método map()

Permite recorrer todos los elementos de un Array y hacer cambios que podemos guardar en un nuevo Array:

let nums = [3, 5, 7, 2, 9]

/* Nota: map() también tiene un parámetro opcional para el índice */
let nums2 = nums.map((num) => {
    num * 2
})

console.log(num2) //6, 10, 14, 4, 18

Método findIndex()

Devuelve el índice de un elemento de un Array:

let asignaturas = [
    "Lengua",
    "Matemáticas",
    "Inglés",
    "Física",
    "Historia",
    "Geografía"
]

let indiceHistoria = asignaturas.findIndex((asignatura) => {
    asignatura === "Historia"
})

console.log(indiceHistoria) //4

Nota: Si no encuentra resultados, el índice será -1


Método some()

Devuelve si el elemento o elementos cumplen alguna condición específica o no en el Array

let asignaturas = [
    "Lengua",
    "Matemáticas",
    "Inglés",
    "Física",
    "Historia",
    "Geografía"
]

let notas = [4, 6, 2, 5, 1]

let existeLengua = asignaturas.some((asignatura) => {
    asignatura === "Lengua"
})

let notables = notas.some((nota) => {
    nota >= 7
})

console.log(existeLengua) //True
console.log(notables) //False

Método sort()

Permite ordenar un Array por orden ascendente y descendente:

let alumnos = ["Paco", "Luisa", "Miguel", "David", "Megan", "Jara"]
let nums = [5, 7, 8, 2, 54, 28]

/* Si no indicamos ningún parámetro tendrá en cuenta el orden alfabético */
let alumnosAsc = alumnos.sort()
console.log(alumnosAsc) //['David', 'Jara', 'Luisa', 'Megan', 'Miguel', 'Paco']

/* Con una función callback con parámetros a y b podemos ordenar un Array numérico */
let nums_ascendente = nums.sort((a, b) => a - b)
console.log(nums_ascendente) //[2, 5, 7, 8, 28, 54]

let nums_descendente = nums.sort((a, b) => b - a)
console.log(nums_descendente) //[54, 28, 8, 7, 5, 2]

Método push()

Permite añadir un elemento nuevo al Array:

let capitales = ["Madrid", "Lisboa", "París", "Londres"]
console.log(capitales) //["Madrid", "Lisboa", "París", "Londres"]

capitales.push("Tokio")
console.log(capitales) //["Madrid", "Lisboa", "París", "Londres", "Tokio"]

Método splice()

Permite eliminar un elemento de nuestro Array:

let capitales = ["Madrid", "Lisboa", "París", "Londres", "Tokio"]
console.log(capitales) //["Madrid", "Lisboa", "París", "Londres", "Tokio"]

/* Hay que indicar el índice inicial y el número de elementos a eliminar */
capitales.splice(0, 1)
console.log(capitales) //[Lisboa", "París", "Londres", "Tokio"]

capitales.splice(2, 2) //Eliminamos dos elementos
console.log(capitales) //[Lisboa", "París"]

Más métodos