chore(i18n,curriculum): update translations (#42487)
* chore(i18n,curriculum): update translations * chore: Italian to italian Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>
This commit is contained in:
camperbot
GitHub
@ -0,0 +1,135 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b40
|
||||
title: Confrontare gli ambiti di applicazione delle parole chiave var e let
|
||||
challengeType: 1
|
||||
forumTopicId: 301195
|
||||
dashedName: compare-scopes-of-the-var-and-let-keywords
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Quando si dichiara una variabile con la parola chiave `var`, essa viene dichiarata globalmente, o localmente se dichiarata all'interno di una funzione.
|
||||
|
||||
La parola chiave `let` si comporta allo stesso modo, ma con alcune funzioni extra. Quando si dichiara una variabile con la parola chiave `let` all'interno di un blocco, di una dichiarazione o di un'espressione, il suo ambito di applicazione è limitato a tale blocco, dichiarazione o espressione.
|
||||
|
||||
Ad esempio:
|
||||
|
||||
```js
|
||||
var numArray = [];
|
||||
for (var i = 0; i < 3; i++) {
|
||||
numArray.push(i);
|
||||
}
|
||||
console.log(numArray);
|
||||
console.log(i);
|
||||
```
|
||||
|
||||
Qui la console mostrerà i valori `[0, 1, 2]` e `3`.
|
||||
|
||||
Con la parola chiave `var`, `i` viene dichiarata globalmente. Quindi, quando `i++` viene eseguito, aggiorna la variabile globale. Questo codice è simile al seguente:
|
||||
|
||||
```js
|
||||
var numArray = [];
|
||||
var i;
|
||||
for (i = 0; i < 3; i++) {
|
||||
numArray.push(i);
|
||||
}
|
||||
console.log(numArray);
|
||||
console.log(i);
|
||||
```
|
||||
|
||||
Qui la console mostrerà i valori `[0, 1, 2]` e `3`.
|
||||
|
||||
Questo comportamento causerà problemi se dovessi creare una funzione e memorizzarla per un uso successivo all'interno di un ciclo `for` che utilizza la variabile `i`. Questo perché la funzione memorizzata si riferirà sempre al valore della variabile globale `i` aggiornata.
|
||||
|
||||
```js
|
||||
var printNumTwo;
|
||||
for (var i = 0; i < 3; i++) {
|
||||
if (i === 2) {
|
||||
printNumTwo = function() {
|
||||
return i;
|
||||
};
|
||||
}
|
||||
}
|
||||
console.log(printNumTwo());
|
||||
```
|
||||
|
||||
Qui la console mostrerà il valore `3`.
|
||||
|
||||
Come puoi vedere, `printNumTwo()` stampa 3 e non 2. Questo perché il valore assegnato a `i` è stato aggiornato e `printNumTwo()` restituisce la variabile globale `i` e non il valore `i` che aveva quando la funzione è stata creata nel ciclo. La parola chiave `let` non segue questo comportamento:
|
||||
|
||||
```js
|
||||
let printNumTwo;
|
||||
for (let i = 0; i < 3; i++) {
|
||||
if (i === 2) {
|
||||
printNumTwo = function() {
|
||||
return i;
|
||||
};
|
||||
}
|
||||
}
|
||||
console.log(printNumTwo());
|
||||
console.log(i);
|
||||
```
|
||||
|
||||
Qui la console mostrerà il valore `2` e un l'errore `i is not defined` (i non è definita).
|
||||
|
||||
`i` non è definita perché non è stata dichiarata nell'ambito globale. È dichiarata solo all'interno della condizione del ciclo `for`. `printNumTwo()` ha restituito il valore corretto perché tre variabili `i` differenti con valori univoci (0, 1, e 2) sono state create dalla parola chiave `let` all'interno della dichiarazione del ciclo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Correggi il codice in modo che la variabile `i` dichiarata nella condizione dell'`if` sia una variabile separata dalla `i` dichiarata nella prima riga della funzione. Assicurati di non usare la parola chiave `var` in nessun punto del tuo codice.
|
||||
|
||||
Questo esercizio è progettato per illustrare la differenza tra il modo in cui le parole chiave `var` e `let` assegnano l'ambito alla variabile dichiarata. Quando si programma una funzione simile a quella utilizzata in questo esercizio, è spesso meglio usare nomi di variabili diversi per evitare confusione.
|
||||
|
||||
# --hints--
|
||||
|
||||
`var` non dovrebbe esistere nel codice.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(!getUserInput('index').match(/var/g));
|
||||
```
|
||||
|
||||
La variabile `i` dichiarata nella condizione dell'`if` dovrebbe essere uguale alla stringa `block scope`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
assert(
|
||||
getUserInput('index').match(/(i\s*=\s*).*\s*.*\s*.*\1('|")block\s*scope\2/g)
|
||||
);
|
||||
```
|
||||
|
||||
`checkScope()` dovrebbe restituire la stringa `function scope`
|
||||
|
||||
```js
|
||||
assert(checkScope() === 'function scope');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
function checkScope() {
|
||||
var i = 'function scope';
|
||||
if (true) {
|
||||
i = 'block scope';
|
||||
console.log('Block scope i is: ', i);
|
||||
}
|
||||
console.log('Function scope i is: ', i);
|
||||
return i;
|
||||
}
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
function checkScope() {
|
||||
let i = 'function scope';
|
||||
if (true) {
|
||||
let i = 'block scope';
|
||||
console.log('Block scope i is: ', i);
|
||||
}
|
||||
|
||||
console.log('Function scope i is: ', i);
|
||||
return i;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 5cdafbc32913098997531680
|
||||
title: Completare una promise con resolve e reject
|
||||
challengeType: 1
|
||||
forumTopicId: 301196
|
||||
dashedName: complete-a-promise-with-resolve-and-reject
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Una promise ha tre stati: `pending` (in attesa), `fulfilled` (soddisfatta) e `rejected` (rifiutata). La promise che hai creato nell'ultima sfida è bloccata per sempre nello stato `pending` perché non hai aggiunto un modo per completarla. I parametri `resolve` e `reject` forniti all'argomento della promise vengono utilizzati per farlo. `resolve` è usato quando vuoi che la promise abbia successo, e `reject` è usato quando vuoi che la promise fallisca. Questi sono metodi che prendono un argomento, come si vede qui sotto.
|
||||
|
||||
```js
|
||||
const myPromise = new Promise((resolve, reject) => {
|
||||
if(condition here) {
|
||||
resolve("Promise was fulfilled");
|
||||
} else {
|
||||
reject("Promise was rejected");
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
L'esempio di cui sopra utilizza stringhe come argomento di queste funzioni, ma essi possono davvero essere qualsiasi cosa. Spesso potrebbe essere un oggetto, di cui potresti voler utilizzare i dati per metterli sul tuo sito web o altrove.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Fai sì che la promise gestisca il successo e il fallimento. Se `responseFromServer` è `true`, chiama il metodo `resolve` per completare con successo la promise. Passa a `resolve` una stringa di valore `We got the data`. Se invece `responseFromServer` è `false`, utilizza il metodo `reject` e passagli la stringa: `Data not received`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`resolve` dovrebbe essere chiamato con la stringa prevista quando la condizione dell'`if` è `true`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/if\s*\(\s*responseFromServer\s*\)\s*{\s*resolve\s*\(\s*('|"|`)We got the data\1\s*\)(\s*|\s*;\s*)}/g)
|
||||
);
|
||||
```
|
||||
|
||||
`reject` dovrebbe essere chiamato con la stringa prevista quando la condizione dell'`if` è `false`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/}\s*else\s*{\s*reject\s*\(\s*('|"|`)Data not received\1\s*\)(\s*|\s*;\s*)}/g)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const makeServerRequest = new Promise((resolve, reject) => {
|
||||
// responseFromServer represents a response from a server
|
||||
let responseFromServer;
|
||||
|
||||
if(responseFromServer) {
|
||||
// Change this line
|
||||
} else {
|
||||
// Change this line
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
const makeServerRequest = new Promise((resolve, reject) => {
|
||||
// responseFromServer represents a response from a server
|
||||
let responseFromServer;
|
||||
|
||||
if(responseFromServer) {
|
||||
resolve("We got the data");
|
||||
} else {
|
||||
reject("Data not received");
|
||||
}
|
||||
});
|
||||
```
|
||||
@ -0,0 +1,55 @@
|
||||
---
|
||||
id: 5cdafbb0291309899753167f
|
||||
title: Creare una promise in JavaScript
|
||||
challengeType: 1
|
||||
forumTopicId: 301197
|
||||
dashedName: create-a-javascript-promise
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Una promise (promessa) in JavaScript è esattamente quello che sembra - si usa per promettere di fare qualcosa, di solito in modo asincrono. Quando l'azione è completata, o adempi alla tua promessa o non riesci a farlo. `Promise` è una funzione costruttore, quindi è necessario utilizzare la parola chiave `new` per crearne una. Prende per argomento una funzione con due parametri - `resolve` e `reject`. Questi sono metodi utilizzati per determinare il risultato della promise. La sintassi si presenta così:
|
||||
|
||||
```js
|
||||
const myPromise = new Promise((resolve, reject) => {
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crea una nuova promise chiamata `makeServerRequest`. Passa al costruttore una funzione con i parametri `resolve` e `reject`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assegnare una promise alla dichiarazione di una variabile chiamata `makeServerRequest`.
|
||||
|
||||
```js
|
||||
assert(makeServerRequest instanceof Promise);
|
||||
```
|
||||
|
||||
La tua promise dovrebbe ricevere una funzione con `resolve` e `reject` come parametri.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/Promise\(\s*(function\s*\(\s*resolve\s*,\s*reject\s*\)\s*{|\(\s*resolve\s*,\s*reject\s*\)\s*=>\s*{)[^}]*}/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
const makeServerRequest = new Promise((resolve, reject) => {
|
||||
|
||||
});
|
||||
```
|
||||
@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 5cddbfd622f1a59093ec611d
|
||||
title: Creare un Modulo
|
||||
challengeType: 6
|
||||
forumTopicId: 301198
|
||||
dashedName: create-a-module-script
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
JavaScript ha iniziato con un piccolo ruolo da giocare in un web fatto per lo di HTML. Oggi è enorme, e alcuni siti web sono costruiti quasi interamente con JavaScript. Per rendere JavaScript più modulare, pulito e mantenibile; ES6 ha introdotto un modo per condividere facilmente il codice tra i file JavaScript. Ciò comporta l'esportazione di parti di un file per l'utilizzo in uno o più altri file, e l'importazione delle parti di cui hai bisogno, dove ne hai bisogno. Per sfruttare questa funzionalità, devi creare uno script nel tuo documento HTML con un `type` di `module`. Ecco un esempio:
|
||||
|
||||
```html
|
||||
<script type="module" src="filename.js"></script>
|
||||
```
|
||||
|
||||
Uno script che utilizza questo tipo `module` può ora utilizzare le funzionalità di `import` e `export` che conoscerai nelle prossime sfide.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi al documento HTML uno script di tipo `module` e dagli `index.js` come file sorgente
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un tag `script`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\s*script[^>]*>\s*<\/\s*script\s*>/g));
|
||||
```
|
||||
|
||||
Il tuo tag `script` dovrebbe avere l'attributo `type` con un valore di `module`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/<\s*script\s+[^t]*type\s*=\s*('|")module\1[^>]*>\s*<\/\s*script\s*>/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo tag `script` dovrebbe avere una `src` impostata su `index.js`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/<\s*script\s+[^s]*src\s*=\s*('|")index\.js\1[^>]*>\s*<\/\s*script\s*>/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<!-- Only change code below this line -->
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<script type="module" src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b58
|
||||
title: Creare un'esportazione predefinita con export default
|
||||
challengeType: 1
|
||||
forumTopicId: 301199
|
||||
dashedName: create-an-export-fallback-with-export-default
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Nella lezione sull'`export`, hai imparato a conoscere la sintassi indicata come <dfn>esportazione con nome</dfn>. Questo ti ha permesso di rendere disponibili più funzioni e variabili per l'utilizzo in altri file.
|
||||
|
||||
C'è un'altra sintassi `export` che devi conoscere, nota come <dfn>export default</dfn> (esportazione predefinita). Di solito si utilizza questa sintassi se un solo valore viene esportato da un file. Viene utilizzata anche per creare un valore di default per un file o un modulo.
|
||||
|
||||
Di seguito sono riportati esempi che utilizzano `export default`:
|
||||
|
||||
```js
|
||||
export default function add(x, y) {
|
||||
return x + y;
|
||||
}
|
||||
|
||||
export default function(x, y) {
|
||||
return x + y;
|
||||
}
|
||||
```
|
||||
|
||||
La prima è una funzione con un nome e la seconda è una funzione anonima.
|
||||
|
||||
Dato che `export default` è utilizzato per dichiarare un valore di default per un modulo o un file, si può avere un solo valore di esportazione predefinita in ogni modulo o file. Inoltre, non è possibile usare `export default` con `var`, `let`, o `const`
|
||||
|
||||
# --instructions--
|
||||
|
||||
La seguente funzione dovrebbe essere il valore predefinito per il modulo. Si prega di aggiungere il codice necessario per renderla tale.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe usare l'`export` di default.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/export\s+default\s+function(\s+subtract\s*|\s*)\(\s*x,\s*y\s*\)\s*{/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
function subtract(x, y) {
|
||||
return x - y;
|
||||
}
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
export default function subtract(x, y) {
|
||||
return x - y;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,116 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4e
|
||||
title: Creare stringhe usando i modelli letterali
|
||||
challengeType: 1
|
||||
forumTopicId: 301200
|
||||
dashedName: create-strings-using-template-literals
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Una nuova caratteristica di ES6 è il <dfn>modello letterale</dfn>. Questo è un tipo speciale di stringa che facilita la creazione di stringhe complesse.
|
||||
|
||||
I modelli letterali consentono di creare stringhe multi-linea e di utilizzare le funzioni di interpolazione di stringhe per crearne altre.
|
||||
|
||||
Considera il codice qui sotto:
|
||||
|
||||
```js
|
||||
const person = {
|
||||
name: "Zodiac Hasbro",
|
||||
age: 56
|
||||
};
|
||||
|
||||
const greeting = `Hello, my name is ${person.name}!
|
||||
I am ${person.age} years old.`;
|
||||
|
||||
console.log(greeting);
|
||||
```
|
||||
|
||||
La console mostrerà le stringhe `Hello, my name is Zodiac Hasbro!` e `I am 56 years old.`.
|
||||
|
||||
Sono accadute un sacco di cose qui! In primo luogo, l'esempio utilizza l'apice inverso, detto backtick (`` ` ``), non le virgolette (`'` o `"`), per racchiudere la stringa. In secondo luogo, nota che la stringa è multi-riga, sia nel codice che nell'output. Questo ci risparmia l'inserimento di `\n` all'interno delle stringhe. La sintassi `${variable}` utilizzata sopra è un segnaposto. Fondamentalmente, non dovrai più usare la concatenazione con l'operatore `+`. Per aggiungere variabili alle stringhe, basta mettere la variabile in una stringa modello e avvolgerla con `${` e `}`. Allo stesso modo, puoi includere altre espressioni nella tua stringa letterale, ad esempio `${a + b}`. Questo nuovo modo di creare stringhe ti dà più flessibilità per creare stringhe affidabili.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Usa la sintassi dei modelli letterali con l'apice inverso per creare un array di stringhe di elementi di lista (`li`). Il testo di ogni elemento della lista dovrebbe essere uno degli elementi dell'array dalla proprietà `failure` dell'oggetto `result` e avere un attributo `class` con il valore `text-warning`. La funzione `makeList` dovrebbe restituire l'array delle stringhe degli elementi della lista.
|
||||
|
||||
Utilizza un metodo iteratore (qualsiasi tipo di ciclo) per ottenere l'output desiderato (mostrato di seguito).
|
||||
|
||||
```js
|
||||
[
|
||||
'<li class="text-warning">no-var</li>',
|
||||
'<li class="text-warning">var-on-top</li>',
|
||||
'<li class="text-warning">linebreak</li>'
|
||||
]
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
`failuresList` dovrebbe essere un array contenente messaggi `result failure`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof makeList(result.failure) === 'object' && failuresList.length === 3
|
||||
);
|
||||
```
|
||||
|
||||
`failuresList` dovrebbe essere uguale all'output specificato.
|
||||
|
||||
```js
|
||||
assert(
|
||||
makeList(result.failure).every(
|
||||
(v, i) =>
|
||||
v === `<li class="text-warning">${result.failure[i]}</li>` ||
|
||||
v === `<li class='text-warning'>${result.failure[i]}</li>`
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti usare modelli di stringhe e interpolazione di espressioni.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').match(/(`.*\${.*}.*`)/));
|
||||
```
|
||||
|
||||
Dovresti usare un iteratore.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
assert(getUserInput('index').match(/for|map|reduce|forEach|while/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const result = {
|
||||
success: ["max-length", "no-amd", "prefer-arrow-functions"],
|
||||
failure: ["no-var", "var-on-top", "linebreak"],
|
||||
skipped: ["no-extra-semi", "no-dup-keys"]
|
||||
};
|
||||
function makeList(arr) {
|
||||
// Only change code below this line
|
||||
const failureItems = [];
|
||||
// Only change code above this line
|
||||
|
||||
return failureItems;
|
||||
}
|
||||
|
||||
const failuresList = makeList(result.failure);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
const result = {
|
||||
success: ["max-length", "no-amd", "prefer-arrow-functions"],
|
||||
failure: ["no-var", "var-on-top", "linebreak"],
|
||||
skipped: ["no-extra-semi", "no-dup-keys"]
|
||||
};
|
||||
function makeList(arr) {
|
||||
return arr.map(val => `<li class="text-warning">${val}</li>`);
|
||||
}
|
||||
|
||||
const failuresList = makeList(result.failure);
|
||||
```
|
||||
@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b41
|
||||
title: Dichiarare una variabile di sola lettura con la parola chiave const
|
||||
challengeType: 1
|
||||
forumTopicId: 301201
|
||||
dashedName: declare-a-read-only-variable-with-the-const-keyword
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La parola chiave `let` non è l'unico nuovo modo per dichiarare le variabili. In ES6, puoi anche dichiarare variabili usando la parola chiave `const`.
|
||||
|
||||
`const` ha tutte le fantastiche caratteristiche che ha `let`, con il il valore aggiunto che le variabili dichiarate utilizzando `const` sono di sola lettura. Esse sono un valore costante, il che significa che una volta assegnata una variabile con `const`, non può più essere riassegnata.
|
||||
|
||||
```js
|
||||
const FAV_PET = "Cats";
|
||||
FAV_PET = "Dogs";
|
||||
```
|
||||
|
||||
La console mostrerà un errore a causa della riassegnazione del valore di `FAV_PET`.
|
||||
|
||||
Come puoi vedere, cercare di riassegnare una variabile dichiarata con `const` genererà un errore. Dovresti sempre dichiarare le variabili che non vuoi riassegnare usando la parola chiave `const`. Questo aiuta quando nel caso dovessi tentare accidentalmente di riassegnare il valore a una variabile che è destinata a rimanere costante. Una pratica comune quando si dà il nome alle costanti è usare tutte le lettere maiuscole, separando le parole con un underscore.
|
||||
|
||||
**Nota:** È pratica comune per gli sviluppatori usare identificatori di variabili a lettere maiuscole per valori immutabili e a lettere minuscole o camelCase per valori mutabili (oggetti e array). In una sfida successiva vedrai un esempio di identificatore di variabile con lettere minuscole utilizzato per un array.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Modifica il codice in modo che tutte le variabili siano dichiarate utilizzando `let` o `const`. Usa `let` quando vuoi che la variabile possa cambiare e `const` quando vuoi che la variabile rimanga costante. Inoltre, rinomina le variabili dichiarate con `const` per conformarti alle pratiche comuni, il che significa che le costanti dovrebbero essere tutte in maiuscolo.
|
||||
|
||||
# --hints--
|
||||
|
||||
`var` non dovrebbe esistere nel tuo codice.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(!getUserInput('index').match(/var/g));
|
||||
```
|
||||
|
||||
`SENTENCE` dovrebbe essere una variabile costante dichiarata con `const`.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').match(/(const SENTENCE)/g));
|
||||
```
|
||||
|
||||
`i` dovrebbe essere dichiarata con `let`.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').match(/(let i)/g));
|
||||
```
|
||||
|
||||
`console.log` dovrebbe essere cambiato per stampare la variabile `SENTENCE`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
assert(getUserInput('index').match(/console\.log\(\s*SENTENCE\s*\)\s*;?/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
function printManyTimes(str) {
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
var sentence = str + " is cool!";
|
||||
for (var i = 0; i < str.length; i+=2) {
|
||||
console.log(sentence);
|
||||
}
|
||||
|
||||
// Only change code above this line
|
||||
|
||||
}
|
||||
printManyTimes("freeCodeCamp");
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
function printManyTimes(str) {
|
||||
|
||||
const SENTENCE = str + " is cool!";
|
||||
for (let i = 0; i < str.length; i+=2) {
|
||||
console.log(SENTENCE);
|
||||
}
|
||||
|
||||
}
|
||||
printManyTimes("freeCodeCamp");
|
||||
```
|
||||
@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b3f
|
||||
title: Esplorare le differenze tra le parole chiave var e let
|
||||
challengeType: 1
|
||||
forumTopicId: 301202
|
||||
dashedName: explore-differences-between-the-var-and-let-keywords
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Uno dei maggiori problemi quando si dichiarano delle variabili con la parola chiave `var` è che è possibile sovrascrivere le dichiarazioni delle variabili senza errori.
|
||||
|
||||
```js
|
||||
var camper = 'James';
|
||||
var camper = 'David';
|
||||
console.log(camper);
|
||||
```
|
||||
|
||||
Qui la console mostrerà la stringa `David`.
|
||||
|
||||
Come puoi vedere nel codice qui sopra, la variabile `camper` è originariamente dichiarata come `James` per poi essere sovrascritta con `David`. In una piccola applicazione si potrebbe non incorrere in questo tipo di problema, ma quando il codice diventa più grande, potresti accidentalmente sovrascrivere una variabile che non hai intenzione di sovrascrivere. Poiché questo comportamento non lancia un errore, la ricerca e la correzione di bug diventa più difficile.
|
||||
Una nuova parola chiave, chiamata `let`, è stata introdotta in ES6 per risolvere questo potenziale problema con la parola chiave `var`. Se dovessi sostituire `var` con `let` nelle dichiarazioni delle variabili nel codice sopra, il risultato sarebbe un errore.
|
||||
|
||||
```js
|
||||
let camper = 'James';
|
||||
let camper = 'David';
|
||||
```
|
||||
|
||||
Questo errore può essere visto nella console del tuo browser. Quindi, a differenza di `var`, quando si utilizza `let`, una variabile con lo stesso nome può essere dichiarata solo una volta. Nota l'`"use strict"`. Questo abilita la Strict Mode (Modalità Rigorosa), che cattura gli errori di codifica comuni e le azioni "non sicure". Per esempio:
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
x = 3.14;
|
||||
```
|
||||
|
||||
Questo mostrerà l'errore `x is not defined`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiorna il codice in modo che utilizzi solo la parola chiave `let`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`var` non dovrebbe esistere nel codice.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(!getUserInput('index').match(/var/g));
|
||||
```
|
||||
|
||||
`catName` dovrebbe essere uguale alla stringa `Oliver`.
|
||||
|
||||
```js
|
||||
assert(catName === 'Oliver');
|
||||
```
|
||||
|
||||
`quote` dovrebbe essere uguale alla stringa `Oliver says Meow!`
|
||||
|
||||
```js
|
||||
assert(quote === 'Oliver says Meow!');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
var catName;
|
||||
var quote;
|
||||
function catTalk() {
|
||||
"use strict";
|
||||
|
||||
catName = "Oliver";
|
||||
quote = catName + " says Meow!";
|
||||
|
||||
}
|
||||
catTalk();
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
let catName;
|
||||
let quote;
|
||||
function catTalk() {
|
||||
'use strict';
|
||||
|
||||
catName = 'Oliver';
|
||||
quote = catName + ' says Meow!';
|
||||
}
|
||||
catTalk();
|
||||
```
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 5cdafbd72913098997531681
|
||||
title: Gestire una promise mantenuta con then
|
||||
challengeType: 1
|
||||
forumTopicId: 301203
|
||||
dashedName: handle-a-fulfilled-promise-with-then
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Le promise sono più utili quando hai nel codice un processo che richiede una quantità sconosciuta di tempo (cioè qualcosa di asincrono), spesso una richiesta al server. Quando si effettua una richiesta ad un server questa prende un certo lasso di tempo, e, dopo che si è conclusa, di solito si desidera fare qualcosa con la risposta del server. Questo risultato può essere ottenuto utilizzando il metodo `then`. Il metodo `then` viene eseguito immediatamente dopo che la promise è stata mantenuta con `resolve`. Ecco un esempio:
|
||||
|
||||
```js
|
||||
myPromise.then(result => {
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
`result` deriva dall'argomento dato al metodo `resolve`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi il metodo `then` alla tua promise. Usa `result` come parametro della sua funzione di callback e scrivi `result` sulla console.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti chiamare il metodo `then` sulla promise.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/(makeServerRequest|\))\.then\(/g)
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo metodo `then` dovrebbe avere una funzione di callback con `result` come parametro.
|
||||
|
||||
```js
|
||||
assert(resultIsParameter);
|
||||
```
|
||||
|
||||
Dovresti scrivere `result` sulla console.
|
||||
|
||||
```js
|
||||
assert(
|
||||
resultIsParameter &&
|
||||
__helpers
|
||||
.removeWhiteSpace(code)
|
||||
.match(/\.then\(.*?result.*?console.log\(result\).*?\)/)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```js
|
||||
const resultIsParameter = /\.then\((function\(result\){|result|\(result\)=>)/.test(__helpers.removeWhiteSpace(code));
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const makeServerRequest = new Promise((resolve, reject) => {
|
||||
// responseFromServer is set to true to represent a successful response from a server
|
||||
let responseFromServer = true;
|
||||
|
||||
if(responseFromServer) {
|
||||
resolve("We got the data");
|
||||
} else {
|
||||
reject("Data not received");
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
const makeServerRequest = new Promise((resolve, reject) => {
|
||||
// responseFromServer is set to true to represent a successful response from a server
|
||||
let responseFromServer = true;
|
||||
|
||||
if(responseFromServer) {
|
||||
resolve("We got the data");
|
||||
} else {
|
||||
reject("Data not received");
|
||||
}
|
||||
});
|
||||
|
||||
makeServerRequest.then(result => {
|
||||
console.log(result);
|
||||
});
|
||||
```
|
||||
@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 5cdafbe72913098997531682
|
||||
title: Gestire una promise rifiutata con catch
|
||||
challengeType: 1
|
||||
forumTopicId: 301204
|
||||
dashedName: handle-a-rejected-promise-with-catch
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`catch` è il metodo utilizzato quando una promise è stata respinta. Viene eseguito immediatamente dopo che viene chiamato il metodo `reject` di una promise. Ecco la sintassi:
|
||||
|
||||
```js
|
||||
myPromise.catch(error => {
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
`error` è l'argomento passato al metodo `reject`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi il metodo `catch` alla tua promise. Usa `error` come parametro della sua funzione di callback e scrivi `error` sulla console.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti chiamare il metodo `catch` sulla promise.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/(makeServerRequest|\))\.catch\(/g)
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo metodo `catch` dovrebbe avere una funzione di callback con `error` come parametro.
|
||||
|
||||
```js
|
||||
assert(errorIsParameter);
|
||||
```
|
||||
|
||||
Dovresti visualizzare `error` nella console.
|
||||
|
||||
```js
|
||||
assert(
|
||||
errorIsParameter &&
|
||||
__helpers
|
||||
.removeWhiteSpace(code)
|
||||
.match(/\.catch\(.*?error.*?console.log\(error\).*?\)/)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```js
|
||||
const errorIsParameter = /\.catch\((function\(error\){|error|\(error\)=>)/.test(__helpers.removeWhiteSpace(code));
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const makeServerRequest = new Promise((resolve, reject) => {
|
||||
// responseFromServer is set to false to represent an unsuccessful response from a server
|
||||
let responseFromServer = false;
|
||||
|
||||
if(responseFromServer) {
|
||||
resolve("We got the data");
|
||||
} else {
|
||||
reject("Data not received");
|
||||
}
|
||||
});
|
||||
|
||||
makeServerRequest.then(result => {
|
||||
console.log(result);
|
||||
});
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
const makeServerRequest = new Promise((resolve, reject) => {
|
||||
// responseFromServer is set to false to represent an unsuccessful response from a server
|
||||
let responseFromServer = false;
|
||||
|
||||
if(responseFromServer) {
|
||||
resolve("We got the data");
|
||||
} else {
|
||||
reject("Data not received");
|
||||
}
|
||||
});
|
||||
|
||||
makeServerRequest.then(result => {
|
||||
console.log(result);
|
||||
});
|
||||
|
||||
makeServerRequest.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
```
|
||||
@ -0,0 +1,48 @@
|
||||
---
|
||||
id: 587d7b8d367417b2b2512b59
|
||||
title: Importare un'esportazione predefinita
|
||||
challengeType: 1
|
||||
forumTopicId: 301205
|
||||
dashedName: import-a-default-export
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Nell'ultima sfida, hai conosciuto l'esportazione predefinita (`export default`) e i suoi utilizzi. Per importare un'esportazione predefinita, è necessario utilizzare una diversa sintassi di `import`. Nell'esempio seguente, `add` è l'esportazione predefinita del file `math_functions.js`. Ecco come importarlo:
|
||||
|
||||
```js
|
||||
import add from "./math_functions.js";
|
||||
```
|
||||
|
||||
La sintassi differisce in un punto chiave. Il valore importato, `add`, non è circondato da parentesi graffe (`{}`). `add` qui è semplicemente il nome di una variabile per qualunque sia l'esportazione predefinita del file `math_functions.js`. È possibile utilizzare qualsiasi nome qui quando importi un valore predefinito.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Nel codice seguente, importa l'esportazione predefinita dal file `math_functions.js`, che si trova nella stessa directory di questo file. Dai all'import il nome `subtract`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti importare correttamente `subtract` da `math_functions.js`.
|
||||
|
||||
```js
|
||||
assert(code.match(/import\s+subtract\s+from\s+('|")\.\/math_functions\.js\1/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
|
||||
// Only change code above this line
|
||||
|
||||
subtract(7,4);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
import subtract from "./math_functions.js";
|
||||
|
||||
subtract(7,4);
|
||||
```
|
||||
@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b42
|
||||
title: Mutare un array dichiarato con const
|
||||
challengeType: 1
|
||||
forumTopicId: 301206
|
||||
dashedName: mutate-an-array-declared-with-const
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La dichiarazione `const` ha molti casi di utilizzo nel JavaScript moderno.
|
||||
|
||||
Alcuni sviluppatori preferiscono assegnare tutte le loro variabili usando `const` come impostazione predefinita, a meno che non sappiano che dovranno riassegnare il valore. Solo in quel caso usano `let`.
|
||||
|
||||
Tuttavia, è importante capire che gli oggetti (inclusi gli array e le funzioni) assegnati a una variabile utilizzando `const` sono ancora mutabili. L'utilizzo della dichiarazione `const` impedisce solo la riassegnazione dell'identificatore della variabile.
|
||||
|
||||
```js
|
||||
const s = [5, 6, 7];
|
||||
s = [1, 2, 3];
|
||||
s[2] = 45;
|
||||
console.log(s);
|
||||
```
|
||||
|
||||
`s = [1, 2, 3]` comporterà un errore. Il comando `console.log` mostrerà il valore `[5, 6, 45]`.
|
||||
|
||||
Come puoi vedere, puoi mutare l'oggetto `[5, 6, 7]` stesso e la variabile `s` punterà ancora all'array alterato `[5, 6, 45]`. Come tutti gli array, gli elementi in `s` sono mutabili, ma poiché è stata usata `const`, non è possibile utilizzare l'identificatore di variabile `s` per puntare ad un array diverso utilizzando l'operatore di assegnazione.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Un array è dichiarato come `const s = [5, 7, 2]`. Cambia l'array in `[2, 5, 7]` usando varie assegnazioni di elementi.
|
||||
|
||||
# --hints--
|
||||
|
||||
Non dovresti sostituire la parola chiave `const`.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').match(/const/g));
|
||||
```
|
||||
|
||||
`s` dovrebbe essere una variabile costante (usando `const`).
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').match(/const\s+s/g));
|
||||
```
|
||||
|
||||
Non dovresti cambiare la dichiarazione originale dell'array.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
assert(
|
||||
getUserInput('index').match(
|
||||
/const\s+s\s*=\s*\[\s*5\s*,\s*7\s*,\s*2\s*\]\s*;?/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
`s` dovrebbe essere uguale a `[2, 5, 7]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(s, [2, 5, 7]);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const s = [5, 7, 2];
|
||||
function editInPlace() {
|
||||
// Only change code below this line
|
||||
|
||||
// Using s = [2, 5, 7] would be invalid
|
||||
|
||||
// Only change code above this line
|
||||
}
|
||||
editInPlace();
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
const s = [5, 7, 2];
|
||||
function editInPlace() {
|
||||
s[0] = 2;
|
||||
s[1] = 5;
|
||||
s[2] = 7;
|
||||
}
|
||||
editInPlace();
|
||||
```
|
||||
@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 598f48a36c8c40764b4e52b3
|
||||
title: Prevenire la mutazione degli oggetti
|
||||
challengeType: 1
|
||||
forumTopicId: 301207
|
||||
dashedName: prevent-object-mutation
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Come visto nella sfida precedente, la dichiarazione `const` da sola non protegge davvero i tuoi dati dalla mutazione. Per garantire che i tuoi dati non cambino, JavaScript fornisce una funzione `Object.freeze` per prevenire la mutazione dei dati.
|
||||
|
||||
Una volta che l'oggetto è congelato, non è più possibile aggiungere, aggiornare o eliminare proprietà da esso. Qualsiasi tentativo di cambiare l'oggetto verrà rifiutato senza errore.
|
||||
|
||||
```js
|
||||
let obj = {
|
||||
name:"FreeCodeCamp",
|
||||
review:"Awesome"
|
||||
};
|
||||
Object.freeze(obj);
|
||||
obj.review = "bad";
|
||||
obj.newProp = "Test";
|
||||
console.log(obj);
|
||||
```
|
||||
|
||||
Le assegnazioni su `obj.review` e `obj.newProp` si tradurranno in errori, e la console mostrerà il valore `{ name: "FreeCodeCamp", review: "Awesome" }`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
In questa utilizzerai `Object.freeze` per impedire di cambiare le costanti matematiche. È necessario congelare l'oggetto `MATH_CONSTANTS` in modo che nessuno sia in grado di modificare il valore di `PI`, aggiungere o eliminare proprietà.
|
||||
|
||||
# --hints--
|
||||
|
||||
Non dovresti sostituire la parola chiave `const`.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').match(/const/g));
|
||||
```
|
||||
|
||||
`MATH_CONSTANTS` dovrebbe essere una variabile costante (usando `const`).
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
assert(getUserInput('index').match(/const\s+MATH_CONSTANTS/g));
|
||||
```
|
||||
|
||||
Non dovresti cambiare la dichiarazione originale di `MATH_CONSTANTS`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
assert(
|
||||
getUserInput('index').match(
|
||||
/const\s+MATH_CONSTANTS\s+=\s+{\s+PI:\s+3.14\s+};/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
`PI` dovrebbe essere uguale `3.14`.
|
||||
|
||||
```js
|
||||
assert(PI === 3.14);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
function freezeObj() {
|
||||
const MATH_CONSTANTS = {
|
||||
PI: 3.14
|
||||
};
|
||||
// Only change code below this line
|
||||
|
||||
|
||||
// Only change code above this line
|
||||
try {
|
||||
MATH_CONSTANTS.PI = 99;
|
||||
} catch(ex) {
|
||||
console.log(ex);
|
||||
}
|
||||
return MATH_CONSTANTS.PI;
|
||||
}
|
||||
const PI = freezeObj();
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
function freezeObj() {
|
||||
const MATH_CONSTANTS = {
|
||||
PI: 3.14
|
||||
};
|
||||
Object.freeze(MATH_CONSTANTS);
|
||||
|
||||
try {
|
||||
MATH_CONSTANTS.PI = 99;
|
||||
} catch(ex) {
|
||||
console.log(ex);
|
||||
}
|
||||
return MATH_CONSTANTS.PI;
|
||||
}
|
||||
const PI = freezeObj();
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b55
|
||||
title: Riutilizzare codice JavaScript usando import
|
||||
challengeType: 1
|
||||
forumTopicId: 301208
|
||||
dashedName: reuse-javascript-code-using-import
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`import` ti permette di scegliere quali parti di un file o di un modulo caricare. Nella lezione precedente, gli esempi esportavano `add` dal file `math_functions.js`. Ecco come è possibile importarlo per usarlo in un altro file:
|
||||
|
||||
```js
|
||||
import { add } from './math_functions.js';
|
||||
```
|
||||
|
||||
Qui, `import` troverà `add` nel file `math_functions.js`, importerà solo quella funzione per il tuo utilizzo ed ignorerà il resto. Il `./` dice all'importazione di cercare il file `math_functions.js` nella stessa cartella del file attuale. Il percorso relativo del file (`./`) e l'estensione del file (`.js`) sono necessari quando si utilizza import in questo modo.
|
||||
|
||||
È possibile importare più di un elemento dal file aggiungendoli nell'istruzione `import` in questo modo:
|
||||
|
||||
```js
|
||||
import { add, subtract } from './math_functions.js';
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi l'istruzione `import` appropriata che permetterà al file corrente di utilizzare le funzioni `uppercaseString` e `lowercaseString` che hai esportato nella lezione precedente. Queste funzioni sono in un file chiamato `string_functions.js`, che si trova nella stessa cartella del file corrente.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti importare correttamente `uppercaseString`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/import\s*{\s*(uppercaseString[^}]*|[^,]*,\s*uppercaseString\s*)}\s+from\s+('|")\.\/string_functions\.js\2/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti importare correttamente `lowercaseString`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/import\s*{\s*(lowercaseString[^}]*|[^,]*,\s*lowercaseString\s*)}\s+from\s+('|")\.\/string_functions\.js\2/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
|
||||
// Only change code above this line
|
||||
|
||||
uppercaseString("hello");
|
||||
lowercaseString("WORLD!");
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
import { uppercaseString, lowercaseString } from './string_functions.js';
|
||||
|
||||
uppercaseString("hello");
|
||||
lowercaseString("WORLD!");
|
||||
```
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b46
|
||||
title: Impostare parametri predefiniti per le tue funzioni
|
||||
challengeType: 1
|
||||
forumTopicId: 301209
|
||||
dashedName: set-default-parameters-for-your-functions
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per aiutarci a creare funzioni più flessibili, ES6 introduce dei <dfn>parametri predefiniti</dfn> per le funzioni.
|
||||
|
||||
Dai un'occhiata a questo codice:
|
||||
|
||||
```js
|
||||
const greeting = (name = "Anonymous") => "Hello " + name;
|
||||
|
||||
console.log(greeting("John"));
|
||||
console.log(greeting());
|
||||
```
|
||||
|
||||
La console mostrerà le stringhe `Hello John` e `Hello Anonymous`.
|
||||
|
||||
Il parametro predefinito entra in gioco quando l'argomento non è specificato (è indefinito). Come puoi vedere nell'esempio qui sopra, il parametro `name` riceverà il suo valore predefinito `Anonymous` quando non si fornisce un valore per il parametro. Puoi aggiungere valori predefiniti per tutti i parametri che vuoi.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Modifica la funzione `increment` aggiungendo parametri predefiniti in modo che aggiunga 1 a `number` se `value` non è specificato.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il risultato di `increment(5, 2)` dovrebbe essere `7`.
|
||||
|
||||
```js
|
||||
assert(increment(5, 2) === 7);
|
||||
```
|
||||
|
||||
Il risultato di `increment(5)` dovrebbe essere `6`.
|
||||
|
||||
```js
|
||||
assert(increment(5) === 6);
|
||||
```
|
||||
|
||||
Un parametro predefinito di valore `1` dovrebbe essere utilizzato per `value`.
|
||||
|
||||
```js
|
||||
assert(code.match(/value\s*=\s*1/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
// Only change code below this line
|
||||
const increment = (number, value) => number + value;
|
||||
// Only change code above this line
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
const increment = (number, value = 1) => number + value;
|
||||
```
|
||||
@ -0,0 +1,60 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b57
|
||||
title: Usare * per importare tutto da un file
|
||||
challengeType: 1
|
||||
forumTopicId: 301210
|
||||
dashedName: use--to-import-everything-from-a-file
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Supponiamo di avere un file e di voler importare tutti i suoi contenuti nel file corrente. Questo può essere fatto con la sintassi `import * as`. Ecco un esempio in cui il contenuto di un file chiamato `math_functions.js` viene importato in un file nella stessa directory:
|
||||
|
||||
```js
|
||||
import * as myMathModule from "./math_functions.js";
|
||||
```
|
||||
|
||||
L'istruzione `import` di cui sopra creerà un oggetto chiamato `myMathModule`. Questo è solo un nome di variabile, puoi chiamarlo in qualsiasi modo. L'oggetto conterrà tutte le esportazioni di `math_functions.js`, così potrai accedere alle funzioni come faresti con qualsiasi altra proprietà di un oggetto. Ecco come utilizzare le funzioni `add` e `subtract` che sono state importate:
|
||||
|
||||
```js
|
||||
myMathModule.add(2,3);
|
||||
myMathModule.subtract(5,3);
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Il codice in questo file richiede il contenuto del file: `string_functions.js`, che si trova nella stessa directory del file corrente. Usa la sintassi `import * as` per importare tutto dal file in un oggetto chiamato `stringFunctions`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe utilizzare correttamente la sintassi `import * as`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/import\s*\*\s*as\s+stringFunctions\s+from\s*('|")\.\/string_functions\.js\1/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
|
||||
// Only change code above this line
|
||||
|
||||
stringFunctions.uppercaseString("hello");
|
||||
stringFunctions.lowercaseString("WORLD!");
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
import * as stringFunctions from "./string_functions.js";
|
||||
|
||||
// add code above this line
|
||||
stringFunctions.uppercaseString("hello");
|
||||
stringFunctions.lowercaseString("WORLD!");
|
||||
```
|
||||
@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b43
|
||||
title: Utilizzare le funzioni freccia per scrivere funzioni anonime concise
|
||||
challengeType: 1
|
||||
forumTopicId: 301211
|
||||
dashedName: use-arrow-functions-to-write-concise-anonymous-functions
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In JavaScript, spesso non abbiamo bisogno di dare un nome alle nostre funzioni, soprattutto quando si passa una funzione come argomento ad un'altra funzione. Creiamo invece delle funzioni in linea. Non abbiamo bisogno di nominare queste funzioni perché non le riutilizzeremo altrove.
|
||||
|
||||
Per raggiungere questo obiettivo, utilizziamo spesso la seguente sintassi:
|
||||
|
||||
```js
|
||||
const myFunc = function() {
|
||||
const myVar = "value";
|
||||
return myVar;
|
||||
}
|
||||
```
|
||||
|
||||
ES6 ci fornisce lo zucchero sintattico di non dover scrivere funzioni anonime in questo modo. Invece, puoi usare la **sintassi delle funzioni freccia**:
|
||||
|
||||
```js
|
||||
const myFunc = () => {
|
||||
const myVar = "value";
|
||||
return myVar;
|
||||
}
|
||||
```
|
||||
|
||||
Quando la funzione non ha un corpo, ma solo un valore di ritorno, la sintassi della funzione freccia ti permette di omettere la parola chiave `return` e le parentesi che circondano il codice. Ciò aiuta a condensare le funzioni più piccole in una riga di dichiarazione:
|
||||
|
||||
```js
|
||||
const myFunc = () => "value";
|
||||
```
|
||||
|
||||
Questo codice restituirà di default la stringa `value`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Riscrivi la funzione assegnata alla variabile `magic`, che restituisce una `new Date()`, in modo da usare la sintassi delle funzioni freccia. Inoltre, assicurati che nulla sia definito usando la parola chiave `var`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti sostituire la parola chiave `var`.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(!getUserInput('index').match(/var/g));
|
||||
```
|
||||
|
||||
`magic` dovrebbe essere una variabile costante (usando `const`).
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').match(/const\s+magic/g));
|
||||
```
|
||||
|
||||
`magic` dovrebbe essere una `function`.
|
||||
|
||||
```js
|
||||
assert(typeof magic === 'function');
|
||||
```
|
||||
|
||||
`magic()` dovrebbe restituire la data corretta.
|
||||
|
||||
```js
|
||||
assert(magic().setHours(0, 0, 0, 0) === new Date().setHours(0, 0, 0, 0));
|
||||
```
|
||||
|
||||
La parola chiave `function` non dovrebbe essere utilizzata.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(!getUserInput('index').match(/function/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
var magic = function() {
|
||||
return new Date();
|
||||
};
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
const magic = () => {
|
||||
return new Date();
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 587d7b8b367417b2b2512b53
|
||||
title: Usare la sintassi class per definire una funzione costruttore
|
||||
challengeType: 1
|
||||
forumTopicId: 301212
|
||||
dashedName: use-class-syntax-to-define-a-constructor-function
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ES6 fornisce una nuova sintassi per creare oggetti, utilizzando la parola chiave <dfn>class</dfn> (classe).
|
||||
|
||||
Va notato che la sintassi `class` è appunto solo una sintassi, e non la vera e propria implementazione basata su classi di un paradigma orientato agli oggetti, a differenza di quanto accade in linguaggi come Java, Python, Ruby, ecc.
|
||||
|
||||
In ES5, di solito definiamo una funzione `constructor` e usiamo la parola chiave `new` per istanziare un oggetto.
|
||||
|
||||
```js
|
||||
var SpaceShuttle = function(targetPlanet){
|
||||
this.targetPlanet = targetPlanet;
|
||||
}
|
||||
var zeus = new SpaceShuttle('Jupiter');
|
||||
```
|
||||
|
||||
La sintassi `class` sostituisce semplicemente la creazione della funzione `constructor`:
|
||||
|
||||
```js
|
||||
class SpaceShuttle {
|
||||
constructor(targetPlanet) {
|
||||
this.targetPlanet = targetPlanet;
|
||||
}
|
||||
}
|
||||
const zeus = new SpaceShuttle('Jupiter');
|
||||
```
|
||||
|
||||
Va notato che la parola chiave `class` dichiara una nuova funzione, alla quale viene aggiunto un costruttore. Questo costruttore viene invocato quando `new` viene chiamata per creare un nuovo oggetto.
|
||||
|
||||
**Nota:** Per i nomi di classi ES6 dovrebbe essere usato per convenzione lo stile di scrittura UpperCamelCase, come fatto sopra in `SpaceShuttle`.
|
||||
|
||||
Il metodo costruttore `constructor` è un metodo speciale per creare e inizializzare un oggetto creato con class. Potrai approfondire la cosa nella sezione Programmazione Orientata agli Oggetti della certificazione Algoritmi e Strutture Dati in JavaScript.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Usa la parola chiave `class` e scrivi una funzione `constructor` per creare la classe `Vegetable`.
|
||||
|
||||
La classe `Vegetable` consente di creare un oggetto con una proprietà `name` che viene passata al `constructor`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`Vegetable` dovrebbe essere una `class` con un metodo `constructor` definito.
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof Vegetable === 'function' && typeof Vegetable.constructor === 'function'
|
||||
);
|
||||
```
|
||||
|
||||
Dovrebbe essere usata la parola chiave `class`.
|
||||
|
||||
```js
|
||||
assert(code.match(/class/g));
|
||||
```
|
||||
|
||||
`Vegetable` dovrebbe poter essere istanziata.
|
||||
|
||||
```js
|
||||
assert(() => {
|
||||
const a = new Vegetable('apple');
|
||||
return typeof a === 'object';
|
||||
});
|
||||
```
|
||||
|
||||
`carrot.name` dovrebbe restituire `carrot`.
|
||||
|
||||
```js
|
||||
assert(carrot.name == 'carrot');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
|
||||
const carrot = new Vegetable('carrot');
|
||||
console.log(carrot.name); // Should display 'carrot'
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
class Vegetable {
|
||||
constructor(name) {
|
||||
this.name = name;
|
||||
}
|
||||
}
|
||||
const carrot = new Vegetable('carrot');
|
||||
```
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b4b
|
||||
title: Usare l'assegnazione destrutturante per assegnare variabili dagli array
|
||||
challengeType: 1
|
||||
forumTopicId: 301213
|
||||
dashedName: use-destructuring-assignment-to-assign-variables-from-arrays
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ES6 rende la destrutturazione degli array facile come quella degli oggetti.
|
||||
|
||||
Una differenza fondamentale tra l'operatore di diffusione e la destrutturazione dell'array è che l'operatore di diffusione spacchetta tutti i contenuti di un'array in una lista separata da virgole. Di conseguenza, non è possibile selezionare o scegliere quali elementi si desidera assegnare a delle variabili.
|
||||
|
||||
La destrutturazione di un array ci permette di fare esattamente questo:
|
||||
|
||||
```js
|
||||
const [a, b] = [1, 2, 3, 4, 5, 6];
|
||||
console.log(a, b);
|
||||
```
|
||||
|
||||
La console mostrerà i valori di `a` e `b` come `1, 2`.
|
||||
|
||||
Alla variabile `a` viene assegnato il primo valore dell'array, e a `b` viene assegnato il secondo valore dell'array. Possiamo anche accedere al valore a qualsiasi indice di un array tramite destrutturazione, utilizzando le virgole per raggiungere l'indice desiderato:
|
||||
|
||||
```js
|
||||
const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
|
||||
console.log(a, b, c);
|
||||
```
|
||||
|
||||
La console mostrerà i valori di `a`, `b`, e `c` come `1, 2, 5`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Usa l'assegnazione destrutturante per scambiare i valori di `a` e `b` in modo che `a` riceva il valore memorizzato in `b`, e `b` riceva il valore memorizzato in `a`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il valore di `a` dovrebbe essere `6`, dopo lo scambio.
|
||||
|
||||
```js
|
||||
assert(a === 6);
|
||||
```
|
||||
|
||||
Il valore di `b` dovrebbe essere `8`, dopo lo scambio.
|
||||
|
||||
```js
|
||||
assert(b === 8);
|
||||
```
|
||||
|
||||
Dovresti usare la destrutturazione di array per scambiare `a` e `b`.
|
||||
|
||||
```js
|
||||
assert(/\[\s*(\w)\s*,\s*(\w)\s*\]\s*=\s*\[\s*\2\s*,\s*\1\s*\]/g.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
let a = 8, b = 6;
|
||||
// Only change code below this line
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
let a = 8, b = 6;
|
||||
[a, b] = [b, a];
|
||||
```
|
||||
@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b4a
|
||||
title: Usare l'assegnazione destrutturante per assegnare variabili da oggetti annidati
|
||||
challengeType: 1
|
||||
forumTopicId: 301214
|
||||
dashedName: use-destructuring-assignment-to-assign-variables-from-nested-objects
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
È possibile utilizzare gli stessi principi delle due lezioni precedenti per destrutturare valori da oggetti annidati.
|
||||
|
||||
Usando un oggetto simile agli esempi precedenti:
|
||||
|
||||
```js
|
||||
const user = {
|
||||
johnDoe: {
|
||||
age: 34,
|
||||
email: 'johnDoe@freeCodeCamp.com'
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
Ecco come estrarre i valori delle proprietà dell'oggetto e assegnarli a variabili con lo stesso nome:
|
||||
|
||||
```js
|
||||
const { johnDoe: { age, email }} = user;
|
||||
```
|
||||
|
||||
Ed ecco come puoi assegnare i valori delle proprietà di un oggetto a variabili con nomi diversi:
|
||||
|
||||
```js
|
||||
const { johnDoe: { age: userAge, email: userEmail }} = user;
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Sostituisci le due assegnazioni con un'assegnazione destrutturante equivalente. Dovresti ancora assegnare alle variabili `lowToday` e `highToday` i valori di `today.low` e `today.high` dell'oggetto `LOCAL_FORECAST`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti rimuovere la sintassi di assegnazione ES5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
!code.match(/lowToday = LOCAL_FORECAST\.today\.low/g) &&
|
||||
!code.match(/highToday = LOCAL_FORECAST\.today.high/g)
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti usare la destrutturazione per creare la variabile `lowToday`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/(var|const|let)\s*{\s*today\s*:\s*{\s*(low\s*:\s*lowToday[^}]*|[^,]*,\s*low\s*:\s*lowToday\s*)}\s*}\s*=\s*LOCAL_FORECAST(;|\s+|\/\/)/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti usare la destrutturazione per creare la variabile `highToday`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/(var|const|let)\s*{\s*today\s*:\s*{\s*(high\s*:\s*highToday[^}]*|[^,]*,\s*high\s*:\s*highToday\s*)}\s*}\s*=\s*LOCAL_FORECAST(;|\s+|\/\/)/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
`lowToday` dovrebbe essere uguale a `64` e `highToday` dovrebbe essere uguale a `77`.
|
||||
|
||||
```js
|
||||
assert(lowToday === 64 && highToday === 77);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const LOCAL_FORECAST = {
|
||||
yesterday: { low: 61, high: 75 },
|
||||
today: { low: 64, high: 77 },
|
||||
tomorrow: { low: 68, high: 80 }
|
||||
};
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
const lowToday = LOCAL_FORECAST.today.low;
|
||||
const highToday = LOCAL_FORECAST.today.high;
|
||||
|
||||
// Only change code above this line
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
const LOCAL_FORECAST = {
|
||||
yesterday: { low: 61, high: 75 },
|
||||
today: { low: 64, high: 77 },
|
||||
tomorrow: { low: 68, high: 80 }
|
||||
};
|
||||
|
||||
const { today: { low: lowToday, high: highToday }} = LOCAL_FORECAST;
|
||||
```
|
||||
@ -0,0 +1,97 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b49
|
||||
title: Usare l'assegnazione destrutturante per assegnare variabili dagli oggetti
|
||||
challengeType: 1
|
||||
forumTopicId: 301215
|
||||
dashedName: use-destructuring-assignment-to-assign-variables-from-objects
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La destrutturazione ti consente di assegnare un nuovo nome di variabile mentre si estraggono i valori. Puoi farlo inserendo il nuovo nome dopo i due punti quando assegni il valore.
|
||||
|
||||
Usando lo stesso oggetto dell'ultimo esempio:
|
||||
|
||||
```js
|
||||
const user = { name: 'John Doe', age: 34 };
|
||||
```
|
||||
|
||||
Ecco come è possibile creare nuovi nomi di variabili con l'assegnazione:
|
||||
|
||||
```js
|
||||
const { name: userName, age: userAge } = user;
|
||||
```
|
||||
|
||||
Lo puoi leggere come "prendi il valore di `user.name` e assegnalo ad una nuova variabile chiamata `userName`" e così via. Il valore di `userName` sarà la stringa `John Doe`, e il valore di `userAge` sarà il numero `34`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Sostituisci le due assegnazioni con un'assegnazione destrutturante equivalente. Dovrebbe ancora assegnare alle variabili `highToday` e `highTomorrow` i valori di `today` e `tomorrow` dell'oggetto `HIGH_TEMPERATURES`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti rimuovere la sintassi di assegnazione ES5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
!code.match(/highToday = HIGH_TEMPERATURES\.today/g) &&
|
||||
!code.match(/highTomorrow = HIGH_TEMPERATURES\.tomorrow/g)
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti usare la destrutturazione per creare la variabile `highToday`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/(var|const|let)\s*{\s*(today\s*:\s*highToday[^}]*|[^,]*,\s*today\s*:\s*highToday\s*)}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti usare la destrutturazione per creare la variabile `highTomorrow`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/(var|const|let)\s*{\s*(tomorrow\s*:\s*highTomorrow[^}]*|[^,]*,\s*tomorrow\s*:\s*highTomorrow\s*)}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
`highToday` dovrebbe essere uguale a `77` e `highTomorrow` dovrebbe essere uguale a `80`.
|
||||
|
||||
```js
|
||||
assert(highToday === 77 && highTomorrow === 80);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const HIGH_TEMPERATURES = {
|
||||
yesterday: 75,
|
||||
today: 77,
|
||||
tomorrow: 80
|
||||
};
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
const highToday = HIGH_TEMPERATURES.today;
|
||||
const highTomorrow = HIGH_TEMPERATURES.tomorrow;
|
||||
|
||||
// Only change code above this line
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
const HIGH_TEMPERATURES = {
|
||||
yesterday: 75,
|
||||
today: 77,
|
||||
tomorrow: 80
|
||||
};
|
||||
|
||||
const { today: highToday, tomorrow: highTomorrow } = HIGH_TEMPERATURES;
|
||||
```
|
||||
@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 5cfa550e84205a357704ccb6
|
||||
title: Usare l'assegnazione destrutturante per estrarre valori dagli oggetti
|
||||
challengeType: 1
|
||||
forumTopicId: 301216
|
||||
dashedName: use-destructuring-assignment-to-extract-values-from-objects
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>L'assegnazione destrutturante</dfn> è una sintassi speciale introdotta in ES6, per assegnare efficacemente dei valori presi da un oggetto.
|
||||
|
||||
Considerare il seguente codice ES5:
|
||||
|
||||
```js
|
||||
const user = { name: 'John Doe', age: 34 };
|
||||
|
||||
const name = user.name;
|
||||
const age = user.age;
|
||||
```
|
||||
|
||||
`name` avrebbe come valore la stringa `John Doe`, e `age` avrebbe il numero `34`.
|
||||
|
||||
Ecco una dichiarazione di assegnazione equivalente che utilizza la sintassi di destrutturazione ES6:
|
||||
|
||||
```js
|
||||
const { name, age } = user;
|
||||
```
|
||||
|
||||
Ancora una volta, `name` avrà come valore la stringa `John Doe`, e `age` il numero `34`.
|
||||
|
||||
Qui, le variabili `name` e `age` verranno create e assegnate ai rispettivi valori nell'oggetto `user`. Puoi constatare quanto questo sia più pulito.
|
||||
|
||||
Potrai estrarre dall'oggetto tutti i valori che desideri.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Sostituisci le due assegnazioni con un'assegnazione destrutturante equivalente. Dovrebbe ancora assegnare alle variabili `today` e `tomorrow` i valori di `today` e `tomorrow` dell'oggetto `HIGH_TEMPERATURES`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti rimuovere la sintassi di assegnazione ES5.
|
||||
|
||||
```js
|
||||
assert(
|
||||
!code.match(/today\s*=\s*HIGH_TEMPERATURES\.(today|tomorrow)/g)
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti usare la destrutturazione per creare la variabile `today`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/(var|let|const)\s*{\s*(today[^}]*|[^,]*,\s*today)\s*}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g)
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti usare la destrutturazione per creare la variabile `tomorrow`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/(var|let|const)\s*{\s*(tomorrow[^}]*|[^,]*,\s*tomorrow)\s*}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g)
|
||||
);
|
||||
```
|
||||
|
||||
`today` dovrebbe essere uguale a `77` e `tomorrow` dovrebbe essere uguale a `80`.
|
||||
|
||||
```js
|
||||
assert(today === 77 && tomorrow === 80);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const HIGH_TEMPERATURES = {
|
||||
yesterday: 75,
|
||||
today: 77,
|
||||
tomorrow: 80
|
||||
};
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
const today = HIGH_TEMPERATURES.today;
|
||||
const tomorrow = HIGH_TEMPERATURES.tomorrow;
|
||||
|
||||
// Only change code above this line
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
const HIGH_TEMPERATURES = {
|
||||
yesterday: 75,
|
||||
today: 77,
|
||||
tomorrow: 80
|
||||
};
|
||||
|
||||
const { today, tomorrow } = HIGH_TEMPERATURES;
|
||||
```
|
||||
@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4d
|
||||
title: Usare l'assegnazione destrutturante per passare un oggetto come parametro a una funzione
|
||||
challengeType: 1
|
||||
forumTopicId: 301217
|
||||
dashedName: use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In alcuni casi, è possibile destrutturare l'oggetto in un argomento funzione.
|
||||
|
||||
Considera il codice qui sotto:
|
||||
|
||||
```js
|
||||
const profileUpdate = (profileData) => {
|
||||
const { name, age, nationality, location } = profileData;
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
Questo destruttura efficacemente l'oggetto passato alla funzione. Questo può anche essere fatto sul posto:
|
||||
|
||||
```js
|
||||
const profileUpdate = ({ name, age, nationality, location }) => {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
Quando `profileData` viene passato alla funzione qui sopra, i valori del parametro vengono destrutturati per l'utilizzo all'interno della funzione.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Usa l'assegnazione destrutturante all'interno dell'argomento della funzione `half` per inviare solo `max` e `min` all'interno della funzione.
|
||||
|
||||
# --hints--
|
||||
|
||||
`stats` dovrebbe essere un `object`.
|
||||
|
||||
```js
|
||||
assert(typeof stats === 'object');
|
||||
```
|
||||
|
||||
`half(stats)` dovrebbe essere `28.015`
|
||||
|
||||
```js
|
||||
assert(half(stats) === 28.015);
|
||||
```
|
||||
|
||||
Dovresti ricorrere alla destrutturazione.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/half=\({\w+,\w+}\)/));
|
||||
```
|
||||
|
||||
Dovresti utilizzare il parametro destrutturato.
|
||||
|
||||
```js
|
||||
assert(!code.match(/stats\.max|stats\.min/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const stats = {
|
||||
max: 56.78,
|
||||
standard_deviation: 4.34,
|
||||
median: 34.54,
|
||||
mode: 23.87,
|
||||
min: -0.75,
|
||||
average: 35.85
|
||||
};
|
||||
|
||||
// Only change code below this line
|
||||
const half = (stats) => (stats.max + stats.min) / 2.0;
|
||||
// Only change code above this line
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
const stats = {
|
||||
max: 56.78,
|
||||
standard_deviation: 4.34,
|
||||
median: 34.54,
|
||||
mode: 23.87,
|
||||
min: -0.75,
|
||||
average: 35.85
|
||||
};
|
||||
|
||||
const half = ( {max, min} ) => (max + min) / 2.0;
|
||||
```
|
||||
@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4c
|
||||
title: >-
|
||||
Usare l'assegnazione destrutturante con il parametro di resto per riassegnare gli elementi dell'array
|
||||
challengeType: 1
|
||||
forumTopicId: 301218
|
||||
dashedName: >-
|
||||
use-destructuring-assignment-with-the-rest-parameter-to-reassign-array-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In alcune situazioni che comportano la destrutturazione di array, potremmo voler raccogliere il resto degli elementi in un array separato.
|
||||
|
||||
Il risultato è simile a `Array.prototype.slice()`, come mostrato sotto:
|
||||
|
||||
```js
|
||||
const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
|
||||
console.log(a, b);
|
||||
console.log(arr);
|
||||
```
|
||||
|
||||
La console mostrerà i valori `1, 2` e `[3, 4, 5, 7]`.
|
||||
|
||||
Le variabili `a` e `b` prendono il primo e il secondo valore dall'array. Dopodiché, a causa della presenza del parametro di resto, `arr` ottiene il resto dei valori sotto forma di un array. L'elemento di resto funziona correttamente solo come ultima variabile dell'elenco. Non è quindi possibile utilizzare il parametro di resto per catturare un sottoarray che lascia fuori l'ultimo elemento dell'array originale.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Usa l'assegnazione destrutturante con il parametro di resto per eseguire un efficace `Array.prototype.slice()` in modo che `arr` sia il sottoarray dell'array originale `source` con i primi due elementi omessi.
|
||||
|
||||
# --hints--
|
||||
|
||||
`arr` dovrebbe essere `[3,4,5,6,7,8,9,10]`
|
||||
|
||||
```js
|
||||
assert(arr.every((v, i) => v === i + 3) && arr.length === 8);
|
||||
```
|
||||
|
||||
`source` dovrebbe essere `[1,2,3,4,5,6,7,8,9,10]`
|
||||
|
||||
```js
|
||||
assert(source.every((v, i) => v === i + 1) && source.length === 10);
|
||||
```
|
||||
|
||||
`Array.slice()` non dovrebbe essere utilizzato.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(!getUserInput('index').match(/slice/g));
|
||||
```
|
||||
|
||||
Si dovrebbe utilizzare la destrutturazione su `list`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeWhiteSpace(code)
|
||||
.match(/\[(([_$a-z]\w*)?,){1,}\.\.\.arr\]=list/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const source = [1,2,3,4,5,6,7,8,9,10];
|
||||
function removeFirstTwo(list) {
|
||||
// Only change code below this line
|
||||
const arr = list; // Change this line
|
||||
// Only change code above this line
|
||||
return arr;
|
||||
}
|
||||
const arr = removeFirstTwo(source);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
const source = [1,2,3,4,5,6,7,8,9,10];
|
||||
function removeFirstTwo(list) {
|
||||
const [, , ...arr] = list;
|
||||
return arr;
|
||||
}
|
||||
const arr = removeFirstTwo(source);
|
||||
```
|
||||
@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b56
|
||||
title: Usare export per condividere un blocco di codice
|
||||
challengeType: 1
|
||||
forumTopicId: 301219
|
||||
dashedName: use-export-to-share-a-code-block
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Immagina un file chiamato `math_functions.js` che contiene diverse funzioni relative alle operazioni matematiche. Una di esse è memorizzata in una variabile, `add`, che prende due numeri e restituisce la loro somma. Vuoi utilizzare questa funzione in diversi file JavaScript. Per condividerlo con questi altri file, devi prima farne l'`export`.
|
||||
|
||||
```js
|
||||
export const add = (x, y) => {
|
||||
return x + y;
|
||||
}
|
||||
```
|
||||
|
||||
Quanto sopra è un metodo comune per esportare una singola funzione, ma è possibile ottenere la stessa cosa in questo modo:
|
||||
|
||||
```js
|
||||
const add = (x, y) => {
|
||||
return x + y;
|
||||
}
|
||||
|
||||
export { add };
|
||||
```
|
||||
|
||||
Quando si esporta una variabile o funzione, è possibile importarla in un altro file e usarla senza dover riscriverne il codice. È possibile esportare più cose ripetendo il primo esempio per ogni cosa che si desidera esportare, o inserendoli tutti nella dichiarazione di esportazione del secondo esempio, così:
|
||||
|
||||
```js
|
||||
export { add, subtract };
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Nell'editor ci sono due funzioni relative alle stringhe. Esporta entrambi utilizzando un metodo a tua scelta.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti esportare correttamente `uppercaseString`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/(export\s+const\s+uppercaseString|export\s*{\s*(uppercaseString[^}]*|[^,]*,\s*uppercaseString\s*)})/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti esportare correttamente `lowercaseString`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/(export\s+const\s+lowercaseString|export\s*{\s*(lowercaseString[^}]*|[^,]*,\s*lowercaseString\s*)})/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const uppercaseString = (string) => {
|
||||
return string.toUpperCase();
|
||||
}
|
||||
|
||||
const lowercaseString = (string) => {
|
||||
return string.toLowerCase()
|
||||
}
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
export const uppercaseString = (string) => {
|
||||
return string.toUpperCase();
|
||||
}
|
||||
|
||||
export const lowercaseString = (string) => {
|
||||
return string.toLowerCase()
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,174 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b54
|
||||
title: Usare getter e setter per controllare l'accesso a un oggetto
|
||||
challengeType: 1
|
||||
forumTopicId: 301220
|
||||
dashedName: use-getters-and-setters-to-control-access-to-an-object
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
È possibile ottenere valori da un oggetto ed impostare il valore di una proprietà all'interno di un oggetto.
|
||||
|
||||
Queste due azioni sono classicamente chiamate <dfn>getter</dfn> e <dfn>setter</dfn>.
|
||||
|
||||
Le funzioni getter sono destinate semplicemente a restituire (to get, ottenere) all'utente il valore della variabile privata di un oggetto, senza che l'utente acceda direttamente alla variabile privata.
|
||||
|
||||
Le funzioni setter sono destinate a modificare (to set, impostare) il valore della variabile privata di un oggetto in base al valore passato nella funzione di impostazione. Questa modifica potrebbe comportare calcoli, o addirittura sovrascrivere completamente il valore precedente.
|
||||
|
||||
```js
|
||||
class Book {
|
||||
constructor(author) {
|
||||
this._author = author;
|
||||
}
|
||||
// getter
|
||||
get writer() {
|
||||
return this._author;
|
||||
}
|
||||
// setter
|
||||
set writer(updatedAuthor) {
|
||||
this._author = updatedAuthor;
|
||||
}
|
||||
}
|
||||
const novel = new Book('anonymous');
|
||||
console.log(novel.writer);
|
||||
novel.writer = 'newAuthor';
|
||||
console.log(novel.writer);
|
||||
```
|
||||
|
||||
La console mostrerà le stringhe `anonymous` e `newAuthor`.
|
||||
|
||||
Notare la sintassi utilizzata per invocare le funzioni getter e setter. Non assomigliano nemmeno a funzioni. Getter e setter sono importanti perché nascondono i dettagli interni dell'implementazione.
|
||||
|
||||
**Nota:** È convenzione precedere il nome di una variabile privata con un underscore(`_`). Tuttavia, la pratica in sé non rende privata una variabile.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Usa la parola chiave `class` per creare una classe `Thermostat`. Il `constructor` accetta una temperatura in Fahrenheit.
|
||||
|
||||
All'interno della classe, crea un `getter` per ottenere la temperatura in Celsius e un `setter` per impostare la temperatura in Celsius.
|
||||
|
||||
Ricorda che `C = 5/9 * (F - 32)` e `F = C * 9.0 / 5 + 32`, dove `F` è il valore della temperatura in Fahrenheit, e `C` è il valore della stessa temperatura in Celsius.
|
||||
|
||||
**Nota:** Una volta implementato, monitorerai la temperatura all'interno della classe in una scala, sia essa Fahrenheit o Celsius.
|
||||
|
||||
Questo è il potere di un getter e di un setter. Stai creando un'API per un altro utente, che può ottenere il risultato corretto, indipendentemente da quale stai monitorando.
|
||||
|
||||
In altre parole, stai astraendo i dettagli di implementazione dall'utente.
|
||||
|
||||
# --hints--
|
||||
|
||||
`Thermostat` dovrebbe essere una `class` con un metodo `constructor` definito.
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof Thermostat === 'function' &&
|
||||
typeof Thermostat.constructor === 'function'
|
||||
);
|
||||
```
|
||||
|
||||
Dovrebbe essere usata la parola chiave `class`.
|
||||
|
||||
```js
|
||||
assert(code.match(/class/g));
|
||||
```
|
||||
|
||||
`Thermostat` dovrebbe poter essere istanziato.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(122);
|
||||
return typeof t === 'object';
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
Quando istanziato con un valore in Fahrenheit, `Thermostat` dovrebbe impostare la `temperature` corretta.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(122);
|
||||
return t.temperature === 50;
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
Dovrebbe essere definita una funzione `getter`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const desc = Object.getOwnPropertyDescriptor(
|
||||
Thermostat.prototype,
|
||||
'temperature'
|
||||
);
|
||||
return !!desc && typeof desc.get === 'function';
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
Dovrebbe essere definita una funzione `setter`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const desc = Object.getOwnPropertyDescriptor(
|
||||
Thermostat.prototype,
|
||||
'temperature'
|
||||
);
|
||||
return !!desc && typeof desc.set === 'function';
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
Chiamando il `setter` con un valore in Celsius dovrebbe essere impostata la `temperature`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(32);
|
||||
t.temperature = 26;
|
||||
const u = new Thermostat(32);
|
||||
u.temperature = 50;
|
||||
return t.temperature === 26 && u.temperature === 50;
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
// Only change code below this line
|
||||
|
||||
// Only change code above this line
|
||||
|
||||
const thermos = new Thermostat(76); // Setting in Fahrenheit scale
|
||||
let temp = thermos.temperature; // 24.44 in Celsius
|
||||
thermos.temperature = 26;
|
||||
temp = thermos.temperature; // 26 in Celsius
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
class Thermostat {
|
||||
constructor(fahrenheit) {
|
||||
this._tempInCelsius = 5/9 * (fahrenheit - 32);
|
||||
}
|
||||
get temperature(){
|
||||
return this._tempInCelsius;
|
||||
}
|
||||
set temperature(newTemp){
|
||||
this._tempInCelsius = newTemp;
|
||||
}
|
||||
}
|
||||
|
||||
const thermos = new Thermostat(76); // Setting in Fahrenheit scale
|
||||
let temp = thermos.temperature; // 24.44 in Celsius
|
||||
thermos.temperature = 26;
|
||||
temp = thermos.temperature; // 26 in Celsius
|
||||
```
|
||||
@ -0,0 +1,80 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b47
|
||||
title: Usare il parametro resto con gli argomenti delle funzioni
|
||||
challengeType: 1
|
||||
forumTopicId: 301221
|
||||
dashedName: use-the-rest-parameter-with-function-parameters
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per aiutarci a creare funzioni più flessibili, ES6 introduce il parametro <dfn>resto</dfn> per i parametri di funzioni. Con il parametro resto, è possibile creare funzioni che richiedono un numero variabile di argomenti. Questi argomenti sono memorizzati in un array a cui è possibile accedere successivamente dall'interno della funzione.
|
||||
|
||||
Dai un'occhiata a questo codice:
|
||||
|
||||
```js
|
||||
function howMany(...args) {
|
||||
return "You have passed " + args.length + " arguments.";
|
||||
}
|
||||
console.log(howMany(0, 1, 2));
|
||||
console.log(howMany("string", null, [1, 2, 3], { }));
|
||||
```
|
||||
|
||||
La console mostrerà le stringhe `You have passed 3 arguments.` e `You have passed 4 arguments.`.
|
||||
|
||||
Il parametro resto elimina la necessità di controllare l'array `args` e ci permette di applicare `map()`, `filter()` e `reduce()` all'array dei parametri.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Modifica la funzione `sum` utilizzando il parametro resto in modo che la funzione `sum` sia in grado di prendere qualsiasi numero di argomenti e restituisca la loro somma.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il risultato di `sum(0,1,2)` dovrebbe essere 3
|
||||
|
||||
```js
|
||||
assert(sum(0, 1, 2) === 3);
|
||||
```
|
||||
|
||||
Il risultato di `sum(1,2,3,4)` dovrebbe essere 10
|
||||
|
||||
```js
|
||||
assert(sum(1, 2, 3, 4) === 10);
|
||||
```
|
||||
|
||||
Il risultato di `sum(5)` dovrebbe essere 5
|
||||
|
||||
```js
|
||||
assert(sum(5) === 5);
|
||||
```
|
||||
|
||||
Il risultato di `sum()` dovrebbe essere 0
|
||||
|
||||
```js
|
||||
assert(sum() === 0);
|
||||
```
|
||||
|
||||
`sum` dovrebbe essere una funzione freccia che utilizza la sintassi del parametro resto (`...`) sul parametro `args`.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/sum=\(\.\.\.args\)=>/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const sum = (x, y, z) => {
|
||||
const args = [x, y, z];
|
||||
return args.reduce((a, b) => a + b, 0);
|
||||
}
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
const sum = (...args) => {
|
||||
return args.reduce((a, b) => a + b, 0);
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b48
|
||||
title: Usare l'operatore di espansione per analizzare gli array in-place
|
||||
challengeType: 1
|
||||
forumTopicId: 301222
|
||||
dashedName: use-the-spread-operator-to-evaluate-arrays-in-place
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ES6 introduce l'<dfn>operatore di espansione</dfn>, che ci permette di espandere array ed altre espressioni in-place dove sono attesi più parametri o elementi.
|
||||
|
||||
Il codice ES5 qui sotto utilizza `apply()` per calcolare il valore massimo in un array:
|
||||
|
||||
```js
|
||||
var arr = [6, 89, 3, 45];
|
||||
var maximus = Math.max.apply(null, arr);
|
||||
```
|
||||
|
||||
`maximus` avrà un valore di `89`.
|
||||
|
||||
Abbiamo dovuto utilizzare `Math.max.apply(null, arr)` perché `Math.max(arr)` restituisce `NaN`. `Math.max()` si aspetta argomenti separati da virgole, ma non un array. L'operatore di espansione rende questa sintassi molto migliore da leggere e mantenere.
|
||||
|
||||
```js
|
||||
const arr = [6, 89, 3, 45];
|
||||
const maximus = Math.max(...arr);
|
||||
```
|
||||
|
||||
`maximus` avrà un valore di `89`.
|
||||
|
||||
`...arr` restituisce un array spacchettato. In altre parole, *espande* l'array. Tuttavia, l'operatore di espansione funziona solo sul posto, come argomento di una funzione o in un array letterale (definito usando le parentesi quadre). Il seguente codice non funzionerà:
|
||||
|
||||
```js
|
||||
const spreaded = ...arr;
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Copia tutti i contenuti di `arr1` in un altro array `arr2` usando l'operatore di espansione.
|
||||
|
||||
# --hints--
|
||||
|
||||
`arr2` dovrebbe essere la copia esatta di `arr1`.
|
||||
|
||||
```js
|
||||
assert(arr2.every((v, i) => v === arr1[i]) && arr2.length);
|
||||
```
|
||||
|
||||
L'operatore di espansione `...` dovrebbe essere usato per duplicare `arr1`.
|
||||
|
||||
```js
|
||||
assert(code.match(/Array\(\s*\.\.\.arr1\s*\)|\[\s*\.\.\.arr1\s*\]/));
|
||||
```
|
||||
|
||||
`arr2` dovrebbe rimanere invariato quando `arr1` viene modificato.
|
||||
|
||||
```js
|
||||
assert((arr1, arr2) => {
|
||||
arr1.push('JUN');
|
||||
return arr2.length < arr1.length;
|
||||
});
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
|
||||
let arr2;
|
||||
|
||||
arr2 = []; // Change this line
|
||||
|
||||
console.log(arr2);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
|
||||
let arr2;
|
||||
|
||||
arr2 = [...arr1];
|
||||
```
|
||||
@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b44
|
||||
title: Scrivere funzioni freccia con parametri
|
||||
challengeType: 1
|
||||
forumTopicId: 301223
|
||||
dashedName: write-arrow-functions-with-parameters
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Proprio come con una normale funzione, è possibile passare gli argomenti ad una funzione freccia.
|
||||
|
||||
```js
|
||||
const doubler = (item) => item * 2;
|
||||
doubler(4);
|
||||
```
|
||||
|
||||
`doubler(4)` restituirà il valore `8`.
|
||||
|
||||
Se una funzione a freccia ha un unico parametro, le parentesi che racchiudono il parametro possono essere omesse.
|
||||
|
||||
```js
|
||||
const doubler = item => item * 2;
|
||||
```
|
||||
|
||||
È possibile passare più di un argomento ad una funzione freccia.
|
||||
|
||||
```js
|
||||
const multiplier = (item, multi) => item * multi;
|
||||
multiplier(4, 2);
|
||||
```
|
||||
|
||||
`multiplier(4, 2)` restituirà il valore `8`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Riscrivi la funzione `myConcat` che concatena i contenuti di `arr2` a quelli di `arr1` in modo che usi la sintassi delle funzioni freccia.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti sostituire la parola chiave `var`.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(!getUserInput('index').match(/var/g));
|
||||
```
|
||||
|
||||
`myConcat` dovrebbe essere una variabile costante (usando `const`).
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').match(/const\s+myConcat/g));
|
||||
```
|
||||
|
||||
`myConcat` dovrebbe essere una funzione freccia con due parametri
|
||||
|
||||
```js
|
||||
assert(
|
||||
/myConcat=\(\w+,\w+\)=>/.test(code.replace(/\s/g, '')) &&
|
||||
typeof myConcat === 'function'
|
||||
);
|
||||
```
|
||||
|
||||
`myConcat()` dovrebbe restituire `[1, 2, 3, 4, 5]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(myConcat([1, 2], [3, 4, 5]), [1, 2, 3, 4, 5]);
|
||||
```
|
||||
|
||||
La parola chiave `function` non dovrebbe essere usata.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(!getUserInput('index').match(/function/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
var myConcat = function(arr1, arr2) {
|
||||
return arr1.concat(arr2);
|
||||
};
|
||||
|
||||
console.log(myConcat([1, 2], [3, 4, 5]));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
const myConcat = (arr1, arr2) => {
|
||||
return arr1.concat(arr2);
|
||||
};
|
||||
|
||||
console.log(myConcat([1, 2], [3, 4, 5]));
|
||||
```
|
||||
@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 587d7b8b367417b2b2512b50
|
||||
title: Scrivere funzioni dichiarative concise con ES6
|
||||
challengeType: 1
|
||||
forumTopicId: 301224
|
||||
dashedName: write-concise-declarative-functions-with-es6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Quando si definiscono le funzioni all'interno degli oggetti in ES5, dobbiamo usare la parola chiave `function` come segue:
|
||||
|
||||
```js
|
||||
const person = {
|
||||
name: "Taylor",
|
||||
sayHello: function() {
|
||||
return `Hello! My name is ${this.name}.`;
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
Con ES6, è possibile rimuovere simultaneamente la parola chiave `function` e i due punti quando si definiscono le funzioni negli oggetti. Ecco un esempio di questa sintassi:
|
||||
|
||||
```js
|
||||
const person = {
|
||||
name: "Taylor",
|
||||
sayHello() {
|
||||
return `Hello! My name is ${this.name}.`;
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Riscrivi la funzione `setGear` all'interno dell'oggetto `bicycle` usando la scorciatoia sintattica descritta sopra.
|
||||
|
||||
# --hints--
|
||||
|
||||
La dichiarazione di funzione tradizionale non deve essere utilizzata.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(!code.match(/function/));
|
||||
```
|
||||
|
||||
`setGear` dovrebbe essere una funzione dichiarativa.
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof bicycle.setGear === 'function' && code.match(/setGear\s*\(.+\)\s*\{/)
|
||||
);
|
||||
```
|
||||
|
||||
`bicycle.setGear(48)` dovrebbe cambiare il valore della marcia (`gear`) a 48.
|
||||
|
||||
```js
|
||||
assert(new bicycle.setGear(48).gear === 48);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
// Only change code below this line
|
||||
const bicycle = {
|
||||
gear: 2,
|
||||
setGear: function(newGear) {
|
||||
this.gear = newGear;
|
||||
}
|
||||
};
|
||||
// Only change code above this line
|
||||
bicycle.setGear(3);
|
||||
console.log(bicycle.gear);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
const bicycle = {
|
||||
gear: 2,
|
||||
setGear(newGear) {
|
||||
this.gear = newGear;
|
||||
}
|
||||
};
|
||||
bicycle.setGear(3);
|
||||
```
|
||||
@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4f
|
||||
title: Scrivere dichiarazioni letterali di oggetti concise utilizzando scorciatoie sulle proprietà
|
||||
challengeType: 1
|
||||
forumTopicId: 301225
|
||||
dashedName: write-concise-object-literal-declarations-using-object-property-shorthand
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ES6 aggiunge un bel supporto per definire facilmente gli oggetti letterali.
|
||||
|
||||
Considera il seguente codice:
|
||||
|
||||
```js
|
||||
const getMousePosition = (x, y) => ({
|
||||
x: x,
|
||||
y: y
|
||||
});
|
||||
```
|
||||
|
||||
`getMousePosition` è una semplice funzione che restituisce un oggetto contenente due proprietà. ES6 fornisce lo zucchero sintattico per eliminare la ridondanza di dover scrivere `x: x`. Puoi semplicemente scrivere `x` una volta, e verrà convertito in `x: x` (o qualcosa di equivalente) dietro le quinte. Ecco la stessa funzione di cui sopra, riscritta utilizzando questa nuova sintassi:
|
||||
|
||||
```js
|
||||
const getMousePosition = (x, y) => ({ x, y });
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Usa la scorciatoia sulle proprietà degli oggetti letterali per creare e restituire un oggetto con proprietà `name`, `age` e `gender`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`createPerson("Zodiac Hasbro", 56, "male")` dovrebbe restituire `{name: "Zodiac Hasbro", age: 56, gender: "male"}`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
{ name: 'Zodiac Hasbro', age: 56, gender: 'male' },
|
||||
createPerson('Zodiac Hasbro', 56, 'male')
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo codice non dovrebbe usare la coppia `key:value`.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(!getUserInput('index').match(/:/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
const createPerson = (name, age, gender) => {
|
||||
// Only change code below this line
|
||||
return {
|
||||
name: name,
|
||||
age: age,
|
||||
gender: gender
|
||||
};
|
||||
// Only change code above this line
|
||||
};
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
const createPerson = (name, age, gender) => {
|
||||
return {
|
||||
name,
|
||||
age,
|
||||
gender
|
||||
};
|
||||
};
|
||||
```
|
||||
Reference in New Issue
Block a user