docs: add Spanish docs
This commit is contained in:
Beau Carnes
@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 587d7b7d367417b2b2512b1d
|
||||
title: ' Iterate Through the Keys of an Object with a for...in Statement'
|
||||
localeTitle: 'Iterar a través de las claves de un objeto con una for ... in Statement'
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
A veces es posible que deba recorrer todas las claves dentro de un objeto. Esto requiere una sintaxis específica en JavaScript llamada <dfn>for ... in</dfn> statement. Para el objeto de nuestros <code>users</code> , esto podría verse como:
|
||||
<blockquote>for (let user in users) {<br> console.log(user);<br>};<br><br>// logs:<br>Alan<br>Jeff<br>Sarah<br>Ryan</blockquote>
|
||||
En esta declaración, definimos una variable de <code>user</code> y, como puede ver, esta variable se restableció durante cada iteración de cada una de las claves del objeto a medida que la declaración se desplazaba a través del objeto, lo que daba como resultado que el nombre de cada usuario se imprimiera en la consola.
|
||||
<strong>NOTA:</strong> <br> Los objetos no mantienen un orden para las claves almacenadas como lo hacen las matrices; por lo tanto, una posición de las teclas en un objeto, o el orden relativo en el que aparece, es irrelevante cuando se hace referencia o se accede a esa tecla.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Hemos definido una función, <code>countOnline</code> ; use una instrucción <dfn>for ... in</dfn> dentro de esta función para recorrer los usuarios en el objeto de los <code>users</code> y devolver el número de usuarios cuya propiedad en <code>online</code> está establecida en <code>true</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: El objeto <code>users</code> contiene a los usuarios <code>Jeff</code> y <code>Ryan</code> con <code>online</code> conjunto en <code>online</code> a <code>true</code> y los usuarios <code>Alan</code> y <code>Sarah</code> con <code>online</code> conjunto en <code>online</code> a <code>false</code>
|
||||
testString: 'assert(users.Alan.online === false && users.Jeff.online === true && users.Sarah.online === false && users.Ryan.online === true, "The <code>users</code> object contains users <code>Jeff</code> and <code>Ryan</code> with <code>online</code> set to <code>true</code> and users <code>Alan</code> and <code>Sarah</code> with <code>online</code> set to <code>false</code>");'
|
||||
- text: La función <code>countOnline</code> devuelve el número de usuarios con la propiedad en <code>online</code> establecida en <code>true</code>
|
||||
testString: 'assert((function() { users.Harry = {online: true}; users.Sam = {online: true}; users.Carl = {online: true}; return countOnline(users) })() === 5, "The function <code>countOnline</code> returns the number of users with the <code>online</code> property set to <code>true</code>");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let users = {
|
||||
Alan: {
|
||||
age: 27,
|
||||
online: false
|
||||
},
|
||||
Jeff: {
|
||||
age: 32,
|
||||
online: true
|
||||
},
|
||||
Sarah: {
|
||||
age: 48,
|
||||
online: false
|
||||
},
|
||||
Ryan: {
|
||||
age: 19,
|
||||
online: true
|
||||
}
|
||||
};
|
||||
|
||||
function countOnline(obj) {
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
}
|
||||
|
||||
console.log(countOnline(users));
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 5a661e0f1068aca922b3ef17
|
||||
title: Access an Array's Contents Using Bracket Notation
|
||||
localeTitle: Acceder a los contenidos de una matriz usando notación de corchete
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
La característica fundamental de cualquier estructura de datos es, por supuesto, la capacidad no solo de almacenar datos, sino también de poder recuperar esos datos en el comando. Entonces, ahora que hemos aprendido cómo crear una matriz, comencemos a pensar cómo podemos acceder a la información de esa matriz.
|
||||
Cuando definimos una matriz simple como se ve a continuación, hay 3 elementos en ella:
|
||||
<blockquote>let ourArray = ["a", "b", "c"];</blockquote>
|
||||
En una matriz, cada elemento de la matriz tiene un <dfn>índice</dfn> . Este índice se duplica como la posición de ese elemento en la matriz y cómo se hace referencia a él. Sin embargo, es importante tener en cuenta que las matrices de JavaScript tienen <dfn>un índice de cero</dfn> , lo que significa que el primer elemento de una matriz está en realidad en la posición <em><strong>cero</strong></em> , no en el primero.
|
||||
Para recuperar un elemento de una matriz, podemos encerrar un índice entre paréntesis y agregarlo al final de una matriz, o más comúnmente, a una variable que hace referencia a un objeto de matriz. Esto se conoce como <dfn>notación de corchete</dfn> .
|
||||
Por ejemplo, si queremos recuperar la <code>"a"</code> de <code>ourArray</code> y asignarla a una variable, podemos hacerlo con el siguiente código:
|
||||
<blockquote>let ourVariable = ourArray[0];<br>// ourVariable equals "a"</blockquote>
|
||||
Además de acceder al valor asociado a un índice, también puede <em>establecer</em> un índice en un valor usando la misma notación:
|
||||
<blockquote>ourArray[1] = "not b anymore";<br>// ourArray now equals ["a", "not b anymore", "c"];</blockquote>
|
||||
Usando la notación de corchetes, ahora hemos restablecido el elemento en el índice 1 de <code>"b"</code> , a <code>"not b anymore"</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Para completar este desafío, establezca la segunda posición (índice <code>1</code> ) de <code>myArray</code> en cualquier cosa que desee, además de <code>"b"</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ' <code>myArray[0]</code> es igual a <code>"a"</code> '
|
||||
testString: 'assert.strictEqual(myArray[0], "a", "<code>myArray[0]</code> is equal to <code>"a"</code>");'
|
||||
- text: ' <code>myArray[1]</code> ya no está configurado en <code>"b"</code> '
|
||||
testString: 'assert.notStrictEqual(myArray[1], "b", "<code>myArray[1]</code> is no longer set to <code>"b"</code>");'
|
||||
- text: ' <code>myArray[2]</code> es igual a <code>"c"</code> '
|
||||
testString: 'assert.strictEqual(myArray[2], "c", "<code>myArray[2]</code> is equal to <code>"c"</code>");'
|
||||
- text: ' <code>myArray[3]</code> es igual a <code>"d"</code> '
|
||||
testString: 'assert.strictEqual(myArray[3], "d", "<code>myArray[3]</code> is equal to <code>"d"</code>");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let myArray = ["a", "b", "c", "d"];
|
||||
// change code below this line
|
||||
|
||||
//change code above this line
|
||||
console.log(myArray);
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d7b7c367417b2b2512b1a
|
||||
title: Access Property Names with Bracket Notation
|
||||
localeTitle: Acceso a nombres de propiedades con notación de corchete
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
En el primer desafío de objetos mencionamos el uso de la notación de corchetes como una forma de acceder a los valores de las propiedades mediante la evaluación de una variable. Por ejemplo, imagine que nuestro objeto de <code>foods</code> se está utilizando en un programa para una caja registradora de un supermercado. Tenemos alguna función que configura los <code>foods</code> <code>selectedFood</code> y queremos verificar el objeto de nuestros <code>foods</code> para detectar la presencia de ese alimento. Esto podría parecer:
|
||||
<blockquote>let selectedFood = getCurrentFood(scannedItem);<br>let inventory = foods[selectedFood];</blockquote>
|
||||
Este código evaluará el valor almacenado en la variable <code>selectedFood</code> y devolverá el valor de esa clave en el objeto de <code>foods</code> , o <code>undefined</code> si no está presente. La notación de corchetes es muy útil porque a veces las propiedades de los objetos no se conocen antes del tiempo de ejecución o necesitamos acceder a ellos de una manera más dinámica.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Hemos definido una función, <code>checkInventory</code> , que recibe un elemento escaneado como un argumento. Devuelve el valor actual de la clave <code>scannedItem</code> en el objeto de <code>foods</code> . Puede suponer que solo se proporcionarán claves válidas como argumento para <code>checkInventory</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>checkInventory</code> es una función
|
||||
testString: 'assert.strictEqual(typeof checkInventory, "function", "<code>checkInventory</code> is a function");'
|
||||
- text: 'El objeto de <code>foods</code> debe tener solo los siguientes pares clave-valor: <code>apples: 25</code> , <code>oranges: 32</code> , <code>plums: 28</code> , <code>bananas: 13</code> , <code>grapes: 35</code> , <code>strawberries: 27</code> '
|
||||
testString: 'assert.deepEqual(foods, {apples: 25, oranges: 32, plums: 28, bananas: 13, grapes: 35, strawberries: 27}, "The <code>foods</code> object should have only the following key-value pairs: <code>apples: 25</code>, <code>oranges: 32</code>, <code>plums: 28</code>, <code>bananas: 13</code>, <code>grapes: 35</code>, <code>strawberries: 27</code>");'
|
||||
- text: <code>checkInventory("apples")</code> debe devolver <code>25</code>
|
||||
testString: 'assert.strictEqual(checkInventory("apples"), 25, "<code>checkInventory("apples")</code> should return <code>25</code>");'
|
||||
- text: <code>checkInventory("bananas")</code> debe devolver <code>13</code>
|
||||
testString: 'assert.strictEqual(checkInventory("bananas"), 13, "<code>checkInventory("bananas")</code> should return <code>13</code>");'
|
||||
- text: <code>checkInventory("strawberries")</code> debe devolver <code>27</code>
|
||||
testString: 'assert.strictEqual(checkInventory("strawberries"), 27, "<code>checkInventory("strawberries")</code> should return <code>27</code>");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let foods = {
|
||||
apples: 25,
|
||||
oranges: 32,
|
||||
plums: 28,
|
||||
bananas: 13,
|
||||
grapes: 35,
|
||||
strawberries: 27
|
||||
};
|
||||
// do not change code above this line
|
||||
|
||||
function checkInventory(scannedItem) {
|
||||
// change code below this line
|
||||
|
||||
}
|
||||
|
||||
// change code below this line to test different cases:
|
||||
console.log(checkInventory("apples"));
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 587d78b2367417b2b2512b0e
|
||||
title: Add Items to an Array with push() and unshift()
|
||||
localeTitle: Agregar elementos a una matriz con push () y unshift ()
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
La longitud de una matriz, como los tipos de datos que puede contener, no es fija. Las matrices se pueden definir con una longitud de cualquier número de elementos, y los elementos se pueden agregar o eliminar con el tiempo; en otras palabras, los arreglos son <dfn>mutables</dfn> . En este desafío, veremos dos métodos con los cuales podemos modificar mediante programación una matriz: <code>Array.push()</code> y <code>Array.unshift()</code> .
|
||||
Ambos métodos toman uno o más elementos como parámetros y agregan esos elementos a la matriz en la que se está utilizando el método; el método <code>push()</code> agrega elementos al final de una matriz, y <code>unshift()</code> agrega elementos al principio. Considera lo siguiente:
|
||||
<blockquote>let twentyThree = 'XXIII';<br>let romanNumerals = ['XXI', 'XXII'];<br><br>romanNumerals.unshift('XIX', 'XX');<br>// now equals ['XIX', 'XX', 'XXI', 'XXII']<br><br>romanNumerals.push(twentyThree);<br>// now equals ['XIX', 'XX', 'XXI', 'XXII', 'XXIII']
|
||||
Notice that we can also pass variables, which allows us even greater flexibility in dynamically modifying our array's data.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Hemos definido una función, <code>mixedNumbers</code> , a la que le estamos pasando una matriz como argumento. Modifique la función utilizando <code>push()</code> y <code>unshift()</code> para agregar <code>'I', 2, 'three'</code> al principio de la matriz y <code>7, 'VIII', 9</code> al final para que la matriz devuelta contenga representaciones de los números 1-9 en orden.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ' <code>mixedNumbers(["IV", 5, "six"])</code> ahora debe devolver <code>["I", 2, "three", "IV", 5, "six", 7, "VIII", 9]</code> '
|
||||
testString: 'assert.deepEqual(mixedNumbers(["IV", 5, "six"]), ["I", 2, "three", "IV", 5, "six", 7, "VIII", 9], "<code>mixedNumbers(["IV", 5, "six"])</code> should now return <code>["I", 2, "three", "IV", 5, "six", 7, "VIII", 9]</code>");'
|
||||
- text: La función <code>mixedNumbers</code> debe utilizar el método <code>push()</code>
|
||||
testString: 'assert.notStrictEqual(mixedNumbers.toString().search(/\.push\(/), -1, "The <code>mixedNumbers</code> function should utilize the <code>push()</code> method");'
|
||||
- text: La función <code>mixedNumbers</code> debe utilizar el método <code>unshift()</code>
|
||||
testString: 'assert.notStrictEqual(mixedNumbers.toString().search(/\.unshift\(/), -1, "The <code>mixedNumbers</code> function should utilize the <code>unshift()</code> method");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function mixedNumbers(arr) {
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
return arr;
|
||||
}
|
||||
|
||||
// do not change code below this line
|
||||
console.log(mixedNumbers(['IV', 5, 'six']));
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,67 @@
|
||||
---
|
||||
id: 587d78b3367417b2b2512b11
|
||||
title: Add Items Using splice()
|
||||
localeTitle: Agregar artículos usando splice ()
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Recuerda que en el último desafío mencionamos que <code>splice()</code> puede tomar hasta tres parámetros? Bueno, podemos ir un paso más allá con <code>splice()</code> ; además de eliminar elementos, podemos usar ese tercer parámetro, que representa uno o más elementos, para <em>agregarlos</em> también. Esto puede ser increíblemente útil para cambiar rápidamente un elemento, o un conjunto de elementos, por otro. Por ejemplo, supongamos que está almacenando una combinación de colores para un conjunto de elementos DOM en una matriz, y desea cambiar dinámicamente un color en función de alguna acción:
|
||||
<blockquote>function colorChange(arr, index, newColor) {<br> arr.splice(index, 1, newColor);<br> return arr;<br>}<br><br>let colorScheme = ['#878787', '#a08794', '#bb7e8c', '#c9b6be', '#d1becf'];<br><br>colorScheme = colorChange(colorScheme, 2, '#332327');<br>// we have removed '#bb7e8c' and added '#332327' in its place<br>// colorScheme now equals ['#878787', '#a08794', '#332327', '#c9b6be', '#d1becf']</blockquote>
|
||||
Esta función toma una matriz de valores hexadecimales, un índice para eliminar un elemento y el nuevo color para reemplazar el elemento eliminado. El valor de retorno es una matriz que contiene un esquema de color recién modificado. Si bien este ejemplo está un poco simplificado, podemos ver el valor que puede tener el uso de <code>splice()</code> en su potencial máximo.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Hemos definido una función, <code>htmlColorNames</code> , que toma una matriz de colores HTML como argumento. Modifique la función utilizando <code>splice()</code> para eliminar los dos primeros elementos de la matriz y agregue <code>'DarkSalmon'</code> y <code>'BlanchedAlmond'</code> en sus respectivos lugares.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ' <code>htmlColorNames</code> debería devolver <code>["DarkSalmon", "BlanchedAlmond", "LavenderBlush", "PaleTurqoise", "FireBrick"]</code> '
|
||||
testString: 'assert.deepEqual(htmlColorNames(["DarkGoldenRod", "WhiteSmoke", "LavenderBlush", "PaleTurqoise", "FireBrick"]), ["DarkSalmon", "BlanchedAlmond", "LavenderBlush", "PaleTurqoise", "FireBrick"], "<code>htmlColorNames</code> should return <code>["DarkSalmon", "BlanchedAlmond", "LavenderBlush", "PaleTurqoise", "FireBrick"]</code>");'
|
||||
- text: La función <code>htmlColorNames</code> debe utilizar el método <code>splice()</code>
|
||||
testString: 'assert(/.splice/.test(code), "The <code>htmlColorNames</code> function should utilize the <code>splice()</code> method");'
|
||||
- text: No debes usar <code>shift()</code> o <code>unshift()</code> .
|
||||
testString: 'assert(!/shift|unshift/.test(code), "You should not use <code>shift()</code> or <code>unshift()</code>.");'
|
||||
- text: No debe utilizar la notación de soporte de matriz.
|
||||
testString: 'assert(!/\[\d\]\s*=/.test(code), "You should not use array bracket notation.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function htmlColorNames(arr) {
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
return arr;
|
||||
}
|
||||
|
||||
// do not change code below this line
|
||||
console.log(htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurqoise', 'FireBrick']));
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 587d7b7c367417b2b2512b18
|
||||
title: Add Key-Value Pairs to JavaScript Objects
|
||||
localeTitle: Agregue pares de valor-clave a los objetos de JavaScript
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
En su forma más básica, los objetos son solo colecciones de <dfn>pares clave-valor</dfn> , o, en otras palabras, fragmentos de datos asignados a identificadores únicos que llamamos <dfn>propiedades</dfn> o <dfn>claves</dfn> . Veamos un ejemplo muy simple:
|
||||
<blockquote>let FCC_User = {<br> username: 'awesome_coder',<br> followers: 572,<br> points: 1741,<br> completedProjects: 15<br>};</blockquote>
|
||||
El código anterior define un objeto llamado <code>FCC_User</code> que tiene cuatro <dfn>propiedades</dfn> , cada una de las cuales se <code>FCC_User</code> a un valor específico. Si quisiéramos saber el número de <code>followers</code> tiene <code>FCC_User</code> , podemos acceder a esa propiedad escribiendo:
|
||||
<blockquote>let userData = FCC_User.followers;<br>// userData equals 572</blockquote>
|
||||
Esto se llama <dfn>notación de puntos</dfn> . Alternativamente, también podemos acceder a la propiedad entre paréntesis, así:
|
||||
<blockquote>let userData = FCC_User['followers']<br>// userData equals 572</blockquote>
|
||||
Observe que con la <dfn>notación de corchetes</dfn> , incluimos a los <code>followers</code> entre comillas. Esto se debe a que los corchetes realmente nos permiten pasar una variable para que sea evaluada como un nombre de propiedad (sugerencia: ten esto en cuenta para más adelante). Si hubiéramos pasado a los <code>followers</code> sin las comillas, el motor de JavaScript habría intentado evaluarla como una variable, y un <code>ReferenceError: followers is not defined</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Usando la misma sintaxis, también podemos <em><strong>agregar nuevos</strong></em> pares clave-valor a los objetos. Hemos creado un objeto de <code>foods</code> con tres entradas. Agregue tres entradas más: <code>bananas</code> con un valor de <code>13</code> , <code>grapes</code> con un valor de <code>35</code> y <code>strawberries</code> con un valor de <code>27</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>foods</code> son un objeto
|
||||
testString: 'assert(typeof foods === "object", "<code>foods</code> is an object");'
|
||||
- text: El objeto <code>foods</code> tiene una clave <code>"bananas"</code> con un valor de <code>13</code>
|
||||
testString: 'assert(foods.bananas === 13, "The <code>foods</code> object has a key <code>"bananas"</code> with a value of <code>13</code>");'
|
||||
- text: El objeto <code>foods</code> tiene una clave <code>"grapes"</code> con un valor de <code>35</code>
|
||||
testString: 'assert(foods.grapes === 35, "The <code>foods</code> object has a key <code>"grapes"</code> with a value of <code>35</code>");'
|
||||
- text: El objeto de <code>foods</code> tiene una clave <code>"strawberries"</code> con un valor de <code>27</code>
|
||||
testString: 'assert(foods.strawberries === 27, "The <code>foods</code> object has a key <code>"strawberries"</code> with a value of <code>27</code>");'
|
||||
- text: Los pares clave-valor deben configurarse usando notación de punto o corchete
|
||||
testString: 'assert(code.search(/bananas:/) === -1 && code.search(/grapes:/) === -1 && code.search(/strawberries:/) === -1, "The key-value pairs should be set using dot or bracket notation");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let foods = {
|
||||
apples: 25,
|
||||
oranges: 32,
|
||||
plums: 28
|
||||
};
|
||||
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
|
||||
console.log(foods);
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 587d7b7b367417b2b2512b14
|
||||
title: Check For The Presence of an Element With indexOf()
|
||||
localeTitle: Comprobar la presencia de un elemento con indexOf ()
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Dado que las matrices se pueden cambiar, o <em>mutar</em> , en cualquier momento, no hay ninguna garantía sobre dónde estará una determinada pieza de datos en una matriz determinada, o si ese elemento aún existe. Afortunadamente, JavaScript nos proporciona otro método <code>indexOf()</code> , <code>indexOf()</code> , que nos permite verificar rápida y fácilmente la presencia de un elemento en una matriz. <code>indexOf()</code> toma un elemento como parámetro y, cuando se le llama, devuelve la posición o el índice de ese elemento, o <code>-1</code> si el elemento no existe en la matriz.
|
||||
Por ejemplo:
|
||||
<blockquote>let fruits = ['apples', 'pears', 'oranges', 'peaches', 'pears'];<br><br>fruits.indexOf('dates') // returns -1<br>fruits.indexOf('oranges') // returns 2<br>fruits.indexOf('pears') // returns 1, the first index at which the element exists</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
<code>indexOf()</code> puede ser increíblemente útil para verificar rápidamente la presencia de un elemento en una matriz. Hemos definido una función, <code>quickCheck</code> , que toma una matriz y un elemento como argumentos. Modifique la función utilizando <code>indexOf()</code> para que devuelva <code>true</code> si el elemento pasado existe en la matriz, y <code>false</code> si no lo hace.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ' <code>quickCheck(["squash", "onions", "shallots"], "mushrooms")</code> debe devolver <code>false</code> '
|
||||
testString: 'assert.strictEqual(quickCheck(["squash", "onions", "shallots"], "mushrooms"), false, "<code>quickCheck(["squash", "onions", "shallots"], "mushrooms")</code> should return <code>false</code>");'
|
||||
- text: ' <code>quickCheck(["squash", "onions", "shallots"], "onions")</code> debe devolver <code>true</code> "
|
||||
testString: 'assert.strictEqual(quickCheck(["squash", "onions", "shallots"], "onions"), true, "<code>quickCheck(["squash", "onions", "shallots"], "onions")</code> should return <code>true</code>");'
|
||||
- text: ' <code>quickCheck([3, 5, 9, 125, 45, 2], 125)</code> debe devolver <code>true</code> '
|
||||
testString: 'assert.strictEqual(quickCheck([3, 5, 9, 125, 45, 2], 125), true, "<code>quickCheck([3, 5, 9, 125, 45, 2], 125)</code> should return <code>true</code>");'
|
||||
- text: ' <code>quickCheck([true, false, false], undefined)</code> debe devolver <code>false</code> '
|
||||
testString: 'assert.strictEqual(quickCheck([true, false, false], undefined), false, "<code>quickCheck([true, false, false], undefined)</code> should return <code>false</code>");'
|
||||
- text: La función <code>quickCheck</code> debe utilizar el método <code>indexOf()</code>
|
||||
testString: 'assert.notStrictEqual(quickCheck.toString().search(/\.indexOf\(/), -1, "The <code>quickCheck</code> function should utilize the <code>indexOf()</code> method");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function quickCheck(arr, elem) {
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
}
|
||||
|
||||
// change code here to test different cases:
|
||||
console.log(quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'));
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 587d7b7d367417b2b2512b1c
|
||||
title: Check if an Object has a Property
|
||||
localeTitle: Compruebe si un objeto tiene una propiedad
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Ahora podemos agregar, modificar y eliminar claves de objetos. Pero, ¿y si solo quisiéramos saber si un objeto tiene una propiedad específica? JavaScript nos proporciona dos formas diferentes de hacer esto. Uno usa el método <code>hasOwnProperty()</code> y el otro usa la palabra clave <code>in</code> . Si tenemos un objeto <code>users</code> con una propiedad de <code>Alan</code> , podríamos verificar su presencia de una de las siguientes maneras:
|
||||
<blockquote>users.hasOwnProperty('Alan');<br>'Alan' in users;<br>// both return true</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Hemos creado un objeto, <code>users</code> , con algunos usuarios en él y una función <code>isEveryoneHere</code> , a la que pasamos el objeto de los <code>users</code> como un argumento. Termine de escribir esta función de modo que devuelva <code>true</code> solo si el objeto de los <code>users</code> contiene los cuatro nombres, <code>Alan</code> , <code>Jeff</code> , <code>Sarah</code> y <code>Ryan</code> , como claves, y en caso contrario, <code>false</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'El objeto de los <code>users</code> solo contiene las claves <code>Alan</code> , <code>Jeff</code> , <code>Sarah</code> y <code>Ryan</code> '
|
||||
testString: 'assert("Alan" in users && "Jeff" in users && "Sarah" in users && "Ryan" in users && Object.keys(users).length === 4, "The <code>users</code> object only contains the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>");'
|
||||
- text: 'La función <code>isEveryoneHere</code> devuelve <code>true</code> si <code>Alan</code> , <code>Jeff</code> , <code>Sarah</code> y <code>Ryan</code> son propiedades del objeto de los <code>users</code> '
|
||||
testString: 'assert(isEveryoneHere(users) === true, "The function <code>isEveryoneHere</code> returns <code>true</code> if <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code> are properties on the <code>users</code> object");'
|
||||
- text: 'La función <code>isEveryoneHere</code> devuelve <code>false</code> si <code>Alan</code> , <code>Jeff</code> , <code>Sarah</code> y <code>Ryan</code> no son propiedades del objeto de los <code>users</code> '
|
||||
testString: 'assert((function() { delete users.Alan; delete users.Jeff; delete users.Sarah; delete users.Ryan; return isEveryoneHere(users) })() === false, "The function <code>isEveryoneHere</code> returns <code>false</code> if <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code> are not properties on the <code>users</code> object");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let users = {
|
||||
Alan: {
|
||||
age: 27,
|
||||
online: true
|
||||
},
|
||||
Jeff: {
|
||||
age: 32,
|
||||
online: true
|
||||
},
|
||||
Sarah: {
|
||||
age: 48,
|
||||
online: true
|
||||
},
|
||||
Ryan: {
|
||||
age: 19,
|
||||
online: true
|
||||
}
|
||||
};
|
||||
|
||||
function isEveryoneHere(obj) {
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
}
|
||||
|
||||
console.log(isEveryoneHere(users));
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 587d7b7b367417b2b2512b17
|
||||
title: Combine Arrays with the Spread Operator
|
||||
localeTitle: Combina matrices con el operador de propagación
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Otra gran ventaja del operador de <dfn>difusión</dfn> , es la capacidad de combinar arreglos, o de insertar todos los elementos de un arreglo en otro, en cualquier índice. Con sintaxis más tradicionales, podemos concatenar matrices, pero esto solo nos permite combinar matrices al final de una y al comienzo de otra. La sintaxis de propagación hace que la siguiente operación sea extremadamente simple:
|
||||
<blockquote>let thisArray = ['sage', 'rosemary', 'parsley', 'thyme'];<br><br>let thatArray = ['basil', 'cilantro', ...thisArray, 'coriander'];<br>// thatArray now equals ['basil', 'cilantro', 'sage', 'rosemary', 'parsley', 'thyme', 'coriander']</blockquote>
|
||||
Usando la sintaxis de propagación, acabamos de lograr una operación que hubiera sido más compleja y más detallada si hubiéramos usado métodos tradicionales.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Hemos definido una función <code>spreadOut</code> que devuelve la <code>sentence</code> variable, modifique la función usando el operador de <dfn>propagación</dfn> para que devuelva la matriz <code>['learning', 'to', 'code', 'is', 'fun']</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ' <code>spreadOut</code> debería devolver <code>["learning", "to", "code", "is", "fun"]</code> '
|
||||
testString: 'assert.deepEqual(spreadOut(), ["learning", "to", "code", "is", "fun"], "<code>spreadOut</code> should return <code>["learning", "to", "code", "is", "fun"]</code>");'
|
||||
- text: La función <code>spreadOut</code> debe utilizar la sintaxis de difusión
|
||||
testString: 'assert.notStrictEqual(spreadOut.toString().search(/[...]/), -1, "The <code>spreadOut</code> function should utilize spread syntax");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function spreadOut() {
|
||||
let fragment = ['to', 'code'];
|
||||
let sentence; // change this line
|
||||
return sentence;
|
||||
}
|
||||
|
||||
// do not change code below this line
|
||||
console.log(spreadOut());
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 587d7b7b367417b2b2512b13
|
||||
title: Copy an Array with the Spread Operator
|
||||
localeTitle: Copiar una matriz con el operador de propagación
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Mientras <code>slice()</code> nos permite ser selectivos sobre qué elementos de una matriz copiar, entre otras muchas tareas útiles, el nuevo <dfn>operador de difusión de</dfn> ES6 nos permite copiar fácilmente <em>todos</em> los elementos de una matriz, en orden, con una sintaxis simple y altamente legible . La sintaxis de propagación simplemente se ve así: <code>...</code>
|
||||
En la práctica, podemos usar el operador de propagación para copiar una matriz de la siguiente manera:
|
||||
<blockquote>let thisArray = [true, true, undefined, false, null];<br>let thatArray = [...thisArray];<br>// thatArray equals [true, true, undefined, false, null]<br>// thisArray remains unchanged, and is identical to thatArray</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Hemos definido una función, <code>copyMachine</code> que toma <code>arr</code> (una matriz) y <code>num</code> (un número) como argumentos. Se supone que la función devuelve una nueva matriz formada por <code>num</code> copias de <code>arr</code> . Hemos hecho la mayor parte del trabajo por usted, pero todavía no funciona del todo bien. Modifique la función utilizando la sintaxis de dispersión para que funcione correctamente (sugerencia: ¡otro método que ya hemos cubierto podría ser útil aquí!).
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ' <code>copyMachine([true, false, true], 2)</code> debe devolver <code>[[true, false, true], [true, false, true]]</code> '
|
||||
testString: 'assert.deepEqual(copyMachine([true, false, true], 2), [[true, false, true], [true, false, true]], "<code>copyMachine([true, false, true], 2)</code> should return <code>[[true, false, true], [true, false, true]]</code>");'
|
||||
- text: ' <code>copyMachine([1, 2, 3], 5)</code> debe devolver <code>[[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]]</code> '
|
||||
testString: 'assert.deepEqual(copyMachine([1, 2, 3], 5), [[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]], "<code>copyMachine([1, 2, 3], 5)</code> should return <code>[[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]]</code>");'
|
||||
- text: ' <code>copyMachine([true, true, null], 1)</code> debe devolver <code>[[true, true, null]]</code> '
|
||||
testString: 'assert.deepEqual(copyMachine([true, true, null], 1), [[true, true, null]], "<code>copyMachine([true, true, null], 1)</code> should return <code>[[true, true, null]]</code>");'
|
||||
- text: ' <code>copyMachine(["it works"], 3)</code> debería devolver <code>[["it works"], ["it works"], ["it works"]]</code> '
|
||||
testString: 'assert.deepEqual(copyMachine(["it works"], 3), [["it works"], ["it works"], ["it works"]], "<code>copyMachine(["it works"], 3)</code> should return <code>[["it works"], ["it works"], ["it works"]]</code>");'
|
||||
- text: La función <code>copyMachine</code> debe utilizar el <code>spread operator</code> con array <code>arr</code>
|
||||
testString: 'assert.notStrictEqual(copyMachine.toString().indexOf(".concat(_toConsumableArray(arr))"), -1, "The <code>copyMachine</code> function should utilize the <code>spread operator</code> with array <code>arr</code>");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function copyMachine(arr, num) {
|
||||
let newArr = [];
|
||||
while (num >= 1) {
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
num--;
|
||||
}
|
||||
return newArr;
|
||||
}
|
||||
|
||||
// change code here to test different cases:
|
||||
console.log(copyMachine([true, false, true], 2));
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 587d7b7a367417b2b2512b12
|
||||
title: Copy Array Items Using slice()
|
||||
localeTitle: Copiar elementos de matriz utilizando slice ()
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
El siguiente método que cubriremos es <code>slice()</code> . <code>slice()</code> , en lugar de modificar una matriz, copia o <em>extrae</em> , un número dado de elementos a una nueva matriz, dejando la matriz a la que se llama sin tocar. <code>slice()</code> toma solo 2 parámetros: el primero es el índice para comenzar la extracción y el segundo es el índice para detener la extracción (la extracción ocurrirá hasta, pero sin incluir el elemento en este índice). Considera esto:
|
||||
<blockquote>let weatherConditions = ['rain', 'snow', 'sleet', 'hail', 'clear'];<br><br>let todaysWeather = weatherConditions.slice(1, 3);<br>// todaysWeather equals ['snow', 'sleet'];<br>// weatherConditions still equals ['rain', 'snow', 'sleet', 'hail', 'clear']<br></blockquote>
|
||||
En efecto, hemos creado una nueva matriz extrayendo elementos de una matriz existente.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Hemos definido una función, <code>forecast</code> , que toma una matriz como argumento. Modifique la función utilizando <code>slice()</code> para extraer información de la matriz de argumentos y devuelva una nueva matriz que contenga los elementos <code>'warm'</code> y <code>'sunny'</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ' <code>forecast</code> debería devolver <code>["warm", "sunny"]'</code>
|
||||
testString: 'assert.deepEqual(forecast(["cold", "rainy", "warm", "sunny", "cool", "thunderstorms"]), ["warm", "sunny"], "<code>forecast</code> should return <code>["warm", "sunny"]");'
|
||||
- text: La función de <code>forecast</code> debe utilizar el método <code>slice()</code>
|
||||
testString: 'assert(/\.slice\(/.test(code), "The <code>forecast</code> function should utilize the <code>slice()</code> method");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function forecast(arr) {
|
||||
// change code below this line
|
||||
|
||||
return arr;
|
||||
}
|
||||
|
||||
// do not change code below this line
|
||||
console.log(forecast(['cold', 'rainy', 'warm', 'sunny', 'cool', 'thunderstorms']));
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 587d7b7b367417b2b2512b16
|
||||
title: Create complex multi-dimensional arrays
|
||||
localeTitle: Crear complejos arreglos multidimensionales.
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
impresionante! ¡Acabas de aprender un montón de arreglos! Este ha sido un resumen de nivel bastante alto, y hay mucho más que aprender sobre el trabajo con matrices, muchas de las cuales veremos en secciones posteriores. Pero antes de pasar a mirar <dfn>Objetos</dfn> , echemos un vistazo más y veamos cómo los arreglos pueden volverse un poco más complejos de lo que hemos visto en desafíos anteriores.
|
||||
Una de las características más poderosas cuando se piensa en los arreglos como estructuras de datos, es que los arreglos pueden contener, o incluso estar completamente compuestos de otros arreglos. Hemos visto matrices que contienen matrices en desafíos anteriores, pero bastante simples. Sin embargo, las matrices pueden contener una profundidad infinita de matrices que pueden contener otras matrices, cada una con sus propios niveles arbitrarios de profundidad, y así sucesivamente. De esta manera, una matriz puede convertirse muy rápidamente en una estructura de datos muy compleja, conocida como una matriz <dfn>multidimensional</dfn> o anidada. Considera el siguiente ejemplo:
|
||||
<blockquote>let nestedArray = [ // top, or first level - the outer most array<br> ['deep'], // an array within an array, 2 levels of depth<br> [<br> ['deeper'], ['deeper'] // 2 arrays nested 3 levels deep<br> ],<br> [<br> [<br> ['deepest'], ['deepest'] // 2 arrays nested 4 levels deep<br> ],<br> [<br> [<br> ['deepest-est?'] // an array nested 5 levels deep<br> ]<br> ]<br> ]<br>];</blockquote>
|
||||
Si bien este ejemplo puede parecer complicado, este nivel de complejidad no es inaudito, o incluso inusual, cuando se trata de grandes cantidades de datos.
|
||||
Sin embargo, aún podemos acceder fácilmente a los niveles más profundos de una matriz de este complejo con notación de corchete:
|
||||
<blockquote>console.log(nestedArray[2][1][0][0][0]);<br>// logs: deepest-est?</blockquote>
|
||||
Y ahora que sabemos dónde está ese dato, podemos restablecerlo si necesitamos:
|
||||
<blockquote>nestedArray[2][1][0][0][0] = 'deeper still';<br><br>console.log(nestedArray[2][1][0][0][0]);<br>// now logs: deeper still</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Hemos definido una variable, <code>myNestedArray</code> , igual a una matriz. Modifique <code>myNestedArray</code> , utilizando cualquier combinación de <dfn>cadenas</dfn> , <dfn>números</dfn> y <dfn>valores booleanos</dfn> para los elementos de datos, de modo que tenga exactamente cinco niveles de profundidad (recuerde, la matriz más externa es el nivel 1). En algún lugar en el tercer nivel, incluye la cadena <code>'deep'</code> , en el cuarto nivel, incluyen la cadena <code>'deeper'</code> , y en el quinto nivel, incluyen la cadena <code>'deepest'</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ' <code>myNestedArray</code> debe contener solo números, booleanos y cadenas como elementos de datos'
|
||||
testString: 'assert.strictEqual((function(arr) { let flattened = (function flatten(arr) { const flat = [].concat(...arr); return flat.some (Array.isArray) ? flatten(flat) : flat; })(arr); for (let i = 0; i < flattened.length; i++) { if ( typeof flattened[i] !== "number" && typeof flattened[i] !== "string" && typeof flattened[i] !== "boolean") { return false } } return true })(myNestedArray), true, "<code>myNestedArray</code> should contain only numbers, booleans, and strings as data elements");'
|
||||
- text: <code>myNestedArray</code> debe tener exactamente 5 niveles de profundidad
|
||||
testString: 'assert.strictEqual((function(arr) {let depth = 0;function arrayDepth(array, i, d) { if (Array.isArray(array[i])) { arrayDepth(array[i], 0, d + 1);} else { depth = (d > depth) ? d : depth;}if (i < array.length) { arrayDepth(array, i + 1, d);} }arrayDepth(arr, 0, 0);return depth;})(myNestedArray), 4, "<code>myNestedArray</code> should have exactly 5 levels of depth");'
|
||||
- text: <code>myNestedArray</code> debe contener exactamente una aparición de la cadena <code>"deep"</code> en una matriz anidada con 3 niveles de profundidad
|
||||
testString: 'assert((function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) { return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) { return combined.concat(depth);} else { return combined;}}, []);})(myNestedArray, "deep").length === 1 && (function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) { return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) { return combined.concat(depth);} else { return combined;}}, []);})(myNestedArray, "deep")[0] === 2, "<code>myNestedArray</code> should contain exactly one occurrence of the string <code>"deep"</code> on an array nested 3 levels deep");'
|
||||
- text: <code>myNestedArray</code> debe contener exactamente una aparición de la cadena <code>"deeper"</code> deep <code>"deeper"</code> en una matriz anidada con 4 niveles de profundidad
|
||||
testString: 'assert((function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) { return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) { return combined.concat(depth);} else { return combined;}}, []);})(myNestedArray, "deeper").length === 1 && (function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) { return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) { return combined.concat(depth);} else { return combined;}}, []);})(myNestedArray, "deeper")[0] === 3, "<code>myNestedArray</code> should contain exactly one occurrence of the string <code>"deeper"</code> on an array nested 4 levels deep");'
|
||||
- text: <code>myNestedArray</code> debe contener exactamente una aparición de la cadena <code>"deepest"</code> en una matriz anidada a 5 niveles de profundidad
|
||||
testString: 'assert((function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) { return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) { return combined.concat(depth);} else { return combined;}}, []);})(myNestedArray, "deepest").length === 1 && (function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) { return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) { return combined.concat(depth);} else { return combined;}}, []);})(myNestedArray, "deepest")[0] === 4, "<code>myNestedArray</code> should contain exactly one occurrence of the string <code>"deepest"</code> on an array nested 5 levels deep");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let myNestedArray = [
|
||||
// change code below this line
|
||||
['unshift', false, 1, 2, 3, 'complex', 'nested'],
|
||||
['loop', 'shift', 6, 7, 1000, 'method'],
|
||||
['concat', false, true, 'spread', 'array'],
|
||||
['mutate', 1327.98, 'splice', 'slice', 'push'],
|
||||
['iterate', 1.3849, 7, '8.4876', 'arbitrary', 'depth']
|
||||
// change code above this line
|
||||
];
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 587d7b7d367417b2b2512b1e
|
||||
title: Generate an Array of All Object Keys with Object.keys()
|
||||
localeTitle: Generar una matriz de todas las claves de objeto con Object.keys ()
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
También podemos generar una matriz que contiene todas las claves almacenadas en un objeto usando el método <code>Object.keys()</code> y pasando un objeto como argumento. Esto devolverá una matriz con cadenas que representan cada propiedad en el objeto. Nuevamente, no habrá un orden específico para las entradas en la matriz.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Termine de escribir la función <code>getArrayOfUsers</code> para que devuelva una matriz que contenga todas las propiedades en el objeto que recibe como argumento.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'El objeto de los <code>users</code> solo contiene las claves <code>Alan</code> , <code>Jeff</code> , <code>Sarah</code> y <code>Ryan</code> '
|
||||
testString: 'assert("Alan" in users && "Jeff" in users && "Sarah" in users && "Ryan" in users && Object.keys(users).length === 4, "The <code>users</code> object only contains the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>");'
|
||||
- text: La función <code>getArrayOfUsers</code> devuelve una matriz que contiene todas las claves en el objeto de los <code>users</code>
|
||||
testString: 'assert((function() { users.Sam = {}; users.Lewis = {}; let R = getArrayOfUsers(users); return (R.indexOf("Alan") !== -1 && R.indexOf("Jeff") !== -1 && R.indexOf("Sarah") !== -1 && R.indexOf("Ryan") !== -1 && R.indexOf("Sam") !== -1 && R.indexOf("Lewis") !== -1); })() === true, "The <code>getArrayOfUsers</code> function returns an array which contains all the keys in the <code>users</code> object");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let users = {
|
||||
Alan: {
|
||||
age: 27,
|
||||
online: false
|
||||
},
|
||||
Jeff: {
|
||||
age: 32,
|
||||
online: true
|
||||
},
|
||||
Sarah: {
|
||||
age: 48,
|
||||
online: false
|
||||
},
|
||||
Ryan: {
|
||||
age: 19,
|
||||
online: true
|
||||
}
|
||||
};
|
||||
|
||||
function getArrayOfUsers(obj) {
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
}
|
||||
|
||||
console.log(getArrayOfUsers(users));
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 587d7b7b367417b2b2512b15
|
||||
title: Iterate Through All an Array's Items Using For Loops
|
||||
localeTitle: Iterar a través de todos los elementos de una matriz utilizando bucles for
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
A veces, cuando se trabaja con matrices, es muy útil poder recorrer cada elemento para encontrar uno o más elementos que podríamos necesitar, o manipular una matriz en función de qué elementos de datos cumplen un determinado conjunto de criterios. JavaScript ofrece varios métodos integrados que se repiten en matrices de maneras ligeramente diferentes para lograr resultados diferentes (como <code>every()</code> , para <code>forEach()</code> , <code>map()</code> , etc.), sin embargo, la técnica es más flexible y nos ofrece la mejor cantidad de control es un simple <code>for</code> bucle.
|
||||
Considera lo siguiente:
|
||||
<blockquote>function greaterThanTen(arr) {<br> let newArr = [];<br> for (let i = 0; i < arr.length; i++) {<br> if (arr[i] > 10) {<br> newArr.push(arr[i]);<br> }<br> }<br> return newArr;<br>}<br><br>greaterThanTen([2, 12, 8, 14, 80, 0, 1]);<br>// returns [12, 14, 80]</blockquote>
|
||||
Usando un bucle <code>for</code> , esta función recorre y accede a cada elemento de la matriz, y lo somete a una prueba simple que hemos creado. De esta manera, hemos determinado fácil y programáticamente qué elementos de datos son más grandes que <code>10</code> , y hemos devuelto una nueva matriz que contiene esos elementos.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Hemos definido una función, <code>filteredArray</code> , que toma <code>arr</code> , una matriz anidada, y <code>elem</code> como argumentos, y devuelve una nueva matriz. <code>elem</code> representa un elemento que puede o no estar presente en una o más de las matrices anidadas dentro de <code>arr</code> . Modifique la función, utilizando un bucle <code>for</code> , para devolver una versión filtrada de la matriz pasada de manera que se haya eliminado cualquier matriz anidada dentro de <code>arr</code> contenga <code>elem</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ' <code>filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18)</code> debe devolver <code>[ [10, 8, 3], [14, 6, 23] ]</code> '
|
||||
testString: 'assert.deepEqual(filteredArray([ [10, 8, 3], [14, 6, 23], [3, 18, 6] ], 18), [[10, 8, 3], [14, 6, 23]], "<code>filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18)</code> should return <code>[ [10, 8, 3], [14, 6, 23] ]</code>");'
|
||||
- text: ' <code>filteredArray([ ["trumpets", 2], ["flutes", 4], ["saxophones", 2] ], 2)</code> debe devolver <code>[ ["flutes", 4] ]</code> '
|
||||
testString: 'assert.deepEqual(filteredArray([ ["trumpets", 2], ["flutes", 4], ["saxophones", 2] ], 2), [["flutes", 4]], "<code>filteredArray([ ["trumpets", 2], ["flutes", 4], ["saxophones", 2] ], 2)</code> should return <code>[ ["flutes", 4] ]</code>");'
|
||||
- text: ' <code>filteredArray([ ["amy", "beth", "sam"], ["dave", "sean", "peter"] ], "peter")</code> debe devolver <code>[ ["amy", "beth", "sam"] ]</code> '
|
||||
testString: 'assert.deepEqual(filteredArray([["amy", "beth", "sam"], ["dave", "sean", "peter"]], "peter"), [["amy", "beth", "sam"]], "<code>filteredArray([ ["amy", "beth", "sam"], ["dave", "sean", "peter"] ], "peter")</code> should return <code>[ ["amy", "beth", "sam"] ]</code>");'
|
||||
- text: ' <code>filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)</code> debe devolver <code>[ ]</code> '
|
||||
testString: 'assert.deepEqual(filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3), [], "<code>filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)</code> should return <code>[ ]</code>");'
|
||||
- text: El <code>filteredArray</code> función debe utilizar un <code>for</code> bucle
|
||||
testString: 'assert.notStrictEqual(filteredArray.toString().search(/for/), -1, "The <code>filteredArray</code> function should utilize a <code>for</code> loop");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function filteredArray(arr, elem) {
|
||||
let newArr = [];
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
return newArr;
|
||||
}
|
||||
|
||||
// change code here to test different cases:
|
||||
console.log(filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3));
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 587d7b7d367417b2b2512b1f
|
||||
title: Modify an Array Stored in an Object
|
||||
localeTitle: Modificar una matriz almacenada en un objeto
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Ahora has visto todas las operaciones básicas para objetos JavaScript. Puede agregar, modificar y eliminar pares clave-valor, verificar si existen claves e iterar sobre todas las claves en un objeto. A medida que continúe aprendiendo JavaScript, verá aplicaciones de objetos aún más versátiles. Además, las lecciones opcionales de Estructuras de datos avanzadas más adelante en el plan de estudios también cubren los objetos <dfn>Map</dfn> y <dfn>Set de</dfn> ES6, los cuales son similares a los objetos comunes pero ofrecen algunas características adicionales. ¡Ahora que ha aprendido los conceptos básicos de matrices y objetos, está completamente preparado para comenzar a abordar problemas más complejos utilizando JavaScript!
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Eche un vistazo al objeto que hemos proporcionado en el editor de código. El objeto de <code>user</code> contiene tres claves. La clave de <code>data</code> contiene cinco claves, una de las cuales contiene una gran variedad de <code>friends</code> . A partir de esto, puede ver cómo los objetos flexibles son como estructuras de datos. Hemos empezado a escribir una función <code>addFriend</code> . Termine de escribirlo para que tome un objeto de <code>user</code> y agregue el nombre del argumento de <code>friend</code> a la matriz almacenada en <code>user.data.friends</code> y devuelva esa matriz.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'El objeto de <code>user</code> tiene <code>name</code> , <code>age</code> y claves de <code>data</code> '
|
||||
testString: 'assert("name" in user && "age" in user && "data" in user, "The <code>user</code> object has <code>name</code>, <code>age</code>, and <code>data</code> keys");'
|
||||
- text: La función <code>addFriend</code> acepta un objeto de <code>user</code> y una cadena de <code>friend</code> como argumentos y agrega el amigo a la matriz de <code>friends</code> en el objeto de <code>user</code>
|
||||
testString: 'assert((function() { let L1 = user.data.friends.length; addFriend(user, "Sean"); let L2 = user.data.friends.length; return (L2 === L1 + 1); })(), "The <code>addFriend</code> function accepts a <code>user</code> object and a <code>friend</code> string as arguments and adds the friend to the array of <code>friends</code> in the <code>user</code> object");'
|
||||
- text: ' <code>addFriend(user, "Pete")</code> debe devolver <code>["Sam", "Kira", "Tomo", "Pete"]</code> '
|
||||
testString: 'assert.deepEqual((function() { delete user.data.friends; user.data.friends = ["Sam", "Kira", "Tomo"]; return addFriend(user, "Pete") })(), ["Sam", "Kira", "Tomo", "Pete"], "<code>addFriend(user, "Pete")</code> should return <code>["Sam", "Kira", "Tomo", "Pete"]</code>");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let user = {
|
||||
name: 'Kenneth',
|
||||
age: 28,
|
||||
data: {
|
||||
username: 'kennethCodesAllDay',
|
||||
joinDate: 'March 26, 2016',
|
||||
organization: 'freeCodeCamp',
|
||||
friends: [
|
||||
'Sam',
|
||||
'Kira',
|
||||
'Tomo'
|
||||
],
|
||||
location: {
|
||||
city: 'San Francisco',
|
||||
state: 'CA',
|
||||
country: 'USA'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function addFriend(userObj, friend) {
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
}
|
||||
|
||||
console.log(addFriend(user, 'Pete'));
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 587d7b7c367417b2b2512b19
|
||||
title: Modify an Object Nested Within an Object
|
||||
localeTitle: Modificar un objeto anidado dentro de un objeto
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Ahora veamos un objeto un poco más complejo. Las propiedades de los objetos se pueden anidar a una profundidad arbitraria, y sus valores pueden ser cualquier tipo de datos admitidos por JavaScript, incluidas las matrices e incluso otros objetos. Considera lo siguiente:
|
||||
<blockquote>let nestedObject = {<br> id: 28802695164,<br> date: 'December 31, 2016',<br> data: {<br> totalUsers: 99,<br> online: 80,<br> onlineStatus: {<br> active: 67,<br> away: 13<br> }<br> }<br>};</blockquote>
|
||||
<code>nestedObject</code> tiene tres claves únicas: <code>id</code> , cuyo valor es un número, la <code>date</code> cuyo valor es una cadena y los <code>data</code> , cuyo valor es un objeto que tiene otro objeto anidado dentro de él. Si bien las estructuras pueden volverse complejas rápidamente, aún podemos usar las mismas notaciones para acceder a la información que necesitamos.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Aquí hemos definido un objeto, <code>userActivity</code> , que incluye otro objeto anidado dentro de él. Puede modificar las propiedades de este objeto anidado de la misma manera que modificó las propiedades en el último desafío. Establezca el valor de la clave en <code>online</code> en <code>45</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ' <code>userActivity</code> tiene <code>id</code> , <code>date</code> y propiedades de <code>data</code> '
|
||||
testString: 'assert("id" in userActivity && "date" in userActivity && "data" in userActivity, "<code>userActivity</code> has <code>id</code>, <code>date</code> and <code>data</code> properties");'
|
||||
- text: <code>userActivity</code> tiene una clave de <code>data</code> configurada para un objeto con las teclas <code>totalUsers</code> y en <code>online</code>
|
||||
testString: 'assert("totalUsers" in userActivity.data && "online" in userActivity.data, "<code>userActivity</code> has a <code>data</code> key set to an object with keys <code>totalUsers</code> and <code>online</code>");'
|
||||
- text: La propiedad en <code>online</code> anidada en la clave de <code>data</code> de <code>userActivity</code> debe establecer en <code>45</code>
|
||||
testString: 'assert(userActivity.data.online === 45, "The <code>online</code> property nested in the <code>data</code> key of <code>userActivity</code> should be set to <code>45</code>");'
|
||||
- text: La propiedad en <code>online</code> se establece mediante notación de punto o corchete
|
||||
testString: 'assert.strictEqual(code.search(/online: 45/), -1, "The <code>online</code> property is set using dot or bracket notation");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let userActivity = {
|
||||
id: 23894201352,
|
||||
date: 'January 1, 2017',
|
||||
data: {
|
||||
totalUsers: 51,
|
||||
online: 42
|
||||
}
|
||||
};
|
||||
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
|
||||
console.log(userActivity);
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 587d78b2367417b2b2512b0f
|
||||
title: Remove Items from an Array with pop() and shift()
|
||||
localeTitle: Eliminar elementos de una matriz con pop () y shift ()
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Tanto <code>push()</code> como <code>unshift()</code> tienen métodos correspondientes que son opuestos casi funcionales: <code>pop()</code> y <code>shift()</code> . Como ya habrá adivinado, en lugar de agregar, <code>pop()</code> <em>elimina</em> un elemento del final de una matriz, mientras que <code>shift()</code> elimina un elemento desde el principio. La diferencia clave entre <code>pop()</code> y <code>shift()</code> y sus primos <code>push()</code> y <code>unshift()</code> , es que ninguno de los dos métodos toma parámetros, y cada uno solo permite que una matriz sea modificada por un solo elemento a la vez.
|
||||
Echemos un vistazo:
|
||||
<blockquote>let greetings = ['whats up?', 'hello', 'see ya!'];<br><br>greetings.pop();<br>// now equals ['whats up?', 'hello']<br><br>greetings.shift();<br>// now equals ['hello']</blockquote>
|
||||
También podemos devolver el valor del elemento eliminado con uno de estos métodos:
|
||||
<blockquote>let popped = greetings.pop();<br>// returns 'hello'<br>// greetings now equals []</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Hemos definido una función, <code>popShift</code> , que toma una matriz como argumento y devuelve una nueva matriz. Modifique la función, utilizando <code>pop()</code> y <code>shift()</code> , para eliminar el primer y último elemento de la matriz de argumentos, y asigne los elementos eliminados a sus variables correspondientes, de modo que la matriz devuelta contenga sus valores.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ' <code>popShift(["challenge", "is", "not", "complete"])</code> debe devolver <code>["challenge", "complete"]</code> '
|
||||
testString: 'assert.deepEqual(popShift(["challenge", "is", "not", "complete"]), ["challenge", "complete"], "<code>popShift(["challenge", "is", "not", "complete"])</code> should return <code>["challenge", "complete"]</code>");'
|
||||
- text: La función <code>popShift</code> debería utilizar el método <code>pop()</code>
|
||||
testString: 'assert.notStrictEqual(popShift.toString().search(/\.pop\(/), -1, "The <code>popShift</code> function should utilize the <code>pop()</code> method");'
|
||||
- text: La función <code>popShift</code> debería utilizar el método <code>shift()</code>
|
||||
testString: 'assert.notStrictEqual(popShift.toString().search(/\.shift\(/), -1, "The <code>popShift</code> function should utilize the <code>shift()</code> method");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function popShift(arr) {
|
||||
let popped; // change this line
|
||||
let shifted; // change this line
|
||||
return [shifted, popped];
|
||||
}
|
||||
|
||||
// do not change code below this line
|
||||
console.log(popShift(['challenge', 'is', 'not', 'complete']));
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,65 @@
|
||||
---
|
||||
id: 587d78b2367417b2b2512b10
|
||||
title: Remove Items Using splice()
|
||||
localeTitle: Quitar elementos utilizando empalme ()
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Bien, hemos aprendido cómo eliminar elementos del principio y el final de los arreglos usando <code>shift()</code> y <code>pop()</code> , pero ¿qué pasa si queremos eliminar un elemento de algún lugar en el medio? ¿O eliminar más de un elemento a la vez? Bueno, ahí es donde entra <code>splice()</code> . <code>splice()</code> nos permite hacer precisamente eso: <strong>eliminar cualquier número de elementos consecutivos</strong> de cualquier lugar en una matriz.
|
||||
<code>splice()</code> puede tomar hasta 3 parámetros, pero por ahora, nos enfocaremos solo en los primeros 2. Los primeros dos parámetros de <code>splice()</code> son enteros que representan índices, o posiciones, de la matriz que <code>splice()</code> es siendo llamado. Y recuerde, las matrices tienen <em>un índice de cero</em> , por lo que para indicar el primer elemento de una matriz, usaríamos <code>0</code> . El primer parámetro de <code>splice()</code> representa el índice en la matriz a partir de la cual comenzar a eliminar elementos, mientras que el segundo parámetro indica el número de elementos a eliminar. Por ejemplo:
|
||||
<blockquote>let array = ['today', 'was', 'not', 'so', 'great'];<br><br>array.splice(2, 2);<br>// remove 2 elements beginning with the 3rd element<br>// array now equals ['today', 'was', 'great']</blockquote>
|
||||
<code>splice()</code> no solo modifica la matriz en la que se llama, sino que también devuelve una nueva matriz que contiene el valor de los elementos eliminados:
|
||||
<blockquote>let array = ['I', 'am', 'feeling', 'really', 'happy'];<br><br>let newArray = array.splice(3, 2);<br>// newArray equals ['really', 'happy']</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Hemos definido una función, <code>sumOfTen</code> , que toma una matriz como argumento y devuelve la suma de los elementos de esa matriz. Modifique la función, usando <code>splice()</code> , para que devuelva un valor de <code>10</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>sumOfTen</code> debe devolver 10
|
||||
testString: 'assert.strictEqual(sumOfTen([2, 5, 1, 5, 2, 1]), 10, "<code>sumOfTen</code> should return 10");'
|
||||
- text: La función <code>sumOfTen</code> debe utilizar el método <code>splice()</code>
|
||||
testString: 'assert.notStrictEqual(sumOfTen.toString().search(/\.splice\(/), -1, "The <code>sumOfTen</code> function should utilize the <code>splice()</code> method");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function sumOfTen(arr) {
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
return arr.reduce((a, b) => a + b);
|
||||
}
|
||||
|
||||
// do not change code below this line
|
||||
console.log(sumOfTen([2, 5, 1, 5, 2, 1]));
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d7b7e367417b2b2512b20
|
||||
title: Use an Array to Store a Collection of Data
|
||||
localeTitle: Utilice una matriz para almacenar una colección de datos
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
A continuación se muestra un ejemplo de la implementación más simple de una estructura de datos de matriz. Esto se conoce como una <dfn>matriz unidimensional</dfn> , lo que significa que solo tiene un nivel, o que no tiene ninguna otra matriz anidada dentro de ella. Observe que contiene <dfn>valores booleanos</dfn> , <dfn>cadenas</dfn> y <dfn>números</dfn> , entre otros tipos de datos de JavaScript válidos:
|
||||
<blockquote>let simpleArray = ['one', 2, 'three’, true, false, undefined, null];<br>console.log(simpleArray.length);<br>// logs 7</blockquote>
|
||||
Todas las matrices tienen una propiedad de longitud que, como se muestra arriba, se puede acceder muy fácilmente con la sintaxis <code>Array.length</code> .
|
||||
Una implementación más compleja de una matriz se puede ver a continuación. Esto se conoce como una <dfn>matriz multidimensional</dfn> o una matriz que contiene otras matrices. Tenga en cuenta que esta matriz también contiene <dfn>objetos</dfn> JavaScript, que examinaremos detenidamente en nuestra próxima sección, pero por ahora, todo lo que necesita saber es que las matrices también son capaces de almacenar objetos complejos.
|
||||
<blockquote>let complexArray = [<br> [<br> {<br> one: 1,<br> two: 2<br> },<br> {<br> three: 3,<br> four: 4<br> }<br> ],<br> [<br> {<br> a: "a",<br> b: "b"<br> },<br> {<br> c: "c",<br> d: “d”<br> }<br> ]<br>];</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Hemos definido una variable llamada <code>yourArray</code> . Complete la declaración asignando una matriz de al menos 5 elementos de longitud a la variable <code>yourArray</code> . Su matriz debe contener al menos una <dfn>cadena</dfn> , un <dfn>número</dfn> y un <dfn>booleano</dfn> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: yourArray es una matriz
|
||||
testString: 'assert.strictEqual(Array.isArray(yourArray), true, "yourArray is an array");'
|
||||
- text: <code class = "notranslate"> yourArray </code> tiene al menos 5 elementos
|
||||
testString: 'assert.isAtLeast(yourArray.length, 5, "<code>yourArray</code> is at least 5 elements long");'
|
||||
- text: <code class = "notranslate"> yourArray </code> contiene al menos un <code class = "notranslate"> boolean </code>
|
||||
testString: 'assert(yourArray.filter( el => typeof el === "boolean").length >= 1, "<code>yourArray</code> contains at least one <code>boolean</code>");'
|
||||
- text: <code class = "notranslate"> yourArray </code> contiene al menos un <code class = "notranslate"> number </code>
|
||||
testString: 'assert(yourArray.filter( el => typeof el === "number").length >= 1, "<code>yourArray</code> contains at least one <code>number</code>");'
|
||||
- text: <code class = "notranslate"> yourArray </code> contiene al menos una <code class = "notranslate"> string </code>
|
||||
testString: 'assert(yourArray.filter( el => typeof el === "string").length >= 1, "<code>yourArray</code> contains at least one <code>string</code>");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let yourArray; // change this line
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 587d7b7c367417b2b2512b1b
|
||||
title: Use the delete Keyword to Remove Object Properties
|
||||
localeTitle: Utilice la palabra clave delete para eliminar las propiedades del objeto
|
||||
challengeType: 1
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Ahora ya sabes qué son los objetos y sus características y ventajas básicas. En resumen, son tiendas de valor clave que proporcionan una forma flexible e intuitiva de estructurar los datos <strong><em>y</em></strong> proporcionan un tiempo de búsqueda muy rápido. A lo largo del resto de estos desafíos, describiremos varias operaciones comunes que puede realizar en objetos para que pueda sentirse cómodo aplicando estas estructuras de datos útiles en sus programas.
|
||||
En desafíos anteriores, hemos agregado y modificado los pares clave-valor de un objeto. Aquí veremos cómo podemos <em>eliminar</em> un par clave-valor de un objeto.
|
||||
Repasemos nuestro ejemplo de objeto de <code>foods</code> una última vez. Si quisiéramos eliminar la clave de las <code>apples</code> , podemos eliminarla usando la palabra clave <code>delete</code> así:
|
||||
<blockquote>delete foods.apples;</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use la palabra clave delete para eliminar las teclas de <code>oranges</code> , <code>plums</code> y <code>strawberries</code> del objeto de <code>foods</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'El objeto de <code>foods</code> solo tiene tres claves: <code>apples</code> , <code>grapes</code> y <code>bananas</code> '
|
||||
testString: 'assert(!foods.hasOwnProperty("oranges") && !foods.hasOwnProperty("plums") && !foods.hasOwnProperty("strawberries") && Object.keys(foods).length === 3, "The <code>foods</code> object only has three keys: <code>apples</code>, <code>grapes</code>, and <code>bananas</code>");'
|
||||
- text: 'Las claves de <code>oranges</code> , <code>plums</code> y <code>strawberries</code> se eliminan usando <code>delete</code> '
|
||||
testString: 'assert(code.search(/oranges:/) !== -1 && code.search(/plums:/) !== -1 && code.search(/strawberries:/) !== -1, "The <code>oranges</code>, <code>plums</code>, and <code>strawberries</code> keys are removed using <code>delete</code>");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let foods = {
|
||||
apples: 25,
|
||||
oranges: 32,
|
||||
plums: 28,
|
||||
bananas: 13,
|
||||
grapes: 35,
|
||||
strawberries: 27
|
||||
};
|
||||
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
|
||||
console.log(foods);
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Reference in New Issue
Block a user