Add languages Russian, Arabic, Chinese, Portuguese (#18305)
This commit is contained in:
committed by
mrugesh mohapatra
parent
09d3eca712
commit
2ca3a2093f
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b40
|
||||
title: Compare Scopes of the var and let Keywords
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Compare escopos do var e deixe Palavras-chave
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Quando você declara uma variável com a palavra-chave <code>var</code> , ela é declarada globalmente ou localmente se declarada dentro de uma função. A palavra-chave <code>let</code> se comporta de maneira semelhante, mas com alguns recursos extras. Quando você declara uma variável com a palavra-chave <code>let</code> dentro de um bloco, instrução ou expressão, seu escopo é limitado a esse bloco, instrução ou expressão. Por exemplo: <blockquote> var numArray = []; <br> para (var i = 0; i <3; i ++) { <br> numArray.push (i); <br> } <br> console.log (numArray); <br> // retorna [0, 1, 2] <br> console.log (i); <br> // retorna 3 </blockquote> Com a palavra-chave <code>var</code> , <code>i</code> é declarado globalmente. Então, quando o <code>i++</code> é executado, ele atualiza a variável global. Este código é semelhante ao seguinte: <blockquote> var numArray = []; <br> var i; <br> para (i = 0; i <3; i ++) { <br> numArray.push (i); <br> } <br> console.log (numArray); <br> // retorna [0, 1, 2] <br> console.log (i); <br> // retorna 3 </blockquote> Esse comportamento causará problemas se você criar uma função e armazená-la para uso posterior dentro de um loop for que use a variável <code>i</code> . Isso ocorre porque a função armazenada sempre se referirá ao valor da variável global <code>i</code> atualizada. <blockquote> var printNumTwo; <br> para (var i = 0; i <3; i ++) { <br> if (i === 2) { <br> printNumTwo = function () { <br> return i; <br> }; <br> } <br> } <br> console.log (printNumTwo ()); <br> // retorna 3 </blockquote> Como você pode ver, <code>printNumTwo()</code> imprime 3 e não 2. Isso ocorre porque o valor atribuído a <code>i</code> foi atualizado e o <code>printNumTwo()</code> retorna o <code>i</code> global e não o valor que <code>i</code> tinha quando a função foi criada no loop for. A palavra-chave <code>let</code> não segue esse comportamento: <blockquote> 'use strict'; <br> deixe printNumTwo; <br> para (let i = 0; i <3; i ++) { <br> if (i === 2) { <br> printNumTwo = function () { <br> return i; <br> }; <br> } <br> } <br> console.log (printNumTwo ()); <br> // retorna 2 <br> console.log (i); <br> // retorna "i não está definido" </blockquote> <code>i</code> não está definido porque não foi declarado no escopo global. Apenas é declarado dentro da instrução for loop. <code>printNumTwo()</code> retornou o valor correto porque três variáveis <code>i</code> diferentes com valores exclusivos (0, 1 e 2) foram criadas pela palavra-chave <code>let</code> dentro da instrução loop. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Corrigir o código para que <code>i</code> declarado na declaração if é uma variável separada do que <code>i</code> declarado na primeira linha da função. Certifique-se de não usar a palavra-chave <code>var</code> em nenhum lugar do seu código. Este exercício foi projetado para ilustrar a diferença entre como <code>var</code> e <code>let</code> keywords atribuem escopo à variável declarada. Ao programar uma função semelhante à usada neste exercício, é melhor usar nomes de variáveis diferentes para evitar confusão. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>var</code> não existe no código.
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/var/g),"<code>var</code> does not exist in code.");'
|
||||
- text: A variável <code>i</code> declarada na instrução if deve ser igual a "escopo de bloco".
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/(i\s*=\s*).*\s*.*\s*.*\1("|")block\s*scope\2/g), "The variable <code>i</code> declared in the if statement should equal "block scope".");'
|
||||
- text: <code>checkScope()</code> deve retornar "escopo de função"
|
||||
testString: 'assert(checkScope() === "function scope", "<code>checkScope()</code> should return "function scope"");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function checkScope() {
|
||||
"use strict";
|
||||
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;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,59 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b58
|
||||
title: Create an Export Fallback with export default
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Criar um retorno de exportação com padrão de exportação
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Na lição de <code>export</code> , você aprendeu sobre a sintaxe conhecida como <dfn>exportação nomeada</dfn> . Isso permitiu que você disponibilizasse várias funções e variáveis para uso em outros arquivos. Há outra sintaxe de <code>export</code> você precisa conhecer, conhecida como <dfn>padrão de exportação</dfn> . Normalmente, você usará essa sintaxe se apenas um valor estiver sendo exportado de um arquivo. Também é usado para criar um valor de fallback para um arquivo ou módulo. Aqui está um exemplo rápido de <code>export default</code> : <blockquote> função padrão de exportação add (x, y) { <br> return x + y; <br> } </blockquote> Nota: Como <code>export default</code> é usado para declarar um valor de fallback para um módulo ou arquivo, você pode ter apenas um valor como uma exportação padrão em cada módulo ou arquivo. Além disso, você não pode usar <code>export default</code> com <code>var</code> , <code>let</code> ou <code>const</code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> A seguinte função deve ser o valor de fallback para o módulo. Por favor, adicione o código necessário para fazer isso. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Adequado usado de fallback de <code>export</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/export\s+default\s+function\s+subtract\(x,y\)\s+{return\s+x\s-\s+y;}/g), "Proper used of <code>export</code> fallback.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
function subtract(x,y) {return x - y;}
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
window.exports = function(){};
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4e
|
||||
title: Create Strings using Template Literals
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Criar strings usando modelos literais
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Um novo recurso do ES6 é o <dfn>literal</dfn> do <dfn>modelo</dfn> . Este é um tipo especial de string que facilita a criação de strings complexas. Literais de modelo permitem criar strings de várias linhas e usar recursos de interpolação de strings para criar strings. Considere o código abaixo: <blockquote> const pessoa = { <br> nome: "Zodíaco Hasbro", <br> idade: 56 anos <br> }; <br><br> // Template literal com multi-linha e interpolação de string <br> const greeting = `Olá, meu nome é $ {person.name}! <br> Tenho $ {person.age} anos de idade. <br><br> console.log (saudação); // prints <br> // Olá, meu nome é Zodíaco Hasbro! <br> // Eu tenho 56 anos. <br></blockquote> Muitas coisas aconteceram lá. Em primeiro lugar, o exemplo usa backticks ( <code>`</code> ), não aspas ( <code>'</code> ou <code>"</code> ), para envolver a string. Em segundo lugar, observe que a string é multilinha, tanto no código quanto na saída. Isso salva a inserção <code>\n</code> dentro de strings. A sintaxe <code>${variable}</code> usada acima é um marcador de posição. Basicamente, você não precisará mais usar a concatenação com o operador <code>+</code> Para adicionar variáveis a strings, basta soltar a variável em uma string de template e envolvê-la com <code>${</code> e <code>}</code> . da mesma forma, você pode incluir outras expressões em sua string literal, por exemplo <code>${a + b}</code> . Esta nova forma de criar strings lhe dá mais flexibilidade para criar cordas robustas. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Use a sintaxe literal de modelo com backticks para exibir cada entrada da matriz de <code>failure</code> do objeto de <code>result</code> . Cada entrada deve ser agrupada dentro de um elemento <code>li</code> com o <code>text-warning</code> atributo de classe e listada no <code>resultDisplayArray</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>resultDisplayArray</code> é uma matriz contendo mensagens de <code>result failure</code> .
|
||||
testString: 'assert(typeof makeList(result.failure) === "object" && resultDisplayArray.length === 3, "<code>resultDisplayArray</code> is a list containing <code>result failure</code> messages.");'
|
||||
- text: <code>resultDisplayArray</code> é a saída desejada.
|
||||
testString: '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>`), "<code>resultDisplayArray</code> is the desired output.");'
|
||||
- text: Sequências de modelos foram usadas
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/`.*`/g), "Template strings were not used");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const result = {
|
||||
success: ["max-length", "no-amd", "prefer-arrow-functions"],
|
||||
failure: ["no-var", "var-on-top", "linebreak"],
|
||||
skipped: ["id-blacklist", "no-dup-keys"]
|
||||
};
|
||||
function makeList(arr) {
|
||||
"use strict";
|
||||
|
||||
// change code below this line
|
||||
const resultDisplayArray = null;
|
||||
// change code above this line
|
||||
|
||||
return resultDisplayArray;
|
||||
}
|
||||
/**
|
||||
* makeList(result.failure) should return:
|
||||
* [ `<li class="text-warning">no-var</li>`,
|
||||
* `<li class="text-warning">var-on-top</li>`,
|
||||
* `<li class="text-warning">linebreak</li>` ]
|
||||
**/
|
||||
const resultDisplayArray = makeList(result.failure);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b41
|
||||
title: Declare a Read-Only Variable with the const Keyword
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Declarar uma variável somente leitura com a palavra-chave const
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>let</code> não é a única maneira nova para declarar variáveis. No ES6, você também pode declarar variáveis usando a palavra-chave <code>const</code> . <code>const</code> tem todos os recursos incríveis que <code>let</code> , com a vantagem adicional de que as variáveis declaradas usando <code>const</code> são somente leitura. Eles são um valor constante, o que significa que, uma vez que uma variável é atribuída com <code>const</code> , ela não pode ser reatribuída. <blockquote> "use estrito" <br> const FAV_PET = "Gatos"; <br> FAV_PET = "Cães"; // retorna erro </blockquote> Como você pode ver, tentar reatribuir uma variável declarada com <code>const</code> causará um erro. Você deve sempre nomear as variáveis que não deseja reatribuir usando a palavra-chave <code>const</code> . Isso ajuda quando você acidentalmente tenta reatribuir uma variável que deve permanecer constante. Uma prática comum ao nomear constantes é usar todas as letras maiúsculas, com palavras separadas por um sublinhado. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Altere o código para que todas as variáveis sejam declaradas usando <code>let</code> ou <code>const</code> . Use <code>let</code> quando quiser que a variável seja alterada e <code>const</code> quando quiser que a variável permaneça constante. Além disso, renomeie as variáveis declaradas com <code>const</code> para estar em conformidade com as práticas comuns, o que significa que as constantes devem estar em maiúsculas. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>var</code> não existe em seu código.
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/var/g),"<code>var</code> does not exist in your code.");'
|
||||
- text: <code>SENTENCE</code> deve ser uma variável constante declarada com <code>const</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/(const SENTENCE)/g), "<code>SENTENCE</code> should be a constant variable declared with <code>const</code>.");'
|
||||
- text: <code>i</code> deveria ser declarado com <code>let</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/(let i)/g), "<code>i</code> should be declared with <code>let</code>.");'
|
||||
- text: <code>console.log</code> deve ser alterado para imprimir a variável <code>SENTENCE</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/console\.log\(\s*SENTENCE\s*\)\s*;?/g), "<code>console.log</code> should be adjusted to print the variable <code>SENTENCE</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function printManyTimes(str) {
|
||||
"use strict";
|
||||
|
||||
// change code below this line
|
||||
|
||||
var sentence = str + " is cool!";
|
||||
for(var i = 0; i < str.length; i+=2) {
|
||||
console.log(sentence);
|
||||
}
|
||||
|
||||
// change code above this line
|
||||
|
||||
}
|
||||
printManyTimes("freeCodeCamp");
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b3f
|
||||
title: Explore Differences Between the var and let Keywords
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Explore as diferenças entre o var e deixe
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Um dos maiores problemas com a declaração de variáveis com a palavra-chave <code>var</code> é que você pode sobrescrever declarações de variáveis sem um erro. <blockquote> var camper = 'James'; <br> var camper = 'David'; <br> console.log (campista); <br> // loga 'David' </blockquote> Como você pode ver no código acima, a variável <code>camper</code> é originalmente declarada como <code>James</code> e, em seguida, sobrescrita como sendo <code>David</code> . Em um aplicativo pequeno, você pode não encontrar esse tipo de problema, mas quando o código se torna maior, você pode acidentalmente sobrescrever uma variável que não pretende sobrescrever. Como esse comportamento não gera um erro, a pesquisa e a correção de erros se tornam mais difíceis. <br> Uma nova palavra-chave chamada <code>let</code> foi introduzida no ES6 para resolver esse possível problema com a palavra-chave <code>var</code> . Se você fosse substituir <code>var</code> com <code>let</code> nas declarações de variáveis do código acima, o resultado seria um erro. <blockquote> deixe campista = 'James'; <br> deixe campista = 'David'; // lança um erro </blockquote> Este erro pode ser visto no console do seu navegador. Portanto, ao contrário de <code>var</code> , ao usar <code>let</code> , uma variável com o mesmo nome só pode ser declarada uma vez. Observe o <code>"use strict"</code> . Isso habilita o Modo Estrito, que detecta erros comuns de codificação e ações "inseguras". Por exemplo: <blockquote> "use strict"; <br> x = 3,14; // lança um erro porque x não está declarado </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Atualize o código para que ele use apenas a palavra-chave <code>let</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>var</code> não existe no código.
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/var/g),"<code>var</code> does not exist in code.");'
|
||||
- text: <code>catName</code> deve ser <code>Oliver</code> .
|
||||
testString: 'assert(catName === "Oliver", "<code>catName</code> should be <code>Oliver</code>.");'
|
||||
- text: <code>quote</code> deve ser <code>"Oliver says Meow!"</code>
|
||||
testString: 'assert(quote === "Oliver says Meow!", "<code>quote</code> should be <code>"Oliver says Meow!"</code>");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var catName;
|
||||
var quote;
|
||||
function catTalk() {
|
||||
"use strict";
|
||||
|
||||
catName = "Oliver";
|
||||
quote = catName + " says Meow!";
|
||||
|
||||
}
|
||||
catTalk();
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d7b8d367417b2b2512b59
|
||||
title: Import a Default Export
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Importar uma exportação padrão
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> No último desafio, você aprendeu sobre <code>export default</code> e seus usos. É importante observar que, para importar uma exportação padrão, você precisa usar uma sintaxe de <code>import</code> diferente. No exemplo a seguir, temos uma função, <code>add</code> , que é a exportação padrão de um arquivo, <code>"math_functions"</code> . Aqui está como importá-lo: <blockquote> import add de "math_functions"; <br> adicionar (5,4); // retornará 9 </blockquote> A sintaxe difere em um local de chave - o valor importado, <code>add</code> , não é cercado por chaves, <code>{}</code> . Ao contrário dos valores exportados, o método primário de importar uma exportação padrão é simplesmente escrever o nome do valor após a <code>import</code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> No código a seguir, por favor, importe a exportação padrão, <code>subtract</code> , do arquivo <code>"math_functions"</code> , encontrado no mesmo diretório que este arquivo. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Importa corretamente <code>export default</code> método <code>export default</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/import\s+subtract\s+from\s+"math_functions"/g), "Properly imports <code>export default</code> method.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
subtract(7,4);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
window.require = function(str) {
|
||||
if (str === 'math_functions') {
|
||||
return function(a, b) {
|
||||
return a - b;
|
||||
}}};
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b42
|
||||
title: Mutate an Array Declared with const
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Mude uma matriz declarada com const
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A declaração <code>const</code> tem muitos casos de uso no JavaScript moderno. Alguns desenvolvedores preferem atribuir todas as variáveis usando <code>const</code> por padrão, a menos que saibam que precisarão reatribuir o valor. Apenas nesse caso, eles usam <code>let</code> . No entanto, é importante entender que objetos (incluindo matrizes e funções) atribuídos a uma variável usando <code>const</code> ainda são mutáveis. A utilização da declaração <code>const</code> impede apenas a reatribuição do identificador de variáveis. <blockquote> "use strict"; <br> const s = [5, 6, 7]; <br> s = [1, 2, 3]; // lança erro, tentando atribuir um const <br> s [2] = 45; // funciona exatamente como faria com uma matriz declarada com var ou let <br> console.log (s); // retorna [5, 6, 45] </blockquote> Como você pode ver, você pode alterar o próprio objeto <code>[5, 6, 7]</code> e a variável <code>s</code> ainda apontará para a matriz alterada <code>[5, 6, 45]</code> . Como todas as matrizes, os elementos da matriz em <code>s</code> são mutáveis, mas porque <code>const</code> foi usado, você não pode usar o identificador variável <code>s</code> para apontar para uma matriz diferente usando o operador de atribuição. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Uma matriz é declarada como <code>const s = [5, 7, 2]</code> . Altere a matriz para <code>[2, 5, 7]</code> usando várias atribuições de elementos. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Não substitua a palavra-chave <code>const</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const/g), "Do not replace <code>const</code> keyword.");'
|
||||
- text: <code>s</code> deve ser uma variável constante (usando <code>const</code> ).
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const\s+s/g), "<code>s</code> should be a constant variable (by using <code>const</code>).");'
|
||||
- text: Não altere a declaração original da matriz.
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const\s+s\s*=\s*\[\s*5\s*,\s*7\s*,\s*2\s*\]\s*;?/g), "Do not change the original array declaration.");'
|
||||
- text: '<code>s</code> deve ser igual a <code>[2, 5, 7]</code> .'
|
||||
testString: 'assert.deepEqual(s, [2, 5, 7], "<code>s</code> should be equal to <code>[2, 5, 7]</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const s = [5, 7, 2];
|
||||
function editInPlace() {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
|
||||
// s = [2, 5, 7]; <- this is invalid
|
||||
|
||||
// change code above this line
|
||||
}
|
||||
editInPlace();
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 598f48a36c8c40764b4e52b3
|
||||
title: Prevent Object Mutation
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Impedir a mutação de objetos
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Como visto no desafio anterior, a declaração <code>const</code> sozinha não protege seus dados da mutação. Para garantir que seus dados não sejam alterados, o JavaScript fornece uma função <code>Object.freeze</code> para impedir a mutação de dados. Quando o objeto estiver congelado, você não poderá mais adicionar, atualizar ou excluir propriedades dele. Qualquer tentativa de alterar o objeto será rejeitada sem erro. <blockquote> deixe obj = { <br> nome: "FreeCodeCamp", <br> revisão: "Awesome" <br> }; <br> Object.freeze (obj); <br> obj.review = "mau"; // será ignorado. Mutação não permitida <br> obj.newProp = "Teste"; // será ignorado. Mutação não permitida <br> console.log (obj); <br> // {name: "FreeCodeCamp", resenha: "Awesome"} </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Neste desafio, você usará <code>Object.freeze</code> para impedir que constantes matemáticas sejam alteradas. Você precisa congelar o objeto <code>MATH_CONSTANTS</code> para que ninguém seja capaz de alterar o valor de <code>PI</code> , adicionar ou excluir propriedades. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Não substitua a palavra-chave <code>const</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const/g), "Do not replace <code>const</code> keyword.");'
|
||||
- text: <code>MATH_CONSTANTS</code> deve ser uma variável constante (usando <code>const</code> ).
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const\s+MATH_CONSTANTS/g), "<code>MATH_CONSTANTS</code> should be a constant variable (by using <code>const</code>).");'
|
||||
- text: Não altere <code>MATH_CONSTANTS</code> original.
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const\s+MATH_CONSTANTS\s+=\s+{\s+PI:\s+3.14\s+};/g), "Do not change original <code>MATH_CONSTANTS</code>.");'
|
||||
- text: <code>PI</code> é igual a <code>3.14</code> .
|
||||
testString: 'assert(PI === 3.14, "<code>PI</code> equals <code>3.14</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function freezeObj() {
|
||||
"use strict";
|
||||
const MATH_CONSTANTS = {
|
||||
PI: 3.14
|
||||
};
|
||||
// change code below this line
|
||||
|
||||
|
||||
// change code above this line
|
||||
try {
|
||||
MATH_CONSTANTS.PI = 99;
|
||||
} catch( ex ) {
|
||||
console.log(ex);
|
||||
}
|
||||
return MATH_CONSTANTS.PI;
|
||||
}
|
||||
const PI = freezeObj();
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,60 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b46
|
||||
title: Set Default Parameters for Your Functions
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Definir parâmetros padrão para suas funções
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Para nos ajudar a criar funções mais flexíveis, o ES6 introduz <dfn>parâmetros padrão</dfn> para funções. Confira este código: <blockquote> saudação de função (name = "Anonymous") { <br> return "Olá" + nome; <br> } <br> console.log (saudação ("John")); // Olá john <br> console.log (saudação ()); // Hello Anonymous </blockquote> O parâmetro padrão entra em ação quando o argumento não é especificado (é indefinido). Como você pode ver no exemplo acima, o <code>name</code> do parâmetro receberá seu valor padrão <code>"Anonymous"</code> quando você não fornecer um valor para o parâmetro. Você pode adicionar valores padrão para quantos parâmetros desejar. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Modifique o <code>increment</code> função adicionando parâmetros padrão para que ele adicione 1 a um <code>number</code> se o <code>value</code> não for especificado. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'O resultado do <code>increment(5, 2)</code> deve ser <code>7</code> .'
|
||||
testString: 'assert(increment(5, 2) === 7, "The result of <code>increment(5, 2)</code> should be <code>7</code>.");'
|
||||
- text: O resultado do <code>increment(5)</code> deve ser <code>6</code> .
|
||||
testString: 'assert(increment(5) === 6, "The result of <code>increment(5)</code> should be <code>6</code>.");'
|
||||
- text: o parâmetro padrão <code>1</code> foi usado para o <code>value</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/value\s*=\s*1/g), "default parameter <code>1</code> was used for <code>value</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const increment = (function() {
|
||||
"use strict";
|
||||
return function increment(number, value) {
|
||||
return number + value;
|
||||
};
|
||||
})();
|
||||
console.log(increment(5, 2)); // returns 7
|
||||
console.log(increment(5)); // returns 6
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b55
|
||||
title: Understand the Differences Between import and require
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Entenda as diferenças entre importar e exigir
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> No passado, a função <code>require()</code> seria usada para importar as funções e o código em arquivos e módulos externos. Embora seja prático, isso apresenta um problema: alguns arquivos e módulos são bastante grandes e você pode precisar apenas de determinados códigos desses recursos externos. O ES6 nos fornece uma ferramenta muito útil, conhecida como <dfn>importação</dfn> . Com ele, podemos escolher quais partes de um módulo ou arquivo carregar em um determinado arquivo, economizando tempo e memória. Considere o seguinte exemplo. Imagine que <code>math_array_functions</code> tenha cerca de 20 funções, mas eu só preciso de um, <code>countItems</code> , no meu arquivo atual. A antiga abordagem <code>require()</code> me forçaria a trazer todas as 20 funções. Com essa nova sintaxe de <code>import</code> , posso trazer apenas a função desejada, assim: <blockquote> import {countItems} de "math_array_functions" </blockquote> Uma descrição do código acima: <blockquote> import {function} de "file_path_goes_here" <br> // Também podemos importar variáveis da mesma maneira! </blockquote> Existem algumas maneiras de escrever uma declaração de <code>import</code> , mas o acima é um caso de uso muito comum. <strong>Nota</strong> <br> O espaço em branco ao redor da função dentro das chaves é uma prática recomendada - facilita a leitura da declaração de <code>import</code> . <strong>Nota</strong> <br> As lições desta seção tratam de recursos que não são do navegador. <code>import</code> , e as declarações que introduzimos no restante dessas lições, não funcionarão diretamente em um navegador. No entanto, podemos usar várias ferramentas para criar código a partir disso para que funcione no navegador. <strong>Nota</strong> <br> Na maioria dos casos, o caminho do arquivo requer um <code>./</code> antes dele; caso contrário, o nó procurará no diretório <code>node_modules</code> primeiro tentando carregá-lo como uma dependência. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione a declaração de <code>import</code> apropriada que permitirá que o arquivo atual use a função <code>capitalizeString</code> . O arquivo onde esta função reside é chamado <code>"string_functions"</code> , e está no mesmo diretório que o arquivo atual. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: declaração de <code>import</code> válida
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/import\s+\{\s*capitalizeString\s*\}\s+from\s+("|")string_functions\1/g), "valid <code>import</code> statement");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
capitalizeString("hello!");
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
window.require = function (str) {
|
||||
if (str === 'string_functions') {
|
||||
return {
|
||||
capitalizeString: str => str.toUpperCase()
|
||||
}}};
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b57
|
||||
title: Use * to Import Everything from a File
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Use * para importar tudo de um arquivo
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Suponha que você tenha um arquivo que você deseja importar todo o seu conteúdo para o arquivo atual. Isso pode ser feito com a sintaxe <dfn>import *</dfn> . Aqui está um exemplo onde o conteúdo de um arquivo chamado <code>"math_functions"</code> é importado para um arquivo no mesmo diretório: <blockquote> import * como myMathModule de "math_functions"; <br> myMathModule.add (2,3); <br> myMathModule.subtract (5,3); </blockquote> E quebrando esse código: <blockquote> import * como object_with_name_of_your_choice de "file_path_goes_here" <br> object_with_name_of_your_choice.imported_function </blockquote> Você pode usar qualquer nome após a <code>import * as</code> parte da declaração. Para utilizar esse método, é necessário um objeto que receba os valores importados. A partir daqui, você usará a notação de ponto para chamar seus valores importados. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> O código abaixo requer o conteúdo de um arquivo, <code>"capitalize_strings"</code> , encontrado no mesmo diretório, importado. Adicione a instrução de <code>import *</code> apropriada ao topo do arquivo, usando o objeto fornecido. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Usa corretamente a <code>import * as</code> sintaxe.
|
||||
testString: 'assert(code.match(/import\s+\*\s+as\s+[a-zA-Z0-9_$]+\s+from\s*"\s*capitalize_strings\s*"\s*;/gi), "Properly uses <code>import * as</code> syntax.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
window.require = function(str) {
|
||||
if (str === 'capitalize_strings') {
|
||||
return {
|
||||
capitalize: str => str.toUpperCase(),
|
||||
lowercase: str => str.toLowerCase()
|
||||
}}};
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,60 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b43
|
||||
title: Use Arrow Functions to Write Concise Anonymous Functions
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Use as funções de seta para escrever funções anônimas concisas
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Em JavaScript, geralmente não precisamos nomear nossas funções, especialmente ao passar uma função como um argumento para outra função. Em vez disso, criamos funções inline. Não precisamos nomear essas funções porque não as reutilizamos em nenhum outro lugar. Para conseguir isso, geralmente usamos a seguinte sintaxe: <blockquote> const myFunc = function () { <br> const myVar = "valor"; <br> return myVar; <br> } </blockquote> ES6 nos fornece o açúcar sintático para não ter que escrever funções anônimas dessa maneira. Em vez disso, você pode usar a <strong>sintaxe da função de seta</strong> : <blockquote> const myFunc = () => { <br> const myVar = "valor"; <br> return myVar; <br> } </blockquote> Quando não há corpo da função e apenas um valor de retorno, a sintaxe da função de seta permite omitir o <code>return</code> da palavra-chave, bem como os colchetes ao redor do código. Isso ajuda a simplificar funções menores em instruções de uma linha: <blockquote> const myFunc = () => "valor" </blockquote> Este código ainda retornará <code>value</code> por padrão. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Reescreva a função atribuída à variável <code>magic</code> que retorna um novo <code>Date()</code> para usar a sintaxe da função de seta. Também certifique-se de que nada seja definido usando a palavra-chave <code>var</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O usuário substituiu a palavra-chave <code>var</code> .
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/var/g), "User did replace <code>var</code> keyword.");'
|
||||
- text: <code>magic</code> deve ser uma variável constante (usando <code>const</code> ).
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const\s+magic/g), "<code>magic</code> should be a constant variable (by using <code>const</code>).");'
|
||||
- text: <code>magic</code> é uma <code>function</code> .
|
||||
testString: 'assert(typeof magic === "function", "<code>magic</code> is a <code>function</code>.");'
|
||||
- text: <code>magic()</code> retorna a data correta.
|
||||
testString: 'assert(magic().getDate() == new Date().getDate(), "<code>magic()</code> returns correct date.");'
|
||||
- text: palavra-chave de <code>function</code> não foi usada.
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/function/g), "<code>function</code> keyword was not used.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var magic = function() {
|
||||
"use strict";
|
||||
return new Date();
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7b8b367417b2b2512b53
|
||||
title: Use class Syntax to Define a Constructor Function
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Use a sintaxe de classe para definir uma função de construtor
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O ES6 fornece uma nova sintaxe para ajudar a criar objetos, usando a <dfn>classe de</dfn> palavras-chave. Isso deve ser notado, que a sintaxe da <code>class</code> é apenas uma sintaxe, e não uma implementação baseada em classe completa do paradigma orientado a objetos, diferente de linguagens como Java, Python ou Ruby etc. No ES5, geralmente definimos um construtor função e use a <code>new</code> palavra-chave para instanciar um objeto. <blockquote> var SpaceShuttle = function (targetPlanet) { <br> this.targetPlanet = targetPlanet; <br> } <br> var zeus = new SpaceShuttle ('Jupiter'); </blockquote> A sintaxe da classe simplesmente substitui a criação da função construtora: <blockquote> classe SpaceShuttle { <br> construtor (targetPlanet) { <br> this.targetPlanet = targetPlanet; <br> } <br> } <br> const zeus = novo SpaceShuttle ('Jupiter'); </blockquote> Observe que a palavra-chave <code>class</code> declara uma nova função, e um construtor foi adicionado, o qual seria invocado quando <code>new</code> é chamado - para criar um novo objeto. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Use a palavra-chave <code>class</code> e escreva um construtor apropriado para criar a classe <code>Vegetable</code> . O <code>Vegetable</code> permite criar um objeto vegetal, com um <code>name</code> propriedade, para ser passado ao construtor. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>Vegetable</code> deve ser uma <code>class</code> com um método <code>constructor</code> definido.
|
||||
testString: 'assert(typeof Vegetable === "function" && typeof Vegetable.constructor === "function", "<code>Vegetable</code> should be a <code>class</code> with a defined <code>constructor</code> method.");'
|
||||
- text: palavra-chave <code>class</code> foi usada.
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/class/g),"<code>class</code> keyword was used.");'
|
||||
- text: <code>Vegetable</code> pode ser instanciado.
|
||||
testString: 'assert(() => {const a = new Vegetable("apple"); return typeof a === "object";},"<code>Vegetable</code> can be instantiated.");'
|
||||
- text: <code>carrot.name</code> deve devolver a <code>carrot</code> .
|
||||
testString: 'assert(carrot.name=="carrot","<code>carrot.name</code> should return <code>carrot</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function makeClass() {
|
||||
"use strict";
|
||||
/* Alter code below this line */
|
||||
|
||||
/* Alter code above this line */
|
||||
return Vegetable;
|
||||
}
|
||||
const Vegetable = makeClass();
|
||||
const carrot = new Vegetable('carrot');
|
||||
console.log(carrot.name); // => should be 'carrot'
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,61 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b4b
|
||||
title: Use Destructuring Assignment to Assign Variables from Arrays
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Use Destructuring Assignment para atribuir variáveis de matrizes
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O ES6 torna os arrays de desestruturação tão fáceis quanto os objetos de desestruturação. Uma diferença fundamental entre o operador de propagação e a desestruturação de matriz é que o operador de distribuição descompacta todo o conteúdo de uma matriz em uma lista separada por vírgulas. Conseqüentemente, você não pode escolher quais elementos você deseja atribuir às variáveis. Destructuring uma matriz nos permite fazer exatamente isso: <blockquote> const [a, b] = [1, 2, 3, 4, 5, 6]; <br> console.log (a, b); // 1, 2 </blockquote> A variável <code>a</code> é atribuída ao primeiro valor da matriz e <code>b</code> é atribuído ao segundo valor da matriz. Também podemos acessar o valor em qualquer índice em uma matriz com desestruturação usando vírgulas para alcançar o índice desejado: <blockquote> const [a, b ,,, c] = [1, 2, 3, 4, 5, 6]; <br> console.log (a, b, c); // 1, 2, 5 </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Use atribuição desestruturação para trocar os valores de <code>a</code> e <code>b</code> para que <code>a</code> recebe o valor armazenado em <code>b</code> e <code>b</code> recebe o valor armazenado em <code>a</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'O valor de <code>a</code> deve ser 6, após a troca.'
|
||||
testString: 'assert(a === 6, "Value of <code>a</code> should be 6, after swapping.");'
|
||||
- text: 'O valor de <code>b</code> deve ser 8, após a troca.'
|
||||
testString: 'assert(b === 8, "Value of <code>b</code> should be 8, after swapping.");'
|
||||
- text: Use a desestruturação de matriz para trocar a e b.
|
||||
testString: '// assert(/\[\s*(\w)\s*,\s*(\w)\s*\]\s*=\s*\[\s*\2\s*,\s*\1\s*\]/g.test(code), "Use array destructuring to swap a and b.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let a = 8, b = 6;
|
||||
(() => {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
})();
|
||||
console.log(a); // should be 6
|
||||
console.log(b); // should be 8
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b4a
|
||||
title: Use Destructuring Assignment to Assign Variables from Nested Objects
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Use Destructuring Assignment para atribuir variáveis de objetos aninhados
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Podemos similarmente desestruturar objetos <em>aninhados</em> em variáveis. Considere o seguinte código: <blockquote> const a = { <br> início: {x: 5, y: 6}, <br> end: {x: 6, y: -9} <br> }; <br> const {início: {x: startX, y: startY}} = a; <br> console.log (startX, startY); // 5, 6 </blockquote> No exemplo acima, a variável <code>start</code> recebe o valor de <code>a.start</code> , que também é um objeto. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Use a atribuição de desestruturação para obter o <code>max</code> de <code>forecast.tomorrow</code> e atribuí-lo a <code>maxOfTomorrow</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>maxOfTomorrow</code> é igual a <code>84.6</code>
|
||||
testString: 'assert(getMaxOfTmrw(LOCAL_FORECAST) === 84.6, "<code>maxOfTomorrow</code> equals <code>84.6</code>");'
|
||||
- text: desestruturação aninhada foi usada
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/\{\s*tomorrow\s*:\s*\{\s*max\s*:\s*maxOfTomorrow\s*\}\s*\}\s*=\s*forecast/g),"nested destructuring was used");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const LOCAL_FORECAST = {
|
||||
today: { min: 72, max: 83 },
|
||||
tomorrow: { min: 73.3, max: 84.6 }
|
||||
};
|
||||
|
||||
function getMaxOfTmrw(forecast) {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
const maxOfTomorrow = undefined; // change this line
|
||||
// change code above this line
|
||||
return maxOfTomorrow;
|
||||
}
|
||||
|
||||
console.log(getMaxOfTmrw(LOCAL_FORECAST)); // should be 84.6
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b49
|
||||
title: Use Destructuring Assignment to Assign Variables from Objects
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Use Destructuring Assignment para atribuir variáveis de objetos
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Vimos anteriormente como o operador de propagação pode efetivamente distribuir ou descompactar o conteúdo do array. Podemos fazer algo semelhante com objetos também. <dfn>A atribuição de desestruturação</dfn> é uma sintaxe especial para atribuir com precisão os valores obtidos diretamente de um objeto para variáveis. Considere o seguinte código ES5: <blockquote> var voxel = {x: 3,6, y: 7,4, z: 6,54}; <br> var x = voxel.x; // x = 3,6 <br> var y = voxel.y; // y = 7,4 <br> var z = voxel.z; // z = 6,54 </blockquote> Aqui está a mesma declaração de atribuição com a sintaxe de desestruturação do ES6: <blockquote> const {x, y, z} = voxel; // x = 3,6, y = 7,4, z = 6,54 </blockquote> Se, em vez disso, você quiser armazenar os valores de <code>voxel.x</code> em <code>a</code> , <code>voxel.y</code> em <code>b</code> e <code>voxel.z</code> em <code>c</code> , também terá essa liberdade. <blockquote> Const {x: a, y: b, z: c} = voxel // a = 3,6, b = 7,4, c = 6,54 </blockquote> Você pode lê-lo como "obter o campo <code>x</code> e copiar o valor em <code>a</code> " e assim por diante. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Use a desestruturação para obter a temperatura média para amanhã a partir do objeto de entrada <code>AVG_TEMPERATURES</code> e atribua valor com a chave <code>tomorrow</code> para <code>tempOfTomorrow</code> na linha. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>getTempOfTmrw(AVG_TEMPERATURES)</code> deve ser <code>79</code>
|
||||
testString: 'assert(getTempOfTmrw(AVG_TEMPERATURES) === 79, "<code>getTempOfTmrw(AVG_TEMPERATURES)</code> should be <code>79</code>");'
|
||||
- text: desestruturação com redesignação foi usada
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/\{\s*tomorrow\s*:\s*tempOfTomorrow\s*}\s*=\s*avgTemperatures/g),"destructuring with reassignment was used");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const AVG_TEMPERATURES = {
|
||||
today: 77.5,
|
||||
tomorrow: 79
|
||||
};
|
||||
|
||||
function getTempOfTmrw(avgTemperatures) {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
const tempOfTomorrow = undefined; // change this line
|
||||
// change code above this line
|
||||
return tempOfTomorrow;
|
||||
}
|
||||
|
||||
console.log(getTempOfTmrw(AVG_TEMPERATURES)); // should be 79
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4d
|
||||
title: Use Destructuring Assignment to Pass an Object as a Function's Parameters
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Use Destignucturing Assignment para passar um objeto como um parâmetro de função
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Em alguns casos, você pode desestruturar o objeto em um argumento de função em si. Considere o código abaixo: <blockquote> const profileUpdate = (profileData) => { <br> const {nome, idade, nacionalidade, localização} = profileData; <br> // faz algo com essas variáveis <br> } </blockquote> Isso efetivamente destrói o objeto enviado para a função. Isso também pode ser feito no local: <blockquote> const profileUpdate = ({nome, idade, nacionalidade, localização}) => { <br> / * faz algo com esses campos * / <br> } </blockquote> Isso remove algumas linhas extras e faz nosso código parecer limpo. Isso tem o benefício adicional de não ter que manipular um objeto inteiro em uma função; somente os campos necessários são copiados dentro da função. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Use a atribuição de desestruturação dentro do argumento para a <code>half</code> da função para enviar apenas <code>max</code> e <code>min</code> dentro da função. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>stats</code> deve ser um <code>object</code> .
|
||||
testString: 'assert(typeof stats === "object", "<code>stats</code> should be an <code>object</code>.");'
|
||||
- text: <code>half(stats)</code> deve ser <code>28.015</code>
|
||||
testString: 'assert(half(stats) === 28.015, "<code>half(stats)</code> should be <code>28.015</code>");'
|
||||
- text: Destruturação foi usada.
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/\(\s*\{\s*\w+\s*,\s*\w+\s*\}\s*\)/g), "Destructuring was used.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const stats = {
|
||||
max: 56.78,
|
||||
standard_deviation: 4.34,
|
||||
median: 34.54,
|
||||
mode: 23.87,
|
||||
min: -0.75,
|
||||
average: 35.85
|
||||
};
|
||||
const half = (function() {
|
||||
"use strict"; // do not change this line
|
||||
|
||||
// change code below this line
|
||||
return function half(stats) {
|
||||
// use function argument destructuring
|
||||
return (stats.max + stats.min) / 2.0;
|
||||
};
|
||||
// change code above this line
|
||||
|
||||
})();
|
||||
console.log(stats); // should be object
|
||||
console.log(half(stats)); // should be 28.015
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4c
|
||||
title: Use Destructuring Assignment with the Rest Operator to Reassign Array Elements
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Use Destructuring Assignment com o Operador Descanso para Reatribuir Elementos da Matriz
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Em algumas situações envolvendo a desestruturação de matriz, podemos querer coletar o restante dos elementos em uma matriz separada. O resultado é semelhante ao <code>Array.prototype.slice()</code> , conforme mostrado abaixo: <blockquote> const [a, b, ... arr] = [1, 2, 3, 4, 5, 7]; <br> console.log (a, b); // 1, 2 <br> console.log (arr); // [3, 4, 5, 7] </blockquote> Variáveis <code>a</code> e <code>b</code> levar o primeiro e segundo valores da matriz. Depois disso, por causa da presença do operador resto, <code>arr</code> recebe resto dos valores sob a forma de uma matriz. O elemento restante só funciona corretamente como a última variável na lista. Como em, você não pode usar o operador de descanso para capturar um subarray que deixa de fora o último elemento da matriz original. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Use atribuição desestruturação com o operador de descanso para realizar uma eficaz <code>Array.prototype.slice()</code> de modo que <code>arr</code> é um sub-matriz da matriz original <code>source</code> com os dois primeiros elementos omitidos. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>arr</code> deve ser <code>[3,4,5,6,7,8,9,10]</code>'
|
||||
testString: 'assert(arr.every((v, i) => v === i + 3) && arr.length === 8,"<code>arr</code> should be <code>[3,4,5,6,7,8,9,10]</code>");'
|
||||
- text: Destructuring deve ser usado.
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/\[\s*\w*\s*,\s*\w*\s*,\s*...\w+\s*\]/g),"Destructuring should be used.");'
|
||||
- text: <code>Array.slice()</code> não deve ser usado.
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/slice/g), "<code>Array.slice()</code> should not be used.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const source = [1,2,3,4,5,6,7,8,9,10];
|
||||
function removeFirstTwo(list) {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
arr = list; // change this
|
||||
// change code above this line
|
||||
return arr;
|
||||
}
|
||||
const arr = removeFirstTwo(source);
|
||||
console.log(arr); // should be [3,4,5,6,7,8,9,10]
|
||||
console.log(source); // should be [1,2,3,4,5,6,7,8,9,10];
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b56
|
||||
title: Use export to Reuse a Code Block
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Use a exportação para reutilizar um bloco de código
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> No desafio anterior, você aprendeu sobre a <code>import</code> e como ela pode ser aproveitada para importar pequenas quantidades de código de arquivos grandes. Para que isso funcione, no entanto, devemos utilizar uma das instruções que acompanham a <code>import</code> , conhecida como <dfn>exportação</dfn> . Quando queremos que algum código - uma função ou uma variável - seja utilizável em outro arquivo, devemos exportá-lo para importá-lo em outro arquivo. Como a <code>import</code> , a <code>export</code> é um recurso sem navegador. O que se segue é o que nos referimos como uma <dfn>exportação nomeada</dfn> . Com isso, podemos importar qualquer código que exportarmos para outro arquivo com a sintaxe de <code>import</code> você aprendeu na última lição. Aqui está um exemplo: <blockquote> const capitalizeString = (string) => { <br> return string.charAt (0) .toUpperCase () + string.slice (1); <br> } <br> export {capitalizeString} // Como exportar funções. <br> export const foo = "bar"; // Como exportar variáveis. </blockquote> Como alternativa, se você quiser compactar todas as suas declarações de <code>export</code> em uma linha, poderá adotar essa abordagem: <blockquote> const capitalizeString = (string) => { <br> return string.charAt (0) .toUpperCase () + string.slice (1); <br> } <br> const foo = "bar"; <br> export {capitalizeString, foo} </blockquote> Qualquer abordagem é perfeitamente aceitável. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Abaixo estão duas variáveis que eu quero disponibilizar para outros arquivos para usar. Utilizando a primeira maneira que demonstrei <code>export</code> , exporte as duas variáveis. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>foo</code> é exportado.
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/export\s+const\s+foo\s*=\s*"bar"/g), "<code>foo</code> is exported.");'
|
||||
- text: <code>bar</code> é exportada.
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/export\s+const\s+bar\s*=\s*"foo"/g), "<code>bar</code> is exported.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
const foo = "bar";
|
||||
const bar = "foo";
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
window.exports = function(){};
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b54
|
||||
title: Use getters and setters to Control Access to an Object
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Use getters e setters para controlar o acesso a um objeto
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você pode obter valores de um objeto e definir um valor de uma propriedade dentro de um objeto. Estes são chamados classicamente de <dfn>getters</dfn> e <dfn>setters</dfn> . As funções do Getter destinam-se a simplesmente retornar (obter) o valor da variável privada de um objeto ao usuário sem que o usuário acesse diretamente a variável privada. As funções de setter destinam-se a modificar (definir) o valor da variável privada de um objeto com base no valor passado para a função de setter. Essa alteração pode envolver cálculos ou mesmo sobrescrever completamente o valor anterior. <blockquote> livro escolar { <br> construtor (autor) { <br> this._author = autor; <br> } <br> // getter <br> obter escritor () { <br> devolve this._author; <br> } <br> // setter <br> set writer (updatedAuthor) { <br> this._author = updatedAuthor; <br> } <br> } <br> const lol = novo livro ('anônimo'); <br> console.log (lol.writer); // anônimo <br> lol.writer = 'wut'; <br> console.log (lol.writer); // wut </blockquote> Observe a sintaxe que estamos usando para invocar o getter e setter - como se eles não fossem mesmo funções. Getters e setters são importantes porque ocultam detalhes internos de implementação. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Use a palavra-chave <code>class</code> para criar uma classe Thermostat. O construtor aceita a temperatura Fahrenheit. Agora crie <code>getter</code> e <code>setter</code> na classe, para obter a temperatura na escala Celsius. Lembre-se que <code>C = 5/9 * (F - 32)</code> e <code>F = C * 9.0 / 5 + 32</code> , onde F é o valor da temperatura na escala Fahrenheit, e C é o valor da mesma temperatura na escala Celsius. Para implementar isso, você estaria acompanhando a temperatura dentro da classe em uma escala - Fahrenheit ou Celsius. Este é o poder de getter ou setter - você está criando uma API para outro usuário, que obteria o resultado correto, não importando qual deles você rastreie. Em outras palavras, você está abstraindo os detalhes da implementação do consumidor. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>Thermostat</code> deve ser uma <code>class</code> com um método <code>constructor</code> definido.
|
||||
testString: 'assert(typeof Thermostat === "function" && typeof Thermostat.constructor === "function","<code>Thermostat</code> should be a <code>class</code> with a defined <code>constructor</code> method.");'
|
||||
- text: palavra-chave <code>class</code> foi usada.
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/class/g),"<code>class</code> keyword was used.");'
|
||||
- text: <code>Thermostat</code> pode ser instanciado.
|
||||
testString: 'assert(() => {const t = new Thermostat(32); return typeof t === "object" && t.temperature === 0;}, "<code>Thermostat</code> can be instantiated.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function makeClass() {
|
||||
"use strict";
|
||||
/* Alter code below this line */
|
||||
|
||||
/* Alter code above this line */
|
||||
return Thermostat;
|
||||
}
|
||||
const Thermostat = makeClass();
|
||||
const thermos = new Thermostat(76); // setting in Fahrenheit scale
|
||||
let temp = thermos.temperature; // 24.44 in C
|
||||
thermos.temperature = 26;
|
||||
temp = thermos.temperature; // 26 in C
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b47
|
||||
title: Use the Rest Operator with Function Parameters
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Use o operador de descanso com parâmetros de função
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Para nos ajudar a criar funções mais flexíveis, o ES6 introduz o <dfn>operador de descanso</dfn> para parâmetros de função. Com o operador de descanso, você pode criar funções que levam um número variável de argumentos. Esses argumentos são armazenados em uma matriz que pode ser acessada posteriormente de dentro da função. Confira este código: <blockquote> function howMany (... args) { <br> return "Você passou" + args.length + "arguments."; <br> } <br> console.log (howMany (0, 1, 2)); // Você passou 3 argumentos <br> console.log (howMany ("string", nulo, [1, 2, 3], {})); // Você passou 4 argumentos. </blockquote> O operador de descanso elimina a necessidade de verificar a matriz <code>args</code> e nos permite aplicar <code>map()</code> , <code>filter()</code> e <code>reduce()</code> na matriz de parâmetros. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Modifique a <code>sum</code> da função para que ela use o operador rest e funcione da mesma maneira com qualquer número de parâmetros. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'O resultado da <code>sum(0,1,2)</code> deve ser 3'
|
||||
testString: 'assert(sum(0,1,2) === 3, "The result of <code>sum(0,1,2)</code> should be 3");'
|
||||
- text: 'O resultado da <code>sum(1,2,3,4)</code> deve ser 10'
|
||||
testString: 'assert(sum(1,2,3,4) === 10, "The result of <code>sum(1,2,3,4)</code> should be 10");'
|
||||
- text: O resultado da <code>sum(5)</code> deve ser 5
|
||||
testString: 'assert(sum(5) === 5, "The result of <code>sum(5)</code> should be 5");'
|
||||
- text: O resultado de <code>sum()</code> deve ser 0
|
||||
testString: 'assert(sum() === 0, "The result of <code>sum()</code> should be 0");'
|
||||
- text: A função <code>sum</code> usa o operador <code>...</code> spread no parâmetro <code>args</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/function\s+sum\s*\(\s*...args\s*\)\s*{/g), "The <code>sum</code> function uses the <code>...</code> spread operator on the <code>args</code> parameter.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const sum = (function() {
|
||||
"use strict";
|
||||
return function sum(x, y, z) {
|
||||
const args = [ x, y, z ];
|
||||
return args.reduce((a, b) => a + b, 0);
|
||||
};
|
||||
})();
|
||||
console.log(sum(1, 2, 3)); // 6
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,59 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b48
|
||||
title: Use the Spread Operator to Evaluate Arrays In-Place
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Use o operador de propagação para avaliar matrizes no local
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O ES6 introduz o <dfn>operador spread</dfn> , que nos permite expandir matrizes e outras expressões em locais onde vários parâmetros ou elementos são esperados. O código ES5 abaixo usa <code>apply()</code> para calcular o valor máximo em uma matriz: <blockquote> var arr = [6, 89, 3, 45]; <br> var maximus = Math.max.apply (null, arr); // retorna 89 </blockquote> Nós tivemos que usar <code>Math.max.apply(null, arr)</code> porque <code>Math.max(arr)</code> retorna <code>NaN</code> . <code>Math.max()</code> espera argumentos separados por vírgula, mas não uma matriz. O operador de spread torna essa sintaxe muito melhor para ler e manter. <blockquote> const arr = [6, 89, 3, 45]; <br> const maximus = Math.max (... arr); // retorna 89 </blockquote> <code>...arr</code> retorna um array descompactado. Em outras palavras, ele <em>espalha</em> o array. No entanto, o operador de propagação só funciona no local, como em um argumento para uma função ou em um literal de matriz. O código a seguir não funcionará: <blockquote> const spreaded = ... arr; // lançará um erro de sintaxe </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Copie todo o conteúdo de <code>arr1</code> em outro array <code>arr2</code> usando o operador spread. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>arr2</code> é a cópia correta de <code>arr1</code> .
|
||||
testString: 'assert(arr2.every((v, i) => v === arr1[i]), "<code>arr2</code> is correct copy of <code>arr1</code>.");'
|
||||
- text: <code>...</code> operador de propagação foi usado para duplicar <code>arr1</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/\[\s*...arr1\s*\]/g),"<code>...</code> spread operator was used to duplicate <code>arr1</code>.");'
|
||||
- text: <code>arr2</code> permanece inalterado quando <code>arr1</code> é alterado.
|
||||
testString: 'assert((arr1, arr2) => {arr1.push("JUN"); return arr2.length < arr1.length},"<code>arr2</code> remains unchanged when <code>arr1</code> is changed.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
|
||||
let arr2;
|
||||
(function() {
|
||||
"use strict";
|
||||
arr2 = []; // change this line
|
||||
})();
|
||||
console.log(arr2);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b44
|
||||
title: Write Arrow Functions with Parameters
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Escrever funções de seta com parâmetros
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Assim como uma função normal, você pode passar argumentos para as funções de seta. <blockquote> // duplica o valor de entrada e retorna <br> const doubler = (item) => item * 2; </blockquote> Você pode passar mais de um argumento em funções de seta também. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Reescreva a função <code>myConcat</code> que anexa o conteúdo de <code>arr2</code> a <code>arr1</code> para que a função use a sintaxe da função de seta. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O usuário substituiu a palavra-chave <code>var</code> .
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/var/g), "User did replace <code>var</code> keyword.");'
|
||||
- text: <code>myConcat</code> deve ser uma variável constante (usando <code>const</code> ).
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const\s+myConcat/g), "<code>myConcat</code> should be a constant variable (by using <code>const</code>).");'
|
||||
- text: <code>myConcat</code> deve ser uma função
|
||||
testString: 'assert(typeof myConcat === "function", "<code>myConcat</code> should be a function");'
|
||||
- text: <code>myConcat()</code> retorna o <code>array</code> correto
|
||||
testString: 'assert(() => { const a = myConcat([1], [2]); return a[0] == 1 && a[1] == 2; }, "<code>myConcat()</code> returns the correct <code>array</code>");'
|
||||
- text: palavra-chave de <code>function</code> não foi usada.
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/function/g), "<code>function</code> keyword was not used.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var myConcat = function(arr1, arr2) {
|
||||
"use strict";
|
||||
return arr1.concat(arr2);
|
||||
};
|
||||
// test your code
|
||||
console.log(myConcat([1, 2], [3, 4, 5]));
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d7b8b367417b2b2512b50
|
||||
title: Write Concise Declarative Functions with ES6
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Escrever funções declarativas concisas com o ES6
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Ao definir funções dentro de objetos no ES5, precisamos usar a <code>function</code> palavra-chave da seguinte forma: <blockquote> const pessoa = { <br> nome: "Taylor", <br> sayHello: function () { <br> return "Olá! Meu nome é $ {this.name} .`; <br> } <br> }; </blockquote> Com ES6, você pode remover a palavra-chave da <code>function</code> e dois pontos ao definir funções em objetos. Aqui está um exemplo dessa sintaxe: <blockquote> const pessoa = { <br> nome: "Taylor", <br> diga olá() { <br> return "Olá! Meu nome é $ {this.name} .`; <br> } <br> }; </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Refatorar a função <code>setGear</code> dentro da <code>bicycle</code> do objeto para usar a sintaxe abreviada descrita acima. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Expressão de função tradicional não foi usada.
|
||||
testString: 'assert(!getUserInput("index").match(/function/),"Traditional <code>function</code> expression was not used.");'
|
||||
- text: <code>setGear</code> é uma função declarativa.
|
||||
testString: 'assert(typeof bicycle.setGear === "function" && getUserInput("index").match(/setGear\s*\(.+\)\s*\{/), "<code>setGear</code> is a declarative function.");'
|
||||
- text: <code>bicycle.setGear(48)</code> altera o valor da <code>gear</code> para 48.
|
||||
testString: 'assert((new bicycle.setGear(48)).gear === 48, "<code>bicycle.setGear(48)</code> changes the <code>gear</code> value to 48.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// change code below this line
|
||||
const bicycle = {
|
||||
gear: 2,
|
||||
setGear: function(newGear) {
|
||||
"use strict";
|
||||
this.gear = newGear;
|
||||
}
|
||||
};
|
||||
// change code above this line
|
||||
bicycle.setGear(3);
|
||||
console.log(bicycle.gear);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,61 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4f
|
||||
title: Write Concise Object Literal Declarations Using Simple Fields
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Escrever declarações concisas de objetos concisos usando campos simples
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O ES6 adiciona algum suporte legal para definir facilmente os literais de objeto. Considere o seguinte código: <blockquote> const getMousePosition = (x, y) => ({ <br> x: x, <br> y: y <br> }); </blockquote> <code>getMousePosition</code> é uma função simples que retorna um objeto contendo dois campos. ES6 fornece o açúcar sintático para eliminar a redundância de ter que escrever <code>x: x</code> . Você pode simplesmente escrever <code>x</code> uma vez, e ele será convertido em <code>x: x</code> (ou algo equivalente) sob o capô. Aqui está a mesma função acima reescrita para usar esta nova sintaxe: <blockquote> const getMousePosition = (x, y) => ({x, y}); </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Use campos simples com literais de objeto para criar e retornar um objeto <code>Person</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'a saída é <code>{name: "Zodiac Hasbro", age: 56, gender: "male"}</code> .'
|
||||
testString: 'assert(() => {const res={name:"Zodiac Hasbro",age:56,gender:"male"}; const person=createPerson("Zodiac Hasbro", 56, "male"); return Object.keys(person).every(k => person[k] === res[k]);}, "the output is <code>{name: "Zodiac Hasbro", age: 56, gender: "male"}</code>.");'
|
||||
- text: 'Não <code>:</code> foram usados.'
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/:/g), "No <code>:</code> were used.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const createPerson = (name, age, gender) => {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
return {
|
||||
name: name,
|
||||
age: age,
|
||||
gender: gender
|
||||
};
|
||||
// change code above this line
|
||||
};
|
||||
console.log(createPerson("Zodiac Hasbro", 56, "male")); // returns a proper object
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b45
|
||||
title: Write Higher Order Arrow Functions
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Escrever funções de seta de ordem superior
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> É hora de vermos como as funções de flecha são poderosas ao processar dados. As funções de seta funcionam muito bem com funções de ordem superior, como <code>map()</code> , <code>filter()</code> e <code>reduce()</code> , que tomam outras funções como argumentos para o processamento de coleções de dados. Leia o seguinte código: <blockquote> FBPosts.filter (function (post) { <br> return post.thumbnail! == null && post.shares> 100 && post.likes> 500; <br> }) </blockquote> Nós escrevemos isso com <code>filter()</code> para pelo menos torná-lo um pouco legível. Agora, compare-o ao seguinte código que usa a sintaxe da função de seta: <blockquote> FBPosts.filter ((post) => post.thumbnail! == null && post.shares> 100 && post.likes> 500) </blockquote> Esse código é mais sucinto e realiza a mesma tarefa com menos linhas de código. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Use a sintaxe da função de seta para calcular o quadrado de apenas os inteiros positivos (os números decimais não são inteiros) na matriz <code>realNumberArray</code> e armazene a nova matriz na variável <code>squaredIntegers</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>squaredIntegers</code> deve ser uma variável constante (usando <code>const</code> ).
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const\s+squaredIntegers/g), "<code>squaredIntegers</code> should be a constant variable (by using <code>const</code>).");'
|
||||
- text: <code>squaredIntegers</code> deve ser um <code>array</code>
|
||||
testString: 'assert(Array.isArray(squaredIntegers), "<code>squaredIntegers</code> should be an <code>array</code>");'
|
||||
- text: '<code>squaredIntegers</code> deve ser <code>[16, 1764, 36]</code>'
|
||||
testString: 'assert.deepStrictEqual(squaredIntegers, [16, 1764, 36], "<code>squaredIntegers</code> should be <code>[16, 1764, 36]</code>");'
|
||||
- text: palavra-chave de <code>function</code> não foi usada.
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/function/g), "<code>function</code> keyword was not used.");'
|
||||
- text: loop não deve ser usado
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/(for)|(while)/g), "loop should not be used");'
|
||||
- text: '<code>map</code> , <code>filter</code> ou <code>reduce</code> deve ser usado'
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/map|filter|reduce/g), "<code>map</code>, <code>filter</code>, or <code>reduce</code> should be used");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2];
|
||||
const squareList = (arr) => {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
const squaredIntegers = arr;
|
||||
// change code above this line
|
||||
return squaredIntegers;
|
||||
};
|
||||
// test your code
|
||||
const squaredIntegers = squareList(realNumberArray);
|
||||
console.log(squaredIntegers);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
Reference in New Issue
Block a user