JavaScript
Array

Sintassi

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

Osservazioni

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

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

Inizializzazione di array standard

Esistono molti modi per creare array. I più comuni sono l'uso di letterali di array o il costruttore di Array:

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

Se il costruttore Array viene utilizzato senza argomenti, viene creato un array vuoto.

var arr3 = new Array();

risultati in:

[]

Nota che se è usato con esattamente un argomento e quell'argomento è un number , verrà invece creato un array di quella lunghezza con tutti i valori undefined :

var arr4 = new Array(4);

risultati in:

[undefined, undefined, undefined, undefined]

Questo non si applica se il singolo argomento non è numerico:

var arr5 = new Array("foo");

risultati in:

["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]

Array spread / riposo

Operatore di diffusione

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]

Mappatura dei valori

Spesso è necessario generare un nuovo array in base ai valori di un array esistente.

Ad esempio, per generare una serie di lunghezze di stringa da una matrice di stringhe:

['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]

In questo esempio, viene fornita una funzione anonima alla funzione map() e la funzione map la chiamerà per ogni elemento dell'array, fornendo i seguenti parametri, in questo ordine:

• L'elemento stesso
• L'indice dell'elemento (0, 1 ...)
• L'intero array

Inoltre, map() fornisce un secondo parametro opzionale per impostare il valore di this nella funzione di mappatura. A seconda dell'ambiente di esecuzione, il valore predefinito di this potrebbe variare:

In un browser, il valore predefinito di this è sempre la window :

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

Puoi cambiarlo in qualsiasi oggetto personalizzato come questo:

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

Valori di filtraggio

Il metodo filter() crea una matrice riempita con tutti gli elementi dell'array che superano un test fornito come funzione.

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

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

Risultati in un nuovo array:

[3, 4, 5]

Filtrare valori falsi

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

Poiché Boolean è una funzione / costruttore javascript nativo che accetta [un parametro opzionale] e il metodo di filtro accetta anche una funzione e la passa come parametro all'elemento della matrice corrente, è possibile leggerla come segue:

1. Boolean(0) restituisce false
2. Boolean(undefined) restituisce falso
3. Boolean({}) restituisce true che significa spingerlo all'array restituito
4. Boolean(null) restituisce false
5. Boolean('') restituisce false
6. Boolean(true) restituisce true che significa spingerlo all'array restituito
7. Boolean(5) restituisce true che significa spingerlo all'array restituito

quindi il processo complessivo risulterà

[ {}, true, 5 ]

Un altro semplice esempio

Questo esempio utilizza lo stesso concetto di passare una funzione che accetta un argomento

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"]

Iterazione

Un tradizionale for -loop

Un ciclo for tradizionale ha tre componenti:

1. L'inizializzazione: eseguita prima che il blocco di visualizzazione venga eseguito la prima volta
2. La condizione: controlla una condizione ogni volta prima che venga eseguito il blocco del ciclo e chiude il ciclo se falso
3. Il ripensamento: eseguito ogni volta dopo l'esecuzione del blocco del ciclo

Queste tre componenti sono separate l'una dall'altra da a ; simbolo. Contenuto di ciascuno di questi tre componenti è opzionale, il che significa che il seguente è il più minimo for ciclo possibile:

for (;;) {
    // Do stuff
}

Naturalmente, è necessario includere un if(condition === true) { break; } o un if(condition === true) { return; } da qualche parte all'interno che for -loop per farlo smettere di funzionare.

Di solito, tuttavia, l'inizializzazione viene utilizzata per dichiarare un indice, la condizione viene utilizzata per confrontare tale indice con un valore minimo o massimo e il ripensamento viene utilizzato per incrementare l'indice:

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

Utilizzo di un ciclo tradizionale for eseguire il ciclo di un array

Il modo tradizionale di scorrere un array è questo:

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

Oppure, se preferisci eseguire il looping all'indietro, fai questo:

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

Ci sono, tuttavia, molte varianti possibili, come ad esempio questa:

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

... o questo ...

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

... o questo:

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

Qualunque cosa funzioni meglio dipende in gran parte sia dal gusto personale che dal caso d'uso specifico che stai implementando.

Nota che ognuna di queste variazioni è supportata da tutti i browser, compresi quelli molto vecchi!

Un while ciclo

Un'alternativa a un ciclo for è un ciclo while . Per eseguire il ciclo di un array, è possibile eseguire questa operazione:

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

Come tradizione for cicli, while i cicli sono supportati da anche il più antico dei browser.

Inoltre, si noti che ogni ciclo while può essere riscritto come ciclo for . Ad esempio, il ciclo while hereabove si comporta esattamente allo stesso modo di questo for -loop:

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

for...in

In JavaScript, puoi anche fare questo:

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

Questo dovrebbe essere usato con cautela, tuttavia, come non si comporta lo stesso come un tradizionale for ciclo in tutti i casi, e ci sono potenziali effetti collaterali che devono essere considerati. Vedi Perché l'uso di "for ... in" con l'iterazione degli array è una cattiva idea? per ulteriori dettagli.

for...of

In ES 6, il ciclo for-of è il metodo consigliato per iterare su un valore di un array:

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

L'esempio seguente mostra la differenza tra a for...of loop e a for...in loop:

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()

Il metodo Array.prototype.keys() può essere utilizzato per iterare su indici come questo:

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()

Il .forEach(...) è un'opzione in ES 5 e versioni successive. È supportato da tutti i browser moderni, nonché da Internet Explorer 9 e versioni successive.

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

Confrontando il tradizionale ciclo for , non possiamo saltare fuori dal ciclo in .forEach() . In questo caso, utilizzare il ciclo for oppure utilizzare l'iterazione parziale presentata di seguito.

In tutte le versioni di JavaScript, è possibile scorrere gli indici di un array usando uno stile C tradizionale for ciclo.

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);
}

È anche possibile utilizzare il ciclo while :

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

Array.prototype.every

Dal momento che ES5, se si desidera eseguire un'iterazione su una parte di un array, è possibile utilizzare Array.prototype.every , che itera fino a quando non viene restituito 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 in qualsiasi versione 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 fino a quando non si restituisce 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 in qualsiasi versione JavaScript:

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

biblioteche

Infine, molte librerie di utilità hanno anche la loro variazione foreach . Tre dei più popolari sono questi:

jQuery.each() , in jQuery :

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

_.each() , in Underscore.js :

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

_.forEach() , in Lodash.js :

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

Vedi anche la seguente domanda su SO, dove molte di queste informazioni sono state originariamente pubblicate:

• Passa attraverso un array in JavaScript

Filtro di matrici di oggetti

Il metodo filter() accetta una funzione di test e restituisce un nuovo array contenente solo gli elementi dell'array originale che superano il test fornito.

// 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 conterrebbe la seguente matrice: [5, 43] .

Funziona anche su una serie di oggetti:

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 conterrebbe il seguente array:

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

Puoi cercare nell'intero array per un valore come questo:

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;
});

Questo restituisce:

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

Unire gli elementi dell'array in una stringa

Per unire tutti gli elementi di una matrice in una stringa, è possibile utilizzare il metodo di join :

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

Come puoi vedere nella seconda riga, gli elementi che non sono stringhe verranno prima convertiti.

Conversione di oggetti tipo array in matrici

Cosa sono gli oggetti tipo array?

JavaScript ha "Oggetti tipo array", che sono rappresentazioni oggetto di array con una proprietà length. Per esempio:

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

Esempi comuni di oggetti tipo array sono gli arguments oggetto in funzioni e oggetti HTMLCollection o NodeList restituiti da metodi come document.getElementsByTagName o document.querySelectorAll .

Tuttavia, una differenza chiave tra gli array e gli oggetti tipo array è che gli oggetti tipo array ereditano da Object.prototype anziché da Array.prototype . Ciò significa che gli oggetti tipo array non possono accedere ai comuni metodi di prototipo di array come forEach() , push() , map() , filter() e 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]

Converti oggetti tipo array in matrici in 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. Operatore di spread:

[...arrayLike]

4. Object.values :

var realArray = Object.values(arrayLike);

5. Object.keys :

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

Converti oggetti tipo array in matrici in ≤ ES5

Usa Array.prototype.slice modo:

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

Puoi anche usare Function.prototype.call per chiamare Array.prototype metodi Array.prototype su oggetti tipo Array, senza convertirli:

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

Puoi anche usare [].method.bind( arrayLikeObject ) per prendere in prestito metodi di array e incollarli sul tuo oggetto:

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

Modifica degli articoli durante la conversione

In ES6, mentre si utilizza Array.from , è possibile specificare una funzione mappa che restituisce un valore mappato per la nuova matrice creata.

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

Vedi Array sono oggetti per un'analisi dettagliata.

Ridurre i valori

[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}), {});

Tutti gli esempi sopra riportati per Flatten Array si traducono in:

{
  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]

Connettivo logico di valori

[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

Matrici concatenanti

Due matrici

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

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

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

Risultati in una nuova Array :

[1, 2, 3, 4, 5]

Matrici multiple

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]

Risultati in una nuova Array :

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

Senza copiare la prima matrice

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

longArray.push.apply(longArray, shortArray);

longArray.push(...shortArray)

Il valore di longArray è ora:

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

Si noti che se il secondo array è troppo lungo (> 100.000 voci), è possibile che si verifichi un errore di overflow dello stack (a causa di come funziona apply ). Per sicurezza, puoi invece iterare:

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

Valori di matrice e non di matrice

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

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

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

Risultati in una nuova Array :

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

Puoi anche mescolare gli array con i non-array

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

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

Risultati in una nuova Array :

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

Aggiungi / Previa elementi alla matrice

unshift

Usa .unshift per aggiungere uno o più elementi all'inizio di un array.

Per esempio:

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

array si traduce in:

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

Spingere

Inoltre .push viene utilizzato per aggiungere elementi dopo l'ultimo elemento attualmente esistente.

Per esempio:

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

array si traduce in:

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

Entrambi i metodi restituiscono la nuova lunghezza dell'array.

Chiavi e valori dell'oggetto su matrice

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

Ora la matrice è

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

Ordinamento dell'array multidimensionale

Dato il seguente array

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

Puoi ordinarlo per numero (secondo indice)

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

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

Questo uscirà

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

Essere consapevoli del fatto che il metodo sort opera sulla matrice in atto . Cambia la matrice. La maggior parte degli altri metodi di array restituisce un nuovo array, lasciando intatto quello originale. Questo è particolarmente importante da notare se si utilizza uno stile di programmazione funzionale e si prevede che le funzioni non abbiano effetti collaterali.

Rimozione di elementi da una matrice

Cambio

Usa .shift per rimuovere il primo elemento di un array.

Per esempio:

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

array si traduce in:

[2, 3, 4]

Pop

Inoltre .pop viene utilizzato per rimuovere l'ultimo elemento da un array.

Per esempio:

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

array si traduce in:

[1, 2]

Entrambi i metodi restituiscono l'oggetto rimosso;

giuntura

Usa .splice() per rimuovere una serie di elementi da una matrice. .splice() accetta due parametri, l'indice iniziale e un numero facoltativo di elementi da eliminare. Se il secondo parametro viene .splice() rimuoverà tutti gli elementi dall'indice iniziale fino alla fine dell'array.

Per esempio:

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

lascia una array contenente:

[1, 4]

Il ritorno di array.splice() è un nuovo array che contiene gli elementi rimossi. Per l'esempio sopra, il rendimento sarebbe:

[2, 3]

Pertanto, l'omissione del secondo parametro divide efficacemente l'array in due matrici, con la fine originale prima dell'indice specificato:

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

... lascia un array contenente [1, 2] e restituisce [3, 4] .

Elimina

Usa delete per rimuovere l'elemento dalla matrice senza modificare la lunghezza della matrice:

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

Assegnare il valore alla length dell'array cambia la lunghezza in un dato valore. Se il nuovo valore è inferiore alla lunghezza dell'array, gli elementi verranno rimossi dalla fine del valore.

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

Array in retromarcia

.reverse viene utilizzato per invertire l'ordine degli elementi all'interno di un array.

Esempio per .reverse :

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

Risultati in:

[4, 3, 2, 1]

Nota : notare che .reverse ( Array.prototype.reverse ) invertirà la matrice in posizione . Invece di restituire una copia inversa, restituirà lo stesso array, invertito.

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

Puoi anche invertire una matrice "profondamente" con:

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

Esempio per deepReverse:

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

deepReverse(arr);

Risultati in:

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

Rimuovi il valore dalla matrice

Quando è necessario rimuovere un valore specifico da un array, è possibile utilizzare il seguente one-liner per creare un array di copia senza il valore specificato:

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

Oppure se vuoi cambiare l'array stesso senza creare una copia (ad esempio se scrivi una funzione che ottiene un array come funzione e lo manipola) puoi usare questo snippet:

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

E se hai bisogno di rimuovere solo il primo valore trovato, rimuovi il ciclo while:

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

Verifica se un oggetto è una matrice

Array.isArray(obj) restituisce true se l'oggetto è una Array , altrimenti false .

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

Nella maggior parte dei casi è possibile instanceof per verificare se un oggetto è una Array .

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

Array.isArray ha il vantaggio di utilizzare instanceof controllo che restituirà true anche se il prototipo dell'array è stato modificato e restituirà false se un prototipo di non array è stato modificato nel prototipo di Array .

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

Ordinamento di matrici

Il metodo .sort() ordina gli elementi di una matrice. Il metodo predefinito ordinerà l'array in base ai punti di codice Unicode della stringa. Per ordinare una matrice numericamente, il metodo .sort() deve avere a che una funzione compareFunction passata.

Nota: il metodo .sort() è impuro. .sort() l'array sul posto , cioè, invece di creare una copia ordinata dell'array originale, ordinerà nuovamente l'array originale e lo restituirà.

Ordinamento predefinito

Ordina l'array in ordine UNICODE.

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

Risultati in:

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

Nota: i caratteri maiuscoli si sono spostati sopra le lettere minuscole. L'array non è in ordine alfabetico e i numeri non sono in ordine numerico.

Ordinamento alfabetico

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

Risultati in:

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

Nota: l'ordinamento sopra riportato genera un errore se qualsiasi elemento dell'array non è una stringa. Se si sa che la matrice potrebbe contenere elementi che non sono stringhe, utilizzare la versione sicura di seguito.

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

Ordinamento delle stringhe per lunghezza (prima il più lungo)

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

Risultati in

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

Ordinamento delle stringhe per lunghezza (prima il più breve)

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

Risultati in

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

Ordinamento numerico (crescente)

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

Risultati in:

[1, 10, 100, 1000, 10000]

Ordinamento numerico (decrescente)

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

Risultati in:

[10000, 1000, 100, 10, 1]

Ordinamento dell'array per numeri pari e dispari

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

Risultati in:

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

Data Ordina (decrescente)

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;
});

Risultati in:

[
  "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)"
]

Shallow clonazione di un array

A volte, è necessario lavorare con un array assicurandosi di non modificare l'originale. Invece di un metodo clone , gli array hanno un metodo slice che consente di eseguire una copia superficiale di qualsiasi parte di un array. Tieni presente che questo clona solo il primo livello. Funziona bene con tipi primitivi, come numeri e stringhe, ma non oggetti.

Per clonare superficialmente un array (cioè avere una nuova istanza dell'array ma con gli stessi elementi), puoi usare il seguente one-liner:

var clone = arrayToClone.slice();

Questo chiama il metodo Array.prototype.slice JavaScript. Se si passano gli argomenti da slice , è possibile ottenere comportamenti più complicati che creano cloni superficiali solo di una parte di un array, ma per i nostri scopi la semplice chiamata slice() creerà una copia superficiale dell'intero array.

Tutti i metodi utilizzati per convertire array come oggetti in array sono applicabili per clonare un array:

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);

Ricerca in una matrice

Il modo consigliato (dal momento che ES5) è utilizzare 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";
});

In qualsiasi versione di JavaScript, può essere utilizzato anche un ciclo for standard:

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

FindIndex

Il metodo findIndex () restituisce un indice nell'array, se un elemento dell'array soddisfa la funzione di test fornita. Altrimenti viene restituito -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

Rimozione / aggiunta di elementi tramite splice ()

Il metodo splice() può essere usato per rimuovere elementi da una matrice. In questo esempio, rimuoviamo i primi 3 dall'array.

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]

Il metodo splice() può anche essere utilizzato per aggiungere elementi a un array. In questo esempio, inseriremo i numeri 6, 7 e 8 alla fine dell'array.

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]

Il primo argomento del metodo splice() è l'indice al quale rimuovere / inserire elementi. Il secondo argomento è il numero di elementi da rimuovere. Il terzo argomento e in avanti sono i valori da inserire nell'array.

Confronto di matrice

Per il confronto con array semplice, puoi utilizzare JSON stringify e confrontare le stringhe di output:

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

Nota: ciò funzionerà solo se entrambi gli oggetti sono serializzabili in JSON e non contengono riferimenti ciclici. Può lanciare TypeError: Converting circular structure to JSON

È possibile utilizzare una funzione ricorsiva per confrontare gli array.

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
}

ATTENZIONE: l' utilizzo della funzione sopra descritta è pericoloso e dovrebbe essere racchiuso in un try catch se si sospetta che ci sia una possibilità che l'array abbia riferimenti ciclici (un riferimento a un array che contiene un riferimento a se stesso)

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

Nota: la funzione utilizza l'operatore di uguaglianza rigorosa === per confrontare gli elementi non dell'array {a: 0} === {a: 0} è false

Distruzione di un array

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

Rimozione di elementi duplicati

Da ES5.1 in poi, è possibile utilizzare il metodo nativo Array.prototype.filter per Array.prototype.filter ciclo di un array e lasciare solo le voci che passano una determinata funzione di callback.

Nell'esempio seguente, il nostro callback controlla se il valore dato si verifica nell'array. Se lo fa, è un duplicato e non verrà copiato nell'array risultante.

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

Se il proprio ambiente supporta ES6, è anche possibile utilizzare l'oggetto Set . Questo oggetto consente di memorizzare valori univoci di qualsiasi tipo, siano essi valori primitivi o riferimenti a oggetti:

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

Vedi anche le seguenti anwsers su SO:

• Relativa risposta SO
• Risposte correlate con ES6

Rimozione di tutti gli elementi

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

Metodo 1

Crea una nuova matrice e sovrascrive il riferimento dell'array esistente con uno nuovo.

arr = [];

Si deve prestare attenzione in quanto ciò non rimuove alcun elemento dall'array originale. La matrice potrebbe essere stata chiusa quando passata a una funzione. L'array rimarrà in memoria per la durata della funzione, anche se potresti non essere a conoscenza di ciò. Questa è una fonte comune di perdite di memoria.

Esempio di una perdita di memoria risultante da una cancellazione di array errata:

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

Per evitare il rischio di una perdita di memoria, utilizzare uno dei seguenti 2 metodi per svuotare l'array nel ciclo while del precedente esempio.

Metodo 2

L'impostazione della proprietà length cancella tutti gli elementi dell'array dalla nuova lunghezza dell'array alla vecchia lunghezza dell'array. È il modo più efficace per rimuovere e dereferenziare tutti gli elementi dell'array. Mantiene il riferimento alla matrice originale

arr.length = 0;

Metodo 3

Simile al metodo 2 ma restituisce un nuovo array contenente gli elementi rimossi. Se non sono necessari gli articoli questo metodo è inefficiente in quanto il nuovo array viene ancora creato solo per essere immediatamente dereferenziato.

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

Domanda correlata

Uso della mappa per riformattare gli oggetti in una matrice

Array.prototype.map() : restituisce una nuova matrice con i risultati della chiamata di una funzione fornita su ogni elemento dell'array originale.

Il seguente esempio di codice accetta un array di persone e crea un nuovo array contenente persone con una proprietà '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;
  });
};

Ora possiamo chiamare reformatPersons(personsArray) e ricevere una nuova serie di soli nomi completi di ogni persona.

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

personsArray e il suo contenuto rimangono invariati.

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

Unisci due array come coppia di valori chiave

Quando abbiamo due array separati e vogliamo creare una coppia di valori chiave da quella matrice, possiamo usare la funzione di riduzione dell'array come di seguito:

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);

Produzione:

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

Convertire una stringa in una matrice

Il metodo .split() divide una stringa in una matrice di sottostringhe. Per impostazione predefinita, .split() interromperà la stringa in sottostringhe su spazi ( " " ), che equivale a chiamare .split(" ") .

Il parametro passato a .split() specifica il carattere o l'espressione regolare da utilizzare per dividere la stringa.

Per dividere una stringa in una chiamata di matrice .split con una stringa vuota ( "" ). Nota importante: funziona solo se tutti i caratteri si adattano ai caratteri Unicode di intervallo inferiore, che coprono gran parte della lingua inglese e della maggior parte delle lingue europee. Per le lingue che richiedono caratteri Unicode a 3 e 4 byte, slice("") le separerà.

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"]

Prova tutti gli elementi dell'array per l'uguaglianza

Il metodo .every verifica se tutti gli elementi dell'array superano un test del predicato fornito.

Per testare tutti gli oggetti per l'uguaglianza, puoi utilizzare i seguenti frammenti di codice.

[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

I seguenti frammenti di codice testano l'uguaglianza delle proprietà

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

Copia parte di una matrice

Il metodo slice () restituisce una copia di una porzione di un array.

Ci vogliono due parametri, arr.slice([begin[, end]]) :

inizio

Indice a base zero che è l'inizio dell'estrazione.

fine

Indice a base zero che rappresenta la fine dell'estrazione, che affetta fino a questo indice ma non è incluso.

Se la fine è un numero negativo, end = arr.length + end .

Esempio 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"]

Esempio 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...]

Trovare l'elemento minimo o massimo

Se il tuo array o l'oggetto tipo array è numerico , ovvero se tutti i suoi elementi sono numeri, puoi utilizzare Math.min.apply o Math.max.apply passando null come primo argomento e l'array come secondo .

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

L'esempio seguente utilizza un ciclo 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

Array appiattimento

2 matrici dimensionali

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]

Matrici di dimensioni superiori

Dato un array profondamente annidato in questo modo

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

Può essere appiattito con questa 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]

Entrambi i metodi sopra funzionano solo quando la matrice è composta esclusivamente da numeri. Un array multidimensionale di oggetti non può essere appiattito con questo metodo.

Inserisci un elemento in un array con un indice specifico

L'inserimento semplice dell'elemento può essere fatto con il metodo Array.prototype.splice :

arr.splice(index, 0, item);

Variante più avanzata con più argomenti e supporto di concatenamento:

/* 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"]

E con gli argomenti di tipo array unendo e concatenando il supporto:

/* 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"

Il metodo entries ()

Il metodo entries() restituisce un nuovo oggetto Array Iterator che contiene le coppie chiave / valore per ogni indice dell'array.

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

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

risultato

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

Nota : questo metodo non è supportato in Internet Explorer.

Porzioni di questo contenuto da Array.prototype.entries di Mozilla Contributori concessi in licenza in base a CC-by-SA 2.5