Guida amichevole per ECMAScript 2018 per principianti

Ciao a tutti, futuri maghi di JavaScript! Sono entusiasta di essere il vostro guida in questo viaggio emozionante attraverso ECMAScript 2018. Come qualcuno che ha insegnato programmazione per anni, non vedo l'ora di condividere queste nuove funzionalità con voi. Non preoccupatevi se siete nuovi al coding - prenderemo tutto passo per passo, e prima di sapere, scriverete JavaScript come un professionista!

ECMAScript 2018

Nuove funzionalità aggiunte in ECMAScript 2018

ECMAScript 2018, conosciuto anche come ES9, ha portato alcune fantastiche aggiunte alla lingua JavaScript. È come avere una nuova cassetta degli attrezzi lucente per le vostre avventure di programmazione! Immergiamoci in queste funzionalità una per una.

Iterazione asincrona in JavaScript

Immaginate di essere a un buffet, e invece di caricare tutto sul vostro piatto in una volta, potete magicamente evocare ogni piatto nel momento in cui siete pronti a mangiarlo. Questo è un po' ciò che fa l'iterazione asincrona per il vostro codice!

Il ciclo `for-await-of`

Questo nuovo ciclo ci permette di lavorare con fonti di dati asincroni più facilmente. Ecco un esempio:

async function* numberGenerator() {
yield Promise.resolve(1);
yield Promise.resolve(2);
yield Promise.resolve(3);
}

async function printNumbers() {
for await (const num of numberGenerator()) {
console.log(num);
}
}

printNumbers();
// Output:
// 1
// 2
// 3

In questo esempio, numberGenerator è una funzione generatrice asincrona che restituisce promise. Il ciclo for-await-of aspetta che ogni promise si risolva prima di passare alla prossima iterazione. È come avere un amico paziente che aspetta che voi finite ogni boccone prima di offrire il prossimo piatto!

Nuove funzionalità dell'oggetto RegExp()

RegExp, o espressioni regolari, sono come il coltello svizzero del trattamento del testo. ECMAScript 2018 ha aggiunto alcuni trucchetti interessanti a questo strumento.

Escape delle proprietà Unicode

Questa funzionalità ci permette di abbinare caratteri in base alle loro proprietà Unicode. È molto utile quando si lavora con testi internazionali!

const greekSymbol = "π";
console.log(/\p{Script=Greek}/u.test(greekSymbol)); // true

Qui, \p{Script=Greek} abbinare qualsiasi carattere nella scrittura greca. Il flag u abilita la modalità Unicode.

Affermazioni di lookbehind

Ora possiamo controllare cosa c'è prima della nostra corrispondenza, non solo dopo. È come essere in grado di guardare sopra la spalla nel mondo della programmazione!

const price = "$123.45";
console.log(price.match(/(?<=\$)\d+(\.\d*)?/)[0]); // "123.45"

In questo esempio, (?<=\$) è una lookbehind affermativa che assicura che la nostra corrispondenza sia preceduta da un segno di dollaro, senza includere il segno di dollaro nella corrispondenza.

Gruppi di cattura con nome

Possiamo ora dare nomi ai nostri gruppi di cattura, rendendo le nostre espressioni regolari più leggibili e manutenibili.

const dateRegex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = dateRegex.exec("2023-05-15");
console.log(match.groups.year);  // "2023"
console.log(match.groups.month); // "05"
console.log(match.groups.day);   // "15"

È come etichettare le compartimenti nella vostra cassetta degli attrezzi - tutto è più facile da trovare!

`Promise.prototype.finally()`

Le promise in JavaScript sono come fare un piano con un amico. A volte funziona, altre volte no, ma in ogni caso, potreste voler fare qualcosa dopo. È qui che entra in gioco finally()!

function fetchData() {
return new Promise((resolve, reject) => {
// Simulazione di una chiamata API
setTimeout(() => {
const success = Math.random() > 0.5;
if (success) {
resolve("Data fetched successfully!");
} else {
reject("Error fetching data");
}
}, 1000);
});
}

fetchData()
.then(data => console.log(data))
.catch(error => console.error(error))
.finally(() => console.log("Operation completed"));

In questo esempio, indipendentemente dal fatto che la promise si risolva o si rifiuti, il blocco finally verrà sempre eseguito. È come dire "Che ci riusciamo o meno, puliamo e torniamo a casa."

Proprietà oggetto rest

L'operatore di rest (...) negli oggetti letterali è come avere una borsa magica che può tenere tutti i resti. È molto utile quando vuoi separare alcune proprietà dal resto.

const person = {
name: "Alice",
age: 30,
city: "Wonderland",
occupation: "Explorer"
};

const { name, age, ...rest } = person;

console.log(name);  // "Alice"
console.log(age);   // 30
console.log(rest);  // { city: "Wonderland", occupation: "Explorer" }

In questo esempio, stiamo estraendo name e age, e tutto il resto viene messo in rest. È come separare il bucato - i calzini in una pila, tutto il resto in un'altra!

Conclusione

Eccoci arrivati, ragazzi! Abbiamo intrapreso un viaggio attraverso le affascinanti nuove funzionalità di ECMAScript 2018. Ricorda, il modo migliore per imparare è fare, quindi non abbiate paura di esperimentare con questi nuovi strumenti. Programmare è come cucinare - più pratichi, meglio diventi!

Ecco una tabella di riepilogo dei metodi che abbiamo coperto:

Funzionalità	Descrizione
`for-await-of`	Permette l'iterazione asincrona su promise
Escape delle proprietà Unicode	Abbinare caratteri in base alle loro proprietà Unicode in RegExp
Affermazioni di lookbehind	Controlla le corrispondenze basate su ciò che precede in RegExp
Gruppi di cattura con nome	Permette di dare nomi ai gruppi di cattura in RegExp
`Promise.prototype.finally()`	Specifica una callback da eseguire quando una promise è risolta
Proprietà oggetto rest	Raccolte le proprietà rimanenti in un nuovo oggetto