chore(i8n,learn): processed translations
This commit is contained in:
Crowdin Bot
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
15047f2d90
commit
e5c44a3ae5
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b40
|
||||
title: 比较 var 和 let 关键字的作用域
|
||||
title: Compare Scopes of the var and let Keywords
|
||||
challengeType: 1
|
||||
forumTopicId: 301195
|
||||
dashedName: compare-scopes-of-the-var-and-let-keywords
|
||||
@ -8,11 +8,11 @@ dashedName: compare-scopes-of-the-var-and-let-keywords
|
||||
|
||||
# --description--
|
||||
|
||||
当你使用`var`关键字来声明一个变量的时候，这个变量会被声明成全局变量，或是函数内的局部变量。
|
||||
When you declare a variable with the `var` keyword, it is declared globally, or locally if declared inside a function.
|
||||
|
||||
`let`关键字的作用类似，但会有一些额外的特性。如果你在代码块、语句或表达式中使用关键字`let`声明变量，这个变量的作用域就被限制在当前的代码块，语句或表达式之中。
|
||||
The `let` keyword behaves similarly, but with some extra features. When you declare a variable with the `let` keyword inside a block, statement, or expression, its scope is limited to that block, statement, or expression.
|
||||
|
||||
举个例子：
|
||||
For example:
|
||||
|
||||
```js
|
||||
var numArray = [];
|
||||
@ -20,12 +20,12 @@ for (var i = 0; i < 3; i++) {
|
||||
numArray.push(i);
|
||||
}
|
||||
console.log(numArray);
|
||||
// 返回 [0, 1, 2]
|
||||
// returns [0, 1, 2]
|
||||
console.log(i);
|
||||
// 返回 3
|
||||
// returns 3
|
||||
```
|
||||
|
||||
当使用`var`关键字的时候，`i`会被声明成全局变量。当`i++`执行的时候，它会改变全局变量的值。这段代码可以看做下面这样:
|
||||
With the `var` keyword, `i` is declared globally. So when `i++` is executed, it updates the global variable. This code is similar to the following:
|
||||
|
||||
```js
|
||||
var numArray = [];
|
||||
@ -34,12 +34,12 @@ for (i = 0; i < 3; i++) {
|
||||
numArray.push(i);
|
||||
}
|
||||
console.log(numArray);
|
||||
// 返回 [0, 1, 2]
|
||||
// returns [0, 1, 2]
|
||||
console.log(i);
|
||||
// 返回 3
|
||||
// returns 3
|
||||
```
|
||||
|
||||
如果你在`for`循环中创建了使用`i`变量的函数，那么在后续调用函数的时候，上面提到的这种行为就会出现问题。这是因为函数存储的值会因为全局变量`i`的变化而不断的改变。
|
||||
This behavior will cause problems if you were to create a function and store it for later use inside a for loop that uses the `i` variable. This is because the stored function will always refer to the value of the updated global `i` variable.
|
||||
|
||||
```js
|
||||
var printNumTwo;
|
||||
@ -51,13 +51,12 @@ for (var i = 0; i < 3; i++) {
|
||||
}
|
||||
}
|
||||
console.log(printNumTwo());
|
||||
// 返回 3
|
||||
// returns 3
|
||||
```
|
||||
|
||||
可以看到，`printNumTwo()`打印了 3 而不是 2。这是因为`i`发生了改变，并且函数`printNumTwo()`返回的是全局变量`i`的值，而不是`for`循环中创建函数时`i`的值。`let`关键字就不会有这种现象：
|
||||
As you can see, `printNumTwo()` prints 3 and not 2. This is because the value assigned to `i` was updated and the `printNumTwo()` returns the global `i` and not the value `i` had when the function was created in the for loop. The `let` keyword does not follow this behavior:
|
||||
|
||||
```js
|
||||
'use strict';
|
||||
let printNumTwo;
|
||||
for (let i = 0; i < 3; i++) {
|
||||
if (i === 2) {
|
||||
@ -67,28 +66,28 @@ for (let i = 0; i < 3; i++) {
|
||||
}
|
||||
}
|
||||
console.log(printNumTwo());
|
||||
// 返回 2
|
||||
// returns 2
|
||||
console.log(i);
|
||||
// 返回 "i 未定义"
|
||||
// returns "i is not defined"
|
||||
```
|
||||
|
||||
`i`在全局作用域中没有声明，所以它没有被定义，它的声明只会发生在`for`循环内。在循环执行的时候，`let`关键字创建了三个不同的`i`变量，他们的值分别为 0、1 和 2，所以`printNumTwo()`返回了正确的值。
|
||||
`i` is not defined because it was not declared in the global scope. It is only declared within the for loop statement. `printNumTwo()` returned the correct value because three different `i` variables with unique values (0, 1, and 2) were created by the `let` keyword within the loop statement.
|
||||
|
||||
# --instructions--
|
||||
|
||||
修改这段代码，使得在`if`语句中声明的`i`变量与在函数的第一行声明的`i`变量是彼此独立的。请注意不要在你的代码的任何地方使用`var`关键字。
|
||||
Fix the code so that `i` declared in the if statement is a separate variable than `i` declared in the first line of the function. Be certain not to use the `var` keyword anywhere in your code.
|
||||
|
||||
这个练习说明了使用`var`与`let`关键字声明变量时，作用域之间的不同。当编写类似这个练习中的函数的时候，通常来说最好还是使用不同的变量名来避免误会。
|
||||
This exercise is designed to illustrate the difference between how `var` and `let` keywords assign scope to the declared variable. When programming a function similar to the one used in this exercise, it is often better to use different variable names to avoid confusion.
|
||||
|
||||
# --hints--
|
||||
|
||||
`var`不应该在代码中存在。
|
||||
`var` should not exist in code.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(!getUserInput('index').match(/var/g));
|
||||
```
|
||||
|
||||
在`if`语句中声明的`i`变量的值是 'block scope'。
|
||||
The variable `i` declared in the if statement should equal "block scope".
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -97,7 +96,7 @@ console.log(i);
|
||||
);
|
||||
```
|
||||
|
||||
`checkScope()`应当返回 'function scope'
|
||||
`checkScope()` should return "function scope"
|
||||
|
||||
```js
|
||||
assert(checkScope() === 'function scope');
|
||||
@ -128,7 +127,7 @@ function checkScope() {
|
||||
let i = 'block scope';
|
||||
console.log('Block scope i is: ', i);
|
||||
}
|
||||
|
||||
|
||||
console.log('Function scope i is: ', i);
|
||||
return i;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5cdafbc32913098997531680
|
||||
title: 通过 resolve 和 reject 完成 Promise
|
||||
title: Complete a Promise with resolve and reject
|
||||
challengeType: 1
|
||||
forumTopicId: 301196
|
||||
dashedName: complete-a-promise-with-resolve-and-reject
|
||||
@ -8,7 +8,7 @@ dashedName: complete-a-promise-with-resolve-and-reject
|
||||
|
||||
# --description--
|
||||
|
||||
promise 有三个状态：`pending`、`fulfilled` 和 `rejected`。上一个挑战里创建的 promise 一直阻塞在 `pending` 状态里，因为没有调用 promise 的完成方法。promise 提供的 `resolve` 和 `reject` 参数就是用来结束 promise 的。promise 成功时调用 `resolve`，promise 执行失败时调用 `reject`，这两个方法接收一个参数，如下所示。
|
||||
A promise has three states: `pending`, `fulfilled`, and `rejected`. The promise you created in the last challenge is forever stuck in the `pending` state because you did not add a way to complete the promise. The `resolve` and `reject` parameters given to the promise argument are used to do this. `resolve` is used when you want your promise to succeed, and `reject` is used when you want it to fail. These are methods that take an argument, as seen below.
|
||||
|
||||
```js
|
||||
const myPromise = new Promise((resolve, reject) => {
|
||||
@ -20,31 +20,35 @@ const myPromise = new Promise((resolve, reject) => {
|
||||
});
|
||||
```
|
||||
|
||||
上面的例子使用字符串做为函数的参数，也可以是任意类型，通常会是对象，里面可能是将要放到页面或其它地方的数据。
|
||||
The example above uses strings for the argument of these functions, but it can really be anything. Often, it might be an object, that you would use data from, to put on your website or elsewhere.
|
||||
|
||||
# --instructions--
|
||||
|
||||
使 promise 可以处理成功和失败情况。如果 `responseFromServer` 是 `true`，调用 `resolve` 方法使 promise 成功。给 `resolve` 传递值为 `We got the data` 的字符串。如果 `responseFromServer` 是 `false`， 使用 `reject` 方法并传入值为 `Data not received` 的字符串。
|
||||
Make the promise handle success and failure. If `responseFromServer` is `true`, call the `resolve` method to successfully complete the promise. Pass `resolve` a string with the value `We got the data`. If `responseFromServer` is `false`, use the `reject` method instead and pass it the string: `Data not received`.
|
||||
|
||||
# --hints--
|
||||
|
||||
当 `if` 条件是 `true` 时应该执行 `resolve`。
|
||||
`resolve` should be called with the expected string when the `if` condition is `true`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
removeJSComments(code).match(
|
||||
/if\s*\(\s*responseFromServer\s*\)\s*{\s*resolve\s*\(\s*('|"|`)We got the data\1\s*\)(\s*|\s*;\s*)}/g
|
||||
)
|
||||
__helpers
|
||||
.removeJSComments(code)
|
||||
.match(
|
||||
/if\s*\(\s*responseFromServer\s*\)\s*{\s*resolve\s*\(\s*('|"|`)We got the data\1\s*\)(\s*|\s*;\s*)}/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
当 `if` 条件是 `false` 时应该执行 `reject`。
|
||||
`reject` should be called with the expected string when the `if` condition is `false`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
removeJSComments(code).match(
|
||||
/}\s*else\s*{\s*reject\s*\(\s*('|"|`)Data not received\1\s*\)(\s*|\s*;\s*)}/g
|
||||
)
|
||||
__helpers
|
||||
.removeJSComments(code)
|
||||
.match(
|
||||
/}\s*else\s*{\s*reject\s*\(\s*('|"|`)Data not received\1\s*\)(\s*|\s*;\s*)}/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
@ -56,7 +60,7 @@ assert(
|
||||
const makeServerRequest = new Promise((resolve, reject) => {
|
||||
// responseFromServer represents a response from a server
|
||||
let responseFromServer;
|
||||
|
||||
|
||||
if(responseFromServer) {
|
||||
// Change this line
|
||||
} else {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5cdafbb0291309899753167f
|
||||
title: 创建一个 JavaScript Promise
|
||||
title: Create a JavaScript Promise
|
||||
challengeType: 1
|
||||
forumTopicId: 301197
|
||||
dashedName: create-a-javascript-promise
|
||||
@ -8,7 +8,7 @@ dashedName: create-a-javascript-promise
|
||||
|
||||
# --description--
|
||||
|
||||
Promise 是异步编程的一种解决方案 - 它在未来的某时会生成一个值。任务完成，分执行成功和执行失败两种情况。`Promise` 是构造器函数，需要通过 `new` 关键字来创建。构造器参数是一个函数，该函数有两个参数 - `resolve` 和 `reject`。通过它们来判断 promise 的执行结果。用法如下：
|
||||
A promise in JavaScript is exactly what it sounds like - you use it to make a promise to do something, usually asynchronously. When the task completes, you either fulfill your promise or fail to do so. `Promise` is a constructor function, so you need to use the `new` keyword to create one. It takes a function, as its argument, with two parameters - `resolve` and `reject`. These are methods used to determine the outcome of the promise. The syntax looks like this:
|
||||
|
||||
```js
|
||||
const myPromise = new Promise((resolve, reject) => {
|
||||
@ -18,17 +18,17 @@ const myPromise = new Promise((resolve, reject) => {
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个名为 `makeServerRequest` 的 promise。给构造器函数传入 `resolve` 和 `reject` 两个参数。
|
||||
Create a new promise called `makeServerRequest`. Pass in a function with `resolve` and `reject` parameters to the constructor.
|
||||
|
||||
# --hints--
|
||||
|
||||
应该给名为 `makeServerRequest` 的变量指定一个 promise。
|
||||
You should assign a promise to a declared variable named `makeServerRequest`.
|
||||
|
||||
```js
|
||||
assert(makeServerRequest instanceof Promise);
|
||||
```
|
||||
|
||||
promise 应该接收一个函数做为参数，该函数应该包含 `resolve` 和 `reject` 两个参数。
|
||||
Your promise should receive a function with `resolve` and `reject` as parameters.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -41,7 +41,6 @@ assert(
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5cddbfd622f1a59093ec611d
|
||||
title: 创建一个模块脚本
|
||||
title: Create a Module Script
|
||||
challengeType: 6
|
||||
forumTopicId: 301198
|
||||
dashedName: create-a-module-script
|
||||
@ -8,27 +8,27 @@ dashedName: create-a-module-script
|
||||
|
||||
# --description--
|
||||
|
||||
起初，JavaScript 几乎只在 HTML web 扮演一个很小的角色。今天，一切不同了，很多网站几乎全是用 JavaScript 所写。为了让 JavaScript 更模块化、更整洁以及更易于维护，ES6 引入了在多个 JavaScript 文件之间共享代码的机制。它可以导出文件的一部分供其它文件使用，然后在需要它的地方按需导入。为了使用这一功能， 需要在 HTML 文档里创建一个类型为 `module` 的脚本。例子如下：
|
||||
JavaScript started with a small role to play on an otherwise mostly HTML web. Today, it’s huge, and some websites are built almost entirely with JavaScript. In order to make JavaScript more modular, clean, and maintainable; ES6 introduced a way to easily share code among JavaScript files. This involves exporting parts of a file for use in one or more other files, and importing the parts you need, where you need them. In order to take advantage of this functionality, you need to create a script in your HTML document with a type of `module`. Here’s an example:
|
||||
|
||||
```html
|
||||
<script type="module" src="filename.js"></script>
|
||||
```
|
||||
|
||||
使用了 `module` 类型的脚本后可以再接下来的挑战里使用 `import` 和 `export` 特性。
|
||||
A script that uses this `module` type can now use the `import` and `export` features you will learn about in the upcoming challenges.
|
||||
|
||||
# --instructions--
|
||||
|
||||
给 HTML 文档添加 `module` 类型的脚本，指定源文件为 `index.js`。
|
||||
Add a script to the HTML document of type `module` and give it the source file of `index.js`
|
||||
|
||||
# --hints--
|
||||
|
||||
应该创建一个 `script` 标签。
|
||||
You should create a `script` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\s*script[^>]*>\s*<\/\s*script\s*>/g));
|
||||
```
|
||||
|
||||
`script` 标签的类型应该为 `module`。
|
||||
Your `script` tag should be of type `module`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -38,7 +38,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`script` 标签的 `src` 属性应该为 `index.js`。
|
||||
Your `script` tag should have a `src` of `index.js`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b58
|
||||
title: 用 export default 创建一个默认导出
|
||||
title: Create an Export Fallback with export default
|
||||
challengeType: 1
|
||||
forumTopicId: 301199
|
||||
dashedName: create-an-export-fallback-with-export-default
|
||||
@ -8,11 +8,11 @@ dashedName: create-an-export-fallback-with-export-default
|
||||
|
||||
# --description--
|
||||
|
||||
在`export`的课程中，学习了<dfn>命名导出</dfn>语法。这可以在其他文件中引用一些函数或者变量。
|
||||
In the `export` lesson, you learned about the syntax referred to as a <dfn>named export</dfn>. This allowed you to make multiple functions and variables available for use in other files.
|
||||
|
||||
还需要了解另外一种被称为<dfn>默认导出</dfn>的`export`的语法。在文件中只有一个值需要导出的时候，通常会使用这种语法。它也常常用于给文件或者模块创建返回值。
|
||||
There is another `export` syntax you need to know, known as <dfn>export default</dfn>. Usually you will use this syntax if only one value is being exported from a file. It is also used to create a fallback value for a file or module.
|
||||
|
||||
下面是一个简单的`export default`例子：
|
||||
Below are examples using `export default`:
|
||||
|
||||
```js
|
||||
// named function
|
||||
@ -26,15 +26,15 @@ export default function(x, y) {
|
||||
}
|
||||
```
|
||||
|
||||
注意：当使用`export default`去声明一个文件或者模块的返回值时，在每个文件或者模块中应当只默认导出一个值。特别地，能将`export deafult`与`var`，`let`与`const`一起使用。
|
||||
Since `export default` is used to declare a fallback value for a module or file, you can only have one value be a default export in each module or file. Additionally, you cannot use `export default` with `var`, `let`, or `const`
|
||||
|
||||
# --instructions--
|
||||
|
||||
下面的函数应该在这个模块中返回一个值。请添加需要的代码：
|
||||
The following function should be the fallback value for the module. Please add the necessary code to do so.
|
||||
|
||||
# --hints--
|
||||
|
||||
正确的使用`export`进行返回。
|
||||
Your code should use `export` fallback.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4e
|
||||
title: 使用模板字面量创建字符串
|
||||
title: Create Strings using Template Literals
|
||||
challengeType: 1
|
||||
forumTopicId: 301200
|
||||
dashedName: create-strings-using-template-literals
|
||||
@ -8,11 +8,11 @@ dashedName: create-strings-using-template-literals
|
||||
|
||||
# --description--
|
||||
|
||||
模板字符串是 ES6 的另外一项新的功能。这是一种可以轻松构建复杂字符串的方法。
|
||||
A new feature of ES6 is the <dfn>template literal</dfn>. This is a special type of string that makes creating complex strings easier.
|
||||
|
||||
模板字符串可以使用多行字符串和字符串插值功能。
|
||||
Template literals allow you to create multi-line strings and to use string interpolation features to create strings.
|
||||
|
||||
请看以下代码：
|
||||
Consider the code below:
|
||||
|
||||
```js
|
||||
const person = {
|
||||
@ -30,26 +30,33 @@ console.log(greeting); // prints
|
||||
|
||||
```
|
||||
|
||||
这段代码有许多的不同： 首先，上面的例子使用了反引号（`` ` ``）而不是引号（`'` 或者 `"`）定义字符串。 其次，注意字符串是多行的，不管是代码还是输出。这是因为在字符串内插入了 `\n`。 上面使用的`${variable}`语法是一个占位符。这样一来，你将不再需要使用`+`运算符来连接字符串。当需要在字符串里增加变量的时候，你只需要在变量的外面括上`${`和`}`，并将其放在字符串里就可以了。 这个新的方式使你可以更灵活的创建复杂的字符串。
|
||||
A lot of things happened there. Firstly, the example uses backticks (`` ` ``), not quotes (`'` or `"`), to wrap the string. Secondly, notice that the string is multi-line, both in the code and the output. This saves inserting `\n` within strings. The `${variable}` syntax used above is a placeholder. Basically, you won't have to use concatenation with the `+` operator anymore. To add variables to strings, you just drop the variable in a template string and wrap it with `${` and `}`. Similarly, you can include other expressions in your string literal, for example `${a + b}`. This new way of creating strings gives you more flexibility to create robust strings.
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用模板字符串的反引号的语法来展示`result`对象的`failure`数组内的每个条目。每个条目应该括在带有`text-warning`类属性的`li`标签中，并赋值给`resultDisplayArray`。
|
||||
Use template literal syntax with backticks to create an array of list element (`li`) strings. Each list element's text should be one of the array elements from the `failure` property on the `result` object and have a `class` attribute with the value `text-warning`. The `makeList` function should return the array of list item strings.
|
||||
|
||||
使用遍历方法（可以是任意形式的循环）输出指定值。
|
||||
Use an iterator method (any kind of loop) to get the desired output (shown below).
|
||||
|
||||
```js
|
||||
[
|
||||
'<li class="text-warning">no-var</li>',
|
||||
'<li class="text-warning">var-on-top</li>',
|
||||
'<li class="text-warning">linebreak</li>'
|
||||
]
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
`resultDisplayArray` 是一个包含了 `result failure` 内的消息的数组。
|
||||
`failuresList` should be an array containing `result failure` messages.
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof makeList(result.failure) === 'object' &&
|
||||
resultDisplayArray.length === 3
|
||||
typeof makeList(result.failure) === 'object' && failuresList.length === 3
|
||||
);
|
||||
```
|
||||
|
||||
`resultDisplayArray` 要有正确的输出。
|
||||
`failuresList` should be equal to the specified output.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -61,13 +68,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
应使用模板字符串。
|
||||
Template strings and expression interpolation should be used.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').match(/(`.*\${.*}.*`)/));
|
||||
```
|
||||
|
||||
应该遍历。
|
||||
An iterator should be used.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b41
|
||||
title: 用 const 关键字声明只读变量
|
||||
title: Declare a Read-Only Variable with the const Keyword
|
||||
challengeType: 1
|
||||
forumTopicId: 301201
|
||||
dashedName: declare-a-read-only-variable-with-the-const-keyword
|
||||
@ -8,45 +8,44 @@ dashedName: declare-a-read-only-variable-with-the-const-keyword
|
||||
|
||||
# --description--
|
||||
|
||||
`let`并不是唯一的新的声明变量的方式。在 ES6里面，你还可以使用`const`关键字来声明变量。
|
||||
The keyword `let` is not the only new way to declare variables. In ES6, you can also declare variables using the `const` keyword.
|
||||
|
||||
`const`拥有`let`的所有优点，所不同的是，通过`const`声明的变量是只读的。这意味着通过`const`声明的变量只能被赋值一次，而不能被再次赋值。
|
||||
`const` has all the awesome features that `let` has, with the added bonus that variables declared using `const` are read-only. They are a constant value, which means that once a variable is assigned with `const`, it cannot be reassigned.
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
const FAV_PET = "Cats";
|
||||
FAV_PET = "Dogs"; // returns error
|
||||
```
|
||||
|
||||
可以看见，尝试给通过`const`声明的变量再次赋值会报错。你应该使用`const`关键字来对所有不打算再次赋值的变量进行声明。这有助于你避免给一个常量进行额外的再次赋值。一个最佳实践是对所有常量的命名采用全大写字母，并在单词之间使用下划线进行分隔。
|
||||
As you can see, trying to reassign a variable declared with `const` will throw an error. You should always name variables you don't want to reassign using the `const` keyword. This helps when you accidentally attempt to reassign a variable that is meant to stay constant. A common practice when naming constants is to use all uppercase letters, with words separated by an underscore.
|
||||
|
||||
**注意：** 一般开发者会以大写做为常量标识符，小写字母或者驼峰命名做为变量（对象或数组）标识符。接下来的挑战里会涉及到小写变量标识符的数组。
|
||||
**Note:** It is common for developers to use uppercase variable identifiers for immutable values and lowercase or camelCase for mutable values (objects and arrays). In a later challenge you will see an example of a lowercase variable identifier being used for an array.
|
||||
|
||||
# --instructions--
|
||||
|
||||
改变以下代码，使得所有的变量都使用`let`或`const`关键词来声明。当变量将会改变的时候使用`let`关键字，当变量要保持常量的时候使用`const`关键字。同时，对使用`const`声明的变量按照最佳实践重命名，变量名中的字母应该都是大写的。
|
||||
Change the code so that all variables are declared using `let` or `const`. Use `let` when you want the variable to change, and `const` when you want the variable to remain constant. Also, rename variables declared with `const` to conform to common practices, meaning constants should be in all caps.
|
||||
|
||||
# --hints--
|
||||
|
||||
`var`在代码中不存在。
|
||||
`var` should not exist in your code.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(!getUserInput('index').match(/var/g));
|
||||
```
|
||||
|
||||
`SENTENCE`应该是使用`const`声明的常量。
|
||||
`SENTENCE` should be a constant variable declared with `const`.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').match(/(const SENTENCE)/g));
|
||||
```
|
||||
|
||||
`i`应该是使用`let`声明的变量。
|
||||
`i` should be declared with `let`.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').match(/(let i)/g));
|
||||
```
|
||||
|
||||
`console.log`应该修改为用于打印`SENTENCE`变量。
|
||||
`console.log` should be changed to print the `SENTENCE` variable.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b3f
|
||||
title: 探索 var 和 let 关键字之间的差异
|
||||
title: Explore Differences Between the var and let Keywords
|
||||
challengeType: 1
|
||||
forumTopicId: 301202
|
||||
dashedName: explore-differences-between-the-var-and-let-keywords
|
||||
@ -8,7 +8,7 @@ dashedName: explore-differences-between-the-var-and-let-keywords
|
||||
|
||||
# --description--
|
||||
|
||||
使用`var`关键字来声明变量，会出现重复声明导致变量被覆盖却不会报错的问题：
|
||||
One of the biggest problems with declaring variables with the `var` keyword is that you can overwrite variable declarations without an error.
|
||||
|
||||
```js
|
||||
var camper = 'James';
|
||||
@ -17,15 +17,15 @@ console.log(camper);
|
||||
// logs 'David'
|
||||
```
|
||||
|
||||
在上面的代码中，`camper`的初始值为`'James'`，然后又被覆盖成了`'David'`。 在小型的应用中，你可能不会遇到这样的问题，但是当你的代码规模变得更加庞大的时候，就可能会在不经意间覆盖了之前定义的变量。 这样的行为不会报错，导致了 debug 非常困难。
|
||||
在 ES6 中引入了新的关键字`let`来解决`var`关键字带来的潜在问题。 如果你在上面的代码中，使用了`let`关键字来代替`var`关键字，结果会是一个报错。
|
||||
As you can see in the code above, the `camper` variable is originally declared as `James` and then overridden to be `David`. In a small application, you might not run into this type of problem, but when your code becomes larger, you might accidentally overwrite a variable that you did not intend to overwrite. Because this behavior does not throw an error, searching and fixing bugs becomes more difficult.
|
||||
A new keyword called `let` was introduced in ES6 to solve this potential issue with the `var` keyword. If you were to replace `var` with `let` in the variable declarations of the code above, the result would be an error.
|
||||
|
||||
```js
|
||||
let camper = 'James';
|
||||
let camper = 'David'; // throws an error
|
||||
```
|
||||
|
||||
你可以在浏览器的控制台里看见这个错误。 与`var`不同的是，当使用`let`的时候，同一名字的变量只能被声明一次。 请注意`"use strict"`。这代表着开启了严格模式，用于检测常见的代码错误以及"不安全"的行为，例如：
|
||||
This error can be seen in the console of your browser. So unlike `var`, when using `let`, a variable with the same name can only be declared once. Note the `"use strict"`. This enables Strict Mode, which catches common coding mistakes and "unsafe" actions. For instance:
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
@ -34,23 +34,23 @@ x = 3.14; // throws an error because x is not declared
|
||||
|
||||
# --instructions--
|
||||
|
||||
请更新这段代码，并且在其中只使用`let`关键字
|
||||
Update the code so it only uses the `let` keyword.
|
||||
|
||||
# --hints--
|
||||
|
||||
在代码中不应存在`var`。
|
||||
`var` should not exist in the code.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(!getUserInput('index').match(/var/g));
|
||||
```
|
||||
|
||||
`catName`变量的值应该为`'Oliver'`。
|
||||
`catName` should be `Oliver`.
|
||||
|
||||
```js
|
||||
assert(catName === 'Oliver');
|
||||
```
|
||||
|
||||
`quote`变量的值应该为`'Oliver says Meow!'`
|
||||
`quote` should be `"Oliver says Meow!"`
|
||||
|
||||
```js
|
||||
assert(quote === 'Oliver says Meow!');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5cdafbd72913098997531681
|
||||
title: 在 then 中处理 Promise 完成的情况
|
||||
title: Handle a Fulfilled Promise with then
|
||||
challengeType: 1
|
||||
forumTopicId: 301203
|
||||
dashedName: handle-a-fulfilled-promise-with-then
|
||||
@ -8,7 +8,7 @@ dashedName: handle-a-fulfilled-promise-with-then
|
||||
|
||||
# --description--
|
||||
|
||||
当程序需要花费未知的时间才能完成时 Promise 很有用（比如，一些异步操作），一般是网络请求。网络请求会花费一些时间，当结束时需要根据服务器的响应执行一些操作。这可以用 `then` 方法来实现，当 promise 完成 `resolve` 时会触发 `then` 方法。例子如下：
|
||||
Promises are most useful when you have a process that takes an unknown amount of time in your code (i.e. something asynchronous), often a server request. When you make a server request it takes some amount of time, and after it completes you usually want to do something with the response from the server. This can be achieved by using the `then` method. The `then` method is executed immediately after your promise is fulfilled with `resolve`. Here’s an example:
|
||||
|
||||
```js
|
||||
myPromise.then(result => {
|
||||
@ -16,32 +16,36 @@ myPromise.then(result => {
|
||||
});
|
||||
```
|
||||
|
||||
`result` 即传入 `resolve` 方法的参数。
|
||||
`result` comes from the argument given to the `resolve` method.
|
||||
|
||||
# --instructions--
|
||||
|
||||
给 promise 添加 `then` 方法。用 `result` 做为回调函数的参数并将 `result` 打印在控制台。
|
||||
Add the `then` method to your promise. Use `result` as the parameter of its callback function and log `result` to the console.
|
||||
|
||||
# --hints--
|
||||
|
||||
应该给 promise 方法调用 `then` 方法。
|
||||
You should call the `then` method on the promise.
|
||||
|
||||
```js
|
||||
assert(codeWithoutSpaces.match(/(makeServerRequest|\))\.then\(/g));
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/(makeServerRequest|\))\.then\(/g)
|
||||
);
|
||||
```
|
||||
|
||||
`then` 方法应该有一个回调函数，回调函数参数为 `result`。
|
||||
Your `then` method should have a callback function with `result` as its parameter.
|
||||
|
||||
```js
|
||||
assert(resultIsParameter);
|
||||
```
|
||||
|
||||
应该打印 `result` 到控制台。
|
||||
You should log `result` to the console.
|
||||
|
||||
```js
|
||||
assert(
|
||||
resultIsParameter &&
|
||||
codeWithoutSpaces.match(/\.then\(.*?result.*?console.log\(result\).*?\)/)
|
||||
__helpers
|
||||
.removeWhiteSpace(code)
|
||||
.match(/\.then\(.*?result.*?console.log\(result\).*?\)/)
|
||||
);
|
||||
```
|
||||
|
||||
@ -59,7 +63,7 @@ const resultIsParameter = /\.then\((function\(result\){|result|\(result\)=>)/.te
|
||||
const makeServerRequest = new Promise((resolve, reject) => {
|
||||
// responseFromServer is set to true to represent a successful response from a server
|
||||
let responseFromServer = true;
|
||||
|
||||
|
||||
if(responseFromServer) {
|
||||
resolve("We got the data");
|
||||
} else {
|
||||
@ -74,7 +78,7 @@ const makeServerRequest = new Promise((resolve, reject) => {
|
||||
const makeServerRequest = new Promise((resolve, reject) => {
|
||||
// responseFromServer is set to true to represent a successful response from a server
|
||||
let responseFromServer = true;
|
||||
|
||||
|
||||
if(responseFromServer) {
|
||||
resolve("We got the data");
|
||||
} else {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5cdafbe72913098997531682
|
||||
title: 在 catch 中处理 Promise 失败的情况
|
||||
title: Handle a Rejected Promise with catch
|
||||
challengeType: 1
|
||||
forumTopicId: 301204
|
||||
dashedName: handle-a-rejected-promise-with-catch
|
||||
@ -8,7 +8,7 @@ dashedName: handle-a-rejected-promise-with-catch
|
||||
|
||||
# --description--
|
||||
|
||||
当 promise 失败时会调用 `catch` 方法。当 promise 的 `reject` 方法执行时会直接调用。用法如下：
|
||||
`catch` is the method used when your promise has been rejected. It is executed immediately after a promise's `reject` method is called. Here’s the syntax:
|
||||
|
||||
```js
|
||||
myPromise.catch(error => {
|
||||
@ -16,34 +16,36 @@ myPromise.catch(error => {
|
||||
});
|
||||
```
|
||||
|
||||
`error` 是传入 `reject` 方法的参数。
|
||||
|
||||
**注意：** `then` 和 `catch` 方法可以在 promise 后面链式调用。
|
||||
`error` is the argument passed in to the `reject` method.
|
||||
|
||||
# --instructions--
|
||||
|
||||
给 promise 添加 `catch` 方法。用 `error` 做为回调函数的参数并把 `error` 打印到控制台。
|
||||
Add the `catch` method to your promise. Use `error` as the parameter of its callback function and log `error` to the console.
|
||||
|
||||
# --hints--
|
||||
|
||||
应该在 promise 上调用 `catch` 方法。
|
||||
You should call the `catch` method on the promise.
|
||||
|
||||
```js
|
||||
assert(codeWithoutSpaces.match(/(makeServerRequest|\))\.catch\(/g));
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/(makeServerRequest|\))\.catch\(/g)
|
||||
);
|
||||
```
|
||||
|
||||
`catch` 方法应该有一个回调函数，函数参数为`error`。
|
||||
Your `catch` method should have a callback function with `error` as its parameter.
|
||||
|
||||
```js
|
||||
assert(errorIsParameter);
|
||||
```
|
||||
|
||||
应该打印`error`到控制台。
|
||||
You should log `error` to the console.
|
||||
|
||||
```js
|
||||
assert(
|
||||
errorIsParameter &&
|
||||
codeWithoutSpaces.match(/\.catch\(.*?error.*?console.log\(error\).*?\)/)
|
||||
__helpers
|
||||
.removeWhiteSpace(code)
|
||||
.match(/\.catch\(.*?error.*?console.log\(error\).*?\)/)
|
||||
);
|
||||
```
|
||||
|
||||
@ -61,7 +63,7 @@ const errorIsParameter = /\.catch\((function\(error\){|error|\(error\)=>)/.test(
|
||||
const makeServerRequest = new Promise((resolve, reject) => {
|
||||
// responseFromServer is set to false to represent an unsuccessful response from a server
|
||||
let responseFromServer = false;
|
||||
|
||||
|
||||
if(responseFromServer) {
|
||||
resolve("We got the data");
|
||||
} else {
|
||||
@ -80,7 +82,7 @@ makeServerRequest.then(result => {
|
||||
const makeServerRequest = new Promise((resolve, reject) => {
|
||||
// responseFromServer is set to false to represent an unsuccessful response from a server
|
||||
let responseFromServer = false;
|
||||
|
||||
|
||||
if(responseFromServer) {
|
||||
resolve("We got the data");
|
||||
} else {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b8d367417b2b2512b59
|
||||
title: 导入一个默认的导出
|
||||
title: Import a Default Export
|
||||
challengeType: 1
|
||||
forumTopicId: 301205
|
||||
dashedName: import-a-default-export
|
||||
@ -8,23 +8,21 @@ dashedName: import-a-default-export
|
||||
|
||||
# --description--
|
||||
|
||||
在上一个挑战里，学习了`export default`的用法。还需要一种`import`的语法来导入默认的导出。
|
||||
|
||||
在下面的例子里有一个`add`函数, 它在`"math_functions"`文件里默认被导出。来看看来如何导入它：
|
||||
In the last challenge, you learned about `export default` and its uses. To import a default export, you need to use a different `import` syntax. In the following example, `add` is the default export of the `math_functions.js` file. Here is how to import it:
|
||||
|
||||
```js
|
||||
import add from "./math_functions.js";
|
||||
```
|
||||
|
||||
这个语法只有一处不同的地方 —— 被导入的`add`值，并没有被花括号`{}`所包围。与导出值的方法不同，导入默认导出的写法仅仅只是简单的将变量名写在`import`之后。
|
||||
The syntax differs in one key place. The imported value, `add`, is not surrounded by curly braces (`{}`). `add` here is simply a variable name for whatever the default export of the `math_functions.js` file is. You can use any name here when importing a default.
|
||||
|
||||
# --instructions--
|
||||
|
||||
在下面的代码中，请导入在同目录下的`"math_functions"`文件中默认导出的`subtract`值。
|
||||
In the following code, import the default export from the `math_functions.js` file, found in the same directory as this file. Give the import the name `subtract`.
|
||||
|
||||
# --hints--
|
||||
|
||||
正确导入`export default`方法导出的值。
|
||||
You should properly import `subtract` from `math_functions.js`.
|
||||
|
||||
```js
|
||||
assert(code.match(/import\s+subtract\s+from\s+('|")\.\/math_functions\.js\1/g));
|
||||
@ -35,7 +33,7 @@ assert(code.match(/import\s+subtract\s+from\s+('|")\.\/math_functions\.js\1/g));
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
|
||||
|
||||
// Only change code above this line
|
||||
|
||||
subtract(7,4);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b42
|
||||
title: 改变一个用 const 声明的数组
|
||||
title: Mutate an Array Declared with const
|
||||
challengeType: 1
|
||||
forumTopicId: 301206
|
||||
dashedName: mutate-an-array-declared-with-const
|
||||
@ -8,41 +8,40 @@ dashedName: mutate-an-array-declared-with-const
|
||||
|
||||
# --description--
|
||||
|
||||
在现代的 JavaScript 里，`const`声明有很多用法。
|
||||
The `const` declaration has many use cases in modern JavaScript.
|
||||
|
||||
一些开发者倾向默认使用`const`来声明所有变量，但如果它们打算在后续的代码中修改某个值，那在声明的时候就会用`let`。
|
||||
Some developers prefer to assign all their variables using `const` by default, unless they know they will need to reassign the value. Only in that case, they use `let`.
|
||||
|
||||
然而，你要注意，对象（包括数组和函数）在使用`const`声明的时候依然是可变的。使用`const`来声明只会保证它的标识不会被重新赋值。
|
||||
However, it is important to understand that objects (including arrays and functions) assigned to a variable using `const` are still mutable. Using the `const` declaration only prevents reassignment of the variable identifier.
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
const s = [5, 6, 7];
|
||||
s = [1, 2, 3]; // throws error, trying to assign a const
|
||||
s[2] = 45; // works just as it would with an array declared with var or let
|
||||
console.log(s); // returns [5, 6, 45]
|
||||
```
|
||||
|
||||
从以上代码看出，你可以改变`[5, 6, 7]`自身，所以`s`变量指向了改变后的数组`[5, 6, 45]`。和所有数组一样，数组`s`中的数组元素是可以被改变的，但是因为使用了`const`关键字，你不能使用赋值操作符将变量标识`s`指向另外一个数组。
|
||||
As you can see, you can mutate the object `[5, 6, 7]` itself and the variable `s` will still point to the altered array `[5, 6, 45]`. Like all arrays, the array elements in `s` are mutable, but because `const` was used, you cannot use the variable identifier `s` to point to a different array using the assignment operator.
|
||||
|
||||
# --instructions--
|
||||
|
||||
这里有一个使用`const s = [5, 7, 2]`声明的数组。使用对各元素赋值的方法将数组改成`[2, 5, 7]`。
|
||||
An array is declared as `const s = [5, 7, 2]`. Change the array to `[2, 5, 7]` using various element assignments.
|
||||
|
||||
# --hints--
|
||||
|
||||
不要替换`const`关键字。
|
||||
You should not replace `const` keyword.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').match(/const/g));
|
||||
```
|
||||
|
||||
`s`应该为常量 (通过使用`const`)。
|
||||
`s` should be a constant variable (by using `const`).
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').match(/const\s+s/g));
|
||||
```
|
||||
|
||||
不要改变原数组的声明。
|
||||
You should not change the original array declaration.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -53,7 +52,7 @@ console.log(s); // returns [5, 6, 45]
|
||||
);
|
||||
```
|
||||
|
||||
`s`应该等于`[2, 5, 7]`。
|
||||
`s` should be equal to `[2, 5, 7]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(s, [2, 5, 7]);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 598f48a36c8c40764b4e52b3
|
||||
title: 防止对象改变
|
||||
title: Prevent Object Mutation
|
||||
challengeType: 1
|
||||
forumTopicId: 301207
|
||||
dashedName: prevent-object-mutation
|
||||
@ -8,9 +8,9 @@ dashedName: prevent-object-mutation
|
||||
|
||||
# --description--
|
||||
|
||||
通过之前的挑战可以看出，`const`声明并不会真的保护你的数据不被改变。为了确保数据不被改变，JavaScript 提供了一个函数`Object.freeze`来防止数据改变。
|
||||
As seen in the previous challenge, `const` declaration alone doesn't really protect your data from mutation. To ensure your data doesn't change, JavaScript provides a function `Object.freeze` to prevent data mutation.
|
||||
|
||||
当一个对象被冻结的时候，你不能再对它的属性再进行增、删、改的操作。任何试图改变对象的操作都会被阻止，却不会报错。
|
||||
Once the object is frozen, you can no longer add, update, or delete properties from it. Any attempt at changing the object will be rejected without an error.
|
||||
|
||||
```js
|
||||
let obj = {
|
||||
@ -26,24 +26,24 @@ console.log(obj);
|
||||
|
||||
# --instructions--
|
||||
|
||||
在这个挑战中，你将使用`Object.freeze`来防止数学常量被改变。你需要冻结`MATH_CONSTANTS`对象，使得没有人可以改变`PI`的值，抑或增加或删除属性。
|
||||
In this challenge you are going to use `Object.freeze` to prevent mathematical constants from changing. You need to freeze the `MATH_CONSTANTS` object so that no one is able to alter the value of `PI`, add, or delete properties.
|
||||
|
||||
# --hints--
|
||||
|
||||
不要替换`const`关键字。
|
||||
You should not replace `const` keyword.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').match(/const/g));
|
||||
```
|
||||
|
||||
`MATH_CONSTANTS`应该为一个常量 (使用`const`)。
|
||||
`MATH_CONSTANTS` should be a constant variable (by using `const`).
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
assert(getUserInput('index').match(/const\s+MATH_CONSTANTS/g));
|
||||
```
|
||||
|
||||
不要改变原始的`MATH_CONSTANTS`。
|
||||
You should not change original `MATH_CONSTANTS`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -54,7 +54,7 @@ console.log(obj);
|
||||
);
|
||||
```
|
||||
|
||||
`PI`等于`3.14`。
|
||||
`PI` should equal `3.14`.
|
||||
|
||||
```js
|
||||
assert(PI === 3.14);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b55
|
||||
title: 通过 import 复用 JavaScript 代码
|
||||
title: Reuse JavaScript Code Using import
|
||||
challengeType: 1
|
||||
forumTopicId: 301208
|
||||
dashedName: reuse-javascript-code-using-import
|
||||
@ -8,15 +8,15 @@ dashedName: reuse-javascript-code-using-import
|
||||
|
||||
# --description--
|
||||
|
||||
`import` 可以导入文件或模块的一部分。在之前的课程里，例子从 `math_functions.js` 文件里导出了 `add`，下面看一下如何在其它的文件导入它：
|
||||
`import` allows you to choose which parts of a file or module to load. In the previous lesson, the examples exported `add` from the `math_functions.js` file. Here's how you can import it to use in another file:
|
||||
|
||||
```js
|
||||
import { add } from './math_functions.js';
|
||||
```
|
||||
|
||||
在这里，`import` 会在 `math_functions.js` 里找到 `add`，只导入这个函数，忽略剩余的部分。`./` 告诉程序在当前文件的相同目录寻找 `math_functions.js` 文件。用这种方式导入时，相对路径（`./`）和文件扩展名（`.js`）都是必需的。
|
||||
Here, `import` will find `add` in `math_functions.js`, import just that function for you to use, and ignore the rest. The `./` tells the import to look for the `math_functions.js` file in the same folder as the current file. The relative file path (`./`) and file extension (`.js`) are required when using import in this way.
|
||||
|
||||
可以在导入语句里导入多个项目，如下：
|
||||
You can import more than one item from the file by adding them in the `import` statement like this:
|
||||
|
||||
```js
|
||||
import { add, subtract } from './math_functions.js';
|
||||
@ -24,11 +24,11 @@ import { add, subtract } from './math_functions.js';
|
||||
|
||||
# --instructions--
|
||||
|
||||
添加 `import` 语句，使当前文件可以使用你在之前课程里导出的 `uppercaseString` 和 `lowercaseString` 函数，函数在当前路径下的 `string_functions.js` 文件里。
|
||||
Add the appropriate `import` statement that will allow the current file to use the `uppercaseString` and `lowercaseString` functions you exported in the previous lesson. These functions are in a file called `string_functions.js`, which is in the same directory as the current file.
|
||||
|
||||
# --hints--
|
||||
|
||||
应该导入 `uppercaseString`、
|
||||
You should properly import `uppercaseString`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -38,7 +38,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
应该导入 `lowercaseString`、
|
||||
You should properly import `lowercaseString`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -53,7 +53,7 @@ assert(
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
|
||||
|
||||
// Only change code above this line
|
||||
|
||||
uppercaseString("hello");
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b46
|
||||
title: 设置函数的默认参数
|
||||
title: Set Default Parameters for Your Functions
|
||||
challengeType: 1
|
||||
forumTopicId: 301209
|
||||
dashedName: set-default-parameters-for-your-functions
|
||||
@ -8,9 +8,9 @@ dashedName: set-default-parameters-for-your-functions
|
||||
|
||||
# --description--
|
||||
|
||||
ES6 里允许给函数传入<dfn>默认参数</dfn>，来构建更加灵活的函数。
|
||||
In order to help us create more flexible functions, ES6 introduces <dfn>default parameters</dfn> for functions.
|
||||
|
||||
请看以下代码：
|
||||
Check out this code:
|
||||
|
||||
```js
|
||||
const greeting = (name = "Anonymous") => "Hello " + name;
|
||||
@ -19,27 +19,27 @@ console.log(greeting("John")); // Hello John
|
||||
console.log(greeting()); // Hello Anonymous
|
||||
```
|
||||
|
||||
默认参数会在参数没有被指定（值为 undefined ）的时候起作用。在上面的例子中，参数`name`会在没有得到新的值的时候，默认使用值 "Anonymous"。你还可以给多个参数赋予默认值。
|
||||
The default parameter kicks in when the argument is not specified (it is undefined). As you can see in the example above, the parameter `name` will receive its default value `"Anonymous"` when you do not provide a value for the parameter. You can add default values for as many parameters as you want.
|
||||
|
||||
# --instructions--
|
||||
|
||||
给函数`increment`加上默认参数，使得在`value`没有被赋值的时候，默认给`number`加1。
|
||||
Modify the function `increment` by adding default parameters so that it will add 1 to `number` if `value` is not specified.
|
||||
|
||||
# --hints--
|
||||
|
||||
`increment(5, 2)`的结果应该为`7`。
|
||||
The result of `increment(5, 2)` should be `7`.
|
||||
|
||||
```js
|
||||
assert(increment(5, 2) === 7);
|
||||
```
|
||||
|
||||
`increment(5)`的结果应该为`6`。
|
||||
The result of `increment(5)` should be `6`.
|
||||
|
||||
```js
|
||||
assert(increment(5) === 6);
|
||||
```
|
||||
|
||||
参数`value`的默认值应该为`1`。
|
||||
A default parameter value of `1` should be used for `value`.
|
||||
|
||||
```js
|
||||
assert(code.match(/value\s*=\s*1/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b57
|
||||
title: 用 * 从文件中导入所有内容
|
||||
title: Use * to Import Everything from a File
|
||||
challengeType: 1
|
||||
forumTopicId: 301210
|
||||
dashedName: use--to-import-everything-from-a-file
|
||||
@ -8,13 +8,13 @@ dashedName: use--to-import-everything-from-a-file
|
||||
|
||||
# --description--
|
||||
|
||||
我们还可以用`import`语法从文件中导入所有的内容。下面是一个从同目录下的`"math_functions"`文件中导入所有内容的例子：
|
||||
Suppose you have a file and you wish to import all of its contents into the current file. This can be done with the `import * as` syntax. Here's an example where the contents of a file named `math_functions.js` are imported into a file in the same directory:
|
||||
|
||||
```js
|
||||
import * as myMathModule from "./math_functions.js";
|
||||
```
|
||||
|
||||
上面的 `import` 语句会创建一个叫做 `myMathModule` 的对象。这只是一个变量名，可以随便命名。对象包含 `math_functions.js` 文件里的所有导出，可以像访问对象的属性那样访问里面的函数。下面是使用导入的 `add` 和 `subtract` 函数的例子：
|
||||
The above `import` statement will create an object called `myMathModule`. This is just a variable name, you can name it anything. The object will contain all of the exports from `math_functions.js` in it, so you can access the functions like you would any other object property. Here's how you can use the `add` and `subtract` functions that were imported:
|
||||
|
||||
```js
|
||||
myMathModule.add(2,3);
|
||||
@ -23,11 +23,11 @@ myMathModule.subtract(5,3);
|
||||
|
||||
# --instructions--
|
||||
|
||||
下面的代码需要从同目录下的`"string_functions"`文件中导入所有内容。使用提供的对象，在当前文件的顶部添加正确的`import *`语句
|
||||
The code in this file requires the contents of the file: `string_functions.js`, that is in the same directory as the current file. Use the `import * as` syntax to import everything from the file into an object called `stringFunctions`.
|
||||
|
||||
# --hints--
|
||||
|
||||
正确使用`import * as`语法。
|
||||
Your code should properly use `import * as` syntax.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b43
|
||||
title: 使用箭头函数编写简洁的匿名函数
|
||||
title: Use Arrow Functions to Write Concise Anonymous Functions
|
||||
challengeType: 1
|
||||
forumTopicId: 301211
|
||||
dashedName: use-arrow-functions-to-write-concise-anonymous-functions
|
||||
@ -8,9 +8,9 @@ dashedName: use-arrow-functions-to-write-concise-anonymous-functions
|
||||
|
||||
# --description--
|
||||
|
||||
在 JavaScript 里，我们会经常遇到不需要给函数命名的情况，尤其是在需要将一个函数作为参数传给另外一个函数的时候。这时，我们会创建匿名函数。因为这些函数不会在其他地方复用，所以我们不需要给它们命名。
|
||||
In JavaScript, we often don't need to name our functions, especially when passing a function as an argument to another function. Instead, we create inline functions. We don't need to name these functions because we do not reuse them anywhere else.
|
||||
|
||||
这种情况下，我们通常会使用以下语法：
|
||||
To achieve this, we often use the following syntax:
|
||||
|
||||
```js
|
||||
const myFunc = function() {
|
||||
@ -19,7 +19,7 @@ const myFunc = function() {
|
||||
}
|
||||
```
|
||||
|
||||
ES6 提供了其他写匿名函数的方式的语法糖。你可以使用箭头函数：
|
||||
ES6 provides us with the syntactic sugar to not have to write anonymous functions this way. Instead, you can use **arrow function syntax**:
|
||||
|
||||
```js
|
||||
const myFunc = () => {
|
||||
@ -28,45 +28,45 @@ const myFunc = () => {
|
||||
}
|
||||
```
|
||||
|
||||
当不需要函数体，只返回一个值的时候，箭头函数允许你省略`return`关键字和外面的大括号。这样就可以将一个简单的函数简化成一个单行语句。
|
||||
When there is no function body, and only a return value, arrow function syntax allows you to omit the keyword `return` as well as the brackets surrounding the code. This helps simplify smaller functions into one-line statements:
|
||||
|
||||
```js
|
||||
const myFunc = () => "value";
|
||||
```
|
||||
|
||||
这段代码仍然会返回`value`。
|
||||
This code will still return the string `value` by default.
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用箭头函数的语法重写`magic`函数，使其返回一个新的`Date()`。同时不要用`var`关键字来定义任何变量。
|
||||
Rewrite the function assigned to the variable `magic` which returns a `new Date()` to use arrow function syntax. Also, make sure nothing is defined using the keyword `var`.
|
||||
|
||||
# --hints--
|
||||
|
||||
替换掉`var`关键字。
|
||||
User should replace `var` keyword.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(!getUserInput('index').match(/var/g));
|
||||
```
|
||||
|
||||
`magic`应该为一个常量 (使用`const`)。
|
||||
`magic` should be a constant variable (by using `const`).
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').match(/const\s+magic/g));
|
||||
```
|
||||
|
||||
`magic`是一个`function`。
|
||||
`magic` should be a `function`.
|
||||
|
||||
```js
|
||||
assert(typeof magic === 'function');
|
||||
```
|
||||
|
||||
`magic()`返回正确的日期。
|
||||
`magic()` should return correct date.
|
||||
|
||||
```js
|
||||
assert(magic().setHours(0, 0, 0, 0) === new Date().setHours(0, 0, 0, 0));
|
||||
```
|
||||
|
||||
不要使用`function`关键字。
|
||||
`function` keyword should not be used.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(!getUserInput('index').match(/function/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b8b367417b2b2512b53
|
||||
title: 使用 class 语法定义构造函数
|
||||
title: Use class Syntax to Define a Constructor Function
|
||||
challengeType: 1
|
||||
forumTopicId: 301212
|
||||
dashedName: use-class-syntax-to-define-a-constructor-function
|
||||
@ -8,11 +8,11 @@ dashedName: use-class-syntax-to-define-a-constructor-function
|
||||
|
||||
# --description--
|
||||
|
||||
ES6 提供了一个新的创建对象的语法，使用关键字`class`。
|
||||
ES6 provides a new syntax to create objects, using the <dfn>class</dfn> keyword.
|
||||
|
||||
值得注意的是，`class`只是一个语法糖，它并不像 Java、Python 或者 Ruby 这一类的语言一样，严格履行了面向对象的开发规范。
|
||||
It should be noted that the `class` syntax is just syntax, and not a full-fledged class-based implementation of an object-oriented paradigm, unlike in languages such as Java, Python, Ruby, etc.
|
||||
|
||||
在 ES5 里面，我们通常会定义一个构造函数，然后使用 `new` 关键字来实例化一个对象：
|
||||
In ES5, we usually define a constructor function and use the `new` keyword to instantiate an object.
|
||||
|
||||
```js
|
||||
var SpaceShuttle = function(targetPlanet){
|
||||
@ -21,7 +21,7 @@ var SpaceShuttle = function(targetPlanet){
|
||||
var zeus = new SpaceShuttle('Jupiter');
|
||||
```
|
||||
|
||||
`class`的语法只是简单地替换了构造函数的写法：
|
||||
The `class` syntax simply replaces the constructor function creation:
|
||||
|
||||
```js
|
||||
class SpaceShuttle {
|
||||
@ -32,24 +32,21 @@ class SpaceShuttle {
|
||||
const zeus = new SpaceShuttle('Jupiter');
|
||||
```
|
||||
|
||||
应该注意 `class` 关键字声明了一个函数，里面添加了一个构造器（constructor）。当调用 `new` 来创建一个新对象时构造器会被调用。
|
||||
It should be noted that the `class` keyword declares a new function, to which a constructor is added. This constructor is invoked when `new` is called to create a new object.
|
||||
**Notes:**
|
||||
|
||||
**注意：**
|
||||
|
||||
-
|
||||
|
||||
<li> 首字母大写驼峰命名法是 ES6 class 名的惯例，就像上面的 <code>SpaceShuttle</code>。</li>
|
||||
<li> 构造函数是一个特殊的函数，在用 class 创建时来创建和初始化对象。在 JavaScript 算法和数据结构证书的面向对象章节里会更深入介绍。</li></ul>
|
||||
- UpperCamelCase should be used by convention for ES6 class names, as in `SpaceShuttle` used above.
|
||||
- The constructor method is a special method for creating and initializing an object created with a class. You will learn more about it in the Object Oriented Programming section of the JavaScript Algorithms And Data Structures Certification.
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用`class`关键字，并写出正确的构造函数，来创建`Vegetable`这个类：
|
||||
Use the `class` keyword and write a constructor to create the `Vegetable` class.
|
||||
|
||||
`Vegetable`这个类可以创建 vegetable 对象，这个对象拥有一个在构造函数中赋值的`name`属性。
|
||||
The `Vegetable` class allows you to create a vegetable object with a property `name` that gets passed to the constructor.
|
||||
|
||||
# --hints--
|
||||
|
||||
`Vegetable` 应该是一个 `class`，并在其中定义了`constructor`方法。
|
||||
`Vegetable` should be a `class` with a defined `constructor` method.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -57,13 +54,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
使用了`class`关键字。
|
||||
`class` keyword should be used.
|
||||
|
||||
```js
|
||||
assert(code.match(/class/g));
|
||||
```
|
||||
|
||||
`Vegetable`可以被实例化。
|
||||
`Vegetable` should be able to be instantiated.
|
||||
|
||||
```js
|
||||
assert(() => {
|
||||
@ -72,7 +69,7 @@ assert(() => {
|
||||
});
|
||||
```
|
||||
|
||||
`carrot.name` 应该返回 `carrot`.
|
||||
`carrot.name` should return `carrot`.
|
||||
|
||||
```js
|
||||
assert(carrot.name == 'carrot');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b4b
|
||||
title: 使用解构赋值从数组中分配变量
|
||||
title: Use Destructuring Assignment to Assign Variables from Arrays
|
||||
challengeType: 1
|
||||
forumTopicId: 301213
|
||||
dashedName: use-destructuring-assignment-to-assign-variables-from-arrays
|
||||
@ -8,18 +8,18 @@ dashedName: use-destructuring-assignment-to-assign-variables-from-arrays
|
||||
|
||||
# --description--
|
||||
|
||||
在 ES6 里面，解构数组可以如同解构对象一样简单。
|
||||
ES6 makes destructuring arrays as easy as destructuring objects.
|
||||
|
||||
与数组解构不同，数组的扩展运算会将数组里的所有内容分解成一个由逗号分隔的列表。所以，你不能选择哪个元素来给变量赋值。
|
||||
One key difference between the spread operator and array destructuring is that the spread operator unpacks all contents of an array into a comma-separated list. Consequently, you cannot pick or choose which elements you want to assign to variables.
|
||||
|
||||
而对数组进行解构却可以让我们做到这一点：
|
||||
Destructuring an array lets us do exactly that:
|
||||
|
||||
```js
|
||||
const [a, b] = [1, 2, 3, 4, 5, 6];
|
||||
console.log(a, b); // 1, 2
|
||||
```
|
||||
|
||||
变量`a`以及`b`分别被数组的第一、第二个元素赋值。 我们甚至能在数组解构中使用逗号分隔符，来获取任意一个想要的值：
|
||||
The variable `a` is assigned the first value of the array, and `b` is assigned the second value of the array. We can also access the value at any index in an array with destructuring by using commas to reach the desired index:
|
||||
|
||||
```js
|
||||
const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
|
||||
@ -28,23 +28,23 @@ console.log(a, b, c); // 1, 2, 5
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用数组解构来交换变量`a`与`b`的值。使`a`、`b`能分别获得对方的值。
|
||||
Use destructuring assignment to swap the values of `a` and `b` so that `a` receives the value stored in `b`, and `b` receives the value stored in `a`.
|
||||
|
||||
# --hints--
|
||||
|
||||
在交换后，`a`的值应该为6。
|
||||
Value of `a` should be 6, after swapping.
|
||||
|
||||
```js
|
||||
assert(a === 6);
|
||||
```
|
||||
|
||||
在交换后，`b`的值应该为8。
|
||||
Value of `b` should be 8, after swapping.
|
||||
|
||||
```js
|
||||
assert(b === 8);
|
||||
```
|
||||
|
||||
使用数组解构来交换`a`和`b`。
|
||||
You should use array destructuring to swap a and b.
|
||||
|
||||
```js
|
||||
assert(/\[\s*(\w)\s*,\s*(\w)\s*\]\s*=\s*\[\s*\2\s*,\s*\1\s*\]/g.test(code));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b4a
|
||||
title: 使用解构赋值从嵌套对象中分配变量
|
||||
title: Use Destructuring Assignment to Assign Variables from Nested Objects
|
||||
challengeType: 1
|
||||
forumTopicId: 301214
|
||||
dashedName: use-destructuring-assignment-to-assign-variables-from-nested-objects
|
||||
@ -8,9 +8,9 @@ dashedName: use-destructuring-assignment-to-assign-variables-from-nested-objects
|
||||
|
||||
# --description--
|
||||
|
||||
同样，我们可以将 *嵌套的对象*解构到变量中。
|
||||
You can use the same principles from the previous two lessons to destructure values from nested objects.
|
||||
|
||||
请看以下代码：
|
||||
Using an object similar to previous examples:
|
||||
|
||||
```js
|
||||
const user = {
|
||||
@ -21,13 +21,13 @@ const user = {
|
||||
};
|
||||
```
|
||||
|
||||
这是解构对象的属性并赋值给相同名字的变量：
|
||||
Here's how to extract the values of object properties and assign them to variables with the same name:
|
||||
|
||||
```js
|
||||
const { johnDoe: { age, email }} = user;
|
||||
```
|
||||
|
||||
这是将对象的属性值指定给一个不同的名字：
|
||||
And here's how you can assign an object properties' values to variables with different names:
|
||||
|
||||
```js
|
||||
const { johnDoe: { age: userAge, email: userEmail }} = user;
|
||||
@ -35,11 +35,11 @@ const { johnDoe: { age: userAge, email: userEmail }} = user;
|
||||
|
||||
# --instructions--
|
||||
|
||||
将两个赋值语句替换成等价的解构赋值。`lowToday` 和 `highToday` 应该为 `LOCAL_FORECAST` 中 `today.low` 和 `today.high` 的值。
|
||||
Replace the two assignments with an equivalent destructuring assignment. It should still assign the variables `lowToday` and `highToday` the values of `today.low` and `today.high` from the `LOCAL_FORECAST` object.
|
||||
|
||||
# --hints--
|
||||
|
||||
不能使用 ES5 的赋值语句。
|
||||
You should remove the ES5 assignment syntax.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -48,7 +48,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
应该使用解构创建 `lowToday` 变量。
|
||||
You should use destructuring to create the `lowToday` variable.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -58,7 +58,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
应该使用解构创建 `highToday` 变量。
|
||||
You should use destructuring to create the `highToday` variable.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -68,6 +68,12 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`lowToday` should be equal to `64` and `highToday` should be equal to `77`.
|
||||
|
||||
```js
|
||||
assert(lowToday === 64 && highToday === 77);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
@ -80,7 +86,7 @@ const LOCAL_FORECAST = {
|
||||
};
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
|
||||
const lowToday = LOCAL_FORECAST.today.low;
|
||||
const highToday = LOCAL_FORECAST.today.high;
|
||||
|
||||
@ -95,6 +101,6 @@ const LOCAL_FORECAST = {
|
||||
today: { low: 64, high: 77 },
|
||||
tomorrow: { low: 68, high: 80 }
|
||||
};
|
||||
|
||||
|
||||
const { today: { low: lowToday, high: highToday }} = LOCAL_FORECAST;
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b49
|
||||
title: 使用解构赋值从对象中分配变量
|
||||
title: Use Destructuring Assignment to Assign Variables from Objects
|
||||
challengeType: 1
|
||||
forumTopicId: 301215
|
||||
dashedName: use-destructuring-assignment-to-assign-variables-from-objects
|
||||
@ -8,30 +8,30 @@ dashedName: use-destructuring-assignment-to-assign-variables-from-objects
|
||||
|
||||
# --description--
|
||||
|
||||
可以在解构的属性后添加冒号和新的变量名来给解构的值赋予一个新的变量名。
|
||||
Destructuring allows you to assign a new variable name when extracting values. You can do this by putting the new name after a colon when assigning the value.
|
||||
|
||||
还是以上个例子的对象来举例：
|
||||
Using the same object from the last example:
|
||||
|
||||
```js
|
||||
const user = { name: 'John Doe', age: 34 };
|
||||
```
|
||||
|
||||
这是指定新的变量名的例子：
|
||||
Here's how you can give new variable names in the assignment:
|
||||
|
||||
```js
|
||||
const { name: userName, age: userAge } = user;
|
||||
// userName = 'John Doe', userAge = 34
|
||||
```
|
||||
|
||||
获取到了 `user.name` 的值并赋值给名为 `userName` 的变量。
|
||||
You may read it as "get the value of `user.name` and assign it to a new variable named `userName`" and so on.
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用解构赋值语句替换两个赋值语句。确保 `HIGH_TEMPERATURES` 的 `today` 和 `tomorrow` 属性赋值给 `highToday` 和 `highTomorrow`。
|
||||
Replace the two assignments with an equivalent destructuring assignment. It should still assign the variables `highToday` and `highTomorrow` the values of `today` and `tomorrow` from the `HIGH_TEMPERATURES` object.
|
||||
|
||||
# --hints--
|
||||
|
||||
应该移除 ES5 赋值语句。
|
||||
You should remove the ES5 assignment syntax.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -40,26 +40,32 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
应该使用解构赋值语句创建 `highToday` 变量。
|
||||
You should use destructuring to create the `highToday` variable.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/(var|const|let)\s*{\s*(today:\s*highToday[^}]*|[^,]*,\s*today\s*:\s*highToday\s*)}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g
|
||||
/(var|const|let)\s*{\s*(today\s*:\s*highToday[^}]*|[^,]*,\s*today\s*:\s*highToday\s*)}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
应该使用解构赋值语句创建 `highTomorrow` 变量。
|
||||
You should use destructuring to create the `highTomorrow` variable.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/(var|const|let)\s*{\s*(tomorrow:\s*highTomorrow[^}]*|[^,]*,\s*tomorrow\s*:\s*highTomorrow\s*)}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g
|
||||
/(var|const|let)\s*{\s*(tomorrow\s*:\s*highTomorrow[^}]*|[^,]*,\s*tomorrow\s*:\s*highTomorrow\s*)}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
`highToday` should be equal to `77` and `highTomorrow` should be equal to `80`.
|
||||
|
||||
```js
|
||||
assert(highToday === 77 && highTomorrow === 80);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
@ -72,7 +78,7 @@ const HIGH_TEMPERATURES = {
|
||||
};
|
||||
|
||||
// Only change code below this line
|
||||
|
||||
|
||||
const highToday = HIGH_TEMPERATURES.today;
|
||||
const highTomorrow = HIGH_TEMPERATURES.tomorrow;
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5cfa550e84205a357704ccb6
|
||||
title: 使用解构赋值来获取对象的值
|
||||
title: Use Destructuring Assignment to Extract Values from Objects
|
||||
challengeType: 1
|
||||
forumTopicId: 301216
|
||||
dashedName: use-destructuring-assignment-to-extract-values-from-objects
|
||||
@ -8,9 +8,9 @@ dashedName: use-destructuring-assignment-to-extract-values-from-objects
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>解构赋值</dfn> 是 ES6 引入的新语法，用来从数组和对象中提取值，并优雅的对变量进行赋值。
|
||||
<dfn>Destructuring assignment</dfn> is special syntax introduced in ES6, for neatly assigning values taken directly from an object.
|
||||
|
||||
有如下 ES5 代码：
|
||||
Consider the following ES5 code:
|
||||
|
||||
```js
|
||||
const user = { name: 'John Doe', age: 34 };
|
||||
@ -19,52 +19,63 @@ const name = user.name; // name = 'John Doe'
|
||||
const age = user.age; // age = 34
|
||||
```
|
||||
|
||||
下面是使用 ES6 解构赋值的等价语句：
|
||||
Here's an equivalent assignment statement using the ES6 destructuring syntax:
|
||||
|
||||
```js
|
||||
const { name, age } = user;
|
||||
// name = 'John Doe', age = 34
|
||||
```
|
||||
|
||||
在这里，`name` 和 `age` 被自动创建并赋予 `user` 对象相应属性的值。一目了然。
|
||||
Here, the `name` and `age` variables will be created and assigned the values of their respective values from the `user` object. You can see how much cleaner this is.
|
||||
|
||||
解构赋值的参数数量可以任意。
|
||||
You can extract as many or few values from the object as you want.
|
||||
|
||||
# --instructions--
|
||||
|
||||
把两个赋值语句替换成等价的解构赋值。`today` 和 `tomorrow` 的值应该还为 `HIGH_TEMPERATURES` 对象的 `today` 和 `tomorrow` 属性的值。
|
||||
Replace the two assignments with an equivalent destructuring assignment. It should still assign the variables `today` and `tomorrow` the values of `today` and `tomorrow` from the `HIGH_TEMPERATURES` object.
|
||||
|
||||
# --hints--
|
||||
|
||||
应该移除 ES5 赋值语句。
|
||||
You should remove the ES5 assignment syntax.
|
||||
|
||||
```js
|
||||
assert(
|
||||
!code.match(/today = HIGH_TEMPERATURES\.today/g) &&
|
||||
!code.match(/tomorrow = HIGH_TEMPERATURES\.tomorrow/g)
|
||||
!__helpers
|
||||
.removeJSComments(code)
|
||||
.match(/today\s*=\s*HIGH_TEMPERATURES\.(today|tomorrow)/g)
|
||||
);
|
||||
```
|
||||
|
||||
应该解构创建 `today` 变量。
|
||||
You should use destructuring to create the `today` variable.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/(var|let|const)\s*{\s*(today[^}]*|[^,]*,\s*today)\s*}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g
|
||||
)
|
||||
__helpers
|
||||
.removeJSComments(code)
|
||||
.match(
|
||||
/(var|let|const)\s*{\s*(today[^}]*|[^,]*,\s*today)\s*}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
应该解构创建 `tomorrow` 变量。
|
||||
You should use destructuring to create the `tomorrow` variable.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/(var|let|const)\s*{\s*(tomorrow[^}]*|[^,]*,\s*tomorrow)\s*}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g
|
||||
)
|
||||
__helpers
|
||||
.removeJSComments(code)
|
||||
.match(
|
||||
/(var|let|const)\s*{\s*(tomorrow[^}]*|[^,]*,\s*tomorrow)\s*}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
`today` should be equal to `77` and `tomorrow` should be equal to `80`.
|
||||
|
||||
```js
|
||||
assert(today === 77 && tomorrow === 80);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4d
|
||||
title: 使用解构赋值将对象作为函数的参数传递
|
||||
title: Use Destructuring Assignment to Pass an Object as a Function's Parameters
|
||||
challengeType: 1
|
||||
forumTopicId: 301217
|
||||
dashedName: use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters
|
||||
@ -8,9 +8,9 @@ dashedName: use-destructuring-assignment-to-pass-an-object-as-a-functions-parame
|
||||
|
||||
# --description--
|
||||
|
||||
在某些情况下，你可以在函数的参数里直接解构对象。
|
||||
In some cases, you can destructure the object in a function argument itself.
|
||||
|
||||
请看以下代码：
|
||||
Consider the code below:
|
||||
|
||||
```js
|
||||
const profileUpdate = (profileData) => {
|
||||
@ -19,7 +19,7 @@ const profileUpdate = (profileData) => {
|
||||
}
|
||||
```
|
||||
|
||||
上面的操作解构了传给函数的对象。这样的操作也可以直接在参数里完成：
|
||||
This effectively destructures the object sent into the function. This can also be done in-place:
|
||||
|
||||
```js
|
||||
const profileUpdate = ({ name, age, nationality, location }) => {
|
||||
@ -27,33 +27,33 @@ const profileUpdate = ({ name, age, nationality, location }) => {
|
||||
}
|
||||
```
|
||||
|
||||
这样的操作去除了多余的代码，使代码更加整洁。 这样做还有个额外的好处：函数不需要再去操作整个对象，而仅仅是操作复制到函数作用域内部的参数。
|
||||
When `profileData` is passed to the above function, the values are destructured from the function parameter for use within the function.
|
||||
|
||||
# --instructions--
|
||||
|
||||
对`half`的参数进行解构赋值，使得仅仅将`max`与`min`的值传进函数。
|
||||
Use destructuring assignment within the argument to the function `half` to send only `max` and `min` inside the function.
|
||||
|
||||
# --hints--
|
||||
|
||||
`stats`的类型应该是一个`object`。
|
||||
`stats` should be an `object`.
|
||||
|
||||
```js
|
||||
assert(typeof stats === 'object');
|
||||
```
|
||||
|
||||
`half(stats)`应该等于`28.015`
|
||||
`half(stats)` should be `28.015`
|
||||
|
||||
```js
|
||||
assert(half(stats) === 28.015);
|
||||
```
|
||||
|
||||
应该使用解构赋值。
|
||||
Destructuring should be used.
|
||||
|
||||
```js
|
||||
assert(code.replace(/\s/g, '').match(/half=\({\w+,\w+}\)/));
|
||||
assert(__helpers.removeWhiteSpace(code).match(/half=\({\w+,\w+}\)/));
|
||||
```
|
||||
|
||||
应该使用解构参数。
|
||||
Destructured parameter should be used.
|
||||
|
||||
```js
|
||||
assert(!code.match(/stats\.max|stats\.min/));
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4c
|
||||
title: 使用解构赋值配合 rest 操作符来重新分配数组元素
|
||||
title: >-
|
||||
Use Destructuring Assignment with the Rest Parameter to Reassign Array Elements
|
||||
challengeType: 1
|
||||
forumTopicId: 301218
|
||||
dashedName: >-
|
||||
@ -9,9 +10,9 @@ dashedName: >-
|
||||
|
||||
# --description--
|
||||
|
||||
在解构数组的某些情况下，我们可能希望将剩下的元素放进另一个数组里面。
|
||||
In some situations involving array destructuring, we might want to collect the rest of the elements into a separate array.
|
||||
|
||||
以下代码的结果与使用`Array.prototype.slice()`相同：
|
||||
The result is similar to `Array.prototype.slice()`, as shown below:
|
||||
|
||||
```js
|
||||
const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
|
||||
@ -19,31 +20,39 @@ console.log(a, b); // 1, 2
|
||||
console.log(arr); // [3, 4, 5, 7]
|
||||
```
|
||||
|
||||
变量`a`与`b`分别获取了数组的前两个元素的值。之后，因为`rest`操作符的存在，`arr`获取了原数组剩余的元素的值，并构成了一个新的数组。 `rest`操作只能对数组列表最后的元素起作用。这意味着你不能使用`rest`操作符来截取原数组中间元素的子数组。
|
||||
Variables `a` and `b` take the first and second values from the array. After that, because of the rest parameter's presence, `arr` gets the rest of the values in the form of an array. The rest element only works correctly as the last variable in the list. As in, you cannot use the rest parameter to catch a subarray that leaves out the last element of the original array.
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用解构赋值以及`rest`操作符来进行一个`Array.prototype.slice`相同的操作。使得`arr`是原数组`source`除开前两个元素的子数组。
|
||||
Use destructuring assignment with the rest parameter to perform an effective `Array.prototype.slice()` so that `arr` is a sub-array of the original array `source` with the first two elements omitted.
|
||||
|
||||
# --hints--
|
||||
|
||||
`arr`应该为`[3,4,5,6,7,8,9,10]`
|
||||
`arr` should be `[3,4,5,6,7,8,9,10]`
|
||||
|
||||
```js
|
||||
assert(arr.every((v, i) => v === i + 3) && arr.length === 8);
|
||||
```
|
||||
|
||||
没有使用`Array.slice()`。
|
||||
`source` should be `[1,2,3,4,5,6,7,8,9,10]`
|
||||
|
||||
```js
|
||||
assert(source.every((v, i) => v === i + 1) && source.length === 10);
|
||||
```
|
||||
|
||||
`Array.slice()` should not be used.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(!getUserInput('index').match(/slice/g));
|
||||
```
|
||||
|
||||
使用了解构赋值。
|
||||
Destructuring on `list` should be used.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.replace(/\s/g, '').match(/\[(([_$a-z]\w*)?,){1,}\.\.\.arr\]=list/i)
|
||||
__helpers
|
||||
.removeWhiteSpace(code)
|
||||
.match(/\[(([_$a-z]\w*)?,){1,}\.\.\.arr\]=list/i)
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b56
|
||||
title: 用 export 来重用代码块
|
||||
title: Use export to Share a Code Block
|
||||
challengeType: 1
|
||||
forumTopicId: 301219
|
||||
dashedName: use-export-to-share-a-code-block
|
||||
@ -8,7 +8,7 @@ dashedName: use-export-to-share-a-code-block
|
||||
|
||||
# --description--
|
||||
|
||||
假设有一个文件 `math_functions.js`，该文件包含了数学运算相关的一些函数。其中一个存储在变量 `add` 里，该函数接受两个数字做为参数返回它们的和。如果想在其它不同的 JavaScript 文件里使用这个函数，就需要 `export` 它。
|
||||
Imagine a file called `math_functions.js` that contains several functions related to mathematical operations. One of them is stored in a variable, `add`, that takes in two numbers and returns their sum. You want to use this function in several different JavaScript files. In order to share it with these other files, you first need to `export` it.
|
||||
|
||||
```js
|
||||
export const add = (x, y) => {
|
||||
@ -16,7 +16,7 @@ export const add = (x, y) => {
|
||||
}
|
||||
```
|
||||
|
||||
上面是导出单个函数常用方法，还可以这样导出：
|
||||
The above is a common way to export a single function, but you can achieve the same thing like this:
|
||||
|
||||
```js
|
||||
const add = (x, y) => {
|
||||
@ -26,7 +26,7 @@ const add = (x, y) => {
|
||||
export { add };
|
||||
```
|
||||
|
||||
导出变量和函数后，就可以在其它文件里导入使用从而避免了代码冗余。重复第一个例子的代码可以导出多个对象或函数，在第二个例子里面的导出语句中添加更多值也可以导出多项，例子如下：
|
||||
When you export a variable or function, you can import it in another file and use it without having to rewrite the code. You can export multiple things by repeating the first example for each thing you want to export, or by placing them all in the export statement of the second example, like this:
|
||||
|
||||
```js
|
||||
export { add, subtract };
|
||||
@ -34,11 +34,11 @@ export { add, subtract };
|
||||
|
||||
# --instructions--
|
||||
|
||||
下面有两个变量需要在别的文件中可以使用。利用刚才展示的第一种方式，导出两个变量。
|
||||
There are two string-related functions in the editor. Export both of them using the method of your choice.
|
||||
|
||||
# --hints--
|
||||
|
||||
应该导出`uppercaseString`变量。
|
||||
You should properly export `uppercaseString`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -48,7 +48,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
应该导出`lowercaseString`变量。
|
||||
You should properly export `lowercaseString`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b54
|
||||
title: 使用 getter 和 setter 来控制对象的访问
|
||||
title: Use getters and setters to Control Access to an Object
|
||||
challengeType: 1
|
||||
forumTopicId: 301220
|
||||
dashedName: use-getters-and-setters-to-control-access-to-an-object
|
||||
@ -8,13 +8,13 @@ dashedName: use-getters-and-setters-to-control-access-to-an-object
|
||||
|
||||
# --description--
|
||||
|
||||
你可以从对象中获得一个值，也可以给对象的属性赋值。
|
||||
You can obtain values from an object and set the value of a property within an object.
|
||||
|
||||
这些通常行为被称为 <dfn>getters</dfn> 以及 <dfn>setters</dfn>。
|
||||
These are classically called <dfn>getters</dfn> and <dfn>setters</dfn>.
|
||||
|
||||
Getter 函数的作用是可以让对象返回一个私有变量，而不需要直接去访问私有变量。
|
||||
Getter functions are meant to simply return (get) the value of an object's private variable to the user without the user directly accessing the private variable.
|
||||
|
||||
Setter 函数的作用是可以基于传进的参数来修改对象中私有变量。这些修改可以是计算，或者是直接替换之前的值。
|
||||
Setter functions are meant to modify (set) the value of an object's private variable based on the value passed into the setter function. This change could involve calculations, or even overwriting the previous value completely.
|
||||
|
||||
```js
|
||||
class Book {
|
||||
@ -30,33 +30,31 @@ class Book {
|
||||
this._author = updatedAuthor;
|
||||
}
|
||||
}
|
||||
const lol = new Book('anonymous');
|
||||
console.log(lol.writer); // anonymous
|
||||
lol.writer = 'wut';
|
||||
console.log(lol.writer); // wut
|
||||
const novel = new Book('anonymous');
|
||||
console.log(novel.writer); // anonymous
|
||||
novel.writer = 'newAuthor';
|
||||
console.log(novel.writer); // newAuthor
|
||||
```
|
||||
|
||||
注意我们调用 getter 和 setter 的语法，它们看起来并不像一个函数调用。 Getter 和 Setter 非常重要，因为它们隐藏了内部的实现细节。
|
||||
|
||||
**注意：** 通常会在私有变量前添加下划线（`_`）。这里并没有真正意义上让变量私有。
|
||||
Notice the syntax used to invoke the getter and setter. They do not even look like functions. Getters and setters are important because they hide internal implementation details. **Note:** It is convention to precede the name of a private variable with an underscore (`_`). However, the practice itself does not make a variable private.
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用`class`关键字来创建`Thermostat`类，它的构造函数应该可以接收 fahrenheit（华氏温度）作为参数。
|
||||
Use the `class` keyword to create a Thermostat class. The constructor accepts a Fahrenheit temperature.
|
||||
|
||||
在类中创建 temperature 的 `getter`和`setter`，将温度转换成摄氏温度。
|
||||
In the class, create a `getter` to obtain the temperature in Celsius and a `setter` to set the temperature in Celsius.
|
||||
|
||||
温度转换的公式是`C = 5/9 * (F - 32)`以及`F = C * 9.0 / 5 + 32`，F 代表华氏温度，C 代表摄氏温度。
|
||||
Remember that `C = 5/9 * (F - 32)` and `F = C * 9.0 / 5 + 32`, where `F` is the value of temperature in Fahrenheit, and `C` is the value of the same temperature in Celsius.
|
||||
|
||||
**注意：** 当你实现这个作业的时候，你应当在类中使用一个温度标准，无论是华氏温度还是摄氏温度。
|
||||
**Note:** When you implement this, you will track the temperature inside the class in one scale, either Fahrenheit or Celsius.
|
||||
|
||||
是时候展现 getter 和 setter 的威力了——无论你的 API 内部使用的是哪种温度标准，用户都能得到正确的结果。
|
||||
This is the power of a getter and a setter. You are creating an API for another user, who can get the correct result regardless of which one you track.
|
||||
|
||||
或者说，你从用户需求中抽象出了实现细节。
|
||||
In other words, you are abstracting implementation details from the user.
|
||||
|
||||
# --hints--
|
||||
|
||||
`Thermostat`应该是一个`class`，并且在其中定义了`constructor`方法。
|
||||
`Thermostat` should be a `class` with a defined `constructor` method.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -65,24 +63,35 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
应该使用 `class` 关键字。
|
||||
`class` keyword should be used.
|
||||
|
||||
```js
|
||||
assert(code.match(/class/g));
|
||||
```
|
||||
|
||||
`Thermostat`应该可以被实例化。
|
||||
`Thermostat` should be able to be instantiated.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(32);
|
||||
return typeof t === 'object' && t.temperature === 0;
|
||||
const t = new Thermostat(122);
|
||||
return typeof t === 'object';
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
应该定义一个 `getter`。
|
||||
When instantiated with a Fahrenheit value, `Thermostat` should set the correct temperature.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(122);
|
||||
return t.temperature === 50;
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
A `getter` should be defined.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -96,7 +105,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
应该定义一个 `setter`。
|
||||
A `setter` should be defined.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -110,14 +119,16 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
调用 `setter` 应该设置 temperature。
|
||||
Calling the `setter` with a Celsius value should set the temperature.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(32);
|
||||
t.temperature = 26;
|
||||
return t.temperature !== 0;
|
||||
const u = new Thermostat(32);
|
||||
u.temperature = 50;
|
||||
return t.temperature === 26 && u.temperature === 50;
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b47
|
||||
title: 将 rest 操作符与函数参数一起使用
|
||||
title: Use the Rest Parameter with Function Parameters
|
||||
challengeType: 1
|
||||
forumTopicId: 301221
|
||||
dashedName: use-the-rest-parameter-with-function-parameters
|
||||
@ -8,9 +8,9 @@ dashedName: use-the-rest-parameter-with-function-parameters
|
||||
|
||||
# --description--
|
||||
|
||||
ES6 推出了用于函数参数的<dfn>rest 操作符</dfn>帮助我们创建更加灵活的函数。在`rest`操作符的帮助下，你可以创建有一个变量来接受多个参数的函数。这些参数被储存在一个可以在函数内部读取的数组中。
|
||||
In order to help us create more flexible functions, ES6 introduces the <dfn>rest parameter</dfn> for function parameters. With the rest parameter, you can create functions that take a variable number of arguments. These arguments are stored in an array that can be accessed later from inside the function.
|
||||
|
||||
请看以下代码：
|
||||
Check out this code:
|
||||
|
||||
```js
|
||||
function howMany(...args) {
|
||||
@ -20,42 +20,42 @@ console.log(howMany(0, 1, 2)); // You have passed 3 arguments.
|
||||
console.log(howMany("string", null, [1, 2, 3], { })); // You have passed 4 arguments.
|
||||
```
|
||||
|
||||
`rest`操作符可以避免查看`args`数组的需求，并且允许我们在参数数组上使用`map()`、`fiter()` 和 `reduce()`。
|
||||
The rest parameter eliminates the need to check the `args` array and allows us to apply `map()`, `filter()` and `reduce()` on the parameters array.
|
||||
|
||||
# --instructions--
|
||||
|
||||
修改`sum`函数，来让它使用`rest`操作符，并且它可以在有任何数量的参数时以相同的形式工作。
|
||||
Modify the function `sum` using the rest parameter in such a way that the function `sum` is able to take any number of arguments and return their sum.
|
||||
|
||||
# --hints--
|
||||
|
||||
`sum(0,1,2)`的返回结果应该为3。
|
||||
The result of `sum(0,1,2)` should be 3
|
||||
|
||||
```js
|
||||
assert(sum(0, 1, 2) === 3);
|
||||
```
|
||||
|
||||
`sum(1,2,3,4)`的返回结果应该为10。
|
||||
The result of `sum(1,2,3,4)` should be 10
|
||||
|
||||
```js
|
||||
assert(sum(1, 2, 3, 4) === 10);
|
||||
```
|
||||
|
||||
`sum(5)`的返回结果应该为5。
|
||||
The result of `sum(5)` should be 5
|
||||
|
||||
```js
|
||||
assert(sum(5) === 5);
|
||||
```
|
||||
|
||||
`sum()`的返回结果应该为 0。
|
||||
The result of `sum()` should be 0
|
||||
|
||||
```js
|
||||
assert(sum() === 0);
|
||||
```
|
||||
|
||||
对`sum`函数的`args`参数使用了`...`展开操作符。
|
||||
`sum` should be an arrow function which uses the rest parameter syntax (`...`) on the `args` parameter.
|
||||
|
||||
```js
|
||||
assert(code.replace(/\s/g, '').match(/sum=\(\.\.\.args\)=>/));
|
||||
assert(__helpers.removeWhiteSpace(code).match(/sum=\(\.\.\.args\)=>/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b48
|
||||
title: 使用 spread 运算符展开数组项
|
||||
title: Use the Spread Operator to Evaluate Arrays In-Place
|
||||
challengeType: 1
|
||||
forumTopicId: 301222
|
||||
dashedName: use-the-spread-operator-to-evaluate-arrays-in-place
|
||||
@ -8,23 +8,23 @@ dashedName: use-the-spread-operator-to-evaluate-arrays-in-place
|
||||
|
||||
# --description--
|
||||
|
||||
ES6 允许我们使用 <dfn>展开操作符</dfn> 来展开数组，以及需要多个参数或元素的表达式。
|
||||
ES6 introduces the <dfn>spread operator</dfn>, which allows us to expand arrays and other expressions in places where multiple parameters or elements are expected.
|
||||
|
||||
下面的 ES5 代码使用了`apply()`来计算数组的最大值：
|
||||
The ES5 code below uses `apply()` to compute the maximum value in an array:
|
||||
|
||||
```js
|
||||
var arr = [6, 89, 3, 45];
|
||||
var maximus = Math.max.apply(null, arr); // returns 89
|
||||
```
|
||||
|
||||
我们必须使用`Math.max.apply(null,arr)`，是因为直接调用`Math.max(arr)`会返回`NaN`。`Math.max()`函数需要传入的是一系列由逗号分隔的参数，而不是一个数组。 展开操作符可以提升代码的可读性，这对后续的代码维护是有积极作用的。
|
||||
We had to use `Math.max.apply(null, arr)` because `Math.max(arr)` returns `NaN`. `Math.max()` expects comma-separated arguments, but not an array. The spread operator makes this syntax much better to read and maintain.
|
||||
|
||||
```js
|
||||
const arr = [6, 89, 3, 45];
|
||||
const maximus = Math.max(...arr); // returns 89
|
||||
```
|
||||
|
||||
`...arr`返回了一个“打开”的数组。或者说它 *展开* 了数组。 然而，展开操作符只能够在函数的参数中，或者数组之中使用。下面的代码将会报错：
|
||||
`...arr` returns an unpacked array. In other words, it *spreads* the array. However, the spread operator only works in-place, like in an argument to a function or in an array literal. The following code will not work:
|
||||
|
||||
```js
|
||||
const spreaded = ...arr; // will throw a syntax error
|
||||
@ -32,23 +32,23 @@ const spreaded = ...arr; // will throw a syntax error
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用展开操作符将`arr1`中的内容都赋值到`arr2`中去。
|
||||
Copy all contents of `arr1` into another array `arr2` using the spread operator.
|
||||
|
||||
# --hints--
|
||||
|
||||
`arr2`的值是由`arr1`拷贝而来的。
|
||||
`arr2` should be correct copy of `arr1`.
|
||||
|
||||
```js
|
||||
assert(arr2.every((v, i) => v === arr1[i]));
|
||||
assert(arr2.every((v, i) => v === arr1[i]) && arr2.length);
|
||||
```
|
||||
|
||||
用`...`展开操作符来赋值`arr1`。
|
||||
`...` spread operator should be used to duplicate `arr1`.
|
||||
|
||||
```js
|
||||
assert(code.match(/Array\(\s*\.\.\.arr1\s*\)|\[\s*\.\.\.arr1\s*\]/));
|
||||
```
|
||||
|
||||
当`arr1`改变的时候，`arr2`不会改变。
|
||||
`arr2` should remain unchanged when `arr1` is changed.
|
||||
|
||||
```js
|
||||
assert((arr1, arr2) => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b44
|
||||
title: 编写带参数的箭头函数
|
||||
title: Write Arrow Functions with Parameters
|
||||
challengeType: 1
|
||||
forumTopicId: 301223
|
||||
dashedName: write-arrow-functions-with-parameters
|
||||
@ -8,61 +8,63 @@ dashedName: write-arrow-functions-with-parameters
|
||||
|
||||
# --description--
|
||||
|
||||
和一般的函数一样，你也可以给箭头函数传递参数。
|
||||
Just like a regular function, you can pass arguments into an arrow function.
|
||||
|
||||
```js
|
||||
// 给传入的数值乘以 2 并返回结果
|
||||
// doubles input value and returns it
|
||||
const doubler = (item) => item * 2;
|
||||
doubler(4); // returns 8
|
||||
```
|
||||
|
||||
如果箭头函数只有一个参数，则可以省略包含该参数的括号。
|
||||
If an arrow function has a single parameter, the parentheses enclosing the parameter may be omitted.
|
||||
|
||||
```js
|
||||
// the same function, without the argument parentheses
|
||||
// the same function, without the parameter parentheses
|
||||
const doubler = item => item * 2;
|
||||
```
|
||||
|
||||
可以将多个参数传递到箭头函数中。
|
||||
It is possible to pass more than one argument into an arrow function.
|
||||
|
||||
```js
|
||||
// multiplies the first input value by the second and returns it
|
||||
const multiplier = (item, multi) => item * multi;
|
||||
multiplier(4, 2); // returns 8
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用箭头函数的语法重写`myConcat`函数，使其可以将`arr2`的内容填充在`arr1`里。
|
||||
Rewrite the `myConcat` function which appends contents of `arr2` to `arr1` so that the function uses arrow function syntax.
|
||||
|
||||
# --hints--
|
||||
|
||||
替换掉所有的`var`关键字。
|
||||
You should replace the `var` keyword.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(!getUserInput('index').match(/var/g));
|
||||
```
|
||||
|
||||
`myConcat`应该是一个常量 (使用`const`)。
|
||||
`myConcat` should be a constant variable (by using `const`).
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').match(/const\s+myConcat/g));
|
||||
```
|
||||
|
||||
`myConcat`应该是一个函数。
|
||||
`myConcat` should be an arrow function with two parameters
|
||||
|
||||
```js
|
||||
assert(typeof myConcat === 'function');
|
||||
assert(
|
||||
/myConcat=\(\w+,\w+\)=>/.test(code.replace(/\s/g, '')) &&
|
||||
typeof myConcat === 'function'
|
||||
);
|
||||
```
|
||||
|
||||
`myConcat()` 应该返回 `[1, 2, 3, 4, 5]`。
|
||||
`myConcat()` should return `[1, 2, 3, 4, 5]`.
|
||||
|
||||
```js
|
||||
assert(() => {
|
||||
const a = myConcat([1], [2]);
|
||||
return a[0] == 1 && a[1] == 2;
|
||||
});
|
||||
assert.deepEqual(myConcat([1, 2], [3, 4, 5]), [1, 2, 3, 4, 5]);
|
||||
```
|
||||
|
||||
不要使用`function`关键字。
|
||||
`function` keyword should not be used.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(!getUserInput('index').match(/function/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b8b367417b2b2512b50
|
||||
title: 用 ES6 编写简洁的函数声明
|
||||
title: Write Concise Declarative Functions with ES6
|
||||
challengeType: 1
|
||||
forumTopicId: 301224
|
||||
dashedName: write-concise-declarative-functions-with-es6
|
||||
@ -8,7 +8,7 @@ dashedName: write-concise-declarative-functions-with-es6
|
||||
|
||||
# --description--
|
||||
|
||||
在 ES5 中，当我们需要在对象中定义一个函数的时候，我们必须如下面这般使用`function`关键字：
|
||||
When defining functions within objects in ES5, we have to use the keyword `function` as follows:
|
||||
|
||||
```js
|
||||
const person = {
|
||||
@ -19,7 +19,7 @@ const person = {
|
||||
};
|
||||
```
|
||||
|
||||
在 ES6 语法的对象中定义函数的时候，你可以完全删除`function`关键字和冒号。请看以下例子：
|
||||
With ES6, You can remove the `function` keyword and colon altogether when defining functions in objects. Here's an example of this syntax:
|
||||
|
||||
```js
|
||||
const person = {
|
||||
@ -32,17 +32,17 @@ const person = {
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用以上这种简短的语法，重构在`bicycle`对象中的`setGear`函数。
|
||||
Refactor the function `setGear` inside the object `bicycle` to use the shorthand syntax described above.
|
||||
|
||||
# --hints--
|
||||
|
||||
不应使用`function`关键字定义方法。
|
||||
Traditional function expression should not be used.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(!removeJSComments(code).match(/function/));
|
||||
(getUserInput) => assert(!__helpers.removeJSComments(code).match(/function/));
|
||||
```
|
||||
|
||||
`setGear`应是一个函数。
|
||||
`setGear` should be a declarative function.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -50,7 +50,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
执行`bicycle.setGear(48)`应可以让`gear`的值变为 48。
|
||||
`bicycle.setGear(48)` should change the `gear` value to 48.
|
||||
|
||||
```js
|
||||
assert(new bicycle.setGear(48).gear === 48);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4f
|
||||
title: 使用简单字段编写简洁的对象字面量声明
|
||||
title: Write Concise Object Literal Declarations Using Object Property Shorthand
|
||||
challengeType: 1
|
||||
forumTopicId: 301225
|
||||
dashedName: write-concise-object-literal-declarations-using-object-property-shorthand
|
||||
@ -8,9 +8,9 @@ dashedName: write-concise-object-literal-declarations-using-object-property-shor
|
||||
|
||||
# --description--
|
||||
|
||||
ES6 添加了一些很棒的功能，以便于更方便地定义对象。
|
||||
ES6 adds some nice support for easily defining object literals.
|
||||
|
||||
请看以下代码：
|
||||
Consider the following code:
|
||||
|
||||
```js
|
||||
const getMousePosition = (x, y) => ({
|
||||
@ -19,7 +19,7 @@ const getMousePosition = (x, y) => ({
|
||||
});
|
||||
```
|
||||
|
||||
`getMousePosition`是一个返回了拥有2个属性的对象的简单函数。 ES6 提供了一个语法糖，消除了类似`x: x`这种冗余的写法.你可以仅仅只写一次`x`，解释器会自动将其转换成`x: x`。 下面是使用这种语法重写的同样的函数：
|
||||
`getMousePosition` is a simple function that returns an object containing two properties. ES6 provides the syntactic sugar to eliminate the redundancy of having to write `x: x`. You can simply write `x` once, and it will be converted to`x: x` (or something equivalent) under the hood. Here is the same function from above rewritten to use this new syntax:
|
||||
|
||||
```js
|
||||
const getMousePosition = (x, y) => ({ x, y });
|
||||
@ -27,11 +27,11 @@ const getMousePosition = (x, y) => ({ x, y });
|
||||
|
||||
# --instructions--
|
||||
|
||||
请使用简单属性对象的语法来创建并返回一个`Person`对象。
|
||||
Use object property shorthand with object literals to create and return an object with `name`, `age` and `gender` properties.
|
||||
|
||||
# --hints--
|
||||
|
||||
输出是`{name: "Zodiac Hasbro", age: 56, gender: "male"}`。
|
||||
`createPerson("Zodiac Hasbro", 56, "male")` should return `{name: "Zodiac Hasbro", age: 56, gender: "male"}`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
@ -40,7 +40,7 @@ assert.deepEqual(
|
||||
);
|
||||
```
|
||||
|
||||
不要使用`key:value`。
|
||||
Your code should not use `key:value`.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(!getUserInput('index').match(/:/g));
|
||||
|
||||
Reference in New Issue
Block a user