Arreglos en JS

Un arreglo se utiliza para almacenar múltiples valores en una sola variable.

Un arreglo es una variable especial que puede contener más de un valor a la
vez.

Se puede acceder a los valores individuales por medio de sus índices. El

primer elemento es 0, el ultimo elemento es -1.

let array_name = [item1, item2, ...];

Por simplicidad, legibilidad y velocidad de ejecución, no se recomienda

crear objetos de arreglos.

Es posible cambiar el valor de un elemento individualmente.

Se puede acceder a la matriz completa haciendo referencia al nombre de la

matriz.

// ejemplo de un arreglo en JS.

let cars = ["Saab", "Volvo", "BMW"];

cars[0] = "Opel";
let first = cars[0]; // prime elemento.

// ejemplo de un arreglo en JS.

let cars = new Array("Saab", "Volvo", "BMW");

Las matrices son objetos, por lo cual typeof devuelve object. Sin embargo, se
manipulan distinto. Las matrices acceden a sus valores según sus índices, los
objetos acceden a sus valores por nombre.

Los elementos de un arreglo pueden ser objetos. Incluso pueden haber

elementos de diferente tipo en la misma matriz. Una matriz puede tener
valores primitivos, objetos, funciones y otros arreglos.

Propiedades y métodos de los arreglos

array.length retorna el número de elementos del arreglo.

1
Recorrer los elementos de una matriz

La forma más segura de recorrer una matriz es usando un ciclo for.

let fruits = ["Banana", "Orange", "Apple", "Mango"];

let fruitsLength = fruits.length;

for (let i=0; i<fruitsLength; i++) {

console.log(fruits[i]);
}

También se puede usar la función Array.forEach().

let fruits = ["Banana", "Orange", "Apple", "Mango"];

let fruitsLength = fruits.length;

fruits.forEach(console.log);

Añadir elementos al arreglo

La forma más fácil de agregar un nuevo elemento a una matriz es usar el

método push().

let fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.push("Lemon");

El nuevo elemento también se puede agregar a la matriz usando la propiedad

length.

let fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits[fruits.length] = "Lemon";

2
Matrices asociativas

Muchos lenguajes de programación admiten matrices con índices con

nombre. Aquellas matrices con indices con nombre se denominan matrices
asociativas (hashes). JS no admite matrices con indices con nombre. En JS,
las matrices siempre usan indices numerados.

Si usa indices con nombre, JS redefinirá la matriz como un objeto estándar.

Después de esto, algunas propiedades y métodos de arreglos pueden producir
resultados incorrectos.

var person = [];

person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length; // person.length will return 3
var y = person[0]; // person[0] will return "John"

var person = [];

person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length; // person.length will return 0
var y = person[0]; // person[0] will return undefined

La diferencia entre arreglos y objetos, es que los primeros usan numeros

como indices, y el segundo usa nombres como indices. Los arreglos son un
tipo especial de objetos con indices numerados.

¿Cómo reconocer si una variable es un arreglo?

Debido a que typeof retorna object, se puede utilizar el método

Array.isArray(variable) para saber si la variable es un arreglo. También se
puede usar el operador instanceof.

let fruits = ["Banana", "Orange", "Apple", "Mango"];

Array.isArray(fruits); // returns true
fruits instanceof Array; // returns true

3
 Métodos de arreglos

Convertir arreglo en una cadena de texto

El método myarray.toString() convierte un arreglo en una cadena con los
elementos separados por coma.

El método myarray.join(“, ”) también permite unir todos los elementos en

una cadena, indicando el separador.

4
Añadir y eliminar elementos
el método myarray.pop() remueve el último elemento del arreglo, este
método también retorna el elemento removido (se puede asignar a una
variable).

El método myarray.push(“item”) agrega un elemento al final del arreglo.

este método también retorna la nueva longitud del arreglo.

El método myarray.shift() remueve el primer elemento de la matriz y

desplaza todos los demas elementos un índice más abajo. retorna la cadena
que se eliminó.

el método myarray.unshift(“item”) añade un nuevo elemento al inicio de la

matriz. retorna la nueva longitud de la matriz.

Cambiar elementos
Un elemento se puede cambiar asignando un valor individual y utilizando la
notación de indices. La propiedad length proporciona una manera fácil de
agregar un nuevo elemento al final de la matriz.

Eliminar elementos
Dado que las matrices de JS son objetos, los elementos se pueden eliminar
utilizando el operador delete. Sin embargo, el uso de delete deja elementos
undefined en la matriz. Use mejor pop() o shift().

let fruits = ["Banana", "Orange", "Apple", "Mango"];

delete.fruits[0]; // el primer elemento queda undefined

Añadir elementos en cualquier posición

el método myarray.splice(position, removed_elem, “item”, “item”, …). El
primer parámetro define la posición donde se añadirán los elementos. El
segundo parámetro define cuantos elementos se eliminarán. El resto de

5
parámetros define los nuevos elementos a añadir. Este método retorna un
arreglo con los elementos eliminados.

También se puede utilizar para eliminar elementos si no se indican nuevos

elementos por añadir, por ejemplo: myarray.splice(0, 1) elimina el primer
elemento.

Concatenar matrices
myarray1.concat(myarray2, myarray3, ...) retorna una nueva matriz producto
de fusionar las otras dos matrices indicadas. Este método no cambia las
matrices existentes. Simplemente devuelve una nueva matriz. También
puede tomar cadenas como argumentos.

Cortar una matriz

el metodo myarray.slice(inicio, fin) corta una parte de una matriz en una
nueva matriz. este método crea una nueva matriz, no elimina ningun
elemento de la matriz original. el primer parámetro indica desde donde inicia
la nueva matriz (incluyendolo), el segundo parámetro indica su final, sin
incluirlo. Si se omite el argumento final, se extiende hasta el final.

convertir a cadenas automáticamente

JS convierte automáticamente una matriz en una cadena separada por comas
cuando se espera un valor primitivo.

// los dos ejemplos dan lo mismo.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo").innerHTML = fruits;

6
Valores máximos y minimos en un arreglo
No hay funciones integradas para encontrar el valor más alto o más bajo en
una matriz de JS.

Ordenar matrices

El método myarray.sort() ordena una matriz alfabéticamente.

El método myarray.reverse() invierte el orden de los elementos de una

matriz.

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.sort(); // First sort the elements of fruits
fruits.reverse(); // Then reverse the order of the elements

Por defecto, la función sort() ordena los valores como cadenas. Debido a
esto, producirá resultados incorrectos al tratar de ordenar números. Para
solucionar esto, puede proveerle como parámetro una función de
comparación.

var points = [40, 100, 1, 5, 25, 10];

7
 points.sort(function(a, b){return a - b});

// ordenar descendientemente.
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b – a});

La función de comparación debe devolver un valor negativo, cero o positivo,

según los argumentos. Cuando la función sort () compara dos valores, envía
los valores a la función de comparación y clasifica los valores de acuerdo
con el valor devuelto (negativo, cero, positivo). Si el resultado es negativo, a
se ordena antes que b. Si el resultado es positivo, b se ordena antes que a. Si
el resultado es 0, no se realizan cambios con el orden de clasificación de los
dos valores.

ordenar en un orden aleatorio

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});

hallar el valor más alto o más bajo del arreglo

no hay funciones max o min, pero si ordena el arreglo, puede saber cual es el
valor máximo o minimo. Sin embargo, ordenar una matriz completa es un
método muy ineficiente si solo desea encontrar el valor maximo o minimo.

puede usar Math.max.apply(null, myarray) para hallar el valor más alto.

Math.max.apply(null, [1, 2, 3]) es equivalente a Math.max(1, 2, 3).

puede usar Math.min.apply(null, myarray) para hallar el valor más alto.

Math.min.apply(null, [1, 2, 3]) es equivalente a Math.min(1, 2, 3).

Puede ser más rápido crear su propia función.

function myArrayMax(arr) {
var len = arr.length;
var max = -Infinity;
while (len--) {
if (arr[len] > max) {
max = arr[len];
}
}
return max;
}

function myArrayMin(arr) {
var len = arr.length;
var min = Infinity;
while (len--) {

8
 if (arr[len] < min) {
min = arr[len];
}
}
return min;
}

ordenar matrices de objetos

las matrices de JS a menudo contienen objetos. Incluso si los objetos tienen
propiedades de diferentes tipos de datos, el método sort () se puede usar para
ordenar la matriz.

La solución es escribir una función de comparación para comparar los

valores numericos de propiedad. Comparar propiedades de cadena es un
poco más complejo.

var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];

cars.sort(function(a, b){return a.year - b.year});

cars.sort(function(a, b){
var x = a.type.toLowerCase();
var y = b.type.toLowerCase();
if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
});

9
 metodos de iteración de arreglo

Los métodos de iteración de matriz operan en cada elemento del arreglo.

myarray.forEach(function) llama a una función una vez para cada elemento

de la matriz. esta función toma como parámetros: value, index, array. Si la
función solo toma un argumento, se pueden omitir los otros dos.

myarray.map(function) crea una nueva matriz al aplicar una función sobre

cada elemento de la matriz original. este método no cambia la matriz
original.

myarray.filter(function) crea una nueva matriz con los elementos que pasan
una prueba. la función debe retornar un valor booleano.

myarray.reduce(function) ejecuta una función en cada elemento de la matriz

para reducirla a un solo valor. reduce() funciona de izquierda a derecha,
mientras que reduceRigth() funciona de derecha a izquierda. estos métodos
no modifican la matriz original. la función toma cuatro parámetros: total,
value, index, array.

myarray.every(function) verifica si todos los valores de la matriz pasan una

prueba. la función toma como parámetros: value, index, itself.

myarray.some(function) verifica si algunos valores de la matriz pasan una

prueba. la función toma como parámetros: value, index, itself.

myarray.indexOf(“item”, start) busca en una matriz un valor de elemento y

devuelve su posición. el segundo parámetro es opcional y sirve para indicar
desde donde comenzar a buscar. retorna -1 si no se encuentra el item. si el
item se encuentra más de una vez, devuelve la posición de la primera
aparición.

myarray.lastIndexOf(item, start) es lo mismo que el anterior, solo que

devuelve la posición de la última aparicion del elemento especificado.

10
myarray.find(fuction) devuelve el valor del primer elemento de matriz que
pasa una función de prueba. la función toma como tres parámetros value,
index y itself.

myarray.findIndex(function) devuelve el índice del primer elemento de

matriz que pasa una función de prueba. la función debe tomar como
parámetros value, index, itself.

<table> define una tabla.

<caption> define un título de tabla.
<th> define una celda de encabezado.

especifica el número de columnas que abarca la

<td colspan=number>
celda.
indica las celdas de encabezado con las que se
<td headers="header_id">
relaciona.
<td rowspan=number> especifica el número de filas que abarca la celda.

11