Un array è uno dei concetti più comuni di Javascript, che ci offre molte possibilità di lavorare con i dati memorizzati all'interno. Considerando che l'array è uno degli argomenti più basilari in Javascript che impari all'inizio del tuo percorso di programmazione, in questo articolo vorrei mostrarti alcuni trucchi che forse non conosci e che potrebbero essere molto utile nella codifica! Iniziamo.

1. Rimuovere i duplicati da un array

È una domanda di intervista molto popolare sugli array Javascript, su come estrarre i valori univoci dall'array Javascript. Ecco una soluzione rapida e semplice per questo problema, puoi utilizzare un nuovo Set () per questo scopo. E vorrei mostrarti due modi possibili per farlo, uno con il metodo .from() e il secondo con l'operatore spread (...).

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];

// First method
var uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits); // returns ["banana", "apple", "orange", "watermelon", "grape"]
// Second method
var uniqueFruits2 = […new Set(fruits)];
console.log(uniqueFruits2); // returns ["banana", "apple", "orange", "watermelon", "grape"]

A volte è necessario sostituire un valore specifico nell'array durante la creazione del codice, e c'è un bel metodo breve per farlo che potresti non sapere ancora. Per questo, possiamo usare .splice(start, value to remove, valueToAdd) e passare lì tutti e tre i parametri specificando dove vogliamo iniziare la modifica, quanti valori vogliamo cambiare e i nuovi valori.

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.splice(0, 2, “potato”, “tomato”);
console.log(fruits); // returns [“potato”, “tomato”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]

Probabilmente tutti conoscono il metodo .map() degli array, ma esiste una soluzione diversa che può essere utilizzata per ottenere un effetto simile e anche un codice molto pulito. Possiamo usare il metodo .from() per questo scopo.

var friends = [
    { name: ‘John’, age: 22 },
    { name: ‘Peter’, age: 23 },
    { name: ‘Mark’, age: 24 },
    { name: ‘Maria’, age: 22 },
    { name: ‘Monica’, age: 21 },
    { name: ‘Martha’, age: 19 },
]

var friendsNames = Array.from(friends, ({name}) => name);
console.log(friendsNames); // returns ["John", "Peter", "Mark", "Maria", "Monica", "Martha"]

Hai un array pieno di elementi ma devi pulirlo per qualsiasi scopo e non vuoi rimuovere gli elementi uno per uno? È molto semplice farlo in una riga di codice. Per svuotare un array, devi impostare la lunghezza di un array su 0, e il gioco è fatto!

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];

fruits.length = 0;
console.log(fruits); // returns []

Succede che abbiamo un array, ma per qualche scopo abbiamo bisogno di un oggetto con questi dati, e il modo più veloce per convertire l'array in un oggetto è usare un noto operatore di diffusione (...).

var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObj = { …fruits };
console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}

Ci sono alcune situazioni in cui creiamo un array e vorremmo riempirlo con alcuni dati, oppure abbiamo bisogno di un array con gli stessi valori, e in questo caso il metodo .fill() viene fornito con una soluzione semplice e pulita.

var newArray = new Array(10).fill(“1”);
console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]

Sai come unire gli array in un array senza usare il metodo .concat()? C'è un modo semplice per unire qualsiasi quantità di array in uno in una riga di codice. Come probabilmente avrai già realizzato, l'operatore spread (...) è piuttosto utile mentre lavori con gli array ed è lo stesso in questo caso.

var fruits = [“apple”, “banana”, “orange”];
var meat = [“poultry”, “beef”, “fish”];
var vegetables = [“potato”, “tomato”, “cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food); // [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”]

È anche una delle sfide più popolari che puoi affrontare in qualsiasi intervista Javascript perché mostra se puoi utilizzare metodi di matrice e qual è la tua logica. Per trovare l'intersezione di due array, utilizzeremo uno dei metodi precedentemente mostrati in questo articolo, per assicurarci che i valori nell'array che stiamo controllando non siano duplicati e utilizzeremo il metodo .filter e il metodo .includes. Di conseguenza, otterremo l'array con i valori che sono stati presentati in entrambi gli array. Controlla il codice:

var numOne = [0, 2, 4, 6, 8, 8];
var numTwo = [1, 2, 3, 4, 5, 6];
var duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));
console.log(duplicatedValues); // returns [2, 4, 6]

Per prima cosa, definiamo i valori falsi. In Javascript, i valori falsi sono false, 0, „”, null, NaN, undefined. Ora possiamo scoprire come rimuovere questi tipi di valori dal nostro array. Per raggiungere questo obiettivo, utilizzeremo il metodo .filter().

var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false];
var trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns [“blue”, 9, true, “white”]

A volte abbiamo bisogno di selezionare un valore dall'array in modo casuale. Per crearlo in modo facile, veloce e breve e mantenere pulito il nostro codice, possiamo ottenere un numero di indice casuale in base alla lunghezza dell'array. Vediamo il codice:

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]

Quando abbiamo bisogno di capovolgere il nostro array non c'è bisogno di crearlo attraverso complicati cicli e funzioni, c'è un semplice metodo di array che fa tutto per noi, e con una riga di codice, potremmo avere il nostro array invertito. Verifichiamolo:

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var reversedColors = colors.reverse();
console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”]

In Javascript esiste un metodo interessante che permette di trovare l'indice dell'ultima occorrenza dell'elemento dato. Ad esempio, se il nostro array ha valori duplicati, possiamo trovare la posizione dell'ultima occorrenza di esso. Vediamo l'esempio di codice:

var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
var lastIndex = nums.lastIndexOf(5);
console.log(lastIndex); // returns 9

Un'altra sfida che capita molto spesso durante i colloqui con Javascript Engineer. Niente di spaventoso viene qui; può essere risolto utilizzando il metodo .reduce in una riga di codice. Diamo un'occhiata al codice:

var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14

Codifica di livello superiore

Grazie per far parte della nostra comunità! Prima che tu vada:

• Batti le mani per la storia e segui l'autore
• Visualizza altri contenuti nella pubblicazione Level Up Coding
• Seguici: Twitter | Linkedin | Notiziario