ES6 - Arrays
L'uso di variabili per memorizzare i valori pone le seguenti limitazioni:
Le variabili sono di natura scalare. In altre parole, una dichiarazione di variabile può contenerne solo una alla volta. Ciò significa che per memorizzare n valori in un programma, saranno necessarie n dichiarazioni di variabili. Pertanto, l'uso di variabili non è fattibile quando è necessario memorizzare una raccolta di valori più ampia.
Alle variabili in un programma viene allocata la memoria in ordine casuale, rendendo così difficile recuperare / leggere i valori nell'ordine della loro dichiarazione.
JavaScript introduce il concetto di array per affrontare lo stesso problema.
Un array è una raccolta omogenea di valori. Per semplificare, un array è una raccolta di valori dello stesso tipo di dati. È un tipo definito dall'utente.
Caratteristiche di un array
Una dichiarazione di matrice alloca blocchi di memoria sequenziali.
Gli array sono statici. Ciò significa che un array una volta inizializzato non può essere ridimensionato.
Ogni blocco di memoria rappresenta un elemento dell'array.
Gli elementi della matrice sono identificati da un numero intero univoco chiamato come pedice / indice dell'elemento.
Anche gli array, come le variabili, dovrebbero essere dichiarati prima di essere utilizzati.
L'inizializzazione dell'array si riferisce al popolamento degli elementi dell'array.
I valori degli elementi della matrice possono essere aggiornati o modificati ma non possono essere eliminati.
Dichiarazione e inizializzazione di array
Per dichiarare e inizializzare un array in JavaScript, utilizzare la seguente sintassi:
var array_name; //declaration
array_name = [val1,val2,valn..] //initialization
OR
var array_name = [val1,val2…valn]Note - La coppia di [] è chiamata dimensione dell'array.
Ad esempio, una dichiarazione come: var numlist = [2,4,6,8] creerà un array come mostrato nella figura seguente.
Accesso agli elementi dell'array
Il nome dell'array seguito dall'indice viene utilizzato per fare riferimento a un elemento dell'array.
Di seguito è riportata la sintassi per lo stesso.
array_name[subscript]Esempio: Simple Array
var alphas;
alphas = ["1","2","3","4"]
console.log(alphas[0]);
console.log(alphas[1]);Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.
1
2Esempio: dichiarazione e inizializzazione di una singola istruzione
var nums = [1,2,3,3]
console.log(nums[0]);
console.log(nums[1]);
console.log(nums[2]);
console.log(nums[3]);Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.
1
2
3
3Oggetto array
È inoltre possibile creare un array utilizzando l'oggetto Array. Il costruttore Array può essere passato come -
Un valore numerico che rappresenta la dimensione della matrice o.
Un elenco di valori separati da virgole.
I seguenti esempi creano un array utilizzando questo metodo.
Esempio
var arr_names = new Array(4)
for(var i = 0;i<arr_names.length;i++) {
arr_names[i] = i * 2
console.log(arr_names[i])
}Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.
0
2
4
6Esempio: il costruttore di array accetta valori separati da virgole
var names = new Array("Mary","Tom","Jack","Jill")
for(var i = 0;i<names.length;i++) {
console.log(names[i])
}Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.
Mary
Tom
Jack
JillMetodi di matrice
Di seguito è riportato l'elenco dei metodi dell'oggetto Array insieme alla loro descrizione.
| Suor n | Metodo e descrizione |
|---|---|
| 1 | concat () Restituisce un nuovo array composto da questo array unito ad altri array e / o valori |
| 2 | ogni() Restituisce vero se ogni elemento in questo array soddisfa la funzione di test fornita. |
| 3 | filtro() Crea un nuovo array con tutti gli elementi di questo array per il quale la funzione di filtro fornita restituisce true. |
| 4 | per ciascuno() Chiama una funzione per ogni elemento dell'array. |
| 5 | indice di() Restituisce il primo (minimo) indice di un elemento all'interno della matrice uguale al valore specificato o -1 se non ne viene trovato nessuno. |
| 6 | aderire() Unisce tutti gli elementi di un array in una stringa. |
| 7 | lastIndexOf () Restituisce l'ultimo (massimo) indice di un elemento all'interno della matrice uguale al valore specificato o -1 se non ne viene trovato nessuno. |
| 8 | carta geografica() Crea un nuovo array con i risultati della chiamata di una funzione fornita su ogni elemento in questo array. |
| 9 | pop() Rimuove l'ultimo elemento da un array e restituisce quell'elemento. |
| 10 | Spingere() Aggiunge uno o più elementi alla fine di una matrice e restituisce la nuova lunghezza della matrice. |
| 11 | ridurre() Applica una funzione contemporaneamente a due valori dell'array (da sinistra a destra) per ridurla a un unico valore. |
| 12 | reduceRight () Applica una funzione contemporaneamente a due valori dell'array (da destra a sinistra) per ridurla a un unico valore. |
| 13 | inversione() Inverte l'ordine degli elementi di un array: il primo diventa l'ultimo e l'ultimo diventa il primo. |
| 14 | cambio() Rimuove il primo elemento da un array e restituisce la sezione dell'elemento. |
| 15 | fetta() Estrae una sezione di un array e restituisce un nuovo array. |
| 16 | alcuni() Restituisce vero se almeno un elemento in questo array soddisfa la funzione di test fornita. |
| 17 | toSource() Rappresenta il codice sorgente di un oggetto. |
| 18 | ordinare() Ordina gli elementi di un array. |
| 19 | giunzione () Aggiunge e / o rimuove elementi da un array. |
| 20 | accordare() Restituisce una stringa che rappresenta l'array e i suoi elementi. |
| 21 | unshift () Aggiunge uno o più elementi all'inizio di un array e restituisce la nuova lunghezza dell'array. |
ES6 - Metodi array
Di seguito sono riportati alcuni nuovi metodi di array introdotti in ES6.
Array.prototype.find
findti permette di iterare attraverso un array e recuperare il primo elemento che fa sì che la funzione di callback data restituisca true. Una volta trovato un elemento, la funzione ritorna immediatamente. È un modo efficiente per ottenere solo il primo elemento che corrisponde a una determinata condizione.
Example
var numbers = [1, 2, 3];
var oddNumber = numbers.find((x) => x % 2 == 1);
console.log(oddNumber); // 1Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.
1Note - L'ES5 filter() e l'ES6 find()non sono sinonimi. Filter restituisce sempre un array di corrispondenze (e restituirà più corrispondenze), find restituisce sempre l'elemento effettivo.
Array.prototype.findIndex
findIndex si comporta in modo simile a find, ma invece di restituire l'elemento corrispondente, restituisce l'indice di quell'elemento.
var numbers = [1, 2, 3];
var oddNumber = numbers.findIndex((x) => x % 2 == 1);
console.log(oddNumber); // 0L'esempio precedente restituirà l'indice del valore 1 (0) come output.
Array.prototype.entries
entriesè una funzione che restituisce un Array Iterator che può essere utilizzato per scorrere le chiavi e i valori dell'array. Le voci restituiranno un array di array, dove ogni array figlio è un array di [index, value].
var numbers = [1, 2, 3];
var val = numbers.entries();
console.log(val.next().value);
console.log(val.next().value);
console.log(val.next().value);Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.
[0,1]
[1.2]
[2,3]In alternativa, possiamo anche utilizzare l'operatore spread per recuperare un array di voci in una volta sola.
var numbers = [1, 2, 3];
var val= numbers.entries();
console.log([...val]);Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.
[[0,1],[1,2],[2,3]]Array.from
Array.from()consente la creazione di un nuovo array da un oggetto simile ad array. La funzionalità di base di Array.from () consiste nel convertire due tipi di valori in Array:
Valori simili a matrici.
Valori iterabili come Set e Map.
Example
"use strict"
for (let i of Array.from('hello')) {
console.log(i)
}Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.
h
e
l
l
oArray.prototype.keys ()
Questa funzione restituisce gli indici dell'array.
Example
console.log(Array.from(['a', 'b'].keys()))Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.
[ 0, 1 ]Array Traversal utilizzando for ... in loop
Si può usare il ciclo for ... in per attraversare un array.
"use strict"
var nums = [1001,1002,1003,1004]
for(let j in nums) {
console.log(nums[j])
}Il ciclo esegue un attraversamento di array basato su indice. Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.
1001
1002
1003
1004Array in JavaScript
JavaScript supporta i seguenti concetti sugli array:
| Suor n | Concetto e descrizione |
|---|---|
| 1 | Array multidimensionali JavaScript supporta array multidimensionali. La forma più semplice dell'array multidimensionale è l'array bidimensionale |
| 2 | Passaggio di array a funzioni È possibile passare alla funzione un puntatore a un array specificando il nome dell'array senza un indice. |
| 3 | Restituisce array dalle funzioni Consente a una funzione di restituire un array. |
De-strutturazione di array
Destructuringsi riferisce all'estrazione di singoli valori da un array o da un oggetto in variabili distinte. Si consideri uno scenario in cui i valori di un array devono essere assegnati a singole variabili. Il modo tradizionale di farlo è indicato di seguito:
var a= array1[0]
var b= array1[1]
var c= array1[2]La destrutturazione aiuta a ottenere lo stesso risultato in modo conciso.
Sintassi
//destructuring an array
let [variable1,variable2]=[item1,item2]
//destructuring an object
let {property1,property2} = {property1:value1,property2:value2}Esempio
<script>
let names = ['Mohtashim','Kannan','Kiran']
let [n1,n2,n3] = names;
console.log(n1)
console.log(n2)
console.log(n3);
//rest operator with array destructuring
let locations=['Mumbai','Hyderabad','Chennai']
let [l1,...otherValues] =locations
console.log(l1)
console.log(otherValues)
//variables already declared
let name1,name2;
[name1,name2] =names
console.log(name1)
console.log(name2)
//swapping
let first=10,second=20;
[second,first] = [first,second]
console.log("second is ",second) //10
console.log("first is ",first) //20
</script>L'output del codice sopra sarà come mostrato di seguito -
Mohtashim
Kannan
Kiran
Mumbai
["Hyderabad", "Chennai"]
Mohtashim
Kannan
second is 10
first is 20