fix(curriculum): fix challenges for russian language
This commit is contained in:
Valeriy S
mrugesh
@ -2,28 +2,31 @@
|
||||
id: 587d7b87367417b2b2512b40
|
||||
title: Compare Scopes of the var and let Keywords
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
forumTopicId: 301195
|
||||
localeTitle: Сравнение области действия переменных var и let
|
||||
---
|
||||
|
||||
## 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 (i); <br> } <br> console.log (Numarray); <br> // возвращает [0, 1, 2] <br> console.log (i); <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 (i); <br> } <br> console.log (Numarray); <br> // возвращает [0, 1, 2] <br> console.log (i); <br> // возвращает 3 </blockquote> Такое поведение вызовет проблемы, если вы должны были создать функцию и сохранить ее для последующего использования внутри цикла for, который использует переменную <code>i</code> . Это связано с тем, что хранимая функция всегда будет ссылаться на значение обновленной глобальной переменной <code>i</code> . <blockquote> var printNumTwo; <br> for (var i = 0; i <3; i ++) { <br> if (i === 2) { <br> printNumTwo = function () { <br> return i; <br> }; <br> } <br> } <br> console.log (printNumTwo ()); <br> // возвращает 3 </blockquote> Как вы можете видеть, <code>printNumTwo()</code> печатает 3, а не 2. Это связано с тем, что значение, присвоенное <code>i</code> было обновлено, и <code>printNumTwo()</code> возвращает глобальный <code>i</code> а не значение, которое <code>i</code> имел, когда функция была создана в цикле for. Ключевое слово <code>let</code> не следует этому поведению: <blockquote> "use strict"; <br> let printNumTwo; <br> for (let i = 0; i <3; i ++) { <br> if (i === 2) { <br> printNumTwo = function () { <br> return i; <br> }; <br> } <br> } <br> console.log (printNumTwo ()); <br> // возвращает 2 <br> console.log (i); <br> // возвращает «i не определен» </blockquote> <code>i</code> не определен, потому что он не был объявлен в глобальной области. Он объявляется только в инструкции цикла for. <code>printNumTwo()</code> вернула правильное значение, потому что три разные переменные <code>i</code> с уникальными значениями (0, 1 и 2) были созданы ключевым словом <code>let</code> в цикле. </section>
|
||||
<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 (i); <br> } <br> console.log (Numarray); <br> // возвращает [0, 1, 2] <br> console.log (i); <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 (i); <br> } <br> console.log (Numarray); <br> // возвращает [0, 1, 2] <br> console.log (i); <br> // возвращает 3 </blockquote> Такое поведение вызовет проблемы, если вы должны были создать функцию и сохранить ее для последующего использования внутри цикла for, который использует переменную <code>i</code> . Это связано с тем, что хранимая функция всегда будет ссылаться на значение обновленной глобальной переменной <code>i</code> . <blockquote> var printNumTwo; <br> for (var i = 0; i <3; i ++) { <br> if (i === 2) { <br> printNumTwo = function () { <br> return i; <br> }; <br> } <br> } <br> console.log (printNumTwo ()); <br> // возвращает 3 </blockquote> Как вы можете видеть, <code>printNumTwo()</code> печатает 3, а не 2. Это связано с тем, что значение, присвоенное <code>i</code> было обновлено, и <code>printNumTwo()</code> возвращает глобальный <code>i</code> а не значение, которое <code>i</code> имел, когда функция была создана в цикле for. Ключевое слово <code>let</code> не следует этому поведению: <blockquote> "use strict"; <br> let printNumTwo; <br> for (let i = 0; i <3; i ++) { <br> if (i === 2) { <br> printNumTwo = function () { <br> return i; <br> }; <br> } <br> } <br> console.log (printNumTwo ()); <br> // возвращает 2 <br> console.log (i); <br> // возвращает «i не определен» </blockquote> <code>i</code> не определен, потому что он не был объявлен в глобальной области. Он объявляется только в инструкции цикла for. <code>printNumTwo()</code> вернула правильное значение, потому что три разные переменные <code>i</code> с уникальными значениями (0, 1 и 2) были созданы ключевым словом <code>let</code> в цикле.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Исправьте код, чтобы <code>i</code> объявлял в выражении if отдельную переменную, чем <code>i</code> объявленный в первой строке функции. Не забудьте использовать ключевое слово <code>var</code> в любом месте вашего кода. Это упражнение предназначено для иллюстрации разницы между тем, как ключевые слова <code>var</code> и <code>let</code> назначают область видимости для объявленных переменных. При программировании функции, аналогичной той, которая используется в этом упражнении, часто лучше использовать разные имена переменных, чтобы избежать путаницы. </section>
|
||||
<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: 'Переменная <code>i</code> объявленная в операторе if, должна равняться «области блока».'
|
||||
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"");'
|
||||
- text: <code>var</code> should not exist in code.
|
||||
testString: getUserInput => assert(!getUserInput('index').match(/var/g));
|
||||
- text: The variable <code>i</code> declared in the if statement should equal "block scope".
|
||||
testString: getUserInput => assert(getUserInput('index').match(/(i\s*=\s*).*\s*.*\s*.*\1('|")block\s*scope\2/g));
|
||||
- text: <code>checkScope()</code> should return "function scope"
|
||||
testString: assert(checkScope() === "function scope");
|
||||
|
||||
```
|
||||
|
||||
@ -36,13 +39,13 @@ tests:
|
||||
|
||||
```js
|
||||
function checkScope() {
|
||||
"use strict";
|
||||
var i = "function scope";
|
||||
'use strict';
|
||||
var i = 'function scope';
|
||||
if (true) {
|
||||
i = "block scope";
|
||||
console.log("Block scope i is: ", i);
|
||||
i = 'block scope';
|
||||
console.log('Block scope i is: ', i);
|
||||
}
|
||||
console.log("Function scope i is: ", i);
|
||||
console.log('Function scope i is: ', i);
|
||||
return i;
|
||||
}
|
||||
|
||||
@ -50,14 +53,23 @@ function checkScope() {
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
function checkScope() {
|
||||
'use strict';
|
||||
let i = 'function scope';
|
||||
if (true) {
|
||||
let i = 'block scope';
|
||||
console.log('Block scope i is: ', i);
|
||||
}
|
||||
|
||||
console.log('Function scope i is: ', i);
|
||||
return i;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,27 @@
|
||||
id: 587d7b8c367417b2b2512b58
|
||||
title: Create an Export Fallback with export default
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
forumTopicId: 301199
|
||||
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> return x + y; <br> } </blockquote> Примечание. Поскольку <code>export default</code> используется для объявления резервного значения для модуля или файла, вы можете иметь только одно значение для экспорта по умолчанию в каждом модуле или файле. Кроме того, вы не можете использовать <code>export default</code> с <code>var</code> , <code>let</code> или <code>const</code> </section>
|
||||
<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> return 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>
|
||||
<section id='instructions'>
|
||||
Следующая функция должна быть резервным значением для модуля. Пожалуйста, добавьте необходимый код для этого.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ''
|
||||
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.");'
|
||||
- text: Your code should use <code>export</code> fallback.
|
||||
testString: assert(code.match(/export\s+default\s+function(\s+subtract\s*|\s*)\(\s*x,\s*y\s*\)\s*{/g));
|
||||
|
||||
```
|
||||
|
||||
@ -30,30 +34,23 @@ tests:
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
function subtract(x,y) {return x - y;}
|
||||
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
|
||||
export default function subtract(x, y) {
|
||||
return x - y;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,33 @@
|
||||
id: 587d7b8a367417b2b2512b4e
|
||||
title: Create Strings using Template Literals
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
forumTopicId: 301200
|
||||
localeTitle: Создание строк с использованием шаблонных литералов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Новая функция ES6 - это <dfn>шаблонный литерал</dfn> . Это специальный тип строки, который упрощает создание сложных строк. Литералы шаблонов позволяют создавать многострочные строки и использовать функции интерполяции строк для создания строк. Рассмотрим следующий код: <blockquote> const person = { <br> name: "Зодиак Хасбро", <br> age: 56 <br> }; <br><br> // Литерал шаблона с многострочной и строковой интерполяцией <br> const greeting = `Привет, меня зовут $ {person.name}! <br> Мне $ {person.age} лет. '; <br><br> console.log (greeting); // печатает <br> // Привет, меня зовут Асбро! <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>
|
||||
<section id='description'>
|
||||
Новая функция ES6 - это <dfn>шаблонный литерал</dfn> . Это специальный тип строки, который упрощает создание сложных строк. Литералы шаблонов позволяют создавать многострочные строки и использовать функции интерполяции строк для создания строк. Рассмотрим следующий код: <blockquote> const person = { <br> name: "Зодиак Хасбро", <br> age: 56 <br> }; <br><br> // Литерал шаблона с многострочной и строковой интерполяцией <br> const greeting = `Привет, меня зовут $ {person.name}! <br> Мне $ {person.age} лет. '; <br><br> console.log (greeting); // печатает <br> // Привет, меня зовут Асбро! <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>failure</code> объекта <code>result</code> . Каждая запись должна быть обернута внутрь элемента <code>li</code> с атрибутом класса <code>text-warning</code> и указана в <code>resultDisplayArray</code> . </section>
|
||||
<section id='instructions'>
|
||||
Используйте синтаксис литерала шаблона с обратными штрихами для отображения каждой записи массива <code>failure</code> объекта <code>result</code> . Каждая запись должна быть обернута внутрь элемента <code>li</code> с атрибутом класса <code>text-warning</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");'
|
||||
- text: <code>resultDisplayArray</code> should be an array containing <code>result failure</code> messages.
|
||||
testString: assert(typeof makeList(result.failure) === 'object' && resultDisplayArray.length === 3);
|
||||
- text: <code>resultDisplayArray</code> is the desired output.
|
||||
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>`));
|
||||
- text: Template strings and expression interpolation should be used
|
||||
testString: getUserInput => assert(getUserInput('index').match(/(`.*\${.*}.*`)/));
|
||||
- text: An iterator should be used
|
||||
testString: getUserInput => assert(getUserInput('index').match(/for|map|reduce|forEach|while/));
|
||||
|
||||
```
|
||||
|
||||
@ -60,14 +66,31 @@ const resultDisplayArray = makeList(result.failure);
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
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";
|
||||
|
||||
const resultDisplayArray = arr.map(val => `<li class="text-warning">${val}</li>`);
|
||||
|
||||
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);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,33 @@
|
||||
id: 587d7b87367417b2b2512b41
|
||||
title: Declare a Read-Only Variable with the const Keyword
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
forumTopicId: 301201
|
||||
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> "use strict" <br> const FAV_PET = "Кошки"; <br> FAV_PET = "Собаки"; // возвращает ошибку </blockquote> Как вы можете видеть, попытка переопределить переменную, объявленную с помощью <code>const</code> вызовет ошибку. Вы всегда должны указывать переменные, которые вы не хотите переопределять, используя ключевое слово <code>const</code> . Это помогает, когда вы случайно пытаетесь переопределить переменную, которая должна оставаться постоянной. Обычной практикой является писать все буквы в названии переменной заглавными, а слова разделять нижним подчеркиванием. </section>
|
||||
<section id='description'>
|
||||
<code>let</code> не является единственным новым способом объявления переменных. В ES6 вы также можете объявлять переменные, используя ключевое слово <code>const</code> . <code>const</code> имеет все потрясающие возможности, которые имеет <code>let</code>, с дополнительным бонусом, что переменные, объявленные с использованием <code>const</code> , доступны только для чтения. Они являются постоянной величиной, это означает, что когда переменная присваивается <code>const</code> , она не может быть переопределена. <blockquote> "use strict" <br> const FAV_PET = "Кошки"; <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>
|
||||
<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>.");'
|
||||
- text: <code>var</code> does not exist in your code.
|
||||
testString: getUserInput => assert(!getUserInput('index').match(/var/g));
|
||||
- text: <code>SENTENCE</code> should be a constant variable declared with <code>const</code>.
|
||||
testString: getUserInput => assert(getUserInput('index').match(/(const SENTENCE)/g));
|
||||
- text: <code>i</code> should be declared with <code>let</code>.
|
||||
testString: getUserInput => assert(getUserInput('index').match(/(let i)/g));
|
||||
- text: <code>console.log</code> should be changed to print the <code>SENTENCE</code> variable.
|
||||
testString: getUserInput => assert(getUserInput('index').match(/console\.log\(\s*SENTENCE\s*\)\s*;?/g));
|
||||
|
||||
```
|
||||
|
||||
@ -42,7 +46,7 @@ function printManyTimes(str) {
|
||||
// change code below this line
|
||||
|
||||
var sentence = str + " is cool!";
|
||||
for(var i = 0; i < str.length; i+=2) {
|
||||
for (var i = 0; i < str.length; i+=2) {
|
||||
console.log(sentence);
|
||||
}
|
||||
|
||||
@ -55,14 +59,26 @@ printManyTimes("freeCodeCamp");
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
function printManyTimes(str) {
|
||||
"use strict";
|
||||
|
||||
// change code below this line
|
||||
|
||||
const SENTENCE = str + " is cool!";
|
||||
for (let i = 0; i < str.length; i+=2) {
|
||||
console.log(SENTENCE);
|
||||
}
|
||||
|
||||
// change code above this line
|
||||
|
||||
}
|
||||
printManyTimes("freeCodeCamp");
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,31 @@
|
||||
id: 587d7b87367417b2b2512b3f
|
||||
title: Explore Differences Between the var and let Keywords
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
forumTopicId: 301202
|
||||
localeTitle: Исследуйте различия между ключевыми словами var и let
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Одна из самых больших проблем с объявлением переменных с ключевым словом <code>var</code> заключается в том, что вы можете перезаписывать значения переменных без каких либо ошибок. <blockquote> var camper = 'Джеймс'; <br> var camper = 'David'; <br> console.log (camper); <br> // logs 'David' </blockquote> Как вы можете видеть в приведенном выше коде, переменную <code>camper</code> изначально записывается значение <code>James</code>, а затем переопределяется как <code>David</code> . В небольшом приложении вы можете не столкнуться с этой проблемой, но когда ваш код станет больше, вы можете случайно перезаписать переменную, которую вы не намеревались перезаписывать. Поскольку это поведение не вызывает ошибки, поиск и исправление ошибок усложняется. <br> В ES6 было введено новое ключевое слово <code>let</code> чтобы решить эту потенциальную проблему возникающую с помощью ключевого слова <code>var</code> . Если вы замените код с <code>var</code> на <code>let</code> в объявлениях переменных вышеприведенного кода, результатом будет ошибка. <blockquote> let camper = «Джеймс»; <br> let camper = «Дэвид»; // выдает ошибку </blockquote> Эту ошибку можно увидеть в консоли вашего браузера. Таким образом, в отличие от <code>var</code> , при использовании <code>let</code> переменная с тем же именем может быть объявлена только один раз. Обратите внимание на <code>"use strict"</code> . Это позволяет использовать Strict Mode, который ловит распространенные ошибки кодирования и «небезопасные» действия. Например: <blockquote> «use strict»; <br> x = 3,14; // выдает ошибку, поскольку x не объявляется </blockquote></section>
|
||||
<section id='description'>
|
||||
Одна из самых больших проблем с объявлением переменных с ключевым словом <code>var</code> заключается в том, что вы можете перезаписывать значения переменных без каких либо ошибок. <blockquote> var camper = 'Джеймс'; <br> var camper = 'David'; <br> console.log (camper); <br> // logs 'David' </blockquote> Как вы можете видеть в приведенном выше коде, переменную <code>camper</code> изначально записывается значение <code>James</code>, а затем переопределяется как <code>David</code> . В небольшом приложении вы можете не столкнуться с этой проблемой, но когда ваш код станет больше, вы можете случайно перезаписать переменную, которую вы не намеревались перезаписывать. Поскольку это поведение не вызывает ошибки, поиск и исправление ошибок усложняется. <br> В ES6 было введено новое ключевое слово <code>let</code> чтобы решить эту потенциальную проблему возникающую с помощью ключевого слова <code>var</code> . Если вы замените код с <code>var</code> на <code>let</code> в объявлениях переменных вышеприведенного кода, результатом будет ошибка. <blockquote> let camper = «Джеймс»; <br> let camper = «Дэвид»; // выдает ошибку </blockquote> Эту ошибку можно увидеть в консоли вашего браузера. Таким образом, в отличие от <code>var</code> , при использовании <code>let</code> переменная с тем же именем может быть объявлена только один раз. Обратите внимание на <code>"use strict"</code> . Это позволяет использовать Strict Mode, который ловит распространенные ошибки кодирования и «небезопасные» действия. Например: <blockquote> «use strict»; <br> x = 3,14; // выдает ошибку, поскольку x не объявляется </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Обновите код, используя только ключевое слово <code>let</code>. </section>
|
||||
<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>");'
|
||||
- text: <code>var</code> does not exist in code.
|
||||
testString: getUserInput => assert(!getUserInput('index').match(/var/g));
|
||||
- text: <code>catName</code> should be <code>Oliver</code>.
|
||||
testString: assert(catName === "Oliver");
|
||||
- text: <code>quote</code> should be <code>"Oliver says Meow!"</code>
|
||||
testString: assert(quote === "Oliver says Meow!");
|
||||
|
||||
```
|
||||
|
||||
@ -49,14 +53,21 @@ catTalk();
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
let catName;
|
||||
let quote;
|
||||
function catTalk() {
|
||||
'use strict';
|
||||
|
||||
catName = 'Oliver';
|
||||
quote = catName + ' says Meow!';
|
||||
}
|
||||
catTalk();
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,27 @@
|
||||
id: 587d7b8d367417b2b2512b59
|
||||
title: Import a Default Export
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
forumTopicId: 301205
|
||||
localeTitle: Импорт экспорта по умолчанию
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> В последней задаче вы узнали об <code>export default</code> и его использовании. Важно отметить, что для импорта экспорта по умолчанию вам нужно использовать другой синтаксис <code>import</code> . В следующем примере у нас есть функция <code>add</code> , то есть экспорт по умолчанию файла <code>"math_functions"</code> . Вот как его импортировать: <blockquote> import добавить из "math_functions"; <br> добавить (5,4); // Вернет 9 </blockquote> Синтаксис отличается в одном ключевом месте - импортированное значение, <code>add</code> , не окружено фигурными фигурными скобками <code>{}</code> . В отличие от экспортированных значений основным методом импорта экспорта по умолчанию является простое имя значения после <code>import</code> . </section>
|
||||
<section id='description'>
|
||||
В последней задаче вы узнали об <code>export default</code> и его использовании. Важно отметить, что для импорта экспорта по умолчанию вам нужно использовать другой синтаксис <code>import</code> . В следующем примере у нас есть функция <code>add</code> , то есть экспорт по умолчанию файла <code>"math_functions"</code> . Вот как его импортировать: <blockquote> import добавить из "math_functions"; <br> добавить (5,4); // Вернет 9 </blockquote> Синтаксис отличается в одном ключевом месте - импортированное значение, <code>add</code> , не окружено фигурными фигурными скобками <code>{}</code> . В отличие от экспортированных значений основным методом импорта экспорта по умолчанию является простое имя значения после <code>import</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> В следующем коде, пожалуйста, импортируйте экспорт по умолчанию, <code>subtract</code> из файла <code>"math_functions"</code> , найденного в том же каталоге, что и этот файл. </section>
|
||||
<section id='instructions'>
|
||||
В следующем коде, пожалуйста, импортируйте экспорт по умолчанию, <code>subtract</code> из файла <code>"math_functions"</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.");'
|
||||
- text: You should properly import <code>subtract</code> from <code>math_functions.js</code>.
|
||||
testString: assert(code.match(/import\s+subtract\s+from\s+('|")\.\/math_functions\.js\1/g));
|
||||
|
||||
```
|
||||
|
||||
@ -30,34 +34,25 @@ tests:
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
|
||||
// add code above this line
|
||||
|
||||
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
|
||||
import subtract from "./math_functions.js";
|
||||
// add code above this line
|
||||
|
||||
subtract(7,4);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,33 @@
|
||||
id: 587d7b87367417b2b2512b42
|
||||
title: Mutate an Array Declared with const
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 'Мутате массив, объявленный с константой'
|
||||
forumTopicId: 301206
|
||||
localeTitle: Мутате массив, объявленный с константой
|
||||
---
|
||||
|
||||
## 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>
|
||||
<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>
|
||||
<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>.");'
|
||||
- text: Do not replace <code>const</code> keyword.
|
||||
testString: getUserInput => assert(getUserInput('index').match(/const/g));
|
||||
- text: <code>s</code> should be a constant variable (by using <code>const</code>).
|
||||
testString: getUserInput => assert(getUserInput('index').match(/const\s+s/g));
|
||||
- text: Do not change the original array declaration.
|
||||
testString: getUserInput => assert(getUserInput('index').match(/const\s+s\s*=\s*\[\s*5\s*,\s*7\s*,\s*2\s*\]\s*;?/g));
|
||||
- text: <code>s</code> should be equal to <code>[2, 5, 7]</code>.
|
||||
testString: assert.deepEqual(s, [2, 5, 7]);
|
||||
|
||||
```
|
||||
|
||||
@ -38,7 +42,7 @@ tests:
|
||||
```js
|
||||
const s = [5, 7, 2];
|
||||
function editInPlace() {
|
||||
"use strict";
|
||||
'use strict';
|
||||
// change code below this line
|
||||
|
||||
// s = [2, 5, 7]; <- this is invalid
|
||||
@ -51,14 +55,24 @@ editInPlace();
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
const s = [5, 7, 2];
|
||||
function editInPlace() {
|
||||
'use strict';
|
||||
// change code below this line
|
||||
|
||||
// s = [2, 5, 7]; <- this is invalid
|
||||
s[0] = 2;
|
||||
s[1] = 5;
|
||||
s[2] = 7;
|
||||
// change code above this line
|
||||
}
|
||||
editInPlace();
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,33 @@
|
||||
id: 598f48a36c8c40764b4e52b3
|
||||
title: Prevent Object Mutation
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
forumTopicId: 301207
|
||||
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 = "bad"; // будет проигнорирован. Мутация не допускается <br> obj.newProp = "Test"; // будет проигнорирован. Мутация не допускается <br> console.log (OBJ); <br> // {name: "FreeCodeCamp", обзор: "Awesome"} </blockquote></section>
|
||||
<section id='description'>
|
||||
Как видно из предыдущей задачи, одно только объявление <code>const</code> не защищает ваши данные от мутации. Чтобы ваши данные не менялись, JavaScript предоставляет функцию <code>Object.freeze</code> для предотвращения мутации данных. После того, как объект будет заморожен, вы больше не сможете добавлять, обновлять или удалять из него свойства. Любая попытка изменить объект будет отклонена без ошибок. <blockquote> пусть obj = { <br> Название: "FreeCodeCamp", <br> Обзор: «Высокий» <br> }; <br> Object.freeze (OBJ); <br> obj.review = "bad"; // будет проигнорирован. Мутация не допускается <br> obj.newProp = "Test"; // будет проигнорирован. Мутация не допускается <br> console.log (OBJ); <br> // {name: "FreeCodeCamp", обзор: "Awesome"} </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> В этой задаче вы собираетесь использовать <code>Object.freeze</code> для предотвращения изменения математических констант. Вам необходимо заморозить объект <code>MATH_CONSTANTS</code> чтобы никто не мог изменять значение свойств <code>PI</code> , добавлять или удалять. </section>
|
||||
<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>.");'
|
||||
- text: Do not replace <code>const</code> keyword.
|
||||
testString: getUserInput => assert(getUserInput('index').match(/const/g));
|
||||
- text: <code>MATH_CONSTANTS</code> should be a constant variable (by using <code>const</code>).
|
||||
testString: getUserInput => assert(getUserInput('index').match(/const\s+MATH_CONSTANTS/g));
|
||||
- text: Do not change original <code>MATH_CONSTANTS</code>.
|
||||
testString: getUserInput => assert(getUserInput('index').match(/const\s+MATH_CONSTANTS\s+=\s+{\s+PI:\s+3.14\s+};/g));
|
||||
- text: <code>PI</code> equals <code>3.14</code>.
|
||||
testString: assert(PI === 3.14);
|
||||
|
||||
```
|
||||
|
||||
@ -37,7 +41,7 @@ tests:
|
||||
|
||||
```js
|
||||
function freezeObj() {
|
||||
"use strict";
|
||||
'use strict';
|
||||
const MATH_CONSTANTS = {
|
||||
PI: 3.14
|
||||
};
|
||||
@ -47,7 +51,7 @@ function freezeObj() {
|
||||
// change code above this line
|
||||
try {
|
||||
MATH_CONSTANTS.PI = 99;
|
||||
} catch( ex ) {
|
||||
} catch(ex) {
|
||||
console.log(ex);
|
||||
}
|
||||
return MATH_CONSTANTS.PI;
|
||||
@ -58,14 +62,29 @@ const PI = freezeObj();
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
function freezeObj() {
|
||||
'use strict';
|
||||
const MATH_CONSTANTS = {
|
||||
PI: 3.14
|
||||
};
|
||||
// change code below this line
|
||||
Object.freeze(MATH_CONSTANTS);
|
||||
|
||||
// change code above this line
|
||||
try {
|
||||
MATH_CONSTANTS.PI = 99;
|
||||
} catch(ex) {
|
||||
console.log(ex);
|
||||
}
|
||||
return MATH_CONSTANTS.PI;
|
||||
}
|
||||
const PI = freezeObj();
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,31 @@
|
||||
id: 587d7b88367417b2b2512b46
|
||||
title: Set Default Parameters for Your Functions
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
forumTopicId: 301209
|
||||
localeTitle: Установка параметров по умолчанию для ваших функций
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Чтобы помочь нам создать более гибкие функции, ES6 вводит <dfn>параметры</dfn> по <dfn>умолчанию</dfn> для функций. Проверьте этот код: <blockquote> приветствие функции (name = "Anonymous") { <br> return "Hello" + name; <br> } <br> console.log (приветствие ( "Джон")); // Привет Джон <br> console.log (приветствие ()); // Привет Аноним </blockquote> Параметр по умолчанию запускается, когда аргумент не указан (он не определен). Как вы можете видеть в приведенном выше примере, <code>name</code> параметра получит значение по умолчанию <code>"Anonymous"</code> если вы не указали значение параметра. Вы можете добавить значения по умолчанию для столько параметров, сколько хотите. </section>
|
||||
<section id='description'>
|
||||
Чтобы помочь нам создать более гибкие функции, ES6 вводит <dfn>параметры</dfn> по <dfn>умолчанию</dfn> для функций. Проверьте этот код: <blockquote> приветствие функции (name = "Anonymous") { <br> return "Hello" + name; <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>
|
||||
<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>.");'
|
||||
- text: The result of <code>increment(5, 2)</code> should be <code>7</code>.
|
||||
testString: assert(increment(5, 2) === 7);
|
||||
- text: The result of <code>increment(5)</code> should be <code>6</code>.
|
||||
testString: assert(increment(5) === 6);
|
||||
- text: Default parameter <code>1</code> was used for <code>value</code>.
|
||||
testString: assert(code.match(/value\s*=\s*1/g));
|
||||
|
||||
```
|
||||
|
||||
@ -34,12 +38,8 @@ tests:
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const increment = (function() {
|
||||
"use strict";
|
||||
return function increment(number, value) {
|
||||
return number + value;
|
||||
};
|
||||
})();
|
||||
const increment = (number, value) => number + value;
|
||||
|
||||
console.log(increment(5, 2)); // returns 7
|
||||
console.log(increment(5)); // returns 6
|
||||
|
||||
@ -47,14 +47,13 @@ console.log(increment(5)); // returns 6
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
const increment = (number, value = 1) => number + value;
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -7,10 +7,14 @@ localeTitle: Понимание различий между импортом и
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Раньше функция <code>require()</code> использовалась для импорта функций и кода во внешние файлы и модули. Хотя это удобно, это создает проблему: некоторые файлы и модули довольно большие, и вам может понадобиться только определенный код из этих внешних ресурсов. ES6 дает нам очень удобный инструмент, известный как <dfn>импорт</dfn> . С его помощью мы можем выбрать, какие части модуля или файла загружать в данный файл, экономя время и память. Рассмотрим следующий пример. Представьте, что <code>math_array_functions</code> имеет около 20 функций, но мне нужен только один <code>countItems</code> в моем текущем файле. Старый метод <code>require()</code> заставил бы меня задействовать все 20 функций. С помощью этого нового синтаксиса <code>import</code> я могу привести только желаемую функцию, например: <blockquote> import {countItems} из "math_array_functions" </blockquote> Описание приведенного выше кода: <blockquote> import {function} из "file_path_goes_here" <br> // Мы также можем импортировать переменные одинаково! </blockquote> Существует несколько способов написания оператора <code>import</code> , но это очень распространенный случай использования. <strong>Заметка</strong> <br> Пробел, окружающий функцию внутри фигурных скобок, является лучшей практикой - упрощает чтение инструкции <code>import</code> . <strong>Заметка</strong> <br> В уроках этого раздела используются функции, отличные от браузера. <code>import</code> и заявления, которые мы вводим на оставшихся уроках, не будут работать в браузере напрямую. Однако мы можем использовать различные инструменты для создания кода из этого, чтобы он работал в браузере. <strong>Заметка</strong> <br> В большинстве случаев путь к файлу требует <code>./</code> перед ним; в противном случае узел будет выглядеть в каталоге <code>node_modules</code> сначала пытаясь загрузить его как зависимость. </section>
|
||||
<section id='description'>
|
||||
Раньше функция <code>require()</code> использовалась для импорта функций и кода во внешние файлы и модули. Хотя это удобно, это создает проблему: некоторые файлы и модули довольно большие, и вам может понадобиться только определенный код из этих внешних ресурсов. ES6 дает нам очень удобный инструмент, известный как <dfn>импорт</dfn> . С его помощью мы можем выбрать, какие части модуля или файла загружать в данный файл, экономя время и память. Рассмотрим следующий пример. Представьте, что <code>math_array_functions</code> имеет около 20 функций, но мне нужен только один <code>countItems</code> в моем текущем файле. Старый метод <code>require()</code> заставил бы меня задействовать все 20 функций. С помощью этого нового синтаксиса <code>import</code> я могу привести только желаемую функцию, например: <blockquote> import {countItems} из "math_array_functions" </blockquote> Описание приведенного выше кода: <blockquote> import {function} из "file_path_goes_here" <br> // Мы также можем импортировать переменные одинаково! </blockquote> Существует несколько способов написания оператора <code>import</code> , но это очень распространенный случай использования. <strong>Заметка</strong> <br> Пробел, окружающий функцию внутри фигурных скобок, является лучшей практикой - упрощает чтение инструкции <code>import</code> . <strong>Заметка</strong> <br> В уроках этого раздела используются функции, отличные от браузера. <code>import</code> и заявления, которые мы вводим на оставшихся уроках, не будут работать в браузере напрямую. Однако мы можем использовать различные инструменты для создания кода из этого, чтобы он работал в браузере. <strong>Заметка</strong> <br> В большинстве случаев путь к файлу требует <code>./</code> перед ним; в противном случае узел будет выглядеть в каталоге <code>node_modules</code> сначала пытаясь загрузить его как зависимость.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте соответствующий оператор <code>import</code> , который позволит текущему файлу использовать функцию <code>capitalizeString</code> . Файл, в котором работает эта функция, называется <code>"string_functions"</code> , и он находится в том же каталоге, что и текущий файл. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте соответствующий оператор <code>import</code> , который позволит текущему файлу использовать функцию <code>capitalizeString</code> . Файл, в котором работает эта функция, называется <code>"string_functions"</code> , и он находится в том же каталоге, что и текущий файл.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@ -19,7 +23,6 @@ localeTitle: Понимание различий между импортом и
|
||||
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>
|
||||
@ -37,7 +40,7 @@ capitalizeString("hello!");
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
### Before Tests
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
@ -51,7 +54,6 @@ capitalizeString: str => str.toUpperCase()
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
@ -60,4 +62,5 @@ capitalizeString: str => str.toUpperCase()
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,27 @@
|
||||
id: 587d7b8c367417b2b2512b57
|
||||
title: Use * to Import Everything from a File
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 'Используйте *, чтобы импортировать все из файла'
|
||||
forumTopicId: 301210
|
||||
localeTitle: Используйте *, чтобы импортировать все из файла
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Предположим, у вас есть файл, который вы хотите импортировать все его содержимое в текущий файл. Это можно сделать с помощью синтаксиса <dfn>import *</dfn> . Вот пример, когда содержимое файла с именем <code>"math_functions"</code> импортируется в файл в том же каталоге: <blockquote> import * как myMathModule из "math_functions"; <br> myMathModule.add (2,3); <br> myMathModule.subtract (5,3); </blockquote> И разбив этот код: <blockquote> import * как object_with_name_of_your_choice из "file_path_goes_here" <br> object_with_name_of_your_choice.imported_function </blockquote> Вы можете использовать любое имя после <code>import * as</code> часть инструкции. Чтобы использовать этот метод, для него требуется объект, который получает импортированные значения. Здесь вы будете использовать точечную нотацию, чтобы вызвать ваши импортированные значения. </section>
|
||||
<section id='description'>
|
||||
Предположим, у вас есть файл, который вы хотите импортировать все его содержимое в текущий файл. Это можно сделать с помощью синтаксиса <dfn>import *</dfn> . Вот пример, когда содержимое файла с именем <code>"math_functions"</code> импортируется в файл в том же каталоге: <blockquote> import * как myMathModule из "math_functions"; <br> myMathModule.add (2,3); <br> myMathModule.subtract (5,3); </blockquote> И разбив этот код: <blockquote> import * как object_with_name_of_your_choice из "file_path_goes_here" <br> object_with_name_of_your_choice.imported_function </blockquote> Вы можете использовать любое имя после <code>import * as</code> часть инструкции. Чтобы использовать этот метод, для него требуется объект, который получает импортированные значения. Здесь вы будете использовать точечную нотацию, чтобы вызвать ваши импортированные значения.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> В приведенном ниже коде требуется содержимое файла <code>"capitalize_strings"</code> , найденного в том же каталоге, который он импортировал. Добавьте соответствующий оператор <code>import *</code> в начало файла, используя предоставленный объект. </section>
|
||||
<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.");'
|
||||
- text: Properly uses <code>import * as</code> syntax.
|
||||
testString: assert(code.match(/import\s*\*\s*as\s+stringFunctions\s+from\s*('|")\.\/string_functions\.js\1/g));
|
||||
|
||||
```
|
||||
|
||||
@ -30,34 +34,26 @@ tests:
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
// add code above this line
|
||||
|
||||
stringFunctions.uppercaseString("hello");
|
||||
stringFunctions.lowercaseString("WORLD!");
|
||||
|
||||
```
|
||||
|
||||
</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
|
||||
import * as stringFunctions from "./string_functions.js";
|
||||
// add code above this line
|
||||
|
||||
stringFunctions.uppercaseString("hello");
|
||||
stringFunctions.lowercaseString("WORLD!");
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,31 +2,35 @@
|
||||
id: 587d7b87367417b2b2512b43
|
||||
title: Use Arrow Functions to Write Concise Anonymous Functions
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
forumTopicId: 301211
|
||||
localeTitle: Используйте функции стрелок для записи сжатых анонимных функций
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> В JavaScript нам часто не нужно называть наши функции, особенно при передаче функции в качестве аргумента другой функции. Вместо этого мы создаем встроенные функции. Нам не нужно называть эти функции, потому что мы не используем их повторно нигде. Для этого мы часто используем следующий синтаксис: <blockquote> const myFunc = function () { <br> const myVar = "value"; <br> return myVar; <br> } </blockquote> ES6 предоставляет нам синтаксический сахар, чтобы не писать анонимные функции таким образом. Вместо этого вы можете использовать <strong>синтаксис функции стрелки</strong> : <blockquote> const myFunc = () => { <br> const myVar = "value"; <br> return myVar; <br> } </blockquote> Когда нет тела функции и только возвращаемое значение, синтаксис функции стрелки позволяет опустить <code>return</code> ключевое слово, а также скобки, окружающие код. Это помогает упростить меньшие функции в однострочные операторы: <blockquote> const myFunc = () => "value" </blockquote> Этот код по-прежнему будет возвращать <code>value</code> по умолчанию. </section>
|
||||
<section id='description'>
|
||||
В JavaScript нам часто не нужно называть наши функции, особенно при передаче функции в качестве аргумента другой функции. Вместо этого мы создаем встроенные функции. Нам не нужно называть эти функции, потому что мы не используем их повторно нигде. Для этого мы часто используем следующий синтаксис: <blockquote> const myFunc = function () { <br> const myVar = "value"; <br> return myVar; <br> } </blockquote> ES6 предоставляет нам синтаксический сахар, чтобы не писать анонимные функции таким образом. Вместо этого вы можете использовать <strong>синтаксис функции стрелки</strong> : <blockquote> const myFunc = () => { <br> const myVar = "value"; <br> return 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>
|
||||
<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.");'
|
||||
- text: User should replace <code>var</code> keyword.
|
||||
testString: getUserInput => assert(!getUserInput('index').match(/var/g));
|
||||
- text: <code>magic</code> should be a constant variable (by using <code>const</code>).
|
||||
testString: getUserInput => assert(getUserInput('index').match(/const\s+magic/g));
|
||||
- text: <code>magic</code> should be a <code>function</code>.
|
||||
testString: assert(typeof magic === 'function');
|
||||
- text: <code>magic()</code> should return correct date.
|
||||
testString: assert(magic().setHours(0,0,0,0) === new Date().setHours(0,0,0,0));
|
||||
- text: <code>function</code> keyword should not be used.
|
||||
testString: getUserInput => assert(!getUserInput('index').match(/function/g));
|
||||
|
||||
```
|
||||
|
||||
@ -47,14 +51,16 @@ var magic = function() {
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
const magic = () => {
|
||||
"use strict";
|
||||
return new Date();
|
||||
};
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,33 @@
|
||||
id: 587d7b8b367417b2b2512b53
|
||||
title: Use class Syntax to Define a Constructor Function
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
forumTopicId: 301212
|
||||
localeTitle: Использовать синтаксис класса для определения функции конструктора
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> ES6 предоставляет новый синтаксис для создания объектов с использованием <dfn>класса</dfn> ключевых слов. Следует отметить, что синтаксис <code>class</code> является просто синтаксисом, а не полноценной реализацией объектно-ориентированной парадигмы на основе классов, в отличие от языков, таких как Java, или Python, или Ruby и т. Д. В ES5 мы обычно определяем конструктор функции и используйте <code>new</code> ключевое слово для создания экземпляра объекта. <blockquote> var SpaceShuttle = function (targetPlanet) { <br> this.targetPlanet = targetPlanet; <br> } <br> var zeus = новый SpaceShuttle ('Юпитер'); </blockquote> Синтаксис класса просто заменяет создание функции конструктора: <blockquote> класс SpaceShuttle { <br> Конструктор (targetPlanet) { <br> this.targetPlanet = targetPlanet; <br> } <br> } <br> const zeus = new SpaceShuttle («Юпитер»); </blockquote> Обратите внимание, что ключевое слово <code>class</code> объявляет новую функцию и добавляется конструктор, который будет вызываться при вызове <code>new</code> - для создания нового объекта. </section>
|
||||
<section id='description'>
|
||||
ES6 предоставляет новый синтаксис для создания объектов с использованием <dfn>класса</dfn> ключевых слов. Следует отметить, что синтаксис <code>class</code> является просто синтаксисом, а не полноценной реализацией объектно-ориентированной парадигмы на основе классов, в отличие от языков, таких как Java, или Python, или Ruby и т. Д. В ES5 мы обычно определяем конструктор функции и используйте <code>new</code> ключевое слово для создания экземпляра объекта. <blockquote> var SpaceShuttle = function (targetPlanet) { <br> this.targetPlanet = targetPlanet; <br> } <br> var zeus = новый SpaceShuttle ('Юпитер'); </blockquote> Синтаксис класса просто заменяет создание функции конструктора: <blockquote> класс SpaceShuttle { <br> Конструктор (targetPlanet) { <br> this.targetPlanet = targetPlanet; <br> } <br> } <br> const zeus = new SpaceShuttle («Юпитер»); </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>
|
||||
<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>.");'
|
||||
- text: <code>Vegetable</code> should be a <code>class</code> with a defined <code>constructor</code> method.
|
||||
testString: assert(typeof Vegetable === 'function' && typeof Vegetable.constructor === 'function');
|
||||
- text: <code>class</code> keyword should be used.
|
||||
testString: assert(code.match(/class/g));
|
||||
- text: <code>Vegetable</code> should be able to be instantiated.
|
||||
testString: assert(() => {const a = new Vegetable("apple"); return typeof a === 'object';});
|
||||
- text: <code>carrot.name</code> should return <code>carrot</code>.
|
||||
testString: assert(carrot.name=='carrot');
|
||||
|
||||
```
|
||||
|
||||
@ -36,14 +40,10 @@ tests:
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function makeClass() {
|
||||
"use strict";
|
||||
/* Alter code below this line */
|
||||
/* Alter code below this line */
|
||||
|
||||
/* Alter code above this line */
|
||||
|
||||
/* Alter code above this line */
|
||||
return Vegetable;
|
||||
}
|
||||
const Vegetable = makeClass();
|
||||
const carrot = new Vegetable('carrot');
|
||||
console.log(carrot.name); // => should be 'carrot'
|
||||
|
||||
@ -51,14 +51,18 @@ console.log(carrot.name); // => should be 'carrot'
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
class Vegetable {
|
||||
constructor(name) {
|
||||
this.name = name;
|
||||
}
|
||||
}
|
||||
const carrot = new Vegetable('carrot');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,31 @@
|
||||
id: 587d7b89367417b2b2512b4b
|
||||
title: Use Destructuring Assignment to Assign Variables from Arrays
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
forumTopicId: 301213
|
||||
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>
|
||||
<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"> Используйте назначение destructuring для обмена значениями <code>a</code> и <code>b</code> чтобы <code>a</code> получил значение, сохраненное в <code>b</code> , и <code>b</code> получает значение, сохраненное в <code>a</code> . </section>
|
||||
<section id='instructions'>
|
||||
Используйте назначение destructuring для обмена значениями <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.");'
|
||||
- text: Value of <code>a</code> should be 6, after swapping.
|
||||
testString: assert(a === 6);
|
||||
- text: Value of <code>b</code> should be 8, after swapping.
|
||||
testString: assert(b === 8);
|
||||
- text: Should use array destructuring to swap a and b.
|
||||
testString: assert(/\[\s*(\w)\s*,\s*(\w)\s*\]\s*=\s*\[\s*\2\s*,\s*\1\s*\]/g.test(code));
|
||||
|
||||
```
|
||||
|
||||
@ -35,12 +39,9 @@ tests:
|
||||
|
||||
```js
|
||||
let a = 8, b = 6;
|
||||
(() => {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
})();
|
||||
// change code above this line
|
||||
console.log(a); // should be 6
|
||||
console.log(b); // should be 8
|
||||
|
||||
@ -48,14 +49,14 @@ console.log(b); // should be 8
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
let a = 8, b = 6;
|
||||
[a, b] = [b, a];
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,31 @@
|
||||
id: 587d7b89367417b2b2512b4a
|
||||
title: Use Destructuring Assignment to Assign Variables from Nested Objects
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
forumTopicId: 301214
|
||||
localeTitle: Назначение Destructuring для назначения переменных из вложенных объектов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Подобным же образом мы можем разрушить <em>вложенные</em> объекты в переменные. Рассмотрим следующий код: <blockquote> const a = { <br> start: {x: 5, y: 6}, <br> end: {x: 6, y: -9} <br> }; <br> const {start: {x: startX, y: startY}} = a; <br> console.log (startX, startY); // 5, 6 </blockquote> В приведенном выше примере <code>start</code> переменной присваивается значение <code>a.start</code> , которое также является объектом. </section>
|
||||
<section id='description'>
|
||||
Подобным же образом мы можем разрушить <em>вложенные</em> объекты в переменные. Рассмотрим следующий код: <blockquote> const a = { <br> start: {x: 5, y: 6}, <br> end: {x: 6, y: -9} <br> }; <br> const {start: {x: startX, y: startY}} = a; <br> console.log (startX, startY); // 5, 6 </blockquote> В приведенном выше примере <code>start</code> переменной присваивается значение <code>a.start</code> , которое также является объектом.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте назначение destructuring, чтобы получить <code>max</code> <code>forecast.tomorrow</code> И назначьте его <code>maxOfTomorrow</code> . </section>
|
||||
<section id='instructions'>
|
||||
Используйте назначение destructuring, чтобы получить <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");'
|
||||
- text: You should remove the ES5 assignment syntax.
|
||||
testString: assert(!code.match(/lowToday = LOCAL_FORECAST\.today\.low/g) && !code.match(/highToday = LOCAL_FORECAST\.today.high/g))
|
||||
- text: You should use destructuring to create the <code>lowToday</code> variable.
|
||||
testString: assert(code.match(/(var|const|let)\s*{\s*today\s*:\s*{\s*(low\s*:\s*lowToday[^}]*|[^,]*,\s*low\s*:\s*lowToday\s*)}\s*}\s*=\s*LOCAL_FORECAST(;|\s+|\/\/)/g));
|
||||
- text: You should use destructuring to create the <code>highToday</code> variable.
|
||||
testString: assert(code.match(/(var|const|let)\s*{\s*today\s*:\s*{\s*(high\s*:\s*highToday[^}]*|[^,]*,\s*high\s*:\s*highToday\s*)}\s*}\s*=\s*LOCAL_FORECAST(;|\s+|\/\/)/g));
|
||||
|
||||
```
|
||||
|
||||
@ -33,32 +39,45 @@ tests:
|
||||
|
||||
```js
|
||||
const LOCAL_FORECAST = {
|
||||
today: { min: 72, max: 83 },
|
||||
tomorrow: { min: 73.3, max: 84.6 }
|
||||
yesterday: { low: 61, high: 75 },
|
||||
today: { low: 64, high: 77 },
|
||||
tomorrow: { low: 68, high: 80 }
|
||||
};
|
||||
|
||||
function getMaxOfTmrw(forecast) {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
const maxOfTomorrow = undefined; // change this line
|
||||
// change code above this line
|
||||
return maxOfTomorrow;
|
||||
}
|
||||
// change code below this line
|
||||
|
||||
const lowToday = LOCAL_FORECAST.today.low;
|
||||
const highToday = LOCAL_FORECAST.today.high;
|
||||
|
||||
console.log(getMaxOfTmrw(LOCAL_FORECAST)); // should be 84.6
|
||||
// change code above this line
|
||||
|
||||
console.log(lowToday); // should be 64
|
||||
console.log(highToday); // should be 77
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
const LOCAL_FORECAST = {
|
||||
yesterday: { low: 61, high: 75 },
|
||||
today: { low: 64, high: 77 },
|
||||
tomorrow: { low: 68, high: 80 }
|
||||
};
|
||||
|
||||
// change code below this line
|
||||
|
||||
const { today: { low: lowToday, high: highToday }} = LOCAL_FORECAST;
|
||||
|
||||
// change code above this line
|
||||
|
||||
console.log(highToday); // should be 77
|
||||
console.log(highTomorrow); // should be 80
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,31 @@
|
||||
id: 587d7b89367417b2b2512b49
|
||||
title: Use Destructuring Assignment to Assign Variables from Objects
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
forumTopicId: 301215
|
||||
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} = voxel // a = 3.6, b = 7.4, c = 6.54 </blockquote> Вы можете прочитать это как «получить поле <code>x</code> и скопировать значение в <code>a</code> » и так далее. </section>
|
||||
<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} = voxel // a = 3.6, b = 7.4, c = 6.54 </blockquote> Вы можете прочитать это как «получить поле <code>x</code> и скопировать значение в <code>a</code> » и так далее.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
undefined
|
||||
<section id='instructions'>
|
||||
Replace the two assignments with an equivalent destructuring assignment. It should still assign the variables <code>highToday</code> and <code>highTomorrow</code> the values of <code>today</code> and <code>tomorrow</code> from the <code>HIGH_TEMPERATURES</code> object.
|
||||
</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");'
|
||||
- text: You should remove the ES5 assignment syntax.
|
||||
testString: assert(!code.match(/highToday = HIGH_TEMPERATURES\.today/g) && !code.match(/highTomorrow = HIGH_TEMPERATURES\.tomorrow/g))
|
||||
- text: You should use destructuring to create the <code>highToday</code> variable.
|
||||
testString: assert(code.match(/(var|const|let)\s*{\s*(today:\s*highToday[^}]*|[^,]*,\s*today\s*:\s*highToday\s*)}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g));
|
||||
- text: You should use destructuring to create the <code>highTomorrow</code> variable.
|
||||
testString: assert(code.match(/(var|const|let)\s*{\s*(tomorrow:\s*highTomorrow[^}]*|[^,]*,\s*tomorrow\s*:\s*highTomorrow\s*)}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g));
|
||||
|
||||
```
|
||||
|
||||
@ -32,33 +38,47 @@ tests:
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const AVG_TEMPERATURES = {
|
||||
today: 77.5,
|
||||
tomorrow: 79
|
||||
const HIGH_TEMPERATURES = {
|
||||
yesterday: 75,
|
||||
today: 77,
|
||||
tomorrow: 80
|
||||
};
|
||||
|
||||
function getTempOfTmrw(avgTemperatures) {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
const tempOfTomorrow = undefined; // change this line
|
||||
// change code above this line
|
||||
return tempOfTomorrow;
|
||||
}
|
||||
// change code below this line
|
||||
|
||||
const highToday = HIGH_TEMPERATURES.today;
|
||||
const highTomorrow = HIGH_TEMPERATURES.tomorrow;
|
||||
|
||||
console.log(getTempOfTmrw(AVG_TEMPERATURES)); // should be 79
|
||||
// change code above this line
|
||||
|
||||
console.log(yesterday) // should be not defined
|
||||
console.log(highToday); // should be 77
|
||||
console.log(highTomorrow); // should be 80
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
const HIGH_TEMPERATURES = {
|
||||
yesterday: 75,
|
||||
today: 77,
|
||||
tomorrow: 80
|
||||
};
|
||||
|
||||
// change code below this line
|
||||
|
||||
const { today: highToday, tomorrow: highTomorrow } = HIGH_TEMPERATURES;
|
||||
|
||||
// change code above this line
|
||||
|
||||
console.log(highToday); // should be 77
|
||||
console.log(highTomorrow); // should be 80
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,33 @@
|
||||
id: 587d7b8a367417b2b2512b4d
|
||||
title: Use Destructuring Assignment to Pass an Object as a Function's Parameters
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
forumTopicId: 301217
|
||||
localeTitle: Назначение Destructuring для передачи объекта в качестве параметра функции
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> В некоторых случаях вы можете разрушить объект в самом аргументе функции. Рассмотрим следующий код: <blockquote> const profileUpdate = (profileData) => { <br> const {name, age, nationality, location} = profileData; <br> // делаем что-то с этими переменными <br> } </blockquote> Это эффективно разрушает объект, отправленный в функцию. Это также можно сделать на месте: <blockquote> const profileUpdate = ({имя, возраст, национальность, местоположение}) => { <br> / * что-то делать с этими полями * / <br> } </blockquote> Это устраняет некоторые дополнительные строки и делает наш код удобным. Это имеет дополнительное преимущество: не нужно манипулировать целым объектом в функции; только нужные поля копируются внутри функции. </section>
|
||||
<section id='description'>
|
||||
В некоторых случаях вы можете разрушить объект в самом аргументе функции. Рассмотрим следующий код: <blockquote> const profileUpdate = (profileData) => { <br> const {name, age, nationality, location} = profileData; <br> // делаем что-то с этими переменными <br> } </blockquote> Это эффективно разрушает объект, отправленный в функцию. Это также можно сделать на месте: <blockquote> const profileUpdate = ({имя, возраст, национальность, местоположение}) => { <br> / * что-то делать с этими полями * / <br> } </blockquote> Это устраняет некоторые дополнительные строки и делает наш код удобным. Это имеет дополнительное преимущество: не нужно манипулировать целым объектом в функции; только нужные поля копируются внутри функции.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
undefined
|
||||
<section id='instructions'>
|
||||
Use destructuring assignment within the argument to the function <code>half</code> to send only <code>max</code> and <code>min</code> inside the function.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ''
|
||||
testString: 'assert(typeof stats === "object", "<code>stats</code> should be an <code>object</code>.");'
|
||||
- text: ''
|
||||
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.");'
|
||||
- text: <code>stats</code> should be an <code>object</code>.
|
||||
testString: assert(typeof stats === 'object');
|
||||
- text: <code>half(stats)</code> should be <code>28.015</code>
|
||||
testString: assert(half(stats) === 28.015);
|
||||
- text: Destructuring should be used.
|
||||
testString: assert(code.replace(/\s/g, '').match(/half=\({\w+,\w+}\)/));
|
||||
- text: Destructured parameter should be used.
|
||||
testString: assert(!code.match(/stats\.max|stats\.min/));
|
||||
|
||||
```
|
||||
|
||||
@ -42,17 +48,11 @@ const stats = {
|
||||
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
|
||||
// change code below this line
|
||||
const half = (stats) => (stats.max + stats.min) / 2.0; // use function argument destructuring
|
||||
// change code above this line
|
||||
|
||||
})();
|
||||
console.log(stats); // should be object
|
||||
console.log(half(stats)); // should be 28.015
|
||||
|
||||
@ -60,14 +60,22 @@ console.log(half(stats)); // should be 28.015
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
const stats = {
|
||||
max: 56.78,
|
||||
standard_deviation: 4.34,
|
||||
median: 34.54,
|
||||
mode: 23.87,
|
||||
min: -0.75,
|
||||
average: 35.85
|
||||
};
|
||||
|
||||
const half = ( {max, min} ) => (max + min) / 2.0;
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -7,23 +7,26 @@ localeTitle: Назначение Destructuring с оператором Rest д
|
||||
---
|
||||
|
||||
## 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 (обр); // [3, 4, 5, 7] </blockquote> Переменные <code>a</code> и <code>b</code> принимают первое и второе значения из массива. После этого из-за присутствия оператора отдыха <code>arr</code> получает остальные значения в виде массива. Элемент rest работает корректно только как последняя переменная в списке. Как и в случае, вы не можете использовать оператор rest, чтобы поймать субарей, который не содержит последний элемент исходного массива. </section>
|
||||
<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 (обр); // [3, 4, 5, 7] </blockquote> Переменные <code>a</code> и <code>b</code> принимают первое и второе значения из массива. После этого из-за присутствия оператора отдыха <code>arr</code> получает остальные значения в виде массива. Элемент rest работает корректно только как последняя переменная в списке. Как и в случае, вы не можете использовать оператор rest, чтобы поймать субарей, который не содержит последний элемент исходного массива.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
undefined
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ''
|
||||
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: ''
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/slice/g), "<code>Array.slice()</code> should not be used.");'
|
||||
|
||||
- text: <code>arr</code> should be <code>[3,4,5,6,7,8,9,10]</code>
|
||||
testString: assert(arr.every((v, i) => v === i + 3) && arr.length === 8);
|
||||
- text: Destructuring should be used.
|
||||
testString: getUserInput => assert(getUserInput('index').match(/\[\s*\w*\s*,\s*\w*\s*,\s*...\w+\s*\]/g));
|
||||
- text: <code>Array.slice()</code> should not be used.
|
||||
testString: getUserInput => assert(!getUserInput('index').match(/slice/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -50,8 +53,6 @@ console.log(source); // should be [1,2,3,4,5,6,7,8,9,10];
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
@ -60,4 +61,5 @@ console.log(source); // should be [1,2,3,4,5,6,7,8,9,10];
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -7,10 +7,14 @@ localeTitle: Использовать экспорт для повторного
|
||||
---
|
||||
|
||||
## 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>
|
||||
<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>
|
||||
<section id='instructions'>
|
||||
Ниже приведены две переменные, которые я хочу сделать доступными для других файлов. Используя первый способ, я продемонстрировал <code>export</code> , экспортируем две переменные.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@ -21,7 +25,6 @@ tests:
|
||||
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>
|
||||
@ -40,7 +43,7 @@ const bar = "foo";
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
### Before Tests
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
@ -50,7 +53,6 @@ window.exports = function(){};
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
@ -59,4 +61,5 @@ window.exports = function(){};
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,31 @@
|
||||
id: 587d7b8c367417b2b2512b54
|
||||
title: Use getters and setters to Control Access to an Object
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
forumTopicId: 301220
|
||||
localeTitle: Использовать геттеры и сеттеры для контроля доступа к объекту
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вы можете получить значения от объекта и установить значение свойства внутри объекта. Они классически называются <dfn>геттерами</dfn> и <dfn>сеттерами</dfn> . Функции Getter предназначены для простого возврата (получения) значения частной переменной объекта пользователю без прямого доступа пользователя к частной переменной. Функции Setter предназначены для изменения (установки) значения частной переменной объекта на основе значения, переданного в функцию setter. Это изменение может включать вычисления или даже полностью перезаписать предыдущее значение. <blockquote> учебник { <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); // wut </blockquote> Обратите внимание на синтаксис, который мы используем, чтобы вызвать getter и setter - как будто они не являются даже функциями. Геттеры и сеттеры важны, потому что они скрывают внутренние детали реализации. </section>
|
||||
<section id='description'>
|
||||
Вы можете получить значения от объекта и установить значение свойства внутри объекта. Они классически называются <dfn>геттерами</dfn> и <dfn>сеттерами</dfn> . Функции Getter предназначены для простого возврата (получения) значения частной переменной объекта пользователю без прямого доступа пользователя к частной переменной. Функции Setter предназначены для изменения (установки) значения частной переменной объекта на основе значения, переданного в функцию setter. Это изменение может включать вычисления или даже полностью перезаписать предыдущее значение. <blockquote> учебник { <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); // wut </blockquote> Обратите внимание на синтаксис, который мы используем, чтобы вызвать getter и setter - как будто они не являются даже функциями. Геттеры и сеттеры важны, потому что они скрывают внутренние детали реализации.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте ключевое слово <code>class</code> для создания класса термостата. Конструктор принимает температуру Фаренгейта. Теперь создайте <code>getter</code> и <code>setter</code> в классе, чтобы получить температуру в масштабе Цельсия. Помните, что <code>C = 5/9 * (F - 32)</code> и <code>F = C * 9.0 / 5 + 32</code> , где F - значение температуры в шкале Фаренгейта, а C - значение той же температуры в шкале Цельсия. Примечание. Когда вы выполните это, вы будете отслеживать температуру внутри класса в одном масштабе - либо по Фаренгейту, либо по Цельсию. Это сила геттера или сеттера - вы создаете API для другого пользователя, который получит правильный результат, независимо от того, какой из них вы отслеживаете. Другими словами, вы абстрагируете детали реализации от потребителя. </section>
|
||||
<section id='instructions'>
|
||||
Используйте ключевое слово <code>class</code> для создания класса термостата. Конструктор принимает температуру Фаренгейта. Теперь создайте <code>getter</code> и <code>setter</code> в классе, чтобы получить температуру в масштабе Цельсия. Помните, что <code>C = 5/9 * (F - 32)</code> и <code>F = C * 9.0 / 5 + 32</code> , где F - значение температуры в шкале Фаренгейта, а C - значение той же температуры в шкале Цельсия. Примечание. Когда вы выполните это, вы будете отслеживать температуру внутри класса в одном масштабе - либо по Фаренгейту, либо по Цельсию. Это сила геттера или сеттера - вы создаете API для другого пользователя, который получит правильный результат, независимо от того, какой из них вы отслеживаете. Другими словами, вы абстрагируете детали реализации от потребителя.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ''
|
||||
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: ''
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/class/g),"<code>class</code> keyword was used.");'
|
||||
- text: ''
|
||||
testString: 'assert(() => {const t = new Thermostat(32); return typeof t === "object" && t.temperature === 0;}, "<code>Thermostat</code> can be instantiated.");'
|
||||
- text: <code>Thermostat</code> should be a <code>class</code> with a defined <code>constructor</code> method.
|
||||
testString: assert(typeof Thermostat === 'function' && typeof Thermostat.constructor === 'function');
|
||||
- text: <code>class</code> keyword should be used.
|
||||
testString: assert(code.match(/class/g));
|
||||
- text: <code>Thermostat</code> should be able to be instantiated.
|
||||
testString: assert((() => {const t = new Thermostat(32);return typeof t === 'object' && t.temperature === 0;})());
|
||||
|
||||
```
|
||||
|
||||
@ -34,14 +38,10 @@ tests:
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function makeClass() {
|
||||
"use strict";
|
||||
/* Alter code below this line */
|
||||
/* Alter code below this line */
|
||||
|
||||
/* Alter code above 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;
|
||||
@ -51,14 +51,30 @@ temp = thermos.temperature; // 26 in C
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
/* Alter code below this line */
|
||||
class Thermostat {
|
||||
constructor(fahrenheit) {
|
||||
this._tempInCelsius = 5/9 * (fahrenheit - 32);
|
||||
}
|
||||
get temperature(){
|
||||
return this._tempInCelsius;
|
||||
}
|
||||
set temperature(newTemp){
|
||||
this._tempInCelsius = newTemp;
|
||||
}
|
||||
}
|
||||
/* Alter code above this line */
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -7,10 +7,14 @@ localeTitle: Используйте оператор «Отдых» с пара
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Чтобы помочь нам создать более гибкие функции, ES6 вводит <dfn>оператор</dfn> останова для параметров функции. С оператором rest вы можете создавать функции, которые принимают переменное количество аргументов. Эти аргументы хранятся в массиве, доступ к которому можно получить позже изнутри функции. Проверьте этот код: <blockquote> функция howMany (... args) { <br> return «Вы передали аргументы« + args.length + ».»; <br> } <br> console.log (howMany (0, 1, 2)); // Вы прошли 3 аргумента <br> console.log (howMany ("string", null, [1, 2, 3], {})); // Вы передали 4 аргумента. </blockquote> Оператор rest исключает необходимость проверки массива <code>args</code> и позволяет применять <code>map()</code> , <code>filter()</code> и <code>reduce()</code> в массиве параметров. </section>
|
||||
<section id='description'>
|
||||
Чтобы помочь нам создать более гибкие функции, ES6 вводит <dfn>оператор</dfn> останова для параметров функции. С оператором rest вы можете создавать функции, которые принимают переменное количество аргументов. Эти аргументы хранятся в массиве, доступ к которому можно получить позже изнутри функции. Проверьте этот код: <blockquote> функция howMany (... args) { <br> return «Вы передали аргументы« + args.length + ».»; <br> } <br> console.log (howMany (0, 1, 2)); // Вы прошли 3 аргумента <br> console.log (howMany ("string", null, [1, 2, 3], {})); // Вы передали 4 аргумента. </blockquote> Оператор rest исключает необходимость проверки массива <code>args</code> и позволяет применять <code>map()</code> , <code>filter()</code> и <code>reduce()</code> в массиве параметров.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените <code>sum</code> функции так, чтобы она использовала оператор rest, и она работает одинаково с любым количеством параметров. </section>
|
||||
<section id='instructions'>
|
||||
Измените <code>sum</code> функции так, чтобы она использовала оператор rest, и она работает одинаково с любым количеством параметров.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@ -27,7 +31,6 @@ tests:
|
||||
testString: 'assert(sum() === 0, "The result of <code>sum()</code> should be 0");'
|
||||
- text: Функция <code>sum</code> использует оператор <code>...</code> spread в параметре <code>args</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/function\s+sum\s*\(\s*...args\s*\)\s*{/g), "The <code>sum</code> function uses the <code>...</code> spread operator on the <code>args</code> parameter.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -51,8 +54,6 @@ console.log(sum(1, 2, 3)); // 6
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
@ -61,4 +62,5 @@ console.log(sum(1, 2, 3)); // 6
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,31 @@
|
||||
id: 587d7b89367417b2b2512b48
|
||||
title: Use the Spread Operator to Evaluate Arrays In-Place
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
forumTopicId: 301222
|
||||
localeTitle: Используйте оператора распространения для оценки массивов на месте
|
||||
---
|
||||
|
||||
## 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>
|
||||
<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"> Скопируйте все содержимое <code>arr1</code> в другой массив <code>arr2</code> используя оператор спреда. </section>
|
||||
<section id='instructions'>
|
||||
Скопируйте все содержимое <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>arr2</code> остается неизменным при изменении <code>arr1</code> .
|
||||
testString: 'assert((arr1, arr2) => {arr1.push("JUN"); return arr2.length < arr1.length},"<code>arr2</code> remains unchanged when <code>arr1</code> is changed.");'
|
||||
- text: <code>arr2</code> should be correct copy of <code>arr1</code>.
|
||||
testString: assert(arr2.every((v, i) => v === arr1[i]));
|
||||
- text: <code>...</code> spread operator was used to duplicate <code>arr1</code>.
|
||||
testString: assert(code.match(/Array\(\s*\.\.\.arr1\s*\)|\[\s*\.\.\.arr1\s*\]/));
|
||||
- text: <code>arr2</code> should remain unchanged when <code>arr1</code> is changed.
|
||||
testString: assert((arr1, arr2) => {arr1.push('JUN'); return arr2.length < arr1.length});
|
||||
|
||||
```
|
||||
|
||||
@ -36,24 +40,25 @@ tests:
|
||||
```js
|
||||
const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
|
||||
let arr2;
|
||||
(function() {
|
||||
"use strict";
|
||||
arr2 = []; // change this line
|
||||
})();
|
||||
|
||||
arr2 = []; // change this line
|
||||
|
||||
console.log(arr2);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
|
||||
let arr2;
|
||||
|
||||
arr2 = [...arr1];
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,31 +2,35 @@
|
||||
id: 587d7b88367417b2b2512b44
|
||||
title: Write Arrow Functions with Parameters
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
forumTopicId: 301223
|
||||
localeTitle: Функции записи стрелки с параметрами
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Подобно нормальной функции, вы можете передавать аргументы в функции стрелок. <blockquote> // удваивает входное значение и возвращает его <br> const doubler = (item) => item * 2; </blockquote> Вы можете передать более одного аргумента в функции стрелок. </section>
|
||||
<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>
|
||||
<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.");'
|
||||
- text: User did replace <code>var</code> keyword.
|
||||
testString: getUserInput => assert(!getUserInput('index').match(/var/g));
|
||||
- text: <code>myConcat</code> should be a constant variable (by using <code>const</code>).
|
||||
testString: getUserInput => assert(getUserInput('index').match(/const\s+myConcat/g));
|
||||
- text: <code>myConcat</code> should be a function
|
||||
testString: assert(typeof myConcat === 'function');
|
||||
- text: <code>myConcat()</code> returns the correct <code>array</code>
|
||||
testString: assert(() => { const a = myConcat([1], [2]); return a[0] == 1 && a[1] == 2; });
|
||||
- text: <code>function</code> keyword was not used.
|
||||
testString: getUserInput => assert(!getUserInput('index').match(/function/g));
|
||||
|
||||
```
|
||||
|
||||
@ -49,14 +53,18 @@ console.log(myConcat([1, 2], [3, 4, 5]));
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
const myConcat = (arr1, arr2) => {
|
||||
"use strict";
|
||||
return arr1.concat(arr2);
|
||||
};
|
||||
// test your code
|
||||
console.log(myConcat([1, 2], [3, 4, 5]));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,31 @@
|
||||
id: 587d7b8b367417b2b2512b50
|
||||
title: Write Concise Declarative Functions with ES6
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
forumTopicId: 301224
|
||||
localeTitle: Написание кратких декларативных функций с ES6
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> При определении функций внутри объектов в ES5 мы должны использовать <code>function</code> ключевого слова следующим образом: <blockquote> const person = { <br> имя: «Тейлор», <br> sayHello: function () { <br> return `Hello! Меня зовут $ {this.name} .`; <br> } <br> }; </blockquote> С ES6 вы можете полностью удалить ключевое слово <code>function</code> и двоеточие при определении функций в объектах. Вот пример этого синтаксиса: <blockquote> const person = { <br> имя: «Тейлор», <br> скажи привет() { <br> return `Hello! Меня зовут $ {this.name} .`; <br> } <br> }; </blockquote></section>
|
||||
<section id='description'>
|
||||
При определении функций внутри объектов в ES5 мы должны использовать <code>function</code> ключевого слова следующим образом: <blockquote> const person = { <br> имя: «Тейлор», <br> sayHello: function () { <br> return `Hello! Меня зовут $ {this.name} .`; <br> } <br> }; </blockquote> С ES6 вы можете полностью удалить ключевое слово <code>function</code> и двоеточие при определении функций в объектах. Вот пример этого синтаксиса: <blockquote> const person = { <br> имя: «Тейлор», <br> скажи привет() { <br> return `Hello! Меня зовут $ {this.name} .`; <br> } <br> }; </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> <code>setGear</code> функцию <code>setGear</code> внутри <code>bicycle</code> объекта, чтобы использовать сокращенный синтаксис, описанный выше. </section>
|
||||
<section id='instructions'>
|
||||
<code>setGear</code> функцию <code>setGear</code> внутри <code>bicycle</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: <code>bicycle.setGear(48)</code> изменяет значение <code>gear</code> на 48.
|
||||
testString: 'assert((new bicycle.setGear(48)).gear === 48, "<code>bicycle.setGear(48)</code> changes the <code>gear</code> value to 48.");'
|
||||
- text: Traditional function expression should not be used.
|
||||
testString: getUserInput => assert(!removeJSComments(code).match(/function/));
|
||||
- text: <code>setGear</code> should be a declarative function.
|
||||
testString: assert(typeof bicycle.setGear === 'function' && code.match(/setGear\s*\(.+\)\s*\{/));
|
||||
- text: <code>bicycle.setGear(48)</code> should change the <code>gear</code> value to 48.
|
||||
testString: assert((new bicycle.setGear(48)).gear === 48);
|
||||
|
||||
```
|
||||
|
||||
@ -38,7 +42,6 @@ tests:
|
||||
const bicycle = {
|
||||
gear: 2,
|
||||
setGear: function(newGear) {
|
||||
"use strict";
|
||||
this.gear = newGear;
|
||||
}
|
||||
};
|
||||
@ -50,7 +53,15 @@ console.log(bicycle.gear);
|
||||
|
||||
</div>
|
||||
|
||||
### After Tests
|
||||
<div id='js-teardown'>
|
||||
|
||||
```js
|
||||
const removeJSComments = str => str.replace(/\/\*[\s\S]*?\*\/|\/\/.*$/gm, '');
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
@ -58,6 +69,13 @@ console.log(bicycle.gear);
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
const bicycle = {
|
||||
gear: 2,
|
||||
setGear(newGear) {
|
||||
this.gear = newGear;
|
||||
}
|
||||
};
|
||||
bicycle.setGear(3);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -7,10 +7,14 @@ 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>
|
||||
<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>
|
||||
<section id='instructions'>
|
||||
Используйте простые поля с объектными литералами для создания и возврата объекта <code>Person</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@ -18,10 +22,9 @@ localeTitle: Записывать краткие декларации объек
|
||||
```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>.");'
|
||||
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]);});
|
||||
- text: 'Нет <code>:</code> были использованы.'
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/:/g), "No <code>:</code> were used.");'
|
||||
|
||||
testString: getUserInput => assert(!getUserInput('index').match(/:/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -48,8 +51,6 @@ console.log(createPerson("Zodiac Hasbro", 56, "male")); // returns a proper obje
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
@ -58,4 +59,5 @@ console.log(createPerson("Zodiac Hasbro", 56, "male")); // returns a proper obje
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -7,10 +7,14 @@ localeTitle: Написание функций стрелок с более вы
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Пришло время увидеть, насколько эффективны функции стрелок при обработке данных. Функции стрелок отлично работают с функциями более высокого порядка, такими как <code>map()</code> , <code>filter()</code> и <code>reduce()</code> , которые принимают другие функции в качестве аргументов для обработки коллекций данных. Прочтите следующий код: <blockquote> FBPosts.filter (функция (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>
|
||||
<section id='description'>
|
||||
Пришло время увидеть, насколько эффективны функции стрелок при обработке данных. Функции стрелок отлично работают с функциями более высокого порядка, такими как <code>map()</code> , <code>filter()</code> и <code>reduce()</code> , которые принимают другие функции в качестве аргументов для обработки коллекций данных. Прочтите следующий код: <blockquote> FBPosts.filter (функция (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>squaredIntegers</code> . </section>
|
||||
<section id='instructions'>
|
||||
Используйте синтаксис функции стрелки, чтобы вычислить квадрат только положительных целых чисел (десятичные числа не являются целыми) в массиве <code>realNumberArray</code> и сохранить новый массив в переменной <code>squaredIntegers</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@ -29,7 +33,6 @@ tests:
|
||||
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>
|
||||
@ -56,8 +59,6 @@ console.log(squaredIntegers);
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
@ -66,4 +67,5 @@ console.log(squaredIntegers);
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user