JavaScript
Arrays

Sintaxis

• array = [ valor , valor , ... ]
• array = new Array ( valor , valor , ... )
• array = Array.of ( valor , valor , ... )
• array = Array.from ( arrayLike )

Observaciones

console.log(new Array(53)); // This array has 53 'undefined' elements!

console.log([53]); // Much better!

Inicialización de matriz estándar

Hay muchas formas de crear matrices. Los más comunes son utilizar literales de matriz o el constructor de matriz:

var arr = [1, 2, 3, 4];
var arr2 = new Array(1, 2, 3, 4);

Si el constructor de Array se usa sin argumentos, se crea una matriz vacía.

var arr3 = new Array();

resultados en:

[]

Tenga en cuenta que si se usa exactamente con un argumento y ese argumento es un number , se creará una matriz de esa longitud con todos los valores undefined :

var arr4 = new Array(4);

resultados en:

[undefined, undefined, undefined, undefined]

Eso no se aplica si el único argumento no es numérico:

var arr5 = new Array("foo");

resultados en:

["foo"]

Array.of(21, "Hello", "World");

[21, "Hello", "World"]

var newArray = Array.from({ length: 5 }, (_, index) => Math.pow(index, 4));

[0, 1, 16, 81, 256]

Distribución de la matriz / reposo

Operador de propagación

let arr = [1, 2, 3, ...[4, 5, 6]];  // [1, 2, 3, 4, 5, 6]

// in ES < 6, the operations above are equivalent to
arr = [1, 2, 3];
arr.push(4, 5, 6);

let arr = [1, 2, 3, ...[..."456"].map(x=>parseInt(x))]; // [1, 2, 3, 4, 5, 6]

let arr = [..."123456"].map(x=>parseInt(x)); // [1, 2, 3, 4, 5, 6]

let arr = [..."123456"]; // ["1", "2", "3", "4", "5", "6"]

function myFunction(a, b, c) { }
let args = [0, 1, 2];

myFunction(...args);

// in ES < 6, this would be equivalent to:
myFunction.apply(null, args);

[a, b, ...rest] = [1, 2, 3, 4, 5, 6]; // rest is assigned [3, 4, 5, 6]

function myFunction(a, b, ...rest) { console.log(rest); }

myFunction(0, 1, 2, 3, 4, 5, 6); // rest is [2, 3, 4, 5, 6]

Mapeo de valores

A menudo es necesario generar una nueva matriz basada en los valores de una matriz existente.

Por ejemplo, para generar una matriz de longitudes de cadena a partir de una matriz de cadenas:

['one', 'two', 'three', 'four'].map(function(value, index, arr) {
  return value.length;
});
// → [3, 3, 5, 4]

['one', 'two', 'three', 'four'].map(value => value.length);
// → [3, 3, 5, 4]

En este ejemplo, se proporciona una función anónima a la función map() , y la función map la llamará para cada elemento de la matriz, proporcionando los siguientes parámetros, en este orden:

• El elemento en si
• El índice del elemento (0, 1 ...)
• Toda la matriz

Además, map() proporciona un segundo parámetro opcional para establecer el valor de this en la función de mapeo. Dependiendo del entorno de ejecución, el valor predeterminado de this puede variar:

En un navegador, el valor predeterminado de this es siempre window :

['one', 'two'].map(function(value, index, arr) {
  console.log(this); // window (the default value in browsers)
  return value.length;
});

Puedes cambiarlo a cualquier objeto personalizado como este:

['one', 'two'].map(function(value, index, arr) {
  console.log(this); // Object { documentation: "randomObject" }
  return value.length;
}, {
  documentation: 'randomObject'
});

Valores de filtrado

El método filter() crea una matriz rellena con todos los elementos de la matriz que pasan una prueba proporcionada como una función.

[1, 2, 3, 4, 5].filter(function(value, index, arr) {
  return value > 2;
});

[1, 2, 3, 4, 5].filter(value => value > 2);

Resultados en una nueva matriz:

[3, 4, 5]

Filtrar valores falsos.

var filtered = [ 0, undefined, {}, null, '', true, 5].filter(Boolean);

Dado que Boolean es una función / constructor de javascript nativo que toma [un parámetro opcional] y el método de filtro también toma una función y le pasa el elemento de la matriz actual como parámetro, puede leerlo de la siguiente manera:

1. Boolean(0) devuelve falso
2. Boolean(undefined) devuelve falso
3. Boolean({}) devuelve true, lo que significa empujarlo a la matriz devuelta
4. Boolean(null) devuelve falso
5. Boolean('') devuelve false
6. Boolean(true) devuelve true, lo que significa que se envía a la matriz devuelta
7. Boolean(5) devuelve true, lo que significa que lo empuja a la matriz devuelta

así resultará el proceso global

[ {}, true, 5 ]

Otro ejemplo simple

Este ejemplo utiliza el mismo concepto de pasar una función que toma un argumento

function startsWithLetterA(str) {
    if(str && str[0].toLowerCase() == 'a') {
        return true
    }
    return false;
}

var str              = 'Since Boolean is a native javascript function/constructor that takes [one optional paramater] and the filter method also takes a function and passes it the current array item as a parameter, you could read it like the following';
var strArray         = str.split(" ");
var wordsStartsWithA = strArray.filter(startsWithLetterA);
//["a", "and", "also", "a", "and", "array", "as"]

Iteración

Un tradicional for -loop

Un tradicional for bucle tiene tres componentes:

1. La inicialización: ejecutada antes de que se ejecute el bloque look la primera vez.
2. La condición: verifica una condición cada vez antes de que se ejecute el bloque de bucle, y abandona el bucle si es falso
3. El pensamiento posterior: se realiza cada vez que se ejecuta el bloque de bucle

Estos tres componentes están separados unos de otros por a ; símbolo. El contenido para cada uno de estos tres componentes es opcional, lo que significa que lo siguiente es el mínimo posible for bucle:

for (;;) {
    // Do stuff
}

Por supuesto, deberá incluir un if(condition === true) { break; } o un if(condition === true) { return; } algún lugar dentro de eso for -loop para que deje de correr.

Generalmente, sin embargo, la inicialización se usa para declarar un índice, la condición se usa para comparar ese índice con un valor mínimo o máximo, y la idea posterior se usa para incrementar el índice:

for (var i = 0, length = 10; i < length; i++) {
    console.log(i);
}

Usando un bucle for tradicional for recorrer un array

La forma tradicional de recorrer una matriz, es esta:

for (var i = 0, length = myArray.length; i < length; i++) {
    console.log(myArray[i]);
}

O, si prefieres hacer un bucle hacia atrás, haz esto:

for (var i = myArray.length - 1; i > -1; i--) {
    console.log(myArray[i]);
}

Hay, sin embargo, muchas variaciones posibles, como por ejemplo esta:

for (var key = 0, value = myArray[key], length = myArray.length; key < length; value = myArray[++key]) {
    console.log(value);
}

... o este ...

var i = 0, length = myArray.length;
for (; i < length;) {
    console.log(myArray[i]);
    i++;
}

... o este:

var key = 0, value;
for (; value = myArray[key++];){
    console.log(value);
}

Lo que funcione mejor es en gran medida una cuestión de gusto personal y del caso de uso específico que está implementando.

Tenga en cuenta que cada una de estas variaciones es compatible con todos los navegadores, incluidos los muy antiguos.

A while bucle

Una alternativa a una for bucle es un while bucle. Para recorrer una matriz, puedes hacer esto:

var key = 0;
while(value = myArray[key++]){
    console.log(value);
}

Al igual tradicional for bucles, while los bucles son apoyadas por incluso el más antiguo de los navegadores.

Además, tenga en cuenta que cada bucle while puede reescribirse como un bucle for . Por ejemplo, el while aquí anteriormente bucle se comporta de la misma manera como este for -loop:

for(var key = 0; value = myArray[key++];){
    console.log(value);
}

for...in

En JavaScript, también puedes hacer esto:

for (i in myArray) {
    console.log(myArray[i]);
}

Esto se debe utilizar con cuidado, sin embargo, ya que no se comporta igual que una tradicional for bucle en todos los casos, y hay efectos secundarios potenciales que deben tenerse en cuenta. Ver ¿Por qué es una mala idea usar "for ... in" con iteración de matriz? para más detalles.

for...of

En ES 6, el bucle for-of es la forma recomendada de iterar sobre los valores de una matriz:

let myArray = [1, 2, 3, 4];
for (let value of myArray) {
  let twoValue = value * 2;
  console.log("2 * value is: %d", twoValue);
}

El siguiente ejemplo muestra la diferencia entre un bucle for...of y un bucle for...in :

let myArray = [3, 5, 7];
myArray.foo = "hello";

for (var i in myArray) {
  console.log(i); // logs 0, 1, 2, "foo"
}

for (var i of myArray) {
  console.log(i); // logs 3, 5, 7
}

Array.prototype.keys()

El método Array.prototype.keys() se puede usar para iterar sobre índices como este:

let myArray = [1, 2, 3, 4];
for (let i of myArray.keys()) {
  let twoValue = myArray[i] * 2;
  console.log("2 * value is: %d", twoValue);
}

Array.prototype.forEach()

El .forEach(...) es una opción en ES 5 y superior. Es compatible con todos los navegadores modernos, así como con Internet Explorer 9 y versiones posteriores.

[1, 2, 3, 4].forEach(function(value, index, arr) {
  var twoValue = value * 2;
  console.log("2 * value is: %d", twoValue);
});

Comparando con el bucle for tradicional, no podemos saltar fuera del bucle en .forEach() . En este caso, use el bucle for , o use la iteración parcial que se presenta a continuación.

En todas las versiones de JavaScript, es posible iterar a través de los índices de una matriz utilizando un estilo C tradicional for bucle.

var myArray = [1, 2, 3, 4];
for(var i = 0; i < myArray.length; ++i) {
  var twoValue = myArray[i] * 2;
  console.log("2 * value is: %d", twoValue);
}

También es posible usar while loop:

var myArray = [1, 2, 3, 4],
    i = 0, sum = 0;
while(i++ < myArray.length) {
  sum += i;
}
console.log(sum);

Array.prototype.every

Desde ES5, si desea iterar sobre una parte de una matriz, puede usar Array.prototype.every , que se repite hasta que devolvamos false :

// [].every() stops once it finds a false result
// thus, this iteration will stop on value 7 (since 7 % 2 !== 0)
[2, 4, 7, 9].every(function(value, index, arr) {
  console.log(value);
  return value % 2 === 0; // iterate until an odd number is found
}); 

Equivalente en cualquier versión de JavaScript:

var arr = [2, 4, 7, 9];
for (var i = 0; i < arr.length && (arr[i] % 2 !== 0); i++) { // iterate until an odd number is found
  console.log(arr[i]);
}

Array.prototype.some

Array.prototype.some itera hasta que devolvamos true :

// [].some stops once it finds a false result
// thus, this iteration will stop on value 7 (since 7 % 2 !== 0)
[2, 4, 7, 9].some(function(value, index, arr) {
  console.log(value);
  return value === 7; // iterate until we find value 7
}); 

Equivalente en cualquier versión de JavaScript:

var arr = [2, 4, 7, 9];
for (var i = 0; i < arr.length && arr[i] !== 7; i++) {
  console.log(arr[i]);
}

Bibliotecas

Finalmente, muchas bibliotecas de utilidades también tienen su propia variación foreach . Tres de los más populares son estos:

jQuery.each() , en jQuery :

$.each(myArray, function(key, value) {
    console.log(value);
});

_.each() , en Underscore.js :

_.each(myArray, function(value, key, myArray) {
    console.log(value);
});

_.forEach() , en Lodash.js :

_.forEach(myArray, function(value, key) {
    console.log(value);
});

Consulte también la siguiente pregunta en SO, donde gran parte de esta información se publicó originalmente:

• Recorrer una matriz en JavaScript

Filtrado de matrices de objetos

El método filter() acepta una función de prueba y devuelve una nueva matriz que contiene solo los elementos de la matriz original que pasan la prueba proporcionada.

// Suppose we want to get all odd number in an array:
var numbers = [5, 32, 43, 4];

var odd = numbers.filter(function(n) {
  return n % 2 !== 0;
});

let odd = numbers.filter(n => n % 2 !== 0); // can be shortened to (n => n % 2)

odd contendría la siguiente matriz: [5, 43] .

También funciona en una matriz de objetos:

var people = [{
  id: 1,
  name: "John",
  age: 28
}, {
  id: 2,
  name: "Jane",
  age: 31
}, {
  id: 3,
  name: "Peter",
  age: 55
}];

var young = people.filter(function(person) {
  return person.age < 35;
});

let young = people.filter(person => person.age < 35);

young contendría la siguiente matriz:

[{
  id: 1,
  name: "John",
  age: 28
}, {
  id: 2,
  name: "Jane",
  age: 31
}]

Puede buscar en toda la matriz un valor como este:

var young = people.filter((obj) => {
  var flag = false;
  Object.values(obj).forEach((val) => {
    if(String(val).indexOf("J") > -1) {
      flag = true;
      return;
    }    
  });
  if(flag) return obj;
});

Esto devuelve:

[{
  id: 1,
  name: "John",
  age: 28
},{
  id: 2,
  name: "Jane",
  age: 31
}]

Unir elementos de matriz en una cadena

Para unir todos los elementos de una matriz en una cadena, puede usar el método de join :

console.log(["Hello", " ", "world"].join("")); // "Hello world"
console.log([1, 800, 555, 1234].join("-")); // "1-800-555-1234"

Como puede ver en la segunda línea, los elementos que no son cadenas se convertirán primero.

Convertir objetos de tipo matriz a matrices

¿Qué son los objetos similares a matrices?

JavaScript tiene "Objetos similares a matrices", que son representaciones de Objetos de Arrays con una propiedad de longitud. Por ejemplo:

var realArray = ['a', 'b', 'c'];
var arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

Los ejemplos comunes de objetos similares a una matriz son los objetos de arguments en funciones y los objetos HTMLCollection o NodeList que se devuelven desde métodos como document.getElementsByTagName o document.querySelectorAll .

Sin embargo, una diferencia clave entre Arrays y Objetos similares a Array es que los objetos similares a Array heredan de Object.prototype lugar de Array.prototype . Esto significa que los Objetos de tipo Array no pueden acceder a los métodos comunes de prototipos de Array como forEach() , push() , map() , filter() y slice() :

var parent = document.getElementById('myDropdown');
var desiredOption = parent.querySelector('option[value="desired"]');
var domList = parent.children;

domList.indexOf(desiredOption); // Error! indexOf is not defined.
domList.forEach(function() { 
  arguments.map(/* Stuff here */) // Error! map is not defined.
}); // Error! forEach is not defined.

function func() {
  console.log(arguments);
}
func(1, 2, 3);   // → [1, 2, 3]

Convertir objetos similares a matrices en matrices en ES6

1. Array.from :

const arrayLike = {
  0: 'Value 0',
  1: 'Value 1',
  length: 2
};
arrayLike.forEach(value => {/* Do something */}); // Errors
const realArray = Array.from(arrayLike);
realArray.forEach(value => {/* Do something */}); // Works

2. for...of :

var realArray = [];
for(const element of arrayLike) {
  realArray.append(element);
}

3. Operador de propagación:

[...arrayLike]

4. Object.values :

var realArray = Object.values(arrayLike);

5. Object.keys :

var realArray = Object
   .keys(arrayLike)
   .map((key) => arrayLike[key]);

Convertir objetos similares a matrices en matrices en ≤ ES5

Utilice Array.prototype.slice manera:

var arrayLike = {
  0: 'Value 0',
  1: 'Value 1',
  length: 2
};
var realArray = Array.prototype.slice.call(arrayLike);
realArray = [].slice.call(arrayLike); // Shorter version

realArray.indexOf('Value 1'); // Wow! this works

También puede usar Function.prototype.call para llamar a los métodos Array.prototype en objetos similares a Array directamente, sin convertirlos:

var domList = document.querySelectorAll('#myDropdown option');

domList.forEach(function() { 
  // Do stuff
}); // Error! forEach is not defined.

Array.prototype.forEach.call(domList, function() { 
  // Do stuff
}); // Wow! this works

También puede usar [].method.bind( arrayLikeObject ) para tomar prestados métodos de matriz y hacerlos aparecer en su objeto:

var arrayLike = {
  0: 'Value 0',
  1: 'Value 1',
  length: 2
};

arrayLike.forEach(function() {
  // Do stuff
}); // Error! forEach is not defined.

[].forEach.bind(arrayLike)(function(val){
  // Do stuff with val
}); // Wow! this works

Modificar artículos durante la conversión

En ES6, mientras usamos Array.from , podemos especificar una función de mapa que devuelve un valor mapeado para la nueva matriz que se está creando.

Array.from(domList, element => element.tagName); // Creates an array of tagName's

Ver Arrays son objetos para un análisis detallado.

Valores reductores

[1, 2, 3, 4].reduce(function(a, b) {
  return a + b;
});
// → 10

[2].reduce(function(a, b) {
  console.log(a, b); // prints: 1 2
  return a + b;
}, 1);
// → 3

var array = [{
    key: 'one',
    value: 1
}, {
    key: 'two',
    value: 2
}, {
    key: 'three',
    value: 3
}];

array.reduce(function(obj, current) {
  obj[current.key] = current.value;
  return obj;
}, {});

array.reduce((obj, current) => Object.assign(obj, {
  [current.key]: current.value
}), {});

array.reduce((obj, current) => ({...obj, [current.key]: current.value}), {});

Todos los ejemplos anteriores para Flatten Array dan como resultado:

{
  one: 1,
  two: 2,
  three: 3
}

function map(list, fn) {
  return list.reduce(function(newList, item) {
    return newList.concat(fn(item));
  }, []);
}

// Usage:
map([1, 2, 3], function(n) { return n * n; });
// → [1, 4, 9]

var arr = [4, 2, 1, -10, 9]

arr.reduce(function(a, b) {
  return a < b ? a : b
}, Infinity);
// → -10

var arr = [1, 2, 1, 5, 9, 5];

arr.reduce((prev, number) => {
  if(prev.indexOf(number) === -1) {
    prev.push(number);
  }
  return prev;
}, []);
// → [1, 2, 5, 9]

Conectivo lógico de valores.

[false, false].some(function(value) {
  return value;
});
// Result: false

[false, true].some(function(value) {
  return value;
});
// Result: true

[true, true].some(function(value) {
  return value;
});
// Result: true

[false, false].every(function(value) {
  return value;
});
// Result: false

[false, true].every(function(value) {
  return value;
});
// Result: false

[true, true].every(function(value) {
  return value;
});
// Result: true

Arreglos de concatenación

Dos matrices

var array1 = [1, 2];
var array2 = [3, 4, 5];

var array3 = array1.concat(array2);  // returns a new array

var array3 = [...array1, ...array2]

Resultados en una nueva Array :

[1, 2, 3, 4, 5]

Matrices múltiples

var array1 = ["a", "b"],
    array2 = ["c", "d"],
    array3 = ["e", "f"],
    array4 = ["g", "h"];

var arrConc = array1.concat(array2, array3, array4);

var arrConc = [...array1, ...array2, ...array3, ...array4]

Resultados en una nueva Array :

["a", "b", "c", "d", "e", "f", "g", "h"]

Sin copiar la primera matriz

var longArray = [1, 2, 3, 4, 5, 6, 7, 8],
    shortArray = [9, 10];

longArray.push.apply(longArray, shortArray);

longArray.push(...shortArray)

El valor de longArray es ahora:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Tenga en cuenta que si la segunda matriz es demasiado larga (> 100,000 entradas), puede obtener un error de desbordamiento de pila (debido a cómo funciona apply ). Para estar seguro, puede iterar en su lugar:

shortArray.forEach(function (elem) {
    longArray.push(elem);
});

Valores de matriz y no matriz

var array = ["a", "b"];

var arrConc = array.concat("c", "d");

var arrConc = [...array, "c", "d"]

Resultados en una nueva Array :

["a", "b", "c", "d"]

También puede mezclar matrices con matrices no

var arr1 = ["a","b"];
var arr2 = ["e", "f"];

var arrConc = arr1.concat("c", "d", arr2);

Resultados en una nueva Array :

["a", "b", "c", "d", "e", "f"]

Anexar / anteponer elementos a la matriz

Sin cambio

Use .unshift para agregar uno o más elementos al principio de una matriz.

Por ejemplo:

var array = [3, 4, 5, 6];
array.unshift(1, 2);

resultados de la matriz en:

[1, 2, 3, 4, 5, 6]

empujar

Además .push se utiliza para agregar elementos después del último elemento existente actualmente.

Por ejemplo:

var array = [1, 2, 3];
array.push(4, 5, 6);

resultados de la matriz en:

[1, 2, 3, 4, 5, 6]

Ambos métodos devuelven la nueva longitud de matriz.

Claves de objetos y valores a matriz

var object = {
    key1: 10,
    key2: 3,
    key3: 40,
    key4: 20
};
 
var array = [];
for(var people in object) {
  array.push([people, object[people]]);
}

Ahora la matriz es

[
  ["key1", 10],
  ["key2", 3],
  ["key3", 40],
  ["key4", 20]
]

Ordenando matriz multidimensional

Dada la siguiente matriz

var array = [
  ["key1", 10],
  ["key2", 3],
  ["key3", 40],
  ["key4", 20]
];

Puedes clasificarlo por número (segundo índice)

array.sort(function(a, b) {
  return a[1] - b[1];
})

array.sort((a,b) => a[1] - b[1]);

Esto dará salida

[
  ["key2", 3],
  ["key1", 10],
  ["key4", 20],
  ["key3", 40]
]

Tenga en cuenta que el método de clasificación opera en la matriz en su lugar . Cambia la matriz. La mayoría de los otros métodos de matriz devuelven una nueva matriz, dejando la original intacta. Es especialmente importante tener en cuenta si utiliza un estilo de programación funcional y espera que las funciones no tengan efectos secundarios.

Eliminar elementos de una matriz

Cambio

Utilice .shift para eliminar el primer elemento de una matriz.

Por ejemplo:

var array = [1, 2, 3, 4];
array.shift();

resultados de la matriz en:

[2, 3, 4]

Popular

Además .pop se utiliza para eliminar el último elemento de una matriz.

Por ejemplo:

var array = [1, 2, 3];
array.pop();

resultados de la matriz en:

[1, 2]

Ambos métodos devuelven el elemento eliminado;

Empalme

Use .splice() para eliminar una serie de elementos de una matriz. .splice() acepta dos parámetros, el índice de inicio y un número opcional de elementos para eliminar. Si se .splice() el segundo parámetro, .splice() eliminará todos los elementos del índice de inicio hasta el final de la matriz.

Por ejemplo:

var array = [1, 2, 3, 4];
array.splice(1, 2);

array hojas que contiene:

[1, 4]

El retorno de array.splice() es una nueva matriz que contiene los elementos eliminados. Para el ejemplo anterior, la devolución sería:

[2, 3]

Por lo tanto, al omitir el segundo parámetro, se divide efectivamente la matriz en dos matrices, con el final original antes del índice especificado:

var array = [1, 2, 3, 4];
array.splice(2);

... deja la array contiene [1, 2] y devuelve [3, 4] .

Borrar

Utilice delete para eliminar un elemento de la matriz sin cambiar la longitud de la matriz:

var array = [1, 2, 3, 4, 5];
console.log(array.length); // 5
delete array[2];
console.log(array); // [1, 2, undefined, 4, 5]
console.log(array.length); // 5

Array.prototype.length

La asignación de valor a la length de la matriz cambia la longitud a un valor dado. Si el nuevo valor es menor que la longitud de la matriz, los elementos se eliminarán del final del valor.

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

Matrices de inversión

.reverse se utiliza para invertir el orden de los elementos dentro de una matriz.

Ejemplo para .reverse :

[1, 2, 3, 4].reverse();

Resultados en:

[4, 3, 2, 1]

Nota : Tenga en cuenta que .reverse ( Array.prototype.reverse ) invertirá la matriz en su lugar . En lugar de devolver una copia invertida, devolverá la misma matriz, invertida.

var arr1 = [11, 22, 33];
var arr2 = arr1.reverse();
console.log(arr2); // [33, 22, 11]
console.log(arr1); // [33, 22, 11]

También puede revertir una matriz 'profundamente' mediante:

function deepReverse(arr) {
  arr.reverse().forEach(elem => {
    if(Array.isArray(elem)) {
      deepReverse(elem);
    }
  });
  return arr;
}

Ejemplo para deepReverse:

var arr = [1, 2, 3, [1, 2, 3, ['a', 'b', 'c']]];

deepReverse(arr);

Resultados en:

arr // -> [[['c','b','a'], 3, 2, 1], 3, 2, 1]

Eliminar valor de la matriz

Cuando necesite eliminar un valor específico de una matriz, puede usar la siguiente línea de una línea para crear una matriz de copia sin el valor dado:

array.filter(function(val) { return val !== to_remove; });

O si desea cambiar la matriz en sí sin crear una copia (por ejemplo, si escribe una función que obtiene una matriz como una función y la manipula), puede usar este fragmento de código:

while(index = array.indexOf(3) !== -1) { array.splice(index, 1); }

Y si necesita eliminar solo el primer valor encontrado, elimine el bucle while:

var index = array.indexOf(to_remove);
if(index !== -1) { array.splice(index , 1); }

Comprobando si un objeto es un Array

Array.isArray(obj) devuelve true si el objeto es un Array , de lo contrario es false .

Array.isArray([])           // true
Array.isArray([1, 2, 3])    // true
Array.isArray({})           // false
Array.isArray(1)            // false

En la mayoría de los casos se puede instanceof para comprobar si un objeto es una Array .

[] instanceof Array; // true
{} instanceof Array; // false

Array.isArray tiene la ventaja de usar una instanceof comprobación en que seguirá siendo true incluso si el prototipo de la matriz ha sido cambiado y devolverá false si un prototipo que no es de matriz se cambió al prototipo de Array .

var arr = [];
Object.setPrototypeOf(arr, null);
Array.isArray(arr);   // true
arr instanceof Array; // false

Ordenando matrices

El método .sort() ordena los elementos de una matriz. El método predeterminado ordenará la matriz según la cadena de puntos de código Unicode. Para ordenar una matriz numéricamente, el método .sort() necesita que se le compareFunction una función compareFunction .

Nota: El método .sort() es impuro. .sort() ordenará la matriz en el lugar , es decir, en lugar de crear una copia ordenada de la matriz original, reordenará la matriz original y la devolverá.

Orden predeterminado

Ordena la matriz en orden UNICODE.

['s', 't', 'a', 34, 'K', 'o', 'v', 'E', 'r', '2', '4', 'o', 'W', -1, '-4'].sort();

Resultados en:

[-1, '-4', '2', 34, '4', 'E', 'K', 'W', 'a', 'l', 'o', 'o', 'r', 's', 't', 'v']

Nota: los caracteres en mayúscula se han movido en mayúsculas. La matriz no está en orden alfabético, y los números no están en orden numérico.

Orden alfabético

['s', 't', 'a', 'c', 'K', 'o', 'v', 'E', 'r', 'f', 'l', 'W', '2', '1'].sort((a, b) => {
  return a.localeCompare(b);        
});

Resultados en:

['1', '2', 'a', 'c', 'E', 'f', 'K', 'l', 'o', 'r', 's', 't', 'v', 'W']

Nota: La clasificación anterior generará un error si los elementos de la matriz no son una cadena. Si sabe que la matriz puede contener elementos que no son cadenas, use la versión segura a continuación.

['s', 't', 'a', 'c', 'K', 1, 'v', 'E', 'r', 'f', 'l', 'o', 'W'].sort((a, b) => {
  return a.toString().localeCompare(b);      
});

Clasificación de cuerdas por longitud (la más larga primero)

["zebras", "dogs", "elephants", "penguins"].sort(function(a, b) {
  return b.length - a.length;
});

Resultados en

["elephants", "penguins", "zebras", "dogs"];

Clasificación de cuerdas por longitud (la más corta primero)

["zebras", "dogs", "elephants", "penguins"].sort(function(a, b) {
  return a.length - b.length;
});

Resultados en

["dogs", "zebras", "penguins", "elephants"];

Ordenamiento numérico (ascendente)

[100, 1000, 10, 10000, 1].sort(function(a, b) {
  return a - b;
});

Resultados en:

[1, 10, 100, 1000, 10000]

Clasificación numérica (descendente)

[100, 1000, 10, 10000, 1].sort(function(a, b) {
  return b - a;
});

Resultados en:

[10000, 1000, 100, 10, 1]

Ordenando la matriz por números pares e impares

[10, 21, 4, 15, 7, 99, 0, 12].sort(function(a, b) {
    return (a & 1) - (b & 1) || a - b;
});

Resultados en:

[0, 4, 10, 12, 7, 15, 21, 99]

Fecha de clasificación (descendente)

var dates = [
  new Date(2007, 11, 10),
  new Date(2014, 2, 21),
  new Date(2009, 6, 11),
  new Date(2016, 7, 23)
];

dates.sort(function(a, b) {
  if (a > b) return -1;
  if (a < b) return 1;
  return 0;
});

// the date objects can also sort by its difference
// the same way that numbers array is sorting
dates.sort(function(a, b) {
  return b-a;
});

Resultados en:

[
  "Tue Aug 23 2016 00:00:00 GMT-0600 (MDT)",
  "Fri Mar 21 2014 00:00:00 GMT-0600 (MDT)",
  "Sat Jul 11 2009 00:00:00 GMT-0600 (MDT)",
  "Mon Dec 10 2007 00:00:00 GMT-0700 (MST)"
]

Clonar poco a poco una matriz

A veces, necesita trabajar con una matriz mientras se asegura de no modificar el original. En lugar de un método de clone , las matrices tienen un método de slice que le permite realizar una copia superficial de cualquier parte de una matriz. Tenga en cuenta que esto solo clona el primer nivel. Esto funciona bien con tipos primitivos, como números y cadenas, pero no con objetos.

Para clonar superficialmente una matriz (es decir, tener una nueva instancia de matriz pero con los mismos elementos), puede usar la siguiente línea de una línea:

var clone = arrayToClone.slice();

Esto llama al método JavaScript Array.prototype.slice incorporado. Si pasa argumentos para slice , puede obtener comportamientos más complicados que crean clones superficiales de solo una parte de una matriz, pero para nuestros propósitos, solo llamar a slice() creará una copia superficial de toda la matriz.

Todos los métodos utilizados para convertir una matriz como objetos en una matriz son aplicables para clonar una matriz:

arrayToClone = [1, 2, 3, 4, 5];
clone1 = Array.from(arrayToClone);
clone2 = Array.of(...arrayToClone);
clone3 = [...arrayToClone] // the shortest way

arrayToClone = [1, 2, 3, 4, 5];
clone1 = Array.prototype.slice.call(arrayToClone);
clone2 = [].slice.call(arrayToClone);

Buscando una matriz

La forma recomendada (desde ES5) es usar Array.prototype.find :

let people = [
  { name: "bob" },
  { name: "john" }
];

let bob = people.find(person => person.name === "bob");

// Or, more verbose
let bob = people.find(function(person) {
  return person.name === "bob";
});

En cualquier versión de JavaScript, también se puede utilizar un estándar for bucle:

for (var i = 0; i < people.length; i++) {
  if (people[i].name === "bob") {
    break; // we found bob
  }
}

Índice de búsqueda

El método findIndex () devuelve un índice en la matriz, si un elemento de la matriz satisface la función de prueba provista. De lo contrario se devuelve -1.

array = [
  { value: 1 },
  { value: 2 },
  { value: 3 },
  { value: 4 },
  { value: 5 }
];
var index = array.findIndex(item => item.value === 3); // 2
var index = array.findIndex(item => item.value === 12); // -1

Eliminar / Añadir elementos usando splice ()

El método splice() se puede utilizar para eliminar elementos de una matriz. En este ejemplo, eliminamos los primeros 3 de la matriz.

var values = [1, 2, 3, 4, 5, 3];
var i = values.indexOf(3);
if (i >= 0) {
  values.splice(i, 1);
}
// [1, 2, 4, 5, 3]

El método splice() también se puede usar para agregar elementos a una matriz. En este ejemplo, insertaremos los números 6, 7 y 8 al final de la matriz.

var values = [1, 2, 4, 5, 3];
var i = values.length + 1;
values.splice(i, 0, 6, 7, 8);
//[1, 2, 4, 5, 3, 6, 7, 8]

El primer argumento del método splice() es el índice para eliminar / insertar elementos. El segundo argumento es el número de elementos a eliminar. El tercer argumento y en adelante son los valores para insertar en la matriz.

Comparación de arrays

Para una comparación simple de matrices, puede usar JSON stringify y comparar las cadenas de salida:

JSON.stringify(array1) === JSON.stringify(array2)

Nota: esto solo funcionará si ambos objetos son serializables JSON y no contienen referencias cíclicas. Puede lanzar TypeError: Converting circular structure to JSON

Puede utilizar una función recursiva para comparar matrices.

function compareArrays(array1, array2) { 
  var i, isA1, isA2;
  isA1 = Array.isArray(array1);
  isA2 = Array.isArray(array2);
  
  if (isA1 !== isA2) { // is one an array and the other not?
    return false;      // yes then can not be the same
  }
  if (! (isA1 && isA2)) {      // Are both not arrays 
    return array1 === array2;  // return strict equality
  }
  if (array1.length !== array2.length) { // if lengths differ then can not be the same
    return false;
  }
  // iterate arrays and compare them
  for (i = 0; i < array1.length; i += 1) {
    if (!compareArrays(array1[i], array2[i])) { // Do items compare recursively
      return false;
    }           
  }
  return true; // must be equal
}

ADVERTENCIA: el uso de la función anterior es peligroso y debe estar envuelto en un catch try si sospecha que existe una posibilidad de que la matriz tenga referencias cíclicas (una referencia a una matriz que contiene una referencia a sí misma)

a = [0] ;
a[1] = a;
b = [0, a]; 
compareArrays(a, b); // throws RangeError: Maximum call stack size exceeded

Nota: La función utiliza el operador de igualdad estricta === para comparar elementos que no son matrices {a: 0} === {a: 0} es false

Destructurando una matriz

const triangle = [3, 4, 5];
const [length, height, hypotenuse] = triangle;

length === 3;     // → true
height === 4;     // → true
hypotneuse === 5; // → true

const [,b,,c] = [1, 2, 3, 4];

console.log(b, c); // → 2, 4

const [b,c, ...xs] = [2, 3, 4, 5];
console.log(b, c, xs); // → 2, 3, [4, 5]

function area([length, height]) {
  return (length * height) / 2;
}

const triangle = [3, 4, 5];

area(triangle); // → 6

Eliminar elementos duplicados

A partir de ES5.1, puede utilizar el método nativo Array.prototype.filter para recorrer una matriz y dejar solo las entradas que pasan una función de devolución de llamada determinada.

En el siguiente ejemplo, nuestra devolución de llamada verifica si el valor dado ocurre en la matriz. Si lo hace, es un duplicado y no se copiará a la matriz resultante.

var uniqueArray = ['a', 1, 'a', 2, '1', 1].filter(function(value, index, self) { 
  return self.indexOf(value) === index;
}); // returns ['a', 1, 2, '1']

Si su entorno es compatible con ES6, también puede usar el objeto Set . Este objeto le permite almacenar valores únicos de cualquier tipo, ya sean valores primitivos o referencias de objetos:

var uniqueArray = [... new Set(['a', 1, 'a', 2, '1', 1])];

Vea también los siguientes ejemplos en SO:

• Respuesta de SO relacionada
• Respuesta relacionada con ES6

Quitando todos los elementos

var arr = [1, 2, 3, 4];

Método 1

Crea una nueva matriz y sobrescribe la referencia de la matriz existente con una nueva.

arr = [];

Se debe tener cuidado ya que esto no elimina ningún elemento de la matriz original. La matriz puede haberse cerrado cuando se pasa a una función. La matriz permanecerá en la memoria durante la vida útil de la función, aunque es posible que no lo sepa. Esta es una fuente común de fugas de memoria.

Ejemplo de una pérdida de memoria resultante de la eliminación incorrecta de la matriz:

var count = 0;

function addListener(arr) { // arr is closed over
  var b = document.body.querySelector("#foo" + (count++));
  b.addEventListener("click", function(e) { // this functions reference keeps
    // the closure current while the
    // event is active
    // do something but does not need arr       
  });
}

arr = ["big data"];
var i = 100;
while (i > 0) {
  addListener(arr); // the array is passed to the function
  arr = []; // only removes the reference, the original array remains
  array.push("some large data"); // more memory allocated
  i--;
}
// there are now 100 arrays closed over, each referencing a different array
// no a single item has been deleted

Para evitar el riesgo de una pérdida de memoria, utilice uno de los 2 métodos siguientes para vaciar la matriz en el bucle while del ejemplo anterior.

Método 2

La configuración de la propiedad de longitud elimina todos los elementos de la matriz de la nueva longitud de la matriz a la longitud de la matriz anterior. Es la forma más eficaz de eliminar y anular todos los elementos de la matriz. Mantiene la referencia a la matriz original.

arr.length = 0;

Método 3

Similar al método 2, pero devuelve una nueva matriz que contiene los elementos eliminados. Si no necesita los elementos, este método es ineficiente, ya que la nueva matriz aún se crea solo para que se elimine la referencia de inmediato.

arr.splice(0); // should not use if you don't want the removed items
// only use this method if you do the following
var keepArr = arr.splice(0); // empties the array and creates a new array containing the
                             // removed items

Pregunta relacionada .

Usando el mapa para reformatear objetos en una matriz

Array.prototype.map() : devuelve una nueva matriz con los resultados de llamar a una función proporcionada en cada elemento de la matriz original.

El siguiente ejemplo de código toma una matriz de personas y crea una nueva matriz que contiene personas con una propiedad 'fullName'

var personsArray = [
  {
    id: 1,
    firstName: "Malcom",
    lastName: "Reynolds"
  }, {
    id: 2,
    firstName: "Kaylee",
    lastName: "Frye"
  }, {
    id: 3,
    firstName: "Jayne",
    lastName: "Cobb"
  }
];

// Returns a new array of objects made up of full names.
var reformatPersons = function(persons) {
  return persons.map(function(person) {
    // create a new object to store full name.
    var newObj = {};
    newObj["fullName"] = person.firstName + " " + person.lastName;

    // return our new object.
    return newObj;
  });
};

Ahora podemos llamar a reformatPersons(personsArray) y recibimos una nueva serie de solo los nombres completos de cada persona.

var fullNameArray = reformatPersons(personsArray);
console.log(fullNameArray);
/// Output
[
  { fullName: "Malcom Reynolds" }, 
  { fullName: "Kaylee Frye" },
  { fullName: "Jayne Cobb" }
]

personsArray y su contenido se mantiene sin cambios.

console.log(personsArray);
/// Output
[
  {
    firstName: "Malcom",
    id: 1,
    lastName: "Reynolds"
  }, {
    firstName: "Kaylee",
    id: 2,
    lastName: "Frye"
  }, {
    firstName: "Jayne",
    id: 3,
    lastName: "Cobb"
  }
]

Fusionar dos matrices como par de valores clave

Cuando tenemos dos matrices separadas y queremos hacer un par de valores clave de esas dos matrices, podemos usar la función de reducción de matrices como se muestra a continuación:

var columns = ["Date", "Number", "Size", "Location", "Age"];
var rows = ["2001", "5", "Big", "Sydney", "25"];
var result =  rows.reduce(function(result, field, index) {
  result[columns[index]] = field;
  return result;
}, {})

console.log(result);

Salida:

{
  Date: "2001",
  Number: "5",
  Size: "Big",
  Location: "Sydney",
  Age: "25"
}

Convertir una cadena en una matriz

El método .split() divide una cadena en una matriz de subcadenas. Por defecto .split() la cadena en subcadenas en espacios ( " " ), que es equivalente a llamar a .split(" ") .

El parámetro pasado a .split() especifica el carácter, o la expresión regular, para usar para dividir la cadena.

Para dividir una cadena en una llamada de matriz .split con una cadena vacía ( "" ). Nota importante: esto solo funciona si todos sus caracteres se ajustan a los caracteres de rango inferior de Unicode, que cubren la mayoría de los idiomas inglés y europeo. Para los idiomas que requieren caracteres Unicode de 3 y 4 bytes, la slice("") los separará.

var strArray = "StackOverflow".split("");
// strArray = ["S", "t", "a", "c", "k", "O", "v", "e", "r", "f", "l", "o", "w"]

var strArray = [..."sky is blue"];        
// strArray = ["s", "k", "y", " ", "i", "s", " ", "b", "l", "u", "e"]

Prueba todos los elementos de la matriz para la igualdad

El método .every comprueba si todos los elementos de la matriz pasan una prueba de predicado proporcionada.

Para probar la igualdad de todos los objetos, puede usar los siguientes fragmentos de código.

[1, 2, 1].every(function(item, i, list) { return item === list[0]; }); // false
[1, 1, 1].every(function(item, i, list) { return item === list[0]; }); // true

[1, 1, 1].every((item, i, list) => item === list[0]); // true

Los siguientes fragmentos de código prueban la igualdad de propiedad.

let data = [
  { name: "alice", id: 111 },
  { name: "alice", id: 222 }
];

data.every(function(item, i, list) { return item === list[0]; }); // false
data.every(function(item, i, list) { return item.name === list[0].name; }); // true

data.every((item, i, list) => item.name === list[0].name); // true

Copiar parte de un Array

El método slice () devuelve una copia de una parte de una matriz.

Toma dos parámetros, arr.slice([begin[, end]]) :

empezar

Índice de base cero que es el comienzo de la extracción.

fin

El índice de base cero, que es el final de la extracción, se reduce a este índice pero no está incluido.

Si el final es un número negativo, end = arr.length + end .

Ejemplo 1

// Let's say we have this Array of Alphabets
var arr = ["a", "b", "c", "d"...];

// I want an Array of the first two Alphabets
var newArr = arr.slice(0, 2); // newArr === ["a", "b"]

Ejemplo 2

// Let's say we have this Array of Numbers
// and I don't know it's end
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9...];

// I want to slice this Array starting from
// number 5 to its end
var newArr = arr.slice(4); // newArr === [5, 6, 7, 8, 9...]

Encontrar el elemento mínimo o máximo.

Si su matriz o objeto de tipo matriz es numérico , es decir, si todos sus elementos son números, puede usar Math.min.apply o Math.max.apply pasando null como primer argumento y su matriz como segundo. .

var myArray = [1, 2, 3, 4];

Math.min.apply(null, myArray); // 1
Math.max.apply(null, myArray); // 4

var myArray = [1, 2, 3, 4, 99, 20];

var maxValue = Math.max(...myArray); // 99
var minValue = Math.min(...myArray); // 1

El siguiente ejemplo usa un bucle for :

var maxValue = myArray[0];
for(var i = 1; i < myArray.length; i++) {
   var currentValue = myArray[i];
   if(currentValue > maxValue) {
      maxValue = currentValue;
   }
}

var myArray = [1, 2, 3, 4];

myArray.reduce(function(a, b) {
  return Math.min(a, b);
}); // 1

myArray.reduce(function(a, b) {
  return Math.max(a, b);
}); // 4

myArray.reduce((a, b) => Math.min(a, b)); // 1
myArray.reduce((a, b) => Math.max(a, b)); // 4

function myMax(array) {
  return array.reduce(function(maxSoFar, element) {
    return Math.max(maxSoFar, element);
  }, -Infinity);
}

myMax([3, 5]);             // 5
myMax([]);                 // -Infinity
Math.max.apply(null, []);  // -Infinity

Arreglos de aplanamiento

2 matrices dimensionales

function flattenES6(arr) {
  return [].concat(...arr);
}

var arrL1 = [1, 2, [3, 4]];
console.log(flattenES6(arrL1)); // [1, 2, 3, 4]

function flatten(arr) {
  return [].concat.apply([], arr);
}

var arrL1 = [1, 2, [3, 4]];
console.log(flatten(arrL1)); // [1, 2, 3, 4]

Matrices de mayor dimensión

Dado un conjunto profundamente anidado como tal

var deeplyNested = [4,[5,6,[7,8],9]];

Se puede aplanar con esta magia.

console.log(String(deeplyNested).split(',').map(Number);
#=> [4,5,6,7,8,9]

O

const flatten = deeplyNested.toString().split(',').map(Number)
console.log(flatten);
#=> [4,5,6,7,8,9]

Los dos métodos anteriores solo funcionan cuando la matriz se compone exclusivamente de números. Una matriz multidimensional de objetos no puede ser aplanada por este método.

Insertar un elemento en una matriz en un índice específico

La inserción de elementos simples se puede hacer con el método Array.prototype.splice :

arr.splice(index, 0, item);

Variante más avanzada con múltiples argumentos y soporte de encadenamiento:

/* Syntax:
   array.insert(index, value1, value2, ..., valueN) */

Array.prototype.insert = function(index) {
  this.splice.apply(this, [index, 0].concat(
    Array.prototype.slice.call(arguments, 1)));
  return this;
};

["a", "b", "c", "d"].insert(2, "X", "Y", "Z").slice(1, 6);  // ["b", "X", "Y", "Z", "c"]

Y con la combinación de argumentos de tipo matriz y el soporte de encadenamiento

/* Syntax:
   array.insert(index, value1, value2, ..., valueN) */

Array.prototype.insert = function(index) {
  index = Math.min(index, this.length);
  arguments.length > 1
    && this.splice.apply(this, [index, 0].concat([].pop.call(arguments)))
    && this.insert.apply(this, arguments);
  return this;
};

["a", "b", "c", "d"].insert(2, "V", ["W", "X", "Y"], "Z").join("-");  // "a-b-V-W-X-Y-Z-c-d"

El método de las entradas ()

El método entries() devuelve un nuevo objeto Iterator de Array que contiene los pares clave / valor para cada índice en la matriz.

var letters = ['a','b','c'];

for(const[index,element] of letters.entries()){
  console.log(index,element);
}

resultado

0 "a"
1 "b"
2 "c"

Nota : este método no es compatible con Internet Explorer.

Partes de este contenido de Array.prototype.entries por Mozilla Contributors con licencia CC-by-SA 2.5