Add languages Russian, Arabic, Chinese, Portuguese (#18305)
This commit is contained in:
Beau Carnes
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
09d3eca712
commit
2ca3a2093f
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b40
|
||||
title: Compare Scopes of the var and let Keywords
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 比较var的范围并让关键字
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">使用<code>var</code>关键字声明变量时，它将全局声明，如果在函数内声明，则声明为本地。 <code>let</code>关键字的行为类似，但具有一些额外的功能。在块，语句或表达式中使用<code>let</code>关键字声明变量时，其范围仅限于该块，语句或表达式。例如： <blockquote> var numArray = []; <br> for（var i = 0; i <3; i ++）{ <br> numArray.push（ⅰ）; <br> } <br>的console.log（numArray）; <br> //返回[0,1,2] <br>的console.log（ⅰ）; <br> //返回3 </blockquote>使用<code>var</code>关键字， <code>i</code>被全局声明。因此，当执行<code>i++</code>时，它会更新全局变量。此代码类似于以下内容： <blockquote> var numArray = []; <br> var i; <br> for（i = 0; i <3; i ++）{ <br> numArray.push（ⅰ）; <br> } <br>的console.log（numArray）; <br> //返回[0,1,2] <br>的console.log（ⅰ）; <br> //返回3 </blockquote>如果您要创建一个函数并将其存储以供以后在使用<code>i</code>变量的for循环中使用，则此行为将导致问题。这是因为存储的函数将始终引用更新的全局<code>i</code>变量的值。 <blockquote> var printNumTwo; <br> for（var i = 0; i <3; i ++）{ <br> if（i === 2）{ <br> printNumTwo = function（）{ <br>回归我; <br> }; <br> } <br> } <br>的console.log（printNumTwo（））; <br> //返回3 </blockquote>正如你所看到的， <code>printNumTwo()</code>打印3，而不是2.这是因为分配给该值<code>i</code>进行了更新和<code>printNumTwo()</code>返回全球<code>i</code> ，而不是价值<code>i</code>的作用是在创建for循环的时候了。 <code>let</code>关键字不遵循此行为： <blockquote> '使用严格'; <br>让printNumTwo; <br> for（let i = 0; i <3; i ++）{ <br> if（i === 2）{ <br> printNumTwo = function（）{ <br>回归我; <br> }; <br> } <br> } <br>的console.log（printNumTwo（））; <br> //返回2 <br>的console.log（ⅰ）; <br> //返回“我没有定义” </blockquote> <code>i</code>没有定义，因为它没有在全局范围内声明。它仅在for循环语句中声明。 <code>printNumTwo()</code>返回正确的值，因为循环语句中的<code>let</code>关键字创建了具有唯一值（0,1和2）的三个不同的<code>i</code>变量。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">修复代码，以便<code>i</code>在if语句中声明的是一个单独的变量，而不是<code>i</code>在函数的第一行声明的变量。确保不要在代码中的任何位置使用<code>var</code>关键字。本练习旨在说明<code>var</code>和<code>let</code>关键字如何将范围分配给声明的变量之间的区别。在编写与本练习中使用的函数类似的函数时，通常最好使用不同的变量名来避免混淆。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>var</code>在代码中不存在。
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/var/g),"<code>var</code> does not exist in code.");'
|
||||
- text: 在if语句中声明的变量<code>i</code>应该等于“块范围”。
|
||||
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>应该返回“函数范围”
|
||||
testString: 'assert(checkScope() === "function scope", "<code>checkScope()</code> should return "function scope"");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function checkScope() {
|
||||
"use strict";
|
||||
var i = "function scope";
|
||||
if (true) {
|
||||
i = "block scope";
|
||||
console.log("Block scope i is: ", i);
|
||||
}
|
||||
console.log("Function scope i is: ", i);
|
||||
return i;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,59 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b58
|
||||
title: Create an Export Fallback with export default
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用导出默认值创建导出回退
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">在<code>export</code>课程中，您了解了称为<dfn>命名导出</dfn>的语法。这使您可以使多个函数和变量可用于其他文件。您需要知道另一种<code>export</code>语法，称为<dfn>导出默认值</dfn> 。通常，如果只从文件导出一个值，您将使用此语法。它还用于为文件或模块创建回退值。以下是<code>export default</code>的快速示例： <blockquote> export default function add（x，y）{ <br>返回x + y; <br> } </blockquote>注意：由于<code>export default</code>用于声明模块或文件的回退值，因此每个模块或文件中只能有一个值作为默认导出。此外，您不能将<code>export default</code>用于<code>var</code> ， <code>let</code>或<code>const</code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">以下函数应该是模块的回退值。请添加必要的代码。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 适当使用<code>export</code>回落。
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/export\s+default\s+function\s+subtract\(x,y\)\s+{return\s+x\s-\s+y;}/g), "Proper used of <code>export</code> fallback.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
function subtract(x,y) {return x - y;}
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
window.exports = function(){};
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4e
|
||||
title: Create Strings using Template Literals
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用模板文字创建字符串
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> ES6的一个新功能是<dfn>模板文字</dfn> 。这是一种特殊类型的字符串，可以更轻松地创建复杂字符串。模板文字允许您创建多行字符串并使用字符串插值功能来创建字符串。考虑以下代码： <blockquote> const person = { <br>名称：“Zodiac Hasbro”， <br>年龄：56岁<br> }; <br><br> //具有多行和字符串插值的模板文字<br> const greeting =`您好，我的名字是$ {person.name}！ <br>我是$ {person.age}岁。 <br><br>的console.log（问候）; //打印<br> //你好，我的名字是Zodiac Hasbro！ <br> //我今年56岁<br></blockquote>那里发生了很多事情。首先，例如使用反引号（ <code>`</code> ），而不是引号（ <code>'</code>或<code>"</code> ），换行字符串。其次，请注意，该字符串是多线，无论是在代码和输出。这节省了插入<code>\n</code>串内。上面使用的<code>${variable}</code>语法是占位符。基本上，您不必再使用<code>+</code>运算符连接。要将变量添加到字符串，只需将变量放在模板字符串中并用<code>${</code>包装它<code>}</code>同样，您可以在您的字符串表达式的其他文字，例如<code>${a + b}</code>这个新创建的字符串的方式为您提供了更大的灵活性，以创建强大的字符串。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用带有反引号的模板文字语法来显示<code>result</code>对象的<code>failure</code>数组的每个条目。每个条目都应该包含在一个带有class属性<code>text-warning</code>的<code>li</code>元素中，并列在<code>resultDisplayArray</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>resultDisplayArray</code>是一个包含<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>是所需的输出。
|
||||
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: 使用了模板字符串
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/`.*`/g), "Template strings were not used");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const result = {
|
||||
success: ["max-length", "no-amd", "prefer-arrow-functions"],
|
||||
failure: ["no-var", "var-on-top", "linebreak"],
|
||||
skipped: ["id-blacklist", "no-dup-keys"]
|
||||
};
|
||||
function makeList(arr) {
|
||||
"use strict";
|
||||
|
||||
// change code below this line
|
||||
const resultDisplayArray = null;
|
||||
// change code above this line
|
||||
|
||||
return resultDisplayArray;
|
||||
}
|
||||
/**
|
||||
* makeList(result.failure) should return:
|
||||
* [ `<li class="text-warning">no-var</li>`,
|
||||
* `<li class="text-warning">var-on-top</li>`,
|
||||
* `<li class="text-warning">linebreak</li>` ]
|
||||
**/
|
||||
const resultDisplayArray = makeList(result.failure);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b41
|
||||
title: Declare a Read-Only Variable with the const Keyword
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用const关键字声明只读变量
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>let</code>不是声明变量的唯一新方法。在ES6中，您还可以使用<code>const</code>关键字声明变量。 <code>const</code>拥有所有的真棒功能， <code>let</code>具有，与额外的奖励，使用声明的变量<code>const</code>是只读的。它们是一个常量值，这意味着一旦变量被赋值为<code>const</code> ，就无法重新赋值。 <blockquote> “严格使用” <br> const FAV_PET =“Cats”; <br> FAV_PET =“狗”; //返回错误</blockquote>如您所见，尝试重新分配使用<code>const</code>声明的变量将引发错误。您应该始终使用<code>const</code>关键字命名您不想重新分配的变量。当您意外尝试重新分配一个旨在保持不变的变量时，这会有所帮助。命名常量时的常见做法是使用全部大写字母，单词用下划线分隔。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">更改代码，以便使用<code>let</code>或<code>const</code>声明所有变量。如果希望变量更改，请使用<code>let</code> ;如果希望变量保持不变，请使用<code>const</code> 。此外，重命名用<code>const</code>声明的变量以符合常规做法，这意味着常量应该全部大写。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>var</code>在您的代码中不存在。
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/var/g),"<code>var</code> does not exist in your code.");'
|
||||
- text: <code>SENTENCE</code>应该是用<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>应该以<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>以打印<code>SENTENCE</code>变量。
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/console\.log\(\s*SENTENCE\s*\)\s*;?/g), "<code>console.log</code> should be adjusted to print the variable <code>SENTENCE</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function printManyTimes(str) {
|
||||
"use strict";
|
||||
|
||||
// change code below this line
|
||||
|
||||
var sentence = str + " is cool!";
|
||||
for(var i = 0; i < str.length; i+=2) {
|
||||
console.log(sentence);
|
||||
}
|
||||
|
||||
// change code above this line
|
||||
|
||||
}
|
||||
printManyTimes("freeCodeCamp");
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b3f
|
||||
title: Explore Differences Between the var and let Keywords
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 探索var和let关键字之间的差异
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">使用<code>var</code>关键字声明变量的最大问题之一是您可以在没有错误的情况下覆盖变量声明。 <blockquote> var camper ='詹姆斯'; <br> var camper ='大卫'; <br>的console.log（野营车）; <br> //记录'大卫' </blockquote>正如您在上面的代码中看到的那样， <code>camper</code>变量最初被声明为<code>James</code> ，然后被重写为<code>David</code> 。在小型应用程序中，您可能不会遇到此类问题，但是当您的代码变大时，您可能会意外覆盖您不打算覆盖的变量。因为这种行为不会引发错误，所以搜索和修复错误变得更加困难。 <br>在ES6中引入了一个名为<code>let</code>的新关键字，用<code>var</code>关键字解决了这个潜在的问题。如果要在上面代码的变量声明中用<code>let</code>替换<code>var</code> ，结果将是一个错误。 <blockquote>让露营者='詹姆斯'; <br>让露营者='大卫'; //抛出错误</blockquote>您可以在浏览器的控制台中看到此错误。因此与<code>var</code>不同，使用<code>let</code> ，具有相同名称的变量只能声明一次。注意<code>"use strict"</code> 。这启用了严格模式，可以捕获常见的编码错误和“不安全”操作。例如： <blockquote> “严格使用”; <br> x = 3.14; //因为未声明x而抛出错误</blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">更新代码，使其仅使用<code>let</code>关键字。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>var</code>在代码中不存在。
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/var/g),"<code>var</code> does not exist in code.");'
|
||||
- text: <code>catName</code>应该是<code>Oliver</code> 。
|
||||
testString: 'assert(catName === "Oliver", "<code>catName</code> should be <code>Oliver</code>.");'
|
||||
- text: <code>quote</code>应该是<code>"Oliver says Meow!"</code>
|
||||
testString: 'assert(quote === "Oliver says Meow!", "<code>quote</code> should be <code>"Oliver says Meow!"</code>");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var catName;
|
||||
var quote;
|
||||
function catTalk() {
|
||||
"use strict";
|
||||
|
||||
catName = "Oliver";
|
||||
quote = catName + " says Meow!";
|
||||
|
||||
}
|
||||
catTalk();
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d7b8d367417b2b2512b59
|
||||
title: Import a Default Export
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 导入默认导出
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">在上一次挑战中，您了解了<code>export default</code>及其用途。请务必注意，要导入默认导出，您需要使用不同的<code>import</code>语法。在下面的示例中，我们有一个函数<code>add</code> ，它是文件的默认导出<code>"math_functions"</code> 。以下是如何导入它： <blockquote>从“math_functions”导入添加; <br>添加（5,4）; //将返回9 </blockquote>语法在一个关键位置有所不同 - 导入的值<code>add</code>不会被花括号<code>{}</code>包围。与导出值不同，导入默认导出的主要方法是在<code>import</code>后简单地写入值的名称。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在下面的代码中，请从文件<code>"math_functions"</code>导入默认导出， <code>subtract</code> ，该文件位于与此文件相同的目录中。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 正确导入<code>export default</code>方法。
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/import\s+subtract\s+from\s+"math_functions"/g), "Properly imports <code>export default</code> method.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
subtract(7,4);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
window.require = function(str) {
|
||||
if (str === 'math_functions') {
|
||||
return function(a, b) {
|
||||
return a - b;
|
||||
}}};
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b42
|
||||
title: Mutate an Array Declared with const
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 改变用const声明的数组
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>const</code>声明在现代JavaScript中有许多用例。一些开发人员更喜欢默认使用<code>const</code>分配所有变量，除非他们知道需要重新分配值。只有在这种情况下，他们才会使用<code>let</code> 。但是，重要的是要理解使用<code>const</code>分配给变量的对象（包括数组和函数）仍然是可变的。使用<code>const</code>声明仅阻止重新分配变量标识符。 <blockquote> “严格使用”; <br> const s = [5,6,7]; <br> s = [1,2,3]; //抛出错误，尝试分配const <br> s [2] = 45; //就像使用var或let声明的数组一样工作<br>的console.log（一个或多个）; //返回[5,6,45] </blockquote>如您所见，您可以改变对象<code>[5, 6, 7]</code>本身，变量<code>s</code>仍将指向更改的数组<code>[5, 6, 45]</code> 。与所有数组一样， <code>s</code>中的数组元素是可变的，但由于使用了<code>const</code> ，因此不能使用变量标识符<code>s</code>使用赋值运算符指向不同的数组。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">数组声明为<code>const s = [5, 7, 2]</code> 。使用各种元素分配将数组更改为<code>[2, 5, 7]</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 不要替换<code>const</code>关键字。
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const/g), "Do not replace <code>const</code> keyword.");'
|
||||
- text: <code>s</code>应该是一个常量变量（使用<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: 不要更改原始数组声明。
|
||||
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>应该等于<code>[2, 5, 7]</code> 。'
|
||||
testString: 'assert.deepEqual(s, [2, 5, 7], "<code>s</code> should be equal to <code>[2, 5, 7]</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const s = [5, 7, 2];
|
||||
function editInPlace() {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
|
||||
// s = [2, 5, 7]; <- this is invalid
|
||||
|
||||
// change code above this line
|
||||
}
|
||||
editInPlace();
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 598f48a36c8c40764b4e52b3
|
||||
title: Prevent Object Mutation
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 防止对象突变
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">正如之前的挑战所示， <code>const</code>声明本身并不能真正保护您的数据免受突变。为确保您的数据不会发生变化，JavaScript提供了一个<code>Object.freeze</code>函数来防止数据突变。对象冻结后，您将无法再从中添加，更新或删除属性。任何更改对象的尝试都将被拒绝而不会出现错误。 <blockquote>让obj = { <br>名称：“FreeCodeCamp” <br>点评：“真棒” <br> }; <br> Object.freeze（OBJ）; <br> obj.review =“坏”; //将被忽略。不允许变异<br> obj.newProp =“测试”; //将被忽略。不允许变异<br>的console.log（OBJ）; <br> // {name：“FreeCodeCamp”，评论：“很棒”} </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在这个挑战中，您将使用<code>Object.freeze</code>来防止数学常量发生变化。您需要冻结<code>MATH_CONSTANTS</code>对象，以便没有人能够更改<code>PI</code>的值，添加或删除属性。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 不要替换<code>const</code>关键字。
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const/g), "Do not replace <code>const</code> keyword.");'
|
||||
- text: <code>MATH_CONSTANTS</code>应该是一个常量变量（使用<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: 请勿更改原始<code>MATH_CONSTANTS</code> 。
|
||||
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>等于<code>3.14</code> 。
|
||||
testString: 'assert(PI === 3.14, "<code>PI</code> equals <code>3.14</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function freezeObj() {
|
||||
"use strict";
|
||||
const MATH_CONSTANTS = {
|
||||
PI: 3.14
|
||||
};
|
||||
// change code below this line
|
||||
|
||||
|
||||
// change code above this line
|
||||
try {
|
||||
MATH_CONSTANTS.PI = 99;
|
||||
} catch( ex ) {
|
||||
console.log(ex);
|
||||
}
|
||||
return MATH_CONSTANTS.PI;
|
||||
}
|
||||
const PI = freezeObj();
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,60 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b46
|
||||
title: Set Default Parameters for Your Functions
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 设置函数的默认参数
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">为了帮助我们创建更灵活的函数，ES6引入了函数的<dfn>默认参数</dfn> 。看看这段代码： <blockquote> function greeting（name =“Anonymous”）{ <br>返回“你好”+名字; <br> } <br>的console.log（问候语（ “约翰”））; // 你好约翰<br>的console.log（问候（））; //你好匿名</blockquote>默认参数在未指定参数时启动（未定义）。正如您在上面的示例中所看到的，当您未为参数提供值时，参数<code>name</code>将接收其默认值<code>"Anonymous"</code> 。您可以根据需要为任意数量的参数添加默认值。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">修改函数<code>increment</code>加入默认参数，这样它会加1 <code>number</code> ，如果<code>value</code>未指定。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>increment(5, 2)</code>应为<code>7</code> 。'
|
||||
testString: 'assert(increment(5, 2) === 7, "The result of <code>increment(5, 2)</code> should be <code>7</code>.");'
|
||||
- text: <code>increment(5)</code>的结果应为<code>6</code> 。
|
||||
testString: 'assert(increment(5) === 6, "The result of <code>increment(5)</code> should be <code>6</code>.");'
|
||||
- text: 默认参数<code>1</code>用于<code>value</code> 。
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/value\s*=\s*1/g), "default parameter <code>1</code> was used for <code>value</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const increment = (function() {
|
||||
"use strict";
|
||||
return function increment(number, value) {
|
||||
return number + value;
|
||||
};
|
||||
})();
|
||||
console.log(increment(5, 2)); // returns 7
|
||||
console.log(increment(5)); // returns 6
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b55
|
||||
title: Understand the Differences Between import and require
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 理解import和require之间的差异
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">过去，函数<code>require()</code>将用于导入外部文件和模块中的函数和代码。虽然方便，但这会带来一个问题：某些文件和模块相当大，您可能只需要来自这些外部资源的某些代码。 ES6为我们提供了一个非常方便的工具，称为<dfn>import</dfn> 。有了它，我们可以选择加载到给定文件中的模块或文件的哪些部分，从而节省时间和内存。请考虑以下示例。想象一下<code>math_array_functions</code>有大约20个函数，但我在当前文件中只需要一个<code>countItems</code> 。旧的<code>require()</code>方法会迫使我引入所有20个函数。使用这种新的<code>import</code>语法，我可以引入所需的功能，如下所示： <blockquote>从“math_array_functions”导入{countItems} </blockquote>上面代码的描述： <blockquote>从“file_path_goes_here”导入{function} <br> //我们也可以用同样的方式导入变量！ </blockquote>有几种方法可以编写<code>import</code>语句，但上面是一个非常常见的用例。 <strong>注意</strong> <br>花括号内的函数周围的空格是最佳实践 - 它使得读取<code>import</code>语句更容易。 <strong>注意</strong> <br>本节中的课程处理非浏览器功能。 <code>import</code>以及我们在其余课程中介绍的语句将无法直接在浏览器上运行。但是，我们可以使用各种工具来创建代码，使其在浏览器中工作。 <strong>注意</strong> <br>在大多数情况下，文件路径在它之前需要<code>./</code> ;否则，node将首先尝试将其作为依赖项加载到<code>node_modules</code>目录中。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">添加适当的<code>import</code>语句，允许当前文件使用<code>capitalizeString</code>函数。此函数所在的文件称为<code>"string_functions"</code> ，它与当前文件位于同一目录中。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 有效的<code>import</code>声明
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/import\s+\{\s*capitalizeString\s*\}\s+from\s+("|")string_functions\1/g), "valid <code>import</code> statement");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
capitalizeString("hello!");
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
window.require = function (str) {
|
||||
if (str === 'string_functions') {
|
||||
return {
|
||||
capitalizeString: str => str.toUpperCase()
|
||||
}}};
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b57
|
||||
title: Use * to Import Everything from a File
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用*从文件导入所有内容
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">假设您有一个文件要将其所有内容导入当前文件。这可以使用<dfn>import *</dfn>语法完成。这是一个示例，其中名为<code>"math_functions"</code>的文件的内容被导入到同一目录中的文件中： <blockquote>从“math_functions”导入*作为myMathModule; <br> myMathModule.add（2,3）; <br> myMathModule.subtract（5,3）; </blockquote>并打破代码： <blockquote>从“file_path_goes_here”导入* as object_with_name_of_your_choice <br> object_with_name_of_your_choice.imported_function </blockquote>您可以使用<code>import * as</code>后面的任何名称<code>import * as</code>语句的一部分。为了使用此方法，它需要一个接收导入值的对象。从这里，您将使用点表示法来调用导入的值。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">下面的代码需要在导入的同一目录中找到的文件<code>"capitalize_strings"</code>的内容。使用提供的对象将相应的<code>import *</code>语句添加到文件的顶部。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 正确使用<code>import * as</code>语法。
|
||||
testString: 'assert(code.match(/import\s+\*\s+as\s+[a-zA-Z0-9_$]+\s+from\s*"\s*capitalize_strings\s*"\s*;/gi), "Properly uses <code>import * as</code> syntax.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
window.require = function(str) {
|
||||
if (str === 'capitalize_strings') {
|
||||
return {
|
||||
capitalize: str => str.toUpperCase(),
|
||||
lowercase: str => str.toLowerCase()
|
||||
}}};
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,60 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b43
|
||||
title: Use Arrow Functions to Write Concise Anonymous Functions
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用箭头函数编写简明的匿名函数
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">在JavaScript中，我们通常不需要命名我们的函数，特别是在将函数作为参数传递给另一个函数时。相反，我们创建内联函数。我们不需要命名这些函数，因为我们不会在其他任何地方重用它们。为此，我们经常使用以下语法： <blockquote> const myFunc = function（）{ <br> const myVar =“value”; <br>返回myVar; <br> } </blockquote> ES6为我们提供了语法糖，而不必以这种方式编写匿名函数。相反，您可以使用<strong>箭头函数语法</strong> ： <blockquote> const myFunc =（）=> { <br> const myVar =“value”; <br>返回myVar; <br> } </blockquote>当没有函数体，并且只有返回值时，箭头函数语法允许您省略关键字<code>return</code>以及代码周围的括号。这有助于将较小的函数简化为单行语句： <blockquote> const myFunc =（）=>“value” </blockquote>默认情况下，此代码仍将返回<code>value</code> 。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">重写分配给变量<code>magic</code>的函数，该函数返回一个新的<code>Date()</code>以使用箭头函数语法。还要确保使用关键字<code>var</code>定义任何内容。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 用户确实替换了<code>var</code>关键字。
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/var/g), "User did replace <code>var</code> keyword.");'
|
||||
- text: <code>magic</code>应该是一个常量变量（通过使用<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>是一种<code>function</code> 。
|
||||
testString: 'assert(typeof magic === "function", "<code>magic</code> is a <code>function</code>.");'
|
||||
- text: <code>magic()</code>返回正确的日期。
|
||||
testString: 'assert(magic().getDate() == new Date().getDate(), "<code>magic()</code> returns correct date.");'
|
||||
- text: <code>function</code>关键字未使用。
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/function/g), "<code>function</code> keyword was not used.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var magic = function() {
|
||||
"use strict";
|
||||
return new Date();
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7b8b367417b2b2512b53
|
||||
title: Use class Syntax to Define a Constructor Function
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用类语法定义构造函数
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> ES6使用关键字<dfn>class</dfn>提供了一种帮助创建对象的新语法。需要注意的是， <code>class</code>语法只是一种语法，而不是面向对象范例的完整的基于类的实现，不像Java，Python或Ruby等语言。在ES5中，我们通常定义一个构造函数function，并使用<code>new</code>关键字实例化一个对象。 <blockquote> var SpaceShuttle = function（targetPlanet）{ <br> this.targetPlanet = targetPlanet; <br> } <br> var zeus = new SpaceShuttle（'Jupiter'）; </blockquote>类语法只是替换构造函数创建： <blockquote> class SpaceShuttle { <br>构造（targetPlanet）{ <br> this.targetPlanet = targetPlanet; <br> } <br> } <br> const zeus = new SpaceShuttle（'Jupiter'）; </blockquote>请注意， <code>class</code>关键字声明了一个新函数，并添加了一个构造函数，该函数将在调用<code>new</code>调用 - 以创建新对象。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>class</code>关键字并编写适当的构造函数来创建<code>Vegetable</code>类。使用<code>Vegetable</code>可以创建具有属性<code>name</code>的蔬菜对象，以传递给构造函数。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>Vegetable</code>应该是一个<code>class</code>具有限定<code>constructor</code>方法。
|
||||
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: <code>class</code>关键字。
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/class/g),"<code>class</code> keyword was used.");'
|
||||
- text: <code>Vegetable</code>可以实例化。
|
||||
testString: 'assert(() => {const a = new Vegetable("apple"); return typeof a === "object";},"<code>Vegetable</code> can be instantiated.");'
|
||||
- text: <code>carrot.name</code>应该返回<code>carrot</code> 。
|
||||
testString: 'assert(carrot.name=="carrot","<code>carrot.name</code> should return <code>carrot</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function makeClass() {
|
||||
"use strict";
|
||||
/* Alter code below this line */
|
||||
|
||||
/* Alter code above this line */
|
||||
return Vegetable;
|
||||
}
|
||||
const Vegetable = makeClass();
|
||||
const carrot = new Vegetable('carrot');
|
||||
console.log(carrot.name); // => should be 'carrot'
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,61 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b4b
|
||||
title: Use Destructuring Assignment to Assign Variables from Arrays
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用解构分配从数组中分配变量
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> ES6使解构数组像解构对象一样简单。扩展运算符和数组解构之间的一个关键区别是扩展运算符将数组的所有内容解包为逗号分隔列表。因此，您无法选择或选择要分配给变量的元素。对阵列进行解构可以让我们做到这一点： <blockquote> const [a，b] = [1,2,3,4,5,6]; <br> console.log（a，b）; // 1,2 </blockquote>变量<code>a</code>被赋予数组的第一个值，而<code>b</code>被赋予数组的第二个值。我们还可以通过使用逗号来访问所需索引，从而在数组中的任何索引处访问该值： <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">使用解构赋值来交换<code>a</code>和<code>b</code>的值，以便<code>a</code>接收存储在<code>b</code>的值，并且<code>b</code>接收存储在<code>a</code>的值。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 交换后<code>a</code>值应为6。
|
||||
testString: 'assert(a === 6, "Value of <code>a</code> should be 6, after swapping.");'
|
||||
- text: 交换后<code>b</code>值应为8。
|
||||
testString: 'assert(b === 8, "Value of <code>b</code> should be 8, after swapping.");'
|
||||
- text: 使用数组解构来交换a和b。
|
||||
testString: '// assert(/\[\s*(\w)\s*,\s*(\w)\s*\]\s*=\s*\[\s*\2\s*,\s*\1\s*\]/g.test(code), "Use array destructuring to swap a and b.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let a = 8, b = 6;
|
||||
(() => {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
})();
|
||||
console.log(a); // should be 6
|
||||
console.log(b); // should be 8
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b4a
|
||||
title: Use Destructuring Assignment to Assign Variables from Nested Objects
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用解构分配从嵌套对象分配变量
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">我们可以类似地将<em>嵌套</em>对象解构为变量。请考虑以下代码： <blockquote> const a = { <br>开始：{x：5，y：6}， <br>结束：{x：6，y：-9} <br> }; <br> const {start：{x：startX，y：startY}} = a; <br> console.log（startX，startY）; // 5,6 </blockquote>在上面的示例中，变量<code>start</code>被赋予<code>a.start</code>的值，该值也是一个对象。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">用解构赋值来获得<code>max</code>的<code>forecast.tomorrow</code>并将其分配给<code>maxOfTomorrow</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>maxOfTomorrow</code>等于<code>84.6</code>
|
||||
testString: 'assert(getMaxOfTmrw(LOCAL_FORECAST) === 84.6, "<code>maxOfTomorrow</code> equals <code>84.6</code>");'
|
||||
- text: 使用嵌套解构
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/\{\s*tomorrow\s*:\s*\{\s*max\s*:\s*maxOfTomorrow\s*\}\s*\}\s*=\s*forecast/g),"nested destructuring was used");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const LOCAL_FORECAST = {
|
||||
today: { min: 72, max: 83 },
|
||||
tomorrow: { min: 73.3, max: 84.6 }
|
||||
};
|
||||
|
||||
function getMaxOfTmrw(forecast) {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
const maxOfTomorrow = undefined; // change this line
|
||||
// change code above this line
|
||||
return maxOfTomorrow;
|
||||
}
|
||||
|
||||
console.log(getMaxOfTmrw(LOCAL_FORECAST)); // should be 84.6
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b49
|
||||
title: Use Destructuring Assignment to Assign Variables from Objects
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用解构分配从对象分配变量
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">我们之前看到扩展运算符如何有效地扩展或解包数组的内容。我们也可以用对象做类似的事情。 <dfn>解构赋值</dfn>是一种特殊的语法，用于将直接从对象获取的值整齐地分配给变量。请考虑以下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>这是与ES6解构语法相同的赋值语句： <blockquote> const {x，y，z} =体素; // x = 3.6，y = 7.4，z = 6.54 </blockquote>相反，如果你想将<code>voxel.x</code>的值存储到<code>a</code> ，将<code>voxel.y</code>到<code>b</code> ，将<code>voxel.z</code>到<code>c</code> ，那么你也有这种自由。 <blockquote> const {x：a，y：b，z：c} =体素// a = 3.6，b = 7.4，c = 6.54 </blockquote>您可以将其读作“获取字段<code>x</code>并将值复制到<code>a</code>中”，依此类推。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用解构从输入对象<code>AVG_TEMPERATURES</code>获得明天的平均温度，并在<code>tomorrow</code>将关键值赋值给<code>tempOfTomorrow</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>getTempOfTmrw(AVG_TEMPERATURES)</code>应为<code>79</code>
|
||||
testString: 'assert(getTempOfTmrw(AVG_TEMPERATURES) === 79, "<code>getTempOfTmrw(AVG_TEMPERATURES)</code> should be <code>79</code>");'
|
||||
- text: 使用了重新分配的解构
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/\{\s*tomorrow\s*:\s*tempOfTomorrow\s*}\s*=\s*avgTemperatures/g),"destructuring with reassignment was used");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const AVG_TEMPERATURES = {
|
||||
today: 77.5,
|
||||
tomorrow: 79
|
||||
};
|
||||
|
||||
function getTempOfTmrw(avgTemperatures) {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
const tempOfTomorrow = undefined; // change this line
|
||||
// change code above this line
|
||||
return tempOfTomorrow;
|
||||
}
|
||||
|
||||
console.log(getTempOfTmrw(AVG_TEMPERATURES)); // should be 79
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4d
|
||||
title: Use Destructuring Assignment to Pass an Object as a Function's Parameters
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用解构分配将对象作为函数的参数传递
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">在某些情况下，您可以在函数参数本身中对对象进行解构。考虑以下代码： <blockquote> const profileUpdate =（profileData）=> { <br> const {name，age，nationality，location} = profileData; <br> //用这些变量做点什么<br> } </blockquote>这有效地破坏了发送到函数中的对象。这也可以就地完成： <blockquote> const profileUpdate =（{name，age，nationality，location}）=> { <br> / *用这些字段做某事* / <br> } </blockquote>这将删除一些额外的行，使我们的代码看起来整洁。这具有额外的好处，即不必操纵函数中的整个对象;只有所需的字段才会复制到函数内部。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在函数<code>half</code>的参数内使用解构赋值，仅在函数内发送<code>max</code>和<code>min</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>stats</code>应该是一个<code>object</code> 。
|
||||
testString: 'assert(typeof stats === "object", "<code>stats</code> should be an <code>object</code>.");'
|
||||
- text: <code>half(stats)</code>应为<code>28.015</code>
|
||||
testString: 'assert(half(stats) === 28.015, "<code>half(stats)</code> should be <code>28.015</code>");'
|
||||
- text: 使用了解构。
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/\(\s*\{\s*\w+\s*,\s*\w+\s*\}\s*\)/g), "Destructuring was used.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const stats = {
|
||||
max: 56.78,
|
||||
standard_deviation: 4.34,
|
||||
median: 34.54,
|
||||
mode: 23.87,
|
||||
min: -0.75,
|
||||
average: 35.85
|
||||
};
|
||||
const half = (function() {
|
||||
"use strict"; // do not change this line
|
||||
|
||||
// change code below this line
|
||||
return function half(stats) {
|
||||
// use function argument destructuring
|
||||
return (stats.max + stats.min) / 2.0;
|
||||
};
|
||||
// change code above this line
|
||||
|
||||
})();
|
||||
console.log(stats); // should be object
|
||||
console.log(half(stats)); // should be 28.015
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4c
|
||||
title: Use Destructuring Assignment with the Rest Operator to Reassign Array Elements
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用与Rest运算符的Destructuring Assignment重新分配数组元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">在某些涉及数组解构的情况下，我们可能希望将其余元素收集到一个单独的数组中。结果类似于<code>Array.prototype.slice()</code> ，如下所示： <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>变量<code>a</code>和<code>b</code>从数组中获取第一个和第二个值。之后，由于rest操作符的存在， <code>arr</code>以数组的形式获取其余的值。 rest元素仅作为列表中的最后一个变量正常工作。在中，您不能使用rest运算符来捕获一个子数组，该子数组会遗漏原始数组的最后一个元素。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用与rest运算符的解构赋值来执行有效的<code>Array.prototype.slice()</code>以便<code>arr</code>是原始数组<code>source</code>的子数组，省略前两个元素。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>arr</code>应为<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: 应该使用解构。
|
||||
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> 。
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/slice/g), "<code>Array.slice()</code> should not be used.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const source = [1,2,3,4,5,6,7,8,9,10];
|
||||
function removeFirstTwo(list) {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
arr = list; // change this
|
||||
// change code above this line
|
||||
return arr;
|
||||
}
|
||||
const arr = removeFirstTwo(source);
|
||||
console.log(arr); // should be [3,4,5,6,7,8,9,10]
|
||||
console.log(source); // should be [1,2,3,4,5,6,7,8,9,10];
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b56
|
||||
title: Use export to Reuse a Code Block
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用export重用代码块
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">在之前的挑战中，您了解了<code>import</code>以及如何利用它从大型文件导入少量代码。但是，为了使其工作，我们必须使用<code>import</code>一个语句，称为<dfn>导出</dfn> 。当我们想要一些代码 - 一个函数或一个变量 - 可以在另一个文件中使用时，我们必须将其导出才能将其导入另一个文件。与<code>import</code>一样， <code>export</code>是非浏览器功能。以下是我们称为<dfn>命名导出的内容</dfn> 。有了这个，我们可以使用您在上一课中学到的<code>import</code>语法将我们导出的任何代码导入到另一个文件中。这是一个例子： <blockquote> const capitalizeString =（string）=> { <br> return string.charAt（0）.toUpperCase（）+ string.slice（1）; <br> } <br> export {capitalizeString} //如何导出函数。 <br> export const foo =“bar”; //如何导出变量</blockquote>或者，如果您想将所有<code>export</code>语句压缩成一行，则可以采用以下方法： <blockquote> const capitalizeString =（string）=> { <br> return string.charAt（0）.toUpperCase（）+ string.slice（1）; <br> } <br> const foo =“bar”; <br> export {capitalizeString，foo} </blockquote>两种方法都是完全可以接受的。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">下面是我想让其他文件使用的两个变量。利用我演示<code>export</code>的第一种方式，导出两个变量。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>foo</code>被导出了。
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/export\s+const\s+foo\s*=\s*"bar"/g), "<code>foo</code> is exported.");'
|
||||
- text: <code>bar</code>出口。
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/export\s+const\s+bar\s*=\s*"foo"/g), "<code>bar</code> is exported.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
const foo = "bar";
|
||||
const bar = "foo";
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
window.exports = function(){};
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b54
|
||||
title: Use getters and setters to Control Access to an Object
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用getter和setter来控制对象的访问
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以从对象获取值，并在对象中设置属性的值。这些通常被称为<dfn>getter</dfn>和<dfn>setter</dfn> 。 Getter函数旨在简单地将对象的私有变量的值返回（获取）给用户，而无需用户直接访问私有变量。 Setter函数用于根据传递给setter函数的值修改（设置）对象私有变量的值。此更改可能涉及计算，甚至完全覆盖先前的值。 <blockquote> class Book { <br>构造函数（作者）{ <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）; //匿名<br> lol.writer ='wut'; <br>的console.log（lol.writer）; //哇</blockquote>注意我们用来调用getter和setter的语法 - 就好像它们甚至不是函数一样。 Getter和setter很重要，因为它们隐藏了内部实现细节。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>class</code>关键字创建Thermostat类。构造函数接受华氏温度。现在在类中创建<code>getter</code>和<code>setter</code> ，以获得摄氏温度。请记住， <code>C = 5/9 * (F - 32)</code>和<code>F = C * 9.0 / 5 + 32</code> ，其中F是华氏温标的温度值，C是摄氏温度相同温度的值注意当你实现这一点，你将在一个等级中跟踪班级内的温度 - 华氏温度或摄氏温度。这是getter或setter的强大功能 - 您正在为另一个用户创建一个API，无论您追踪哪个用户，都可以获得正确的结果。换句话说，您正在从使用者那里抽象出实现细节。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>Thermostat</code>应该是一个<code>class</code>具有限定<code>constructor</code>方法。
|
||||
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: <code>class</code>关键字。
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/class/g),"<code>class</code> keyword was used.");'
|
||||
- text: <code>Thermostat</code>可以实例化。
|
||||
testString: 'assert(() => {const t = new Thermostat(32); return typeof t === "object" && t.temperature === 0;}, "<code>Thermostat</code> can be instantiated.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function makeClass() {
|
||||
"use strict";
|
||||
/* Alter code below this line */
|
||||
|
||||
/* Alter code above this line */
|
||||
return Thermostat;
|
||||
}
|
||||
const Thermostat = makeClass();
|
||||
const thermos = new Thermostat(76); // setting in Fahrenheit scale
|
||||
let temp = thermos.temperature; // 24.44 in C
|
||||
thermos.temperature = 26;
|
||||
temp = thermos.temperature; // 26 in C
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b47
|
||||
title: Use the Rest Operator with Function Parameters
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 将Rest运算符与函数参数一起使用
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">为了帮助我们创建更灵活的函数，ES6引入了函数参数的<dfn>rest运算符</dfn> 。使用rest运算符，您可以创建带有可变数量参数的函数。这些参数存储在一个数组中，以后可以从函数内部访问。看看这段代码： <blockquote> function howMany（... args）{ <br>返回“你已经通过”+ args.length +“arguments。”; <br> } <br> console.log（howMany（0,1,2））; //你已经传递了3个参数<br> console.log（howMany（“string”，null，[1,2,3]，{}））; //你已经传递了4个参数。 </blockquote>其余运算符无需检查<code>args</code>数组，并允许我们在<code>args</code>数组上应用<code>map()</code> ， <code>filter()</code>和<code>reduce()</code> 。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">修改函数<code>sum</code> ，使其使用rest运算符，并以相同的方式使用任意数量的参数。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>sum(0,1,2)</code>的结果应为3'
|
||||
testString: 'assert(sum(0,1,2) === 3, "The result of <code>sum(0,1,2)</code> should be 3");'
|
||||
- text: '<code>sum(1,2,3,4)</code>的结果应为10'
|
||||
testString: 'assert(sum(1,2,3,4) === 10, "The result of <code>sum(1,2,3,4)</code> should be 10");'
|
||||
- text: <code>sum(5)</code>的结果应为5
|
||||
testString: 'assert(sum(5) === 5, "The result of <code>sum(5)</code> should be 5");'
|
||||
- text: <code>sum()</code>的结果应为0
|
||||
testString: 'assert(sum() === 0, "The result of <code>sum()</code> should be 0");'
|
||||
- text: <code>sum</code>函数在<code>args</code>参数上使用<code>...</code> spread运算符。
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/function\s+sum\s*\(\s*...args\s*\)\s*{/g), "The <code>sum</code> function uses the <code>...</code> spread operator on the <code>args</code> parameter.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const sum = (function() {
|
||||
"use strict";
|
||||
return function sum(x, y, z) {
|
||||
const args = [ x, y, z ];
|
||||
return args.reduce((a, b) => a + b, 0);
|
||||
};
|
||||
})();
|
||||
console.log(sum(1, 2, 3)); // 6
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,59 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b48
|
||||
title: Use the Spread Operator to Evaluate Arrays In-Place
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用Spread运算符来就地评估数组
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> ES6引入了<dfn>扩展运算符</dfn> ，它允许我们在需要多个参数或元素的位置扩展数组和其他表达式。下面的ES5代码使用<code>apply()</code>来计算数组中的最大值： <blockquote> var arr = [6,89,3,45]; <br> var maximus = Math.max.apply（null，arr）; //返回89 </blockquote>我们必须使用<code>Math.max.apply(null, arr)</code>因为<code>Math.max(arr)</code>返回<code>NaN</code> 。 <code>Math.max()</code>期望以逗号分隔的参数，但不是数组。扩展运算符使这种语法更易于阅读和维护。 <blockquote> const arr = [6,89,3,45]; <br> const maximus = Math.max（... arr）; //返回89 </blockquote> <code>...arr</code>返回一个解压缩的数组。换句话说，它<em>传播</em>阵列。但是，扩展运算符只能在就地工作，就像在函数的参数或数组文字中一样。以下代码不起作用： <blockquote> const spreaded = ... arr; //将抛出语法错误</blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用spread运算符将<code>arr1</code>所有内容复制到另一个数组<code>arr2</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>arr2</code>是<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>传播运算符用于复制<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>arr1</code>时， <code>arr2</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,62 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b44
|
||||
title: Write Arrow Functions with Parameters
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 用参数写箭头函数
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">就像普通函数一样，您可以将参数传递给箭头函数。 <blockquote> //将输入值加倍并返回<br> const doubler =（item）=> item * 2; </blockquote>您也可以将多个参数传递给箭头函数。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">重写<code>myConcat</code>函数，该函数将<code>arr2</code>内容追加到<code>arr1</code>以便该函数使用箭头函数语法。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 用户确实替换了<code>var</code>关键字。
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/var/g), "User did replace <code>var</code> keyword.");'
|
||||
- text: <code>myConcat</code>应该是一个常量变量（使用<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>应该是一个函数
|
||||
testString: 'assert(typeof myConcat === "function", "<code>myConcat</code> should be a function");'
|
||||
- text: <code>myConcat()</code>返回正确的<code>array</code>
|
||||
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>关键字未使用。
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/function/g), "<code>function</code> keyword was not used.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var myConcat = function(arr1, arr2) {
|
||||
"use strict";
|
||||
return arr1.concat(arr2);
|
||||
};
|
||||
// test your code
|
||||
console.log(myConcat([1, 2], [3, 4, 5]));
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d7b8b367417b2b2512b50
|
||||
title: Write Concise Declarative Functions with ES6
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 用ES6编写简明的声明函数
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">在ES5中定义对象内的函数时，我们必须使用关键字<code>function</code> ，如下所示： <blockquote> const person = { <br>名称：“泰勒”， <br> sayHello：function（）{ <br>回来`你好！我的名字是$ {this.name} .`; <br> } <br> }; </blockquote>使用ES6，您可以在定义对象中的函数时完全删除<code>function</code>关键字和冒号。以下是此语法的示例： <blockquote> const person = { <br>名称：“泰勒”， <br>问好（） { <br>回来`你好！我的名字是$ {this.name} .`; <br> } <br> }; </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">重构对象<code>bicycle</code>内的函数<code>setGear</code>以使用上述简写语法。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 未使用传统函数表达式。
|
||||
testString: 'assert(!getUserInput("index").match(/function/),"Traditional <code>function</code> expression was not used.");'
|
||||
- text: <code>setGear</code>是一个声明函数。
|
||||
testString: 'assert(typeof bicycle.setGear === "function" && getUserInput("index").match(/setGear\s*\(.+\)\s*\{/), "<code>setGear</code> is a declarative function.");'
|
||||
- text: ''
|
||||
testString: 'assert((new bicycle.setGear(48)).gear === 48, "<code>bicycle.setGear(48)</code> changes the <code>gear</code> value to 48.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// change code below this line
|
||||
const bicycle = {
|
||||
gear: 2,
|
||||
setGear: function(newGear) {
|
||||
"use strict";
|
||||
this.gear = newGear;
|
||||
}
|
||||
};
|
||||
// change code above this line
|
||||
bicycle.setGear(3);
|
||||
console.log(bicycle.gear);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,61 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4f
|
||||
title: Write Concise Object Literal Declarations Using Simple Fields
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 使用简单字段编写简明对象文字声明
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> ES6为轻松定义对象文字添加了一些很好的支持。请考虑以下代码： <blockquote> const getMousePosition =（x，y）=>（{ <br> x：x， <br> y：y <br> }）; </blockquote> <code>getMousePosition</code>是一个简单的函数，它返回一个包含两个字段的对象。 ES6提供了语法糖，以消除必须写入<code>x: x</code>的冗余。您可以简单地编写一次<code>x</code> ，它将被转换为<code>x: x</code> （或类似的东西）。这是从上面重写的相同函数使用这个新语法： <blockquote> const getMousePosition =（x，y）=>（{x，y}）; </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用带有对象文字的简单字段来创建和返回<code>Person</code>对象。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '输出是<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: '不<code>:</code>被使用了。'
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/:/g), "No <code>:</code> were used.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const createPerson = (name, age, gender) => {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
return {
|
||||
name: name,
|
||||
age: age,
|
||||
gender: gender
|
||||
};
|
||||
// change code above this line
|
||||
};
|
||||
console.log(createPerson("Zodiac Hasbro", 56, "male")); // returns a proper object
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b45
|
||||
title: Write Higher Order Arrow Functions
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 编写高阶箭头函数
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">是时候我们看到处理数据时箭头功能有多强大了。 Arrow函数与高阶函数（例如<code>map()</code> ， <code>filter()</code>和<code>reduce()</code>非常兼容，它们将其他函数作为处理数据集合的参数。阅读以下代码： <blockquote> FBPosts.filter（function（post）{ <br> return post.thumbnail！== null && post.shares> 100 && post.likes> 500; <br> }） </blockquote>我们用<code>filter()</code>写了这个，至少使它有点可读。现在将它与以下使用箭头函数语法的代码进行比较： <blockquote> FBPosts.filter（（post）=> post.thumbnail！== null && post.shares> 100 && post.likes> 500） </blockquote>此代码更简洁，使用更少的代码行完成相同的任务。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用箭头函数语法计算数组<code>realNumberArray</code>中只有正整数（十进制数不是整数）的<code>realNumberArray</code> ，并将新数组存储在变量<code>squaredIntegers</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>squaredIntegers</code>应该是一个常量变量（通过使用<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>应该是一个<code>array</code>
|
||||
testString: 'assert(Array.isArray(squaredIntegers), "<code>squaredIntegers</code> should be an <code>array</code>");'
|
||||
- text: '<code>squaredIntegers</code>应该是<code>[16, 1764, 36]</code> <code>squaredIntegers</code> <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>关键字未使用。
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/function/g), "<code>function</code> keyword was not used.");'
|
||||
- text: 不应该使用循环
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/(for)|(while)/g), "loop should not be used");'
|
||||
- text: 应使用<code>map</code> ， <code>filter</code>或<code>reduce</code>
|
||||
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