Add languages Russian, Arabic, Chinese, Portuguese (#18305)
This commit is contained in:
committed by
mrugesh mohapatra
parent
09d3eca712
commit
2ca3a2093f
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b40
|
||||
title: Compare Scopes of the var and let Keywords
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Сравните области действия переменных var и let
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Когда вы объявляете переменную с ключевым словом <code>var</code> , она объявляется глобально или локально, если объявляется внутри функции. Ключевое слово <code>let</code> ведет себя аналогично, но с некоторыми дополнительными функциями. Когда вы объявляете переменную с ключевым словом <code>let</code> внутри блока, оператора или выражения, его область действия ограничена этим блоком, оператором или выражением. Например: <blockquote> var numArray = []; <br> для (var i = 0; i <3; i ++) { <br> numArray.push (я); <br> } <br> console.log (Numarray); <br> // возвращает [0, 1, 2] <br> console.log (я); <br> // возвращает 3 </blockquote> С ключевым словом <code>var</code> <code>i</code> объявляется глобально. Поэтому, когда <code>i++</code> выполняется, он обновляет глобальную переменную. Этот код похож на следующий: <blockquote> var numArray = []; <br> var i; <br> для (i = 0; i <3; i ++) { <br> numArray.push (я); <br> } <br> console.log (Numarray); <br> // возвращает [0, 1, 2] <br> console.log (я); <br> // возвращает 3 </blockquote> Такое поведение вызовет проблемы, если вы должны были создать функцию и сохранить ее для последующего использования внутри цикла for, который использует переменную <code>i</code> . Это связано с тем, что хранимая функция всегда будет ссылаться на значение обновленной глобальной переменной <code>i</code> . <blockquote> var printNumTwo; <br> для (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> «использовать строгий»; <br> let printNumTwo; <br> для (пусть 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 (я); <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>
|
||||
|
||||
## 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"");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function checkScope() {
|
||||
"use strict";
|
||||
var i = "function scope";
|
||||
if (true) {
|
||||
i = "block scope";
|
||||
console.log("Block scope i is: ", i);
|
||||
}
|
||||
console.log("Function scope i is: ", i);
|
||||
return i;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,59 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b58
|
||||
title: Create an Export Fallback with export default
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Создание экспортного возврата с экспортом по умолчанию
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> В уроке <code>export</code> вы узнали о синтаксисе, называемом <dfn>именованным экспортом</dfn> . Это позволило вам сделать несколько функций и переменных доступными для использования в других файлах. Существует другой синтаксис <code>export</code> вам нужно знать, известный как <dfn>экспорт по умолчанию</dfn> . Обычно вы будете использовать этот синтаксис, если экспортируется только одно значение из файла. Он также используется для создания резервного значения для файла или модуля. Ниже приведен пример <code>export default</code> : <blockquote> функция экспорта по умолчанию 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>
|
||||
|
||||
## 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
function subtract(x,y) {return x - y;}
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
window.exports = function(){};
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4e
|
||||
title: Create Strings using Template Literals
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Создание строк с использованием шаблонных литералов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Новая функция ES6 - это <dfn>шаблонный литерал</dfn> . Это специальный тип строки, который упрощает создание сложных строк. Литералы шаблонов позволяют создавать многострочные строки и использовать функции интерполяции строк для создания строк. Рассмотрим следующий код: <blockquote> const person = { <br> имя: «Зодиак Хасбро», <br> возраст: 56 <br> }; <br><br> // Литерал шаблона с многострочной и строковой интерполяцией <br> const greeting = `Привет, меня зовут $ {person.name}! <br> Я $ {person.age} лет. '; <br><br> console.log (приветствие); // печатает <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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>resultDisplayArray</code> представляет собой массив , содержащий <code>result failure</code> сообщений.'
|
||||
testString: 'assert(typeof makeList(result.failure) === "object" && resultDisplayArray.length === 3, "<code>resultDisplayArray</code> is a list containing <code>result failure</code> messages.");'
|
||||
- text: <code>resultDisplayArray</code> - желаемый результат.
|
||||
testString: 'assert(makeList(result.failure).every((v, i) => v === `<li class="text-warning">${result.failure[i]}</li>` || v === `<li class="text-warning">${result.failure[i]}</li>`), "<code>resultDisplayArray</code> is the desired output.");'
|
||||
- text: Использовались строки шаблонов
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/`.*`/g), "Template strings were not used");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const result = {
|
||||
success: ["max-length", "no-amd", "prefer-arrow-functions"],
|
||||
failure: ["no-var", "var-on-top", "linebreak"],
|
||||
skipped: ["id-blacklist", "no-dup-keys"]
|
||||
};
|
||||
function makeList(arr) {
|
||||
"use strict";
|
||||
|
||||
// change code below this line
|
||||
const resultDisplayArray = null;
|
||||
// change code above this line
|
||||
|
||||
return resultDisplayArray;
|
||||
}
|
||||
/**
|
||||
* makeList(result.failure) should return:
|
||||
* [ `<li class="text-warning">no-var</li>`,
|
||||
* `<li class="text-warning">var-on-top</li>`,
|
||||
* `<li class="text-warning">linebreak</li>` ]
|
||||
**/
|
||||
const resultDisplayArray = makeList(result.failure);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b41
|
||||
title: Declare a Read-Only Variable with the const Keyword
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Объявлять переменную только для чтения с помощью ключевого слова const
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>let</code> не является единственным новым способом объявления переменных. В ES6 вы также можете объявлять переменные, используя ключевое слово <code>const</code> . <code>const</code> имеет все потрясающие функции, которые <code>let</code> иметь, с добавленным бонусом, что переменные, объявленные с использованием <code>const</code> , доступны только для чтения. Они являются постоянной величиной, что означает , что когда переменная присваивается <code>const</code> , он не может быть переназначен. <blockquote> "использовать строгие" <br> const FAV_PET = "Кошки"; <br> FAV_PET = "Собаки"; // возвращает ошибку </blockquote> Как вы можете видеть, попытка переназначить переменную, объявленную с помощью <code>const</code> вызовет ошибку. Вы всегда должны указывать переменные, которые вы не хотите переназначать, используя ключевое слово <code>const</code> . Это помогает, когда вы случайно пытаетесь переназначить переменную, которая должна оставаться постоянной. Обычная практика, когда константы именования - использовать все заглавные буквы со словами, разделенными символом подчеркивания. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените код так, чтобы все переменные были объявлены с помощью <code>let</code> или <code>const</code> . Используйте <code>let</code> когда вы хотите, чтобы переменная изменилась, и <code>const</code> когда вы хотите, чтобы переменная оставалась постоянной. Кроме того , переименовывать переменные , объявленные с <code>const</code> , чтобы соответствовать общей практике, то есть константы должны быть заглавными буквами. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>var</code> не существует в вашем коде.
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/var/g),"<code>var</code> does not exist in your code.");'
|
||||
- text: '<code>SENTENCE</code> должна быть постоянной переменной , объявленной с <code>const</code> .'
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/(const SENTENCE)/g), "<code>SENTENCE</code> should be a constant variable declared with <code>const</code>.");'
|
||||
- text: <code>i</code> должен быть объявлен с <code>let</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/(let i)/g), "<code>i</code> should be declared with <code>let</code>.");'
|
||||
- text: '<code>console.log</code> следует изменить, чтобы напечатать переменную <code>SENTENCE</code> .'
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/console\.log\(\s*SENTENCE\s*\)\s*;?/g), "<code>console.log</code> should be adjusted to print the variable <code>SENTENCE</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function printManyTimes(str) {
|
||||
"use strict";
|
||||
|
||||
// change code below this line
|
||||
|
||||
var sentence = str + " is cool!";
|
||||
for(var i = 0; i < str.length; i+=2) {
|
||||
console.log(sentence);
|
||||
}
|
||||
|
||||
// change code above this line
|
||||
|
||||
}
|
||||
printManyTimes("freeCodeCamp");
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b3f
|
||||
title: Explore Differences Between the var and let Keywords
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Исследуйте различия между ключевыми словами var и let
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Одна из самых больших проблем с объявлением переменных с ключевым словом <code>var</code> заключается в том, что вы можете перезаписывать объявления переменных без ошибок. <blockquote> var camper = 'Джеймс'; <br> var camper = 'David'; <br> console.log (отдыхающий); <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> пусть кемпер = «Джеймс»; <br> пусть кемпер = «Дэвид»; // выдает ошибку </blockquote> Эту ошибку можно увидеть в консоли вашего браузера. Таким образом, в отличие от <code>var</code> , при использовании <code>let</code> переменная с тем же именем может быть объявлена только один раз. Обратите внимание на <code>"use strict"</code> . Это позволяет использовать Strict Mode, который ловит ошибки общего кодирования и «небезопасные» действия. Например: <blockquote> «использовать строгую»; <br> x = 3,14; // выдает ошибку, поскольку x не объявляется </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Обновите код, чтобы использовать ключевое слово <code>let</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>var</code> не существует в коде.
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/var/g),"<code>var</code> does not exist in code.");'
|
||||
- text: <code>catName</code> должен быть <code>Oliver</code> .
|
||||
testString: 'assert(catName === "Oliver", "<code>catName</code> should be <code>Oliver</code>.");'
|
||||
- text: <code>quote</code> должна быть <code>"Oliver says Meow!"</code>
|
||||
testString: 'assert(quote === "Oliver says Meow!", "<code>quote</code> should be <code>"Oliver says Meow!"</code>");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var catName;
|
||||
var quote;
|
||||
function catTalk() {
|
||||
"use strict";
|
||||
|
||||
catName = "Oliver";
|
||||
quote = catName + " says Meow!";
|
||||
|
||||
}
|
||||
catTalk();
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d7b8d367417b2b2512b59
|
||||
title: Import a Default Export
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Импорт экспорта по умолчанию
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> В последней задаче вы узнали об <code>export default</code> и его использовании. Важно отметить, что для импорта экспорта по умолчанию вам нужно использовать другой синтаксис <code>import</code> . В следующем примере у нас есть функция <code>add</code> , то есть экспорт по умолчанию файла <code>"math_functions"</code> . Вот как его импортировать: <blockquote> 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Правильно импортирует метод <code>export default</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/import\s+subtract\s+from\s+"math_functions"/g), "Properly imports <code>export default</code> method.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
subtract(7,4);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
window.require = function(str) {
|
||||
if (str === 'math_functions') {
|
||||
return function(a, b) {
|
||||
return a - b;
|
||||
}}};
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b42
|
||||
title: Mutate an Array Declared with const
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 'Мутате массив, объявленный с константой'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Объявление <code>const</code> имеет много вариантов использования в современном JavaScript. Некоторые разработчики предпочитают назначать все свои переменные, используя <code>const</code> по умолчанию, если только они не знают, что им нужно будет переназначить это значение. Только в этом случае они используют <code>let</code> . Однако важно понимать, что объекты (включая массивы и функции), назначенные переменной с использованием <code>const</code> , по-прежнему изменяемы. Использование объявления <code>const</code> только предотвращает переназначение идентификатора переменной. <blockquote> «использовать строгую»; <br> const s = [5, 6, 7]; <br> s = [1, 2, 3]; // выдает ошибку, пытаясь назначить const <br> s [2] = 45; // работает так же, как и с объявленным массивом var или let <br> console.log (ы); // возвращает [5, 6, 45] </blockquote> Как вы можете видеть, вы можете самостоятельно мутировать объект <code>[5, 6, 7]</code> , а переменная <code>s</code> все равно укажет на измененный массив <code>[5, 6, 45]</code> . Как и все массивы, элементы массива в <code>s</code> изменяемы, но поскольку используется <code>const</code> , вы не можете использовать идентификатор переменной <code>s</code> для указания на другой массив с использованием оператора присваивания. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Массив объявляется как <code>const s = [5, 7, 2]</code> . Измените массив на <code>[2, 5, 7]</code> используя различные назначения элементов. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Не заменяйте ключевое слово <code>const</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const/g), "Do not replace <code>const</code> keyword.");'
|
||||
- text: <code>s</code> должна быть постоянной переменной (используя <code>const</code> ).
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const\s+s/g), "<code>s</code> should be a constant variable (by using <code>const</code>).");'
|
||||
- text: Не изменяйте оригинальное объявление массива.
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const\s+s\s*=\s*\[\s*5\s*,\s*7\s*,\s*2\s*\]\s*;?/g), "Do not change the original array declaration.");'
|
||||
- text: '<code>s</code> должно быть равно <code>[2, 5, 7]</code> .'
|
||||
testString: 'assert.deepEqual(s, [2, 5, 7], "<code>s</code> should be equal to <code>[2, 5, 7]</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const s = [5, 7, 2];
|
||||
function editInPlace() {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
|
||||
// s = [2, 5, 7]; <- this is invalid
|
||||
|
||||
// change code above this line
|
||||
}
|
||||
editInPlace();
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 598f48a36c8c40764b4e52b3
|
||||
title: Prevent Object Mutation
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Предотвращение мутации объектов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Как видно из предыдущей задачи, одно только объявление <code>const</code> не защищает ваши данные от мутации. Чтобы ваши данные не менялись, JavaScript предоставляет функцию <code>Object.freeze</code> для предотвращения мутации данных. После того, как объект будет заморожен, вы больше не сможете добавлять, обновлять или удалять из него свойства. Любая попытка изменить объект будет отклонена без ошибок. <blockquote> пусть obj = { <br> Название: "FreeCodeCamp", <br> Обзор: «Высокий» <br> }; <br> Object.freeze (OBJ); <br> obj.review = "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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Не заменяйте ключевое слово <code>const</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const/g), "Do not replace <code>const</code> keyword.");'
|
||||
- text: <code>MATH_CONSTANTS</code> должна быть постоянной переменной (используя <code>const</code> ).
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const\s+MATH_CONSTANTS/g), "<code>MATH_CONSTANTS</code> should be a constant variable (by using <code>const</code>).");'
|
||||
- text: Не меняйте оригинальные <code>MATH_CONSTANTS</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const\s+MATH_CONSTANTS\s+=\s+{\s+PI:\s+3.14\s+};/g), "Do not change original <code>MATH_CONSTANTS</code>.");'
|
||||
- text: <code>PI</code> равно <code>3.14</code> .
|
||||
testString: 'assert(PI === 3.14, "<code>PI</code> equals <code>3.14</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function freezeObj() {
|
||||
"use strict";
|
||||
const MATH_CONSTANTS = {
|
||||
PI: 3.14
|
||||
};
|
||||
// change code below this line
|
||||
|
||||
|
||||
// change code above this line
|
||||
try {
|
||||
MATH_CONSTANTS.PI = 99;
|
||||
} catch( ex ) {
|
||||
console.log(ex);
|
||||
}
|
||||
return MATH_CONSTANTS.PI;
|
||||
}
|
||||
const PI = freezeObj();
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,60 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b46
|
||||
title: Set Default Parameters for Your Functions
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Установка параметров по умолчанию для ваших функций
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Чтобы помочь нам создать более гибкие функции, ES6 вводит <dfn>параметры</dfn> по <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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Результат <code>increment(5, 2)</code> должен быть равен <code>7</code> .'
|
||||
testString: 'assert(increment(5, 2) === 7, "The result of <code>increment(5, 2)</code> should be <code>7</code>.");'
|
||||
- text: Результатом <code>increment(5)</code> должно быть <code>6</code> .
|
||||
testString: 'assert(increment(5) === 6, "The result of <code>increment(5)</code> should be <code>6</code>.");'
|
||||
- text: Параметр по умолчанию <code>1</code> был использован для <code>value</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/value\s*=\s*1/g), "default parameter <code>1</code> was used for <code>value</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const increment = (function() {
|
||||
"use strict";
|
||||
return function increment(number, value) {
|
||||
return number + value;
|
||||
};
|
||||
})();
|
||||
console.log(increment(5, 2)); // returns 7
|
||||
console.log(increment(5)); // returns 6
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b55
|
||||
title: Understand the Differences Between import and require
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Понимание различий между импортом и требованием
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте соответствующий оператор <code>import</code> , который позволит текущему файлу использовать функцию <code>capitalizeString</code> . Файл, в котором работает эта функция, называется <code>"string_functions"</code> , и он находится в том же каталоге, что и текущий файл. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: действительный оператор <code>import</code>
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/import\s+\{\s*capitalizeString\s*\}\s+from\s+("|")string_functions\1/g), "valid <code>import</code> statement");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
capitalizeString("hello!");
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
window.require = function (str) {
|
||||
if (str === 'string_functions') {
|
||||
return {
|
||||
capitalizeString: str => str.toUpperCase()
|
||||
}}};
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b57
|
||||
title: Use * to Import Everything from a File
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: 'Используйте *, чтобы импортировать все из файла'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Предположим, у вас есть файл, который вы хотите импортировать все его содержимое в текущий файл. Это можно сделать с помощью синтаксиса <dfn>import *</dfn> . Вот пример, когда содержимое файла с именем <code>"math_functions"</code> импортируется в файл в том же каталоге: <blockquote> 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Правильно использует <code>import * as</code> синтаксис.
|
||||
testString: 'assert(code.match(/import\s+\*\s+as\s+[a-zA-Z0-9_$]+\s+from\s*"\s*capitalize_strings\s*"\s*;/gi), "Properly uses <code>import * as</code> syntax.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
window.require = function(str) {
|
||||
if (str === 'capitalize_strings') {
|
||||
return {
|
||||
capitalize: str => str.toUpperCase(),
|
||||
lowercase: str => str.toLowerCase()
|
||||
}}};
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,60 @@
|
||||
---
|
||||
id: 587d7b87367417b2b2512b43
|
||||
title: Use Arrow Functions to Write Concise Anonymous Functions
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Используйте функции стрелок для записи сжатых анонимных функций
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> В JavaScript нам часто не нужно называть наши функции, особенно при передаче функции в качестве аргумента другой функции. Вместо этого мы создаем встроенные функции. Нам не нужно называть эти функции, потому что мы не используем их повторно нигде. Для этого мы часто используем следующий синтаксис: <blockquote> const myFunc = function () { <br> const myVar = "value"; <br> 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Пользователь выполнил замену ключевого слова <code>var</code> .
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/var/g), "User did replace <code>var</code> keyword.");'
|
||||
- text: <code>magic</code> должна быть постоянной переменной (используя <code>const</code> ).
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const\s+magic/g), "<code>magic</code> should be a constant variable (by using <code>const</code>).");'
|
||||
- text: <code>magic</code> - это <code>function</code> .
|
||||
testString: 'assert(typeof magic === "function", "<code>magic</code> is a <code>function</code>.");'
|
||||
- text: <code>magic()</code> возвращает правильную дату.
|
||||
testString: 'assert(magic().getDate() == new Date().getDate(), "<code>magic()</code> returns correct date.");'
|
||||
- text: ключевое слово <code>function</code> не использовалось.
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/function/g), "<code>function</code> keyword was not used.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var magic = function() {
|
||||
"use strict";
|
||||
return new Date();
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7b8b367417b2b2512b53
|
||||
title: Use class Syntax to Define a Constructor Function
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Использовать синтаксис класса для определения функции конструктора
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> ES6 предоставляет новый синтаксис для создания объектов с использованием <dfn>класса</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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>Vegetable</code> должен быть <code>class</code> с определенным методом <code>constructor</code> .
|
||||
testString: 'assert(typeof Vegetable === "function" && typeof Vegetable.constructor === "function", "<code>Vegetable</code> should be a <code>class</code> with a defined <code>constructor</code> method.");'
|
||||
- text: ключевое слово <code>class</code> .
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/class/g),"<code>class</code> keyword was used.");'
|
||||
- text: <code>Vegetable</code> могут быть созданы.
|
||||
testString: 'assert(() => {const a = new Vegetable("apple"); return typeof a === "object";},"<code>Vegetable</code> can be instantiated.");'
|
||||
- text: <code>carrot.name</code> должно вернуть <code>carrot</code> .
|
||||
testString: 'assert(carrot.name=="carrot","<code>carrot.name</code> should return <code>carrot</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function makeClass() {
|
||||
"use strict";
|
||||
/* Alter code below this line */
|
||||
|
||||
/* Alter code above this line */
|
||||
return Vegetable;
|
||||
}
|
||||
const Vegetable = makeClass();
|
||||
const carrot = new Vegetable('carrot');
|
||||
console.log(carrot.name); // => should be 'carrot'
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,61 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b4b
|
||||
title: Use Destructuring Assignment to Assign Variables from Arrays
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Использование назначения назначения для назначения переменных из массивов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> ES6 делает массивы деструктуризации такими же легкими, как и объекты разрушения. Одним из ключевых различий между оператором спреда и деструктурированием массива является то, что оператор распространения распаковывает все содержимое массива в список, разделенный запятыми. Следовательно, вы не можете выбирать, какие элементы вы хотите назначить переменным. Уничтожение массива позволяет нам делать именно это: <blockquote> const [a, b] = [1, 2, 3, 4, 5, 6]; <br> console.log (a, b); // 1, 2 </blockquote> Переменной <code>a</code> присваивается первое значение массива, а <code>b</code> - второе значение массива. Мы также можем получить доступ к значению по любому индексу в массиве с деструктурированием, используя запятые для достижения желаемого индекса: <blockquote> const [a, b ,,, c] = [1, 2, 3, 4, 5, 6]; <br> console.log (a, b, c); // 1, 2, 5 </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте назначение 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
let a = 8, b = 6;
|
||||
(() => {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
|
||||
// change code above this line
|
||||
})();
|
||||
console.log(a); // should be 6
|
||||
console.log(b); // should be 8
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b4a
|
||||
title: Use Destructuring Assignment to Assign Variables from Nested Objects
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Назначение 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>
|
||||
|
||||
## Instructions
|
||||
<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");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const LOCAL_FORECAST = {
|
||||
today: { min: 72, max: 83 },
|
||||
tomorrow: { min: 73.3, max: 84.6 }
|
||||
};
|
||||
|
||||
function getMaxOfTmrw(forecast) {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
const maxOfTomorrow = undefined; // change this line
|
||||
// change code above this line
|
||||
return maxOfTomorrow;
|
||||
}
|
||||
|
||||
console.log(getMaxOfTmrw(LOCAL_FORECAST)); // should be 84.6
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b49
|
||||
title: Use Destructuring Assignment to Assign Variables from Objects
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Использование назначения назначения для назначения переменных из объектов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Ранее мы видели, как оператор распространения может эффективно распространять или распаковывать содержимое массива. Мы можем сделать что-то подобное с объектами. <dfn>Назначение деструктурирования</dfn> - это специальный синтаксис для аккуратного назначения значений, взятых непосредственно из объекта в переменные. Рассмотрим следующий код ES5: <blockquote> var voxel = {x: 3.6, y: 7.4, z: 6.54}; <br> var x = voxel.x; // x = 3.6 <br> var y = voxel.y; // y = 7.4 <br> var z = voxel.z; // z = 6,54 </blockquote> Вот тот же оператор присваивания с синтаксисом деструктуризации ES6: <blockquote> const {x, y, z} = воксел; // x = 3,6, y = 7,4, z = 6,54 </blockquote> Если вместо этого вы хотите сохранить значения <code>voxel.x</code> в <code>a</code> , <code>voxel.y</code> в <code>b</code> и <code>voxel.z</code> в <code>c</code> , у вас тоже есть эта свобода. <blockquote> const {x: a, y: b, z: c} = voxel // a = 3.6, b = 7.4, c = 6.54 </blockquote> Вы можете прочитать это как «получить поле <code>x</code> и скопировать значение в <code>a</code> » и так далее. </section>
|
||||
|
||||
## Instructions
|
||||
undefined
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>getTempOfTmrw(AVG_TEMPERATURES)</code> должно быть <code>79</code>
|
||||
testString: 'assert(getTempOfTmrw(AVG_TEMPERATURES) === 79, "<code>getTempOfTmrw(AVG_TEMPERATURES)</code> should be <code>79</code>");'
|
||||
- text: использовалось деструктурирование с переназначением
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/\{\s*tomorrow\s*:\s*tempOfTomorrow\s*}\s*=\s*avgTemperatures/g),"destructuring with reassignment was used");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const AVG_TEMPERATURES = {
|
||||
today: 77.5,
|
||||
tomorrow: 79
|
||||
};
|
||||
|
||||
function getTempOfTmrw(avgTemperatures) {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
const tempOfTomorrow = undefined; // change this line
|
||||
// change code above this line
|
||||
return tempOfTomorrow;
|
||||
}
|
||||
|
||||
console.log(getTempOfTmrw(AVG_TEMPERATURES)); // should be 79
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4d
|
||||
title: Use Destructuring Assignment to Pass an Object as a Function's Parameters
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Назначение 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>
|
||||
|
||||
## Instructions
|
||||
undefined
|
||||
|
||||
## 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const stats = {
|
||||
max: 56.78,
|
||||
standard_deviation: 4.34,
|
||||
median: 34.54,
|
||||
mode: 23.87,
|
||||
min: -0.75,
|
||||
average: 35.85
|
||||
};
|
||||
const half = (function() {
|
||||
"use strict"; // do not change this line
|
||||
|
||||
// change code below this line
|
||||
return function half(stats) {
|
||||
// use function argument destructuring
|
||||
return (stats.max + stats.min) / 2.0;
|
||||
};
|
||||
// change code above this line
|
||||
|
||||
})();
|
||||
console.log(stats); // should be object
|
||||
console.log(half(stats)); // should be 28.015
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4c
|
||||
title: Use Destructuring Assignment with the Rest Operator to Reassign Array Elements
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Назначение 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>
|
||||
|
||||
## Instructions
|
||||
undefined
|
||||
|
||||
## 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const source = [1,2,3,4,5,6,7,8,9,10];
|
||||
function removeFirstTwo(list) {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
arr = list; // change this
|
||||
// change code above this line
|
||||
return arr;
|
||||
}
|
||||
const arr = removeFirstTwo(source);
|
||||
console.log(arr); // should be [3,4,5,6,7,8,9,10]
|
||||
console.log(source); // should be [1,2,3,4,5,6,7,8,9,10];
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b56
|
||||
title: Use export to Reuse a Code Block
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Использовать экспорт для повторного использования блока кода
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> В предыдущей задаче вы узнали об <code>import</code> и о том, как его можно использовать для импорта небольших объемов кода из больших файлов. Для того, чтобы это сработало, мы должны использовать одно из операторов, которое идет с <code>import</code> , известное как <dfn>экспорт</dfn> . Когда мы хотим, чтобы какой-то код - функция или переменная - мог использоваться в другом файле, мы должны экспортировать его, чтобы импортировать его в другой файл. Подобно <code>import</code> , <code>export</code> является не-браузером. Ниже мы <dfn>называем именованный экспорт</dfn> . При этом мы можем импортировать любой код, который мы экспортируем в другой файл, с синтаксисом <code>import</code> вы узнали на последнем уроке. Вот пример: <blockquote> const capitalizeString = (string) => { <br> return string.charAt (0) .toUpperCase () + string.slice (1); <br> } <br> export {capitalizeString} // Как экспортировать функции. <br> export const foo = "bar"; // Как экспортировать переменные. </blockquote> В качестве альтернативы, если вы хотите сжать все свои <code>export</code> инструкции в одну строку, вы можете использовать этот подход: <blockquote> const capitalizeString = (string) => { <br> return string.charAt (0) .toUpperCase () + string.slice (1); <br> } <br> const foo = "bar"; <br> export {capitalizeString, foo} </blockquote> Любой подход вполне приемлем. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Ниже приведены две переменные, которые я хочу сделать доступными для других файлов. Используя первый способ, я продемонстрировал <code>export</code> , экспортируем две переменные. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>foo</code> экспортируется.
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/export\s+const\s+foo\s*=\s*"bar"/g), "<code>foo</code> is exported.");'
|
||||
- text: <code>bar</code> экспортируется.
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/export\s+const\s+bar\s*=\s*"foo"/g), "<code>bar</code> is exported.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
"use strict";
|
||||
const foo = "bar";
|
||||
const bar = "foo";
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
### Before Test
|
||||
<div id='js-setup'>
|
||||
|
||||
```js
|
||||
window.exports = function(){};
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7b8c367417b2b2512b54
|
||||
title: Use getters and setters to Control Access to an Object
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Использовать геттеры и сеттеры для контроля доступа к объекту
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
function makeClass() {
|
||||
"use strict";
|
||||
/* Alter code below this line */
|
||||
|
||||
/* Alter code above this line */
|
||||
return Thermostat;
|
||||
}
|
||||
const Thermostat = makeClass();
|
||||
const thermos = new Thermostat(76); // setting in Fahrenheit scale
|
||||
let temp = thermos.temperature; // 24.44 in C
|
||||
thermos.temperature = 26;
|
||||
temp = thermos.temperature; // 26 in C
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b47
|
||||
title: Use the Rest Operator with Function Parameters
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Используйте оператор «Отдых» с параметрами функции
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените <code>sum</code> функции так, чтобы она использовала оператор rest, и она работает одинаково с любым количеством параметров. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Результат <code>sum(0,1,2)</code> должен быть равен 3'
|
||||
testString: 'assert(sum(0,1,2) === 3, "The result of <code>sum(0,1,2)</code> should be 3");'
|
||||
- text: 'Результат <code>sum(1,2,3,4)</code> должен быть равен 10'
|
||||
testString: 'assert(sum(1,2,3,4) === 10, "The result of <code>sum(1,2,3,4)</code> should be 10");'
|
||||
- text: Результатом <code>sum(5)</code> должно быть 5
|
||||
testString: 'assert(sum(5) === 5, "The result of <code>sum(5)</code> should be 5");'
|
||||
- text: Результат <code>sum()</code> должен быть равен 0
|
||||
testString: 'assert(sum() === 0, "The result of <code>sum()</code> should be 0");'
|
||||
- text: Функция <code>sum</code> использует оператор <code>...</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>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const sum = (function() {
|
||||
"use strict";
|
||||
return function sum(x, y, z) {
|
||||
const args = [ x, y, z ];
|
||||
return args.reduce((a, b) => a + b, 0);
|
||||
};
|
||||
})();
|
||||
console.log(sum(1, 2, 3)); // 6
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,59 @@
|
||||
---
|
||||
id: 587d7b89367417b2b2512b48
|
||||
title: Use the Spread Operator to Evaluate Arrays In-Place
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Используйте оператора распространения для оценки массивов на месте
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> ES6 вводит <dfn>оператор спреда</dfn> , который позволяет нам расширять массивы и другие выражения в местах, где ожидаются несколько параметров или элементов. В приведенном ниже коде ES5 применяется <code>apply()</code> для вычисления максимального значения в массиве: <blockquote> var arr = [6, 89, 3, 45]; <br> var maximus = Math.max.apply (null, arr); // возвращает 89 </blockquote> Нам пришлось использовать <code>Math.max.apply(null, arr)</code> потому что <code>Math.max(arr)</code> возвращает <code>NaN</code> . <code>Math.max()</code> ожидает аргументы, разделенные запятыми, но не массив. Оператор распространения делает этот синтаксис намного лучше для чтения и обслуживания. <blockquote> const arr = [6, 89, 3, 45]; <br> const maximus = Math.max (... arr); // возвращает 89 </blockquote> <code>...arr</code> возвращает распакованный массив. Другими словами, он <em>расширяет</em> массив. Однако оператор расширения работает только на месте, например, в аргументе функции или в литерале массива. Следующий код не будет работать: <blockquote> const spreaded = ... arr; // выдает синтаксическую ошибку </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Скопируйте все содержимое <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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
|
||||
let arr2;
|
||||
(function() {
|
||||
"use strict";
|
||||
arr2 = []; // change this line
|
||||
})();
|
||||
console.log(arr2);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b44
|
||||
title: Write Arrow Functions with Parameters
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Функции записи стрелки с параметрами
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Подобно нормальной функции, вы можете передавать аргументы в функции стрелок. <blockquote> // удваивает входное значение и возвращает его <br> const doubler = (item) => item * 2; </blockquote> Вы можете передать более одного аргумента в функции стрелок. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Перепишите функцию <code>myConcat</code> которая добавляет содержимое <code>arr2</code> в <code>arr1</code> чтобы функция использовала синтаксис функции стрелки. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Пользователь выполнил замену ключевого слова <code>var</code> .
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/var/g), "User did replace <code>var</code> keyword.");'
|
||||
- text: <code>myConcat</code> должен быть постоянной переменной (используя <code>const</code> ).
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const\s+myConcat/g), "<code>myConcat</code> should be a constant variable (by using <code>const</code>).");'
|
||||
- text: <code>myConcat</code> должен быть функцией
|
||||
testString: 'assert(typeof myConcat === "function", "<code>myConcat</code> should be a function");'
|
||||
- text: <code>myConcat()</code> возвращает правильный <code>array</code>
|
||||
testString: 'assert(() => { const a = myConcat([1], [2]); return a[0] == 1 && a[1] == 2; }, "<code>myConcat()</code> returns the correct <code>array</code>");'
|
||||
- text: ключевое слово <code>function</code> не использовалось.
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/function/g), "<code>function</code> keyword was not used.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
var myConcat = function(arr1, arr2) {
|
||||
"use strict";
|
||||
return arr1.concat(arr2);
|
||||
};
|
||||
// test your code
|
||||
console.log(myConcat([1, 2], [3, 4, 5]));
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d7b8b367417b2b2512b50
|
||||
title: Write Concise Declarative Functions with ES6
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Написание кратких декларативных функций с ES6
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> При определении функций внутри объектов в ES5 мы должны использовать <code>function</code> ключевого слова следующим образом: <blockquote> const person = { <br> имя: «Тейлор», <br> sayHello: function () { <br> 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>
|
||||
|
||||
## 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
// change code below this line
|
||||
const bicycle = {
|
||||
gear: 2,
|
||||
setGear: function(newGear) {
|
||||
"use strict";
|
||||
this.gear = newGear;
|
||||
}
|
||||
};
|
||||
// change code above this line
|
||||
bicycle.setGear(3);
|
||||
console.log(bicycle.gear);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,61 @@
|
||||
---
|
||||
id: 587d7b8a367417b2b2512b4f
|
||||
title: Write Concise Object Literal Declarations Using Simple Fields
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Записывать краткие декларации объектов с использованием простых полей
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> ES6 добавляет отличную поддержку для простого определения литералов объектов. Рассмотрим следующий код: <blockquote> const getMousePosition = (x, y) => ({ <br> x: x, <br> y: y <br> }); </blockquote> <code>getMousePosition</code> - простая функция, которая возвращает объект, содержащий два поля. ES6 обеспечивает синтаксический сахар для устранения избыточности необходимости писать <code>x: x</code> . Вы можете просто написать <code>x</code> один раз, и он будет преобразован в <code>x: x</code> (или что-то подобное) под капотом. Вот такая же функция сверху переписана для использования этого нового синтаксиса: <blockquote> const getMousePosition = (x, y) => ({x, y}); </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте простые поля с объектными литералами для создания и возврата объекта <code>Person</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'вывод: <code>{name: "Zodiac Hasbro", age: 56, gender: "male"}</code> .'
|
||||
testString: 'assert(() => {const res={name:"Zodiac Hasbro",age:56,gender:"male"}; const person=createPerson("Zodiac Hasbro", 56, "male"); return Object.keys(person).every(k => person[k] === res[k]);}, "the output is <code>{name: "Zodiac Hasbro", age: 56, gender: "male"}</code>.");'
|
||||
- text: 'Нет <code>:</code> были использованы.'
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/:/g), "No <code>:</code> were used.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const createPerson = (name, age, gender) => {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
return {
|
||||
name: name,
|
||||
age: age,
|
||||
gender: gender
|
||||
};
|
||||
// change code above this line
|
||||
};
|
||||
console.log(createPerson("Zodiac Hasbro", 56, "male")); // returns a proper object
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 587d7b88367417b2b2512b45
|
||||
title: Write Higher Order Arrow Functions
|
||||
challengeType: 1
|
||||
videoUrl: ''
|
||||
localeTitle: Написание функций стрелок с более высоким порядком
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Пришло время увидеть, насколько эффективны функции стрелок при обработке данных. Функции стрелок отлично работают с функциями более высокого порядка, такими как <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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>squaredIntegers</code> должен быть постоянной переменной (используя <code>const</code> ).
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/const\s+squaredIntegers/g), "<code>squaredIntegers</code> should be a constant variable (by using <code>const</code>).");'
|
||||
- text: <code>squaredIntegers</code> должен быть <code>array</code>
|
||||
testString: 'assert(Array.isArray(squaredIntegers), "<code>squaredIntegers</code> should be an <code>array</code>");'
|
||||
- text: '<code>squaredIntegers</code> должно быть <code>[16, 1764, 36]</code>'
|
||||
testString: 'assert.deepStrictEqual(squaredIntegers, [16, 1764, 36], "<code>squaredIntegers</code> should be <code>[16, 1764, 36]</code>");'
|
||||
- text: ключевое слово <code>function</code> не использовалось.
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/function/g), "<code>function</code> keyword was not used.");'
|
||||
- text: петля не должна использоваться
|
||||
testString: 'getUserInput => assert(!getUserInput("index").match(/(for)|(while)/g), "loop should not be used");'
|
||||
- text: '<code>map</code> , <code>filter</code> или <code>reduce</code> должны использоваться'
|
||||
testString: 'getUserInput => assert(getUserInput("index").match(/map|filter|reduce/g), "<code>map</code>, <code>filter</code>, or <code>reduce</code> should be used");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='js-seed'>
|
||||
|
||||
```js
|
||||
const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2];
|
||||
const squareList = (arr) => {
|
||||
"use strict";
|
||||
// change code below this line
|
||||
const squaredIntegers = arr;
|
||||
// change code above this line
|
||||
return squaredIntegers;
|
||||
};
|
||||
// test your code
|
||||
const squaredIntegers = squareList(realNumberArray);
|
||||
console.log(squaredIntegers);
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
Reference in New Issue
Block a user