docs: add Spanish docs
This commit is contained in:
Beau Carnes
@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b40
|
||||
title: Compare Scopes of the var and let Keywords
|
||||
localeTitle: Comparar los alcances de la var y dejar Palabras clave
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Cuando declara una variable con la palabra clave <code>var</code> , se declara globalmente o localmente si se declara dentro de una función.
|
||||
La palabra clave <code>let</code> comporta de manera similar, pero con algunas características adicionales. Cuando declara una variable con la palabra clave <code>let</code> dentro de un bloque, una declaración o una expresión, su alcance se limita a ese bloque, declaración o expresión.
|
||||
Por ejemplo:
|
||||
<blockquote>var numArray = [];<br>for (var i = 0; i < 3; i++) {<br> numArray.push(i);<br>}<br>console.log(numArray);<br>// returns [0, 1, 2]<br>console.log(i);<br>// returns 3</blockquote>
|
||||
Con el <code>var</code> de palabras clave, <code>i</code> se declara a nivel mundial. Entonces, cuando se ejecuta <code>i++</code> , se actualiza la variable global. Este código es similar al siguiente:
|
||||
<blockquote>var numArray = [];<br>var i;<br>for (i = 0; i < 3; i++) {<br> numArray.push(i);<br>}<br>console.log(numArray);<br>// returns [0, 1, 2]<br>console.log(i);<br>// returns 3</blockquote>
|
||||
Este comportamiento causará problemas si tuviera que crear una función y almacenarla para su uso posterior dentro de un bucle for que usa la variable <code>i</code> . Esto se debe a que la función almacenada siempre se referirá al valor de la variable global actualizada <code>i</code> .
|
||||
<blockquote>var printNumTwo;<br>for (var i = 0; i < 3; i++) {<br> if(i === 2){<br> printNumTwo = function() {<br> return i;<br> };<br> }<br>}<br>console.log(printNumTwo());<br>// returns 3</blockquote>
|
||||
Como se puede ver, <code>printNumTwo()</code> imprime 3 y no 2. Esto se debe a que el valor asignado a <code>i</code> se actualiza y el <code>printNumTwo()</code> devuelve el mundial <code>i</code> y no el valor <code>i</code> tenía cuando la función fue creada en el bucle. La palabra clave <code>let</code> no sigue este comportamiento:
|
||||
<blockquote>'use strict';<br>let printNumTwo;<br>for (let i = 0; i < 3; i++) {<br> if (i === 2) {<br> printNumTwo = function() {<br> return i;<br> };<br> }<br>}<br>console.log(printNumTwo());<br>// returns 2<br>console.log(i);<br>// returns "i is not defined"</blockquote>
|
||||
<code>i</code> no está definido porque no se declaró en el ámbito global. Solo se declara dentro de la sentencia for loop. <code>printNumTwo()</code> devolvió el valor correcto porque se crearon tres variables <code>i</code> diferentes con valores únicos (0, 1 y 2) mediante la palabra clave <code>let</code> dentro de la instrucción de bucle.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Fijar el código para que <code>i</code> declarado en la sentencia if es una variable independiente que <code>i</code> declaré en la primera línea de la función. Asegúrese de no utilizar la palabra clave <code>var</code> en ningún lugar de su código.
|
||||
Este ejercicio está diseñado para ilustrar la diferencia entre cómo <code>var</code> y <code>let</code> palabras clave asignen un alcance a la variable declarada. Cuando se programa una función similar a la utilizada en este ejercicio, a menudo es mejor usar diferentes nombres de variables para evitar confusiones.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>var</code> no existe en el código.
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/var/g),"<code>var</code> does not exist in code.");'
|
||||
- text: La variable <code>i</code> declaradas en la sentencia if debe ser igual a "ámbito de bloque".
|
||||
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> debería devolver "alcance de función"
|
||||
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,64 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b58
|
||||
title: Create an Export Fallback with export default
|
||||
localeTitle: Crear un respaldo de exportación con la exportación predeterminada
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
En la lección de <code>export</code> , aprendió sobre la sintaxis denominada <dfn>exportación con nombre</dfn> . Esto le permitió tener múltiples funciones y variables disponibles para usar en otros archivos.
|
||||
Hay otra sintaxis de <code>export</code> que necesita conocer, conocida como <dfn>exportación predeterminada</dfn> . Por lo general, utilizará esta sintaxis si solo se exporta un valor desde un archivo. También se utiliza para crear un valor de reserva para un archivo o módulo.
|
||||
Aquí hay un ejemplo rápido de la <code>export default</code> :
|
||||
<blockquote>export default function add(x,y) {<br> return x + y;<br>}</blockquote>
|
||||
Nota: Dado que <code>export default</code> se utiliza para declarar un valor de reserva para un módulo o archivo, solo puede tener un valor como exportación predeterminada en cada módulo o archivo. Además, no puede usar <code>export default</code> con <code>var</code> , <code>let</code> o <code>const</code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
La siguiente función debe ser el valor de retorno para el módulo. Por favor agregue el código necesario para hacerlo.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Uso adecuado de la <code>export</code> reserva.
|
||||
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,83 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4e
|
||||
title: Create Strings using Template Literals
|
||||
localeTitle: Crear cadenas usando literales de plantilla
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Una nueva característica de ES6 es la <dfn>plantilla literal</dfn> . Este es un tipo especial de cadena que facilita la creación de cadenas complejas.
|
||||
Los literales de plantilla le permiten crear cadenas de varias líneas y usar las funciones de interpolación de cadenas para crear cadenas.
|
||||
Considera el siguiente código:
|
||||
<blockquote>const person = {<br> name: "Zodiac Hasbro",<br> age: 56<br>};<br><br>// Template literal with multi-line and string interpolation<br>const greeting = `Hello, my name is ${person.name}!<br>I am ${person.age} years old.`;<br><br>console.log(greeting); // prints<br>// Hello, my name is Zodiac Hasbro!<br>// I am 56 years old.<br></blockquote>
|
||||
Muchas cosas pasaron allí.
|
||||
En primer lugar, el ejemplo utiliza comillas ( <code>`</code> ), no comillas ( <code>'</code> o <code>"</code> ), para envolver la cadena.
|
||||
En segundo lugar, observe que la cadena es multilínea, tanto en el código como en la salida. Esto ahorra la inserción de <code>\n</code> en
|
||||
La sintaxis <code>${variable}</code> utilizada anteriormente es un marcador de posición. Básicamente, no tendrá que usar más la concatenación con el operador <code>+</code> . Para agregar variables a las cadenas, simplemente suelte la variable en una cadena de plantilla y la envuelva con <code>${</code> y <code>}</code> . De forma similar, puede incluir otras expresiones en su cadena literal, por ejemplo, <code>${a + b}</code> .
|
||||
Esta nueva forma de crear cadenas le brinda más flexibilidad para crear cadenas sólidas.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use la sintaxis literal de la plantilla con comillas invertidas para mostrar cada entrada de la matriz de <code>failure</code> del objeto de <code>result</code> . Cada entrada debe incluirse dentro de un elemento <code>li</code> con el atributo de clase <code>text-warning</code> , y debe aparecer dentro de <code>resultDisplayArray</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>resultDisplayArray</code> es una matriz que contiene mensajes 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> es el resultado deseado.
|
||||
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: Se utilizaron cadenas de plantilla.
|
||||
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,73 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b41
|
||||
title: Declare a Read-Only Variable with the const Keyword
|
||||
localeTitle: Declare una variable de solo lectura con la palabra clave const
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>let</code> no es la única forma nueva de declarar variables. En ES6, también puede declarar variables usando la palabra clave <code>const</code> .
|
||||
<code>const</code> tiene todas las características increíbles que <code>let</code> tener, con la ventaja adicional de que las variables declaradas con <code>const</code> son de solo lectura. Son un valor constante, lo que significa que una vez que una variable se asigna con <code>const</code> , no se puede reasignar.
|
||||
<blockquote>"use strict"<br>const FAV_PET = "Cats";<br>FAV_PET = "Dogs"; // returns error</blockquote>
|
||||
Como puede ver, al intentar reasignar una variable declarada con <code>const</code> generará un error. Siempre debe nombrar variables que no desee reasignar utilizando la palabra clave <code>const</code> . Esto ayuda cuando intenta accidentalmente reasignar una variable que está destinada a permanecer constante. Una práctica común al nombrar constantes es usar todas las letras en mayúsculas, con palabras separadas por un guión bajo.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Cambie el código para que todas las variables se declaren usando <code>let</code> o <code>const</code> . Use <code>let</code> cuando quiera que la variable cambie, y <code>const</code> cuando quiera que la variable permanezca constante. Además, cambie el nombre de las variables declaradas con <code>const</code> para que se ajusten a las prácticas comunes, es decir, las constantes deben estar en mayúsculas.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>var</code> no existe en su código.
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/var/g),"<code>var</code> does not exist in your code.");'
|
||||
- text: <code>SENTENCE</code> debe ser una variable constante declarada con <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> debe ser declarada con <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> debe cambiar para imprimir la variable <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,75 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b3f
|
||||
title: Explore Differences Between the var and let Keywords
|
||||
localeTitle: Explora las diferencias entre la var y deja palabras clave
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Uno de los mayores problemas con la declaración de variables con la palabra clave <code>var</code> es que puede sobrescribir las declaraciones de variables sin un error.
|
||||
<blockquote>var camper = 'James';<br>var camper = 'David';<br>console.log(camper);<br>// logs 'David'</blockquote>
|
||||
Como puede ver en el código anterior, la variable <code>camper</code> se declaró originalmente como <code>James</code> y luego se anuló para ser <code>David</code> .
|
||||
En una aplicación pequeña, es posible que no tenga este tipo de problema, pero cuando su código se hace más grande, puede sobrescribir accidentalmente una variable que no pretendía sobrescribir.
|
||||
Debido a que este comportamiento no produce un error, la búsqueda y solución de errores se vuelve más difícil. <br>
|
||||
Se introdujo una nueva palabra clave llamada <code>let</code> en ES6 para resolver este problema potencial con la palabra clave <code>var</code> .
|
||||
Si tuviera que reemplazar <code>var</code> por <code>let</code> en las declaraciones de variables del código anterior, el resultado sería un error.
|
||||
<blockquote>let camper = 'James';<br>let camper = 'David'; // throws an error</blockquote>
|
||||
Este error se puede ver en la consola de su navegador.
|
||||
Entonces, a diferencia de <code>var</code> , cuando se usa <code>let</code> , una variable con el mismo nombre solo se puede declarar una vez.
|
||||
Tenga en cuenta el <code>"use strict"</code> . Esto habilita el modo estricto, que detecta errores comunes de codificación y acciones "inseguras". Por ejemplo:
|
||||
<blockquote>"use strict";<br>x = 3.14; // throws an error because x is not declared</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Actualizar el código para que solo use la palabra clave <code>let</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>var</code> no existe en el código.
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/var/g),"<code>var</code> does not exist in code.");'
|
||||
- text: <code>catName</code> debe ser <code>Oliver</code> .
|
||||
testString: 'assert(catName === "Oliver", "<code>catName</code> should be <code>Oliver</code>.");'
|
||||
- text: <code>quote</code> debe 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,67 @@
|
||||
---
|
||||
id: 587d7b8d367417b2b2512b59
|
||||
title: Import a Default Export
|
||||
localeTitle: Importar una exportación predeterminada
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
En el último desafío, aprendiste acerca de la <code>export default</code> y sus usos. Es importante tener en cuenta que, para importar una exportación predeterminada, debe usar una sintaxis de <code>import</code> diferente.
|
||||
En el siguiente ejemplo, tenemos una función, <code>add</code> , que es la exportación predeterminada de un archivo, <code>"math_functions"</code> . Aquí está cómo importarlo:
|
||||
<blockquote>import add from "math_functions";<br>add(5,4); //Will return 9</blockquote>
|
||||
La sintaxis difiere en un lugar clave: el valor importado, <code>add</code> , no está rodeado por llaves, <code>{}</code> . A diferencia de los valores exportados, el método principal para importar una exportación predeterminada es simplemente escribir el nombre del valor después de la <code>import</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
En el siguiente código, importe la exportación predeterminada, <code>subtract</code> , del archivo <code>"math_functions"</code> , que se encuentra en el mismo directorio que este archivo.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Importa adecuadamente <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,70 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b42
|
||||
title: Mutate an Array Declared with const
|
||||
localeTitle: Mutar una matriz declarada con const
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
La declaración <code>const</code> tiene muchos casos de uso en JavaScript moderno.
|
||||
Algunos desarrolladores prefieren asignar todas sus variables usando <code>const</code> de forma predeterminada, a menos que sepan que deberán reasignar el valor. Solo en ese caso, usan <code>let</code> .
|
||||
Sin embargo, es importante comprender que los objetos (incluidas las matrices y las funciones) asignados a una variable que usa <code>const</code> todavía son mutables. El uso de la declaración <code>const</code> solo evita la reasignación del identificador de variable.
|
||||
<blockquote>"use strict";<br>const s = [5, 6, 7];<br>s = [1, 2, 3]; // throws error, trying to assign a const<br>s[2] = 45; // works just as it would with an array declared with var or let<br>console.log(s); // returns [5, 6, 45]</blockquote>
|
||||
Como puede ver, puede mutar el objeto <code>[5, 6, 7]</code> sí mismo y la variable <code>s</code> seguirá apuntando a la matriz alterada <code>[5, 6, 45]</code> . Al igual que todas las matrices, los elementos de la matriz en <code>s</code> son mutables, pero debido a que se utilizó <code>const</code> , no puede usar el identificador de la variable <code>s</code> para apuntar a una matriz diferente mediante el operador de asignación.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Una matriz se declara como <code>const s = [5, 7, 2]</code> . Cambie la matriz a <code>[2, 5, 7]</code> usando varias asignaciones de elementos.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: No reemplace la palabra clave <code>const</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const/g), "Do not replace <code>const</code> keyword.");'
|
||||
- text: <code>s</code> debe ser una variable 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: No cambie la declaración original de la 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> debe 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,75 @@
|
||||
---
|
||||
id: 598f48a36c8c40764b4e52b3
|
||||
title: Prevent Object Mutation
|
||||
localeTitle: Prevenir la mutación de objetos
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Como se vio en el desafío anterior, la declaración <code>const</code> por sí sola no protege realmente sus datos de la mutación. Para garantizar que sus datos no cambien, JavaScript proporciona una función <code>Object.freeze</code> para evitar la mutación de datos.
|
||||
Una vez que el objeto está congelado, ya no puede agregar, actualizar o eliminar propiedades de él. Cualquier intento de cambiar el objeto será rechazado sin un error.
|
||||
<blockquote>let obj = {<br> name:"FreeCodeCamp",<br> review:"Awesome"<br>};<br>Object.freeze(obj);<br>obj.review = "bad"; //will be ignored. Mutation not allowed<br>obj.newProp = "Test"; // will be ignored. Mutation not allowed<br>console.log(obj); <br>// { name: "FreeCodeCamp", review:"Awesome"}</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
En este desafío, <code>Object.freeze</code> para evitar que <code>Object.freeze</code> las constantes matemáticas. <code>MATH_CONSTANTS</code> congelar el objeto <code>MATH_CONSTANTS</code> para que nadie pueda alterar el valor de <code>PI</code> , agregar o eliminar propiedades.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: No reemplace la palabra clave <code>const</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const/g), "Do not replace <code>const</code> keyword.");'
|
||||
- text: <code>MATH_CONSTANTS</code> debe ser una variable 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: No cambie los <code>MATH_CONSTANTS</code> originales.
|
||||
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> es 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,65 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b46
|
||||
title: Set Default Parameters for Your Functions
|
||||
localeTitle: Establecer parámetros predeterminados para sus funciones
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Para ayudarnos a crear funciones más flexibles, ES6 introduce <dfn>parámetros predeterminados</dfn> para las funciones.
|
||||
Echa un vistazo a este código:
|
||||
<blockquote>function greeting(name = "Anonymous") {<br> return "Hello " + name;<br>}<br>console.log(greeting("John")); // Hello John<br>console.log(greeting()); // Hello Anonymous</blockquote>
|
||||
El parámetro predeterminado se activa cuando el argumento no está especificado (no está definido). Como puede ver en el ejemplo anterior, el <code>name</code> del parámetro recibirá su valor predeterminado <code>"Anonymous"</code> cuando no proporcione un valor para el parámetro. Puede agregar valores predeterminados para tantos parámetros como desee.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Modifique el <code>increment</code> la función agregando parámetros predeterminados para que agregue 1 al <code>number</code> si no se especifica el <code>value</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'El resultado del <code>increment(5, 2)</code> debe ser <code>7</code> '.
|
||||
testString: 'assert(increment(5, 2) === 7, "The result of <code>increment(5, 2)</code> should be <code>7</code>.");'
|
||||
- text: El resultado del <code>increment(5)</code> debe ser <code>6</code> .
|
||||
testString: 'assert(increment(5) === 6, "The result of <code>increment(5)</code> should be <code>6</code>.");'
|
||||
- text: se usó el parámetro por defecto <code>1</code> para el <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,73 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b55
|
||||
title: Understand the Differences Between import and require
|
||||
localeTitle: Comprender las diferencias entre importar y requerir
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
En el pasado, la función <code>require()</code> se usaría para importar las funciones y el código en archivos y módulos externos. Aunque es práctico, esto presenta un problema: algunos archivos y módulos son bastante grandes, y es posible que solo necesite cierto código de esos recursos externos.
|
||||
ES6 nos da una herramienta muy útil conocida como <dfn>importación</dfn> . Con él, podemos elegir qué partes de un módulo o archivo cargar en un archivo dado, ahorrando tiempo y memoria.
|
||||
Considera el siguiente ejemplo. Imagine que <code>math_array_functions</code> tiene aproximadamente 20 funciones, pero solo necesito una, <code>countItems</code> , en mi archivo actual. El antiguo enfoque de <code>require()</code> me obligaría a incorporar las 20 funciones. Con esta nueva sintaxis de <code>import</code> , puedo traer solo la función deseada, así:
|
||||
<blockquote>import { countItems } from "math_array_functions"</blockquote>
|
||||
Una descripción del código anterior:
|
||||
<blockquote>import { function } from "file_path_goes_here"<br>// We can also import variables the same way!</blockquote>
|
||||
Hay algunas formas de escribir una declaración de <code>import</code> , pero la anterior es un caso de uso muy común.
|
||||
<strong>Nota</strong> <br> El espacio en blanco que rodea la función dentro de las llaves es una buena práctica: facilita la lectura de la declaración de <code>import</code> .
|
||||
<strong>Nota</strong> <br> Las lecciones en esta sección manejan características que no son del navegador. <code>import</code> , y las declaraciones que presentamos en el resto de estas lecciones, no funcionarán directamente en un navegador. Sin embargo, podemos usar varias herramientas para crear código a partir de esto para que funcione en el navegador.
|
||||
<strong>Nota</strong> <br> En la mayoría de los casos, la ruta del archivo requiere una <code>./</code> antes de ella; de lo contrario, el nodo buscará en el directorio <code>node_modules</code> primero intentando cargarlo como una dependencia.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Agregue la declaración de <code>import</code> apropiada que permitirá que el archivo actual use la función <code>capitalizeString</code> . El archivo donde vive esta función se llama <code>"string_functions"</code> , y está en el mismo directorio que el archivo actual.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: declaración 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,69 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b57
|
||||
title: Use * to Import Everything from a File
|
||||
localeTitle: Usa * para importar todo desde un archivo
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Suponga que tiene un archivo que desea importar todo su contenido en el archivo actual. Esto se puede hacer con la sintaxis de <dfn>importación *</dfn> .
|
||||
Aquí hay un ejemplo donde el contenido de un archivo llamado <code>"math_functions"</code> se importa a un archivo en el mismo directorio:
|
||||
<blockquote>import * as myMathModule from "math_functions";<br>myMathModule.add(2,3);<br>myMathModule.subtract(5,3);</blockquote>
|
||||
Y rompiendo ese código:
|
||||
<blockquote>import * as object_with_name_of_your_choice from "file_path_goes_here"<br>object_with_name_of_your_choice.imported_function</blockquote>
|
||||
Puede usar cualquier nombre después de la <code>import * as</code> parte de la declaración. Para utilizar este método, se requiere un objeto que reciba los valores importados. Desde aquí, utilizará la notación de puntos para llamar a sus valores importados.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
El siguiente código requiere el contenido de un archivo, <code>"capitalize_strings"</code> , que se encuentra en el mismo directorio que este, importado. Agregue la declaración de <code>import *</code> apropiada en la parte superior del archivo, utilizando el objeto proporcionado.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Utiliza correctamente <code>import * as</code> sintaxis.
|
||||
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,69 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b43
|
||||
title: Use Arrow Functions to Write Concise Anonymous Functions
|
||||
localeTitle: Utilice las funciones de flecha para escribir funciones anónimas concisas
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
En JavaScript, a menudo no necesitamos nombrar nuestras funciones, especialmente cuando se pasa una función como argumento a otra función. En su lugar, creamos funciones en línea. No necesitamos nombrar estas funciones porque no las reutilizamos en ningún otro lugar.
|
||||
Para lograr esto, a menudo usamos la siguiente sintaxis:
|
||||
<blockquote>const myFunc = function() {<br> const myVar = "value";<br> return myVar;<br>}</blockquote>
|
||||
ES6 nos proporciona el azúcar sintáctico para no tener que escribir funciones anónimas de esta manera. En su lugar, puede utilizar la <strong>sintaxis de la función de flecha</strong> :
|
||||
<blockquote>const myFunc = () => {<br> const myVar = "value";<br> return myVar;<br>}</blockquote>
|
||||
Cuando no hay un cuerpo de función, y solo un valor de retorno, la sintaxis de la función de flecha le permite omitir el <code>return</code> la palabra clave, así como los corchetes que rodean el código. Esto ayuda a simplificar funciones más pequeñas en declaraciones de una línea:
|
||||
<blockquote>const myFunc = () => "value"</blockquote>
|
||||
Este código seguirá devolviendo <code>value</code> por defecto.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Reescriba la función asignada a la variable <code>magic</code> que devuelve una nueva <code>Date()</code> para usar la sintaxis de la función de flecha. También asegúrese de que no se define nada usando la palabra clave <code>var</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: El usuario reemplazó la palabra clave <code>var</code> .
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/var/g), "User did replace <code>var</code> keyword.");'
|
||||
- text: <code>magic</code> debe ser una variable 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> es una <code>function</code> .
|
||||
testString: 'assert(typeof magic === "function", "<code>magic</code> is a <code>function</code>.");'
|
||||
- text: <code>magic()</code> devuelve la fecha correcta.
|
||||
testString: 'assert(magic().getDate() == new Date().getDate(), "<code>magic()</code> returns correct date.");'
|
||||
- text: <code>function</code> palabra clave de la <code>function</code> no se utilizó.
|
||||
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,73 @@
|
||||
---
|
||||
id: 587d7b8b367417b2b2512b53
|
||||
title: Use class Syntax to Define a Constructor Function
|
||||
localeTitle: Use la clase Sintaxis para definir una función constructora
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
ES6 proporciona una nueva sintaxis para ayudar a crear objetos, utilizando la <dfn>clase de</dfn> palabra clave.
|
||||
Esto debe notarse, que la sintaxis de <code>class</code> es solo una sintaxis, y no una implementación de paradigmas orientados a objetos basada en clases de pleno derecho, a diferencia de lenguajes como Java, Python, o Ruby, etc.
|
||||
En ES5, generalmente definimos una función constructora, y use la <code>new</code> palabra clave para crear una instancia de un objeto.
|
||||
<blockquote>var SpaceShuttle = function(targetPlanet){<br> this.targetPlanet = targetPlanet;<br>}<br>var zeus = new SpaceShuttle('Jupiter');</blockquote>
|
||||
La sintaxis de la clase simplemente reemplaza la creación de la función de constructor:
|
||||
<blockquote>class SpaceShuttle {<br> constructor(targetPlanet){<br> this.targetPlanet = targetPlanet;<br> }<br>}<br>const zeus = new SpaceShuttle('Jupiter');</blockquote>
|
||||
Tenga en cuenta que la <code>class</code> se añadió la palabra clave declara una nueva función, y un constructor, que se invoca cuando <code>new</code> se llama - para crear un nuevo objeto.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use <code>class</code> palabra clave de <code>class</code> y escriba un constructor adecuado para crear la clase <code>Vegetable</code> .
|
||||
El <code>Vegetable</code> permite crear un objeto vegetal, con un <code>name</code> propiedad, que se pasará al constructor.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>Vegetable</code> debe ser una <code>class</code> con un 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: Se usó la palabra clave de <code>class</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/class/g),"<code>class</code> keyword was used.");'
|
||||
- text: <code>Vegetable</code> puede ser instanciado.
|
||||
testString: 'assert(() => {const a = new Vegetable("apple"); return typeof a === "object";},"<code>Vegetable</code> can be instantiated.");'
|
||||
- text: <code>carrot.name</code> debe devolver la <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,69 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b4b
|
||||
title: Use Destructuring Assignment to Assign Variables from Arrays
|
||||
localeTitle: Utilice la asignación de destrucción para asignar variables de matrices
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
ES6 hace que la desestructuración de matrices sea tan fácil como desestructurar objetos.
|
||||
Una diferencia clave entre el operador de propagación y la desestructuración de matrices es que el operador de propagación desempaqueta todo el contenido de una matriz en una lista separada por comas. Por consiguiente, no puede seleccionar o elegir qué elementos desea asignar a las variables.
|
||||
destrucción de una matriz nos permite hacer exactamente eso:
|
||||
<blockquote>const [a, b] = [1, 2, 3, 4, 5, 6];<br>console.log(a, b); // 1, 2</blockquote>
|
||||
A la variable <code>a</code> se le asigna el primer valor de la matriz, <code>b</code> se le asigna el segundo valor de la matriz.
|
||||
También podemos acceder al valor en cualquier índice en una matriz con desestructuración usando comas para alcanzar el índice deseado:
|
||||
<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 la asignación de desestructuración para intercambiar los valores de <code>a</code> y <code>b</code> modo que <code>a</code> reciba el valor almacenado en <code>b</code> , y <code>b</code> reciba el valor almacenado en <code>a</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'El valor de <code>a</code> debe ser 6, después del intercambio.'
|
||||
testString: 'assert(a === 6, "Value of <code>a</code> should be 6, after swapping.");'
|
||||
- text: 'El valor de <code>b</code> debería ser 8, después del intercambio.'
|
||||
testString: 'assert(b === 8, "Value of <code>b</code> should be 8, after swapping.");'
|
||||
- text: Utilice la desestructuración de matrices para intercambiar a y 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,69 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b4a
|
||||
title: Use Destructuring Assignment to Assign Variables from Nested Objects
|
||||
localeTitle: Utilice la asignación de destrucción para asignar variables de objetos anidados
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Podemos igualmente destruir objetos <em>anidados</em> en variables.
|
||||
Considera el siguiente código:
|
||||
<blockquote>const a = {<br> start: { x: 5, y: 6},<br> end: { x: 6, y: -9 }<br>};<br>const { start : { x: startX, y: startY }} = a;<br>console.log(startX, startY); // 5, 6</blockquote>
|
||||
En el ejemplo anterior, a la variable <code>start</code> se le asigna el valor de <code>a.start</code> , que también es un objeto.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Utilice la asignación de desestructuración para obtener el <code>max</code> de <code>forecast.tomorrow</code> y asignarlo a <code>maxOfTomorrow</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>maxOfTomorrow</code> es igual a <code>84.6</code>
|
||||
testString: 'assert(getMaxOfTmrw(LOCAL_FORECAST) === 84.6, "<code>maxOfTomorrow</code> equals <code>84.6</code>");'
|
||||
- text: se utilizó desestructuración anidada
|
||||
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,74 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b49
|
||||
title: Use Destructuring Assignment to Assign Variables from Objects
|
||||
localeTitle: Usar asignación de destrucción para asignar variables de objetos
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Ya vimos cómo el operador de propagación puede difundir o desempaquetar efectivamente el contenido de la matriz.
|
||||
Podemos hacer algo similar con los objetos también. <dfn>La asignación de destrucción</dfn> es una sintaxis especial para asignar cuidadosamente valores tomados directamente de un objeto a variables.
|
||||
Considera el siguiente 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>
|
||||
Aquí está la misma declaración de asignación con la sintaxis de desestructuración ES6:
|
||||
<blockquote>const { x, y, z } = voxel; // x = 3.6, y = 7.4, z = 6.54</blockquote>
|
||||
Si, por el contrario, desea almacenar los valores de <code>voxel.x</code> en <code>a</code> , <code>voxel.y</code> en <code>b</code> , y <code>voxel.z</code> en <code>c</code> , también tiene esa libertad.
|
||||
<blockquote>const { x : a, y : b, z : c } = voxel // a = 3.6, b = 7.4, c = 6.54</blockquote>
|
||||
Puede leerlo como "obtener el campo <code>x</code> y copiar el valor en <code>a</code> ", y así sucesivamente.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use la desestructuración para obtener la temperatura promedio para mañana del objeto de entrada <code>AVG_TEMPERATURES</code> , y asigne un valor con la clave <code>tomorrow</code> a <code>tempOfTomorrow</code> en línea.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>getTempOfTmrw(AVG_TEMPERATURES)</code> debe ser <code>79</code>
|
||||
testString: 'assert(getTempOfTmrw(AVG_TEMPERATURES) === 79, "<code>getTempOfTmrw(AVG_TEMPERATURES)</code> should be <code>79</code>");'
|
||||
- text: Se utilizó desestructuración con reasignación.
|
||||
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,81 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4d
|
||||
title: Use Destructuring Assignment to Pass an Object as a Function's Parameters
|
||||
localeTitle: Utilice la asignación de destrucción para pasar un objeto como parámetros de una función
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
En algunos casos, puede destruir el objeto en el propio argumento de una función.
|
||||
Considera el siguiente código:
|
||||
<blockquote>const profileUpdate = (profileData) => {<br> const { name, age, nationality, location } = profileData;<br> // do something with these variables<br>}</blockquote>
|
||||
Esto destruye efectivamente el objeto enviado a la función. Esto también se puede hacer en el lugar:
|
||||
<blockquote>const profileUpdate = ({ name, age, nationality, location }) => {<br> /* do something with these fields */<br>}</blockquote>
|
||||
Esto elimina algunas líneas adicionales y hace que nuestro código se vea limpio.
|
||||
Esto tiene el beneficio adicional de no tener que manipular un objeto completo en una función; solo los campos que son necesarios se copian dentro de la función.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use la asignación de desestructuración dentro del argumento de la función <code>half</code> para enviar solo <code>max</code> y <code>min</code> dentro de la función.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>stats</code> deben ser un <code>object</code> .
|
||||
testString: 'assert(typeof stats === "object", "<code>stats</code> should be an <code>object</code>.");'
|
||||
- text: <code>half(stats)</code> debe ser <code>28.015</code>
|
||||
testString: 'assert(half(stats) === 28.015, "<code>half(stats)</code> should be <code>28.015</code>");'
|
||||
- text: Se utilizó la destrucción.
|
||||
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,69 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4c
|
||||
title: Use Destructuring Assignment with the Rest Operator to Reassign Array Elements
|
||||
localeTitle: Utilice la asignación de destrucción con el operador de reposo para reasignar elementos de matriz
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
En algunas situaciones que involucran la desestructuración de matrices, podríamos querer recopilar el resto de los elementos en una matriz separada.
|
||||
El resultado es similar a <code>Array.prototype.slice()</code> , como se muestra a continuación:
|
||||
<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>
|
||||
Las variables <code>a</code> y <code>b</code> toman los valores primero y segundo de la matriz. Después de eso, debido a la presencia del operador en reposo, <code>arr</code> obtiene el resto de los valores en forma de una matriz.
|
||||
El elemento resto solo funciona correctamente como la última variable en la lista. Como en, no puede usar el operador de descanso para capturar un subarreglo que omita el último elemento de la matriz original.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use la asignación de desestructuración con el operador de descanso para realizar un <code>Array.prototype.slice()</code> efectivo de manera que <code>arr</code> sea una sub-matriz de la <code>source</code> de la matriz original con los dos primeros elementos omitidos.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ' <code>arr</code> debería 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: Se debe utilizar la destrucción.
|
||||
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> no debe utilizarse.
|
||||
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,68 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b56
|
||||
title: Use export to Reuse a Code Block
|
||||
localeTitle: Usar la exportación para reutilizar un bloque de código
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
En el desafío anterior, aprendió acerca de la <code>import</code> y cómo se puede aprovechar para importar pequeñas cantidades de código de archivos grandes. Sin embargo, para que esto funcione, debemos utilizar una de las declaraciones que acompañan a la <code>import</code> , conocida como <dfn>exportación</dfn> . Cuando queremos que un código, una función o una variable, se pueda utilizar en otro archivo, debemos exportarlo para importarlo en otro archivo. Al igual que la <code>import</code> , la <code>export</code> es una característica que no es del navegador.
|
||||
Lo siguiente es lo que llamamos una <dfn>exportación con nombre</dfn> . Con esto, podemos importar cualquier código que exportemos a otro archivo con la sintaxis de <code>import</code> que aprendió en la última lección. Aquí hay un ejemplo:
|
||||
<blockquote>const capitalizeString = (string) => {<br> return string.charAt(0).toUpperCase() + string.slice(1);<br>}<br>export { capitalizeString } //How to export functions.<br>export const foo = "bar"; //How to export variables.</blockquote>
|
||||
Alternativamente, si desea compactar todas sus declaraciones de <code>export</code> en una sola línea, puede adoptar este enfoque:
|
||||
<blockquote>const capitalizeString = (string) => {<br> return string.charAt(0).toUpperCase() + string.slice(1);<br>}<br>const foo = "bar";<br>export { capitalizeString, foo }</blockquote>
|
||||
Cualquiera de los dos enfoques es perfectamente aceptable.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
A continuación hay dos variables que quiero que estén disponibles para que otros archivos las utilicen. Utilizando la primera forma en que demostré <code>export</code> , exportamos las dos variables.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>foo</code> se exporta.
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/export\s+const\s+foo\s*=\s*"bar"/g), "<code>foo</code> is exported.");'
|
||||
- text: <code>bar</code> se exporta.
|
||||
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,78 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b54
|
||||
title: Use getters and setters to Control Access to an Object
|
||||
localeTitle: Usar getters y setters para controlar el acceso a un objeto
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Puede obtener valores de un objeto y establecer un valor de una propiedad dentro de un objeto.
|
||||
Estos se llaman clásicamente <dfn>getters</dfn> y <dfn>setters</dfn> .
|
||||
funciones de Getter están destinadas a simplemente devolver (obtener) el valor de la variable privada de un objeto al usuario sin que el usuario acceda directamente a la variable privada.
|
||||
funciones de Setter están destinadas a modificar (establecer) el valor de la variable privada de un objeto en función del valor pasado a la función de establecimiento. Este cambio podría implicar cálculos, o incluso sobrescribir completamente el valor anterior.
|
||||
<blockquote>class Book {<br> constructor(author) {<br> this._author = author;<br> }<br> // getter<br> get writer(){<br> return this._author;<br> }<br> // setter<br> set writer(updatedAuthor){<br> this._author = updatedAuthor;<br> }<br>}<br>const lol = new Book('anonymous');<br>console.log(lol.writer); // anonymous<br>lol.writer = 'wut';<br>console.log(lol.writer); // wut</blockquote>
|
||||
Observe la sintaxis que estamos utilizando para invocar al captador y al configurador, como si no fueran siquiera funciones.
|
||||
Getters y setters son importantes, ya que ocultan los detalles de la implementación interna.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use <code>class</code> palabra clave de la <code>class</code> para crear una clase de termostato. El constructor acepta la temperatura Fahrenheit.
|
||||
Ahora cree el <code>getter</code> y el <code>setter</code> en la clase, para obtener la temperatura en la escala Celsius.
|
||||
Recuerde que <code>C = 5/9 * (F - 32)</code> y <code>F = C * 9.0 / 5 + 32</code> , donde F es el valor de la temperatura en la escala Fahrenheit, y C es el valor de la misma temperatura en la escala Celsius
|
||||
Nota
|
||||
Cuando implementes esto, estarás siguiendo la temperatura dentro de la clase en una escala, ya sea Fahrenheit o Celsius.
|
||||
Este es el poder de getter o setter: está creando una API para otro usuario, que obtendría el resultado correcto, sin importar de cuál sea el seguimiento.
|
||||
En otras palabras, está abstrayendo los detalles de implementación del consumidor.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>Thermostat</code> debe ser una <code>class</code> con un 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: Se usó la palabra clave de <code>class</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/class/g),"<code>class</code> keyword was used.");'
|
||||
- text: <code>Thermostat</code> puede 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,69 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b47
|
||||
title: Use the Rest Operator with Function Parameters
|
||||
localeTitle: Utilice el operador de reposo con parámetros de función
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Para ayudarnos a crear funciones más flexibles, ES6 presenta al <dfn>operador de resto</dfn> para los parámetros de función. Con el operador resto, puede crear funciones que toman un número variable de argumentos. Estos argumentos se almacenan en una matriz a la que se puede acceder posteriormente desde dentro de la función.
|
||||
Echa un vistazo a este código:
|
||||
<blockquote>function howMany(...args) {<br> return "You have passed " + args.length + " arguments.";<br>}<br>console.log(howMany(0, 1, 2)); // You have passed 3 arguments<br>console.log(howMany("string", null, [1, 2, 3], { })); // You have passed 4 arguments.</blockquote>
|
||||
El operador restante elimina la necesidad de verificar la matriz de <code>args</code> y nos permite aplicar <code>map()</code> , <code>filter()</code> y <code>reduce()</code> en la matriz de parámetros.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Modifique la <code>sum</code> la función para que use el operador de descanso y funcione de la misma manera con cualquier número de parámetros.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'El resultado de la <code>sum(0,1,2)</code> debe ser 3'
|
||||
testString: 'assert(sum(0,1,2) === 3, "The result of <code>sum(0,1,2)</code> should be 3");'
|
||||
- text: 'El resultado de la <code>sum(1,2,3,4)</code> debe ser 10'
|
||||
testString: 'assert(sum(1,2,3,4) === 10, "The result of <code>sum(1,2,3,4)</code> should be 10");'
|
||||
- text: El resultado de la <code>sum(5)</code> debe ser 5.
|
||||
testString: 'assert(sum(5) === 5, "The result of <code>sum(5)</code> should be 5");'
|
||||
- text: El resultado de <code>sum()</code> debe ser 0
|
||||
testString: 'assert(sum() === 0, "The result of <code>sum()</code> should be 0");'
|
||||
- text: La función de <code>sum</code> usa el operador de <code>...</code> propagación en el 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,69 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b48
|
||||
title: Use the Spread Operator to Evaluate Arrays In-Place
|
||||
localeTitle: Utilice el operador de propagación para evaluar matrices en el lugar
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
ES6 presenta el <dfn>operador de propagación</dfn> , que nos permite expandir arreglos y otras expresiones en lugares donde se esperan múltiples parámetros o elementos.
|
||||
El siguiente código de ES5 utiliza <code>apply()</code> para calcular el valor máximo en una matriz:
|
||||
<blockquote>var arr = [6, 89, 3, 45];<br>var maximus = Math.max.apply(null, arr); // returns 89</blockquote>
|
||||
Tuvimos que usar <code>Math.max.apply(null, arr)</code> porque <code>Math.max(arr)</code> devuelve <code>NaN</code> . <code>Math.max()</code> espera argumentos separados por comas, pero no una matriz.
|
||||
El operador de difusión hace que esta sintaxis sea mucho mejor para leer y mantener.
|
||||
<blockquote>const arr = [6, 89, 3, 45];<br>const maximus = Math.max(...arr); // returns 89</blockquote>
|
||||
<code>...arr</code> devuelve una matriz desempaquetada. En otras palabras, se <em>propaga</em> la matriz.
|
||||
Sin embargo, el operador de difusión solo funciona en el lugar, como en un argumento a una función o en un literal de matriz. El siguiente código no funcionará:
|
||||
<blockquote>const spreaded = ...arr; // will throw a syntax error</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Copie todos los contenidos de <code>arr1</code> en otra matriz <code>arr2</code> utilizando el operador de propagación.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>arr2</code> es la copia correcta 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> se usó el operador spread 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 sin cambios cuando se cambia <code>arr1</code> .
|
||||
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,66 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b44
|
||||
title: Write Arrow Functions with Parameters
|
||||
localeTitle: Escribir funciones de flecha con parámetros
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Al igual que una función normal, puede pasar argumentos a las funciones de flecha.
|
||||
<blockquote>// doubles input value and returns it<br>const doubler = (item) => item * 2;</blockquote>
|
||||
También puede pasar más de un argumento a las funciones de flecha.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Vuelva a <code>myConcat</code> función <code>myConcat</code> que agrega el contenido de <code>arr2</code> a <code>arr1</code> para que la función utilice la sintaxis de la función de flecha.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: El usuario reemplazó la palabra clave <code>var</code> .
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/var/g), "User did replace <code>var</code> keyword.");'
|
||||
- text: <code>myConcat</code> debe ser una variable 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> debería ser una función
|
||||
testString: 'assert(typeof myConcat === "function", "<code>myConcat</code> should be a function");'
|
||||
- text: <code>myConcat()</code> devuelve la <code>array</code> correcta
|
||||
testString: 'assert(() => { const a = myConcat([1], [2]); return a[0] == 1 && a[1] == 2; }, "<code>myConcat()</code> returns the correct <code>array</code>");'
|
||||
- text: <code>function</code> palabra clave de la <code>function</code> no se utilizó.
|
||||
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,68 @@
|
||||
---
|
||||
id: 587d7b8b367417b2b2512b50
|
||||
title: Write Concise Declarative Functions with ES6
|
||||
localeTitle: Escribir funciones declarativas concisas con ES6
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Al definir funciones dentro de objetos en ES5, tenemos que usar la <code>function</code> palabra clave de la siguiente manera:
|
||||
<blockquote>const person = {<br> name: "Taylor",<br> sayHello: function() {<br> return `Hello! My name is ${this.name}.`;<br> }<br>};</blockquote>
|
||||
Con ES6, puede eliminar la palabra clave de <code>function</code> y los dos puntos por completo al definir funciones en objetos. Aquí hay un ejemplo de esta sintaxis:
|
||||
<blockquote>const person = {<br> name: "Taylor",<br> sayHello() {<br> return `Hello! My name is ${this.name}.`;<br> }<br>};</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Refactorice la función <code>setGear</code> dentro de la <code>bicycle</code> objeto para usar la sintaxis abreviada descrita anteriormente.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: No se usó la expresión de función tradicional.
|
||||
testString: 'assert(!getUserInput("index").match(/function/),"Traditional <code>function</code> expression was not used.");'
|
||||
- text: <code class = "notranslate"> setGear </code> es una función declarativa.
|
||||
testString: 'assert(typeof bicycle.setGear === "function" && getUserInput("index").match(/setGear\s*\(.+\)\s*\{/), "<code>setGear</code> is a declarative function.");'
|
||||
- text: <code class = "notranslate"> bicycle.setGear (48) </code> cambia el valor de <code class = "notranslate"> gear </code> a 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,69 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4f
|
||||
title: Write Concise Object Literal Declarations Using Simple Fields
|
||||
localeTitle: Escriba declaraciones literales de objetos concisos utilizando campos simples
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
ES6 agrega un buen soporte para definir fácilmente literales de objetos.
|
||||
Considera el siguiente código:
|
||||
<blockquote>const getMousePosition = (x, y) => ({<br> x: x,<br> y: y<br>});</blockquote>
|
||||
<code>getMousePosition</code> es una función simple que devuelve un objeto que contiene dos campos.
|
||||
ES6 proporciona el azúcar sintáctico para eliminar la redundancia de tener que escribir <code>x: x</code> . Simplemente puede escribir <code>x</code> una vez, y se convertirá a <code>x: x</code> (o algo equivalente) debajo del capó.
|
||||
Aquí se reescribe la misma función de la anterior para usar esta nueva sintaxis:
|
||||
<blockquote>const getMousePosition = (x, y) => ({ x, y });</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Utilice campos simples con objetos literales para crear y devolver un objeto <code>Person</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'la salida es <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: 'No <code>:</code> fueron utilizados'.
|
||||
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,77 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b45
|
||||
title: Write Higher Order Arrow Functions
|
||||
localeTitle: Escribir funciones de flecha de orden superior
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Es hora de que veamos cuán poderosas son las funciones de flecha al procesar datos.
|
||||
funciones de flecha funcionan realmente bien con funciones de orden superior, como <code>map()</code> , <code>filter()</code> y <code>reduce()</code> , que toman otras funciones como argumentos para procesar colecciones de datos.
|
||||
Lee el siguiente código:
|
||||
<blockquote>FBPosts.filter(function(post) {<br> return post.thumbnail !== null && post.shares > 100 && post.likes > 500;<br>})</blockquote>
|
||||
Hemos escrito esto con el <code>filter()</code> para al menos hacerlo un poco legible. Ahora compárelo con el siguiente código que usa la sintaxis de la función de flecha en su lugar:
|
||||
<blockquote>FBPosts.filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500)</blockquote>
|
||||
Este código es más breve y realiza la misma tarea con menos líneas de código.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Utilice la sintaxis de la función de flecha para calcular el cuadrado de solo los enteros positivos (los números decimales no son enteros) en la matriz <code>realNumberArray</code> y almacenar la nueva matriz en la variable <code>squaredIntegers</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>squaredIntegers</code> debe ser una variable 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> debe ser una <code>array</code>
|
||||
testString: 'assert(Array.isArray(squaredIntegers), "<code>squaredIntegers</code> should be an <code>array</code>");'
|
||||
- text: ' <code>squaredIntegers</code> debe ser <code>[16, 1764, 36]</code> '
|
||||
testString: 'assert.deepStrictEqual(squaredIntegers, [16, 1764, 36], "<code>squaredIntegers</code> should be <code>[16, 1764, 36]</code>");'
|
||||
- text: <code>function</code> palabra clave de la <code>function</code> no se utilizó.
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/function/g), "<code>function</code> keyword was not used.");'
|
||||
- text: bucle no debe ser utilizado
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/(for)|(while)/g), "loop should not be used");'
|
||||
- text: ' <code>map</code> , <code>filter</code> o <code>reduce</code> debe ser utilizado'
|
||||
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