История самообучения cmdlhz № 1, 2019 г.
Серия [История самообучения cmdlhz, 2019 г.]
[JavaScript] 🌱 Net Ninja - JavaScript ES6 🌱 Net Ninja - Asynchronous JavaScript 🌱 Net Ninja - Object Oriented JavaScript 🌱 Coding Train - JavaScript ES6-ES8 (Part1, Part2) [Regular Expressions] 🌱 Coding Train - Programming with Text [Vue] 🌱 Net Ninja - Vue CLI3 🌱 Net Ninja - Vue JS2 🌱 Net Ninja - Vuex 🌱 Net Ninja - Vuetify (Part1, Part2, Part3) [Python/Django] 🌱 Net Ninja - Python3 🌱 Net Ninja - Django [Figma] 🌱 Design Course 🌱 Figma (Part1, Part2, Part3, Part4, Part5) [Illustrator] 🌱 TastyTuts (Part1, Part2, Part3) [SQL] 🌱 freeCodeCamp
🌱 Это мой краткий обзор JavaScript ES6 Tutorial от Net Ninja на YouTube.
[1. Intro] [2. Let] [3. Default Parameters] [4. Spread Operator] [5. Template Strings] [6. Object Literal Enhancements] [7. New String Methods] [8. Arrow Functions] [9. Sets] [10. Generators]
[ 1. Константы ]
ES2015 представил два важных новых ключевых слова JavaScript: let и const.
Переменные, определенные с помощью const, ведут себя как переменные let, за исключением того, что их нельзя переназначить.
const pi = 3.142;
function calcArea(r){
const pi = 10;
console.log("The area is " + pi + r*r + ".");
}
console.log(pi);
calcArea(5);
=› Это печатается следующим образом:
>>> 3.142 >>> The area is 250.
В первом ответе используется глобальная версия const, а во втором — локальная версия const.
[ 2. Пусть ]
letпозволяет объявлять переменные, область действия которых ограничена блоком, оператором или выражением, в которых они используются. Это отличается от ключевого словаvar, которое определяет переменную глобально или локально для всей функции независимо от области действия блока. (МДН)
var x = 10;
if(x > 5){
let x = 5;
console.log("inside: " + x);
}
console.log("outside " + x);
=› Это печатается следующим образом:
>>> inside: 5 >>> outside: 10
[ 3. Параметры по умолчанию ]
Параметры по умолчанию — это параметры, на которые функция может полагаться в качестве резервной копии, если параметры НЕ объявлены явным образом или не передаются функции при ее вызове.
function logInfo(name="Jen", nationality="Korea"){
console.log("My name is " + name + " and I'm from " + nationality + ".");
}
logInfo();
logInfo("Kate", "China");
=› Это печатается следующим образом:
>>> My name is Jen and I'm from Korea. >>> My name is Kate and I'm from China.
[ 4. Оператор спреда ]
Оператор распространения позволяет iterable распространяться или расширяться индивидуально внутри receiver. Итерируемые объекты — это все, что можно зациклить, например строки, массивы и наборы. (Брэндон Морелли)
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
sum(numbers);
sum(...numbers);
=› Это печатается следующим образом:
>>> 1,2,3undefinedundefined >>> 6
Брэндон Морелли приводит больше примеров в своем блоге:
🌱 ПРИМЕР 1
const string = 'CODEBURST'; const characters = [ ...string ]; console.log(characters);
=› Это печатается следующим образом:
>>> ["C", "O", "D", "E", "B", "U", "R", "S", "T"]
🌱 ПРИМЕР 2
const items = ['This', 'is', 'a', 'sentence']; console.log(items); console.log(...items);
=› Это печатается следующим образом:
>>> ["This", "is", "a", "sentence"] >>> This is a sentence
[ 5. Строки шаблона ]
Шаблонные литералы — это строковые литералы, допускающие встроенные выражения. С ними можно использовать многострочные строки и функции интерполяции строк. (МДН)
function introName(name, nationality){
console.log("My name is " + name + " and I'm from " + nationality + ".");
}
introName("Jen", "Korea");
function introName_copy(name, nationality){
console.log(`My name is ${name} and I'm from ${nationality}.`);
}
introName_copy("Jen", "Korea");
=› Это печатается следующим образом:
>>> My name is Jen and I'm from Korea. >>> My name is Jen and I'm from Korea.
[ 6. Улучшения литерала объекта ]
🌱 ДО
let name = "Jen";
let sentence = {
name: name,
guitar: function(x){
console.log(`I played a guitar for ${x} minutes.`);
}
};
console.log(sentence.name);
console.log(sentence.guitar(5));
=› Это печатается следующим образом:
>>> Jen >>> I played a guitar for 5 minutes. >>> Undefined
🌱 ПОСЛЕ
let name = "Jen";
let sentence = {
name,
guitar(x){
console.log(`I played a guitar for ${x} minutes.`);
}
};
console.log(sentence.name);
console.log(sentence.guitar(5));
=› Это печатается следующим образом:
>>> Jen >>> I played a guitar for 5 minutes. >>> Undefined
[ 7. Новые строковые методы ]
🌱 ПОВТОРИТЬ
let greetings = "hello "; console.log(greetings.repeat(5));
=› Это печатается следующим образом:
>>> "hello hello hello hello hello"
🌱 НАЧАЛО
let greetings = "goodbye";
console.log(greetings.startsWith("bye"));
console.log(greetings.startsWith("bye", 4));
console.log(greetings.startsWith("bye", greetings.length - 3));
=› Это печатается следующим образом:
>>> false >>> true >>> true
🌱 КОНЕЦ
let greetings = "goodbye";
console.log(greetings.endsWith("bye"));
=› Это печатается следующим образом:
>>> true
🌱 ВКЛЮЧАЕТ
let greetings = "My name is Jen.";
console.log(greetings.includes("name"));
=› Это печатается следующим образом:
>>> true
[ 8. Функции стрелок ]
🌱 ДО ES6
let greetings = function(name){
console.log(`Hello, ${name}!`);
}
greetings("Jen");
=› Это печатается следующим образом:
>>> Hello, Jen!
🌱 ES6
let greetings = name => console.log(`Hello, ${name}!`);
greetings("Jen");
=› Это печатается следующим образом:
>>> Hello, Jen!
🌱 ДО ES6 (без указания «это»)
let sentence = {
name: "Jen",
greetings(x){
window.setInterval(function(){
if(x > 0){
console.log(this.name + " loves traveling.");
x--;
}, 1000);
}
};
sentence.greetings(3);
=› Это печатается следующим образом:
>>> loves traveling. >>> loves traveling. >>> loves traveling.
🌱 ДО ES6 (с объявлением «это»)
let sentence = {
name: "Jen",
greetings(x){
let _THIS = this;
window.setInterval(function(){
if(x > 0){
console.log(_THIS.name + " loves traveling.");
x--;
}, 1000);
}
};
sentence.greetings(3);
=› Это печатается следующим образом:
>>> Jen loves traveling. >>> Jen loves traveling. >>> Jen loves traveling.
🌱 ES6
let sentence = {
name: "Jen",
greetings(x){
window.setInterval(() => {
if(x > 0){
console.log(this.name + " loves traveling.");
x--;
}, 1000);
}
};
sentence.greetings(3);
=› Это печатается следующим образом:
>>> Jen loves traveling. >>> Jen loves traveling. >>> Jen loves traveling.
[ 9. Наборы ]
Объект Set позволяет хранить уникальные значения любого типа, будь то «примитивные значения или ссылки на объекты». (МДН)
🌱 ПРИМЕР 1
let colors = new Set();
colors.add("blue").add("red").add("yellow");
console.log(colors.has("black");
console.log(colors.delete("red");
console.log(colors.size);
console.log(colors);
colors.clear();
console.log(colors.size);
console.log(colors);
=› Это печатается следующим образом:
>>> false
>>> true
>>> 2
>>> Set {"blue", "yellow"}
>>> 0
>>> Set {}
🌱 ПРИМЕР 2
let colors = ["red", "red", "blue", "blue", "yellow"]; let refined_colors = new Set(colors); console.log(refined_colors); colors = [...refined_colors]; console.log(colors);
=› Это печатается следующим образом:
>>> Set {"red", "blue", "yellow"}
>>> ["red", "blue", "yellow"]
[ 10. Генераторы ]
🌱 ПРИМЕР 1
function* gen(){
let x = yield "red";
let y = yield "blue";
let z = yield "yellow";
return x + y + z;
}
let myGen = gen();
console.log(myGen.next());
console.log(myGen.next(10));
console.log(myGen.next(5));
console.log(myGen.next(2));
=› Это печатается следующим образом:
>>> Object {value: "red", done: false}
>>> Object {value: "blue", done: false}
>>> Object {value: "yellow", done: false}
>>> Object {value: 17, done: true}
🌱 ПРИМЕР 2. Отображение асинхронного кода синхронизированным способом.
genWrapper(function* generator(){
var twitter = yield $.getJSON("data/twitter.json");
console.log(red);
var youtube = yield $.getJSON("data/youtube.json");
console.log(red);
var fb = yield $.getJSON("data/fb.json");
console.log(red);
});
function genWrapper(generator){
// set up generator / iterator
let myGen = generator();
// create function to handle the yielded value
function handle(yielded){
if(!yielded.done){
yielded.value.then(function(data){
return handle(myGen.next(data));
});
}
} // end handle
// return handle function, passing in myGen.next
return handle(myGen.next());
}
=› Это печатается следующим образом:
>>> [Object, Object, Object, Object] >>> [Object, Object, Object, Object] >>> [Object, Object, Object]
(Отправлять твиты, видео на YouTube и комментарии в Facebook по порядку.)
🌱 ПРИМЕР 3. Передача аргументов методу next(). Автор Раджеш Бабу.
Как мы все знаем, функции в JavaScript«выполняются до возврата/конца. Генераторные функции, с другой стороны, "выполняются до тех пор, пока не будет yield/return/end". (Раджеш Бабу)
function *generatorFunction(i){
console.log(i);
const j = 5 * (yield (i*10));
console.log(j);
const k = yield(2*j/4);
console.log(k);
return (i + j + k);
}
- генераторФункция(7)
❗️ i = 7;
- .next(33) ➡️ значение: 70
function *generatorFunction(i){
console.log(i);
const j = 5 * (yield (i*10));
}
🔹 No previous yield expression : value 33 is discarded.
🔹 i = 7;
❗️yield value: 7(i) * 10 = 70
- .next(25) ➡️ значение: 62,5
function *generatorFunction(i){
console.log(i);
const j = 5 * (yield (i*10));
console.log(j);
const k = yield(2*j/4);
console.log(k);
return (i + j + k);
}
🔹 yield(i*10) is replaced with 25.
🔹 const j = 5 * 25 = 125;
❗️yield value: 2 * 125(j) / 4 = 62.5
- .next(8) ➡️ значение: 65
function *generatorFunction(i){
console.log(i);
const j = 5 * (yield (i*10));
console.log(j);
const k = yield(2*j/4);
console.log(k);
return (i + j + k);
}
🔹 Replaces the entire second yield with 8, bringing the value of k to 8.
❗️yield value: 7(i) + 125(j) + 8(k) = 140
Спасибо за чтение! 🎵 Если вам понравилась эта запись в блоге, похлопайте👏
