Lo snippet di codice JavaScript per problemi comuni

Ultimo aggiornamento il 27 luglio 2021

Ogni linguaggio di programmazione ha i suoi difetti e le sue stranezze. Il linguaggio JavaScript e persino lo snippet di codice JavaScript utilizzato non fanno eccezione. Il linguaggio di scrittura si è comportato in modo strano negli ultimi anni, ma è uno dei linguaggi più usati oggigiorno. Nella maggior parte dei casi è perché è il principale linguaggio interattivo dei browser Internet.

Ci sono volte, come programmatori e programmatori, in cui abbiamo problemi ripetitivi e di semplice attività in cui abbiamo bisogno di semplici frammenti di codice. In questo blog, presenterò alcuni problemi comuni che possono essere facilmente risolti utilizzando lo scripting ES6 come parte di alcuni frammenti di codice JavaScript.

Suggerimento per lo snippet di codice JavaScript: usa 'let' invece di 'var'

let è come var ma ha portata. let è accessibile solo nel livello di ambito del blocco a cui viene dichiarato e assegnato un valore. var è accessibile a qualsiasi livello per quanto riguarda l'ambito del blocco in cui è definito. Nell'esempio seguente, la variabile 'num1' è definita all'interno di un'istruzione If e quindi non è accessibile all'esterno della funzione.

 se è vero) {
  sia num1 = 40;
}

sia num2 = 20;

console.log(num2, num1);
console.log(num1);

Produzione:
20
non definito

 sia a = 25;
sia b = 50;

se è vero) {
  sia a = 100;
  var c = 5;
  console.log(a/c);
  console.log(b/c);
}

console.log(c);
console.log(a);

Produzione:
20
10
5
25

Usa 'const' quando un valore variabile non cambia

const assegna un valore costante a una variabile che non può essere modificata. Ogni volta che viene definita una variabile const, JavaScript fa riferimento all'indirizzo del valore alla variabile.

La funzione freccia del frammento di codice JavaScript, una nuova sintassi per le funzioni

Le funzioni dei frammenti di codice JavaScript in ES6 sono state modificate in un'espressione più semplice, '() => {}'.

 // Vecchia sintassi
funzione mioCiao() {
  console.log("Ciao Mondo..!");
}

// Nuova sintassi
var mioCiao = () => {
  console.log("Ciao Mondo..!");
}

La nuova sintassi potrebbe inizialmente creare un po' di confusione. Ci sono due parti della sintassi.

 var mioCiao = ()

La prima parte del frammento di codice JavaScript dichiara una variabile e le assegna la funzione (). Dice solo che la variabile è una funzione.

 => { //fai qualcosa } 

La seconda parte dichiara la parte del corpo della funzione. La parte della freccia con le parentesi graffe definisce la parte del corpo.

Altri esempi ma con parametri.

 let withParameters = (a, b) => {
  console.log(a+b);
}

conParametri(10, 20);

Produzione:
30

 let sumOfNum = (a, b = 10) => {
  restituire a + b;
}

console.log(sumOfNum(20);
console.log(sumOfNum(20,30);

Produzione:
30
50

Nuovo 'per...di...' Loop

for...of è molto simile a for...in con lievi modifiche. for...of scorre un elenco di elementi come un array e restituisce gli elementi (non il loro indice) uno per uno. Si noti che la variabile 'num' restituisce ogni elemento nell'array, non l'indice.

 lasciate numeri = [5,6,7,8];

for (lascia il numero di numeri) {
  console.log(valore);
}

Produzione:
5
6
7
8

 let str = 'Arturo';

for (let char di str) {
  console.log(carattere);
}

Produzione:
UN
r
t
tu
r
o

Assegnazione variabile di distruzione

Assegnare variabili da un array una per una è dispendioso in termini di tempo e sciocco. Usa semplicemente l'assegnazione del distruttore per eseguire questo in modo più semplice e veloce:

 let profile = ['John', 32, 'ingegnere'];

let [nome, età, lavoro] = profilo;

console.log(nome);

Produzione:
John

Trova un oggetto specifico in una matrice di oggetti

Una delle attività più comuni che dovresti eseguire in JavaScript è scorrere un array di oggetti per trovarne uno specifico. Il metodo di ricerca è una soluzione semplice qui. Inserisci semplicemente i criteri di selezione utilizzando una funzione anonima come argomento e sei impostato:

 lascia che il personale = [
  { id: 0, nome: 'Nina' },
  { id: 1, nome: 'Kevin' },
  { id: 2, nome: 'John' }
]

let impiegato = staff.find(emp => emp.name === 'John');

console.log(client);

Produzione:
{ id: 2, nome: 'John' }

Ciclo su chiavi e valori di un oggetto

La nostra struttura dati potrebbe essere un oggetto complesso che contiene varie coppie chiave/valore. L'iterazione di ogni coppia potrebbe essere un po' strano, ma è semplice una volta che riusciamo a usare la funzione di Object.

Dopo che le chiavi dell'oggetto sono state acquisite, possiamo scorrere le chiavi e i valori contemporaneamente. Nella soluzione che segue, accediamo a ciascuna coppia utilizzando le variabili chiave e valore durante il ciclo.

 let myObject = { Pietro: 15, Giovanni: 20, Anna: 35 };

Object.keys(myObject).forEach((chiave, valore) => {
  //...fare qualcosa
  console.log(chiave, valore);
});

Produzione:
Pietro 15
Giovanni 20
Anna 35

Filtra una matrice di oggetti in base a una condizione

A volte abbiamo una vasta gamma di dati che vogliamo filtrare gli elementi in base a una condizione specifica. Possiamo una funzione di filtro per realizzare questo. La soluzione seguente ha una matrice di percorsi di file. Alcuni file si trovano nella directory 'data1' mentre altri nella directory 'data2'. Pensiamo di voler filtrare solo per una directory specifica:

 lascia posizione = [
  "file/dati1/file",
  "file/dati1/file2",
  "file/dati2/file",
  "file/dati2/file2"
];

let filter = location.filter(percorso => ​​percorso.includes('data2'));

console.log(filtro);

Produzione:
[ 'file/dir2/file', 'file/dir2/file2']

Specificando che la stringa di percorso deve includere la stringa 'data2' filtriamo tutti i percorsi che non contengono 'data2' al loro interno. Ricorda, qualsiasi funzione che passi al filtro deve restituire true affinché l'elemento venga incluso nel risultato.

Assegna chiavi a un oggetto con lo stesso nome

Quando si assegnano chiavi a un oggetto se la chiave ha lo stesso nome della variabile che contiene il valore che si desidera assegnare, è possibile omettere del tutto l'assegnazione del valore. Questo ti impedisce di doverti ripetere, cosa che tutti odiamo fare. Dai un'occhiata a questo esempio:

 lascia nome = 'Giovanni';
lascia età = 32;
lascia lavoro = 'ingegnere';

// Invece di questo
let profile1 = { nome: nome, età: età, lavoro: lavoro };

// Fai questo
let profile2 = { nome, età, lavoro };

console.log(profilo2);

Produzione:
{ nome: 'John', età: 32, lavoro: 'ingegnere' }

Utilizzando l'operatore di diffusione ES6 '...'

L'operatore di diffusione consente di "distribuire" letteralmente un array. Questo può essere utilizzato per trasformare un array in un elenco di argomenti o anche combinare due array. Potresti anche usarlo per formare un elenco di argomenti anche per una funzione.

Nel primo esempio, mostriamo come l'operatore spread lavora su un array e trasforma ogni elemento in un singolo elemento.

 siano numeri1 = [1,2,3,4,5];

console.log(...numeri1);

Produzione:
1 2 3 4 5

Il secondo esempio combina il contenuto di due array creando un nuovo array temporaneo contenente entrambi i contenuti.

 sia numeri2 = [6,7,8,9,10];

sia combinato = [...numeri1, ...numeri2];

console.log(...combinato);

Produzione:
1 2 3 4 5 6 7 8 9 10

L'ultimo esempio illustra come l'operatore spread può trasformare un array in un elenco di argomenti per una funzione. Math.max restituisce il numero più alto in un elenco di argomenti passati. Uno di questi argomenti era 10, che è il più alto.

 siano numeri1 = [1,2,3,4,5];

sia numeri2 = [6,7,8,9,10];

sia combinato = [...numeri1, ...numeri2];

console.log(Math.max(...combinato));

Produzione:
10

Nuove funzioni getter e setter

Getter e setter sono una delle utili funzionalità introdotte in ES6. È utile se utilizziamo classi in JavaScript.

 classe NomePersona {
  costruttore(nome) {
    questo.nome = nome;
  }
  prendi Nome() {
    restituire questo.nome;
  }
  imposta Nome(nome) {
    questo.nome = nome;
  }
}

let person = new PersonName("Jon Snow");
console.log(person.Name); // (A)

nome.persona = "Dany"; // (B)
console.log(person.Name);

Produzione:
Jon Snow
Dani

Possiamo vedere che ci sono due funzioni all'interno della classe PersonName con le proprietà 'get' e 'set'. La proprietà 'get' viene utilizzata per ottenere il valore della variabile e la proprietà 'set' viene utilizzata per impostare il valore sulla variabile. Possiamo anche vedere che la funzione get Name (A) viene chiamata senza parentesi e la funzione set Name (B) viene chiamata senza parentesi, ed è proprio come assegnare un valore alla variabile.