![Деструктурирующее присвоение
• Деструктуризация
позволяет задать
значения сразу
нескольким переменным
в рамках одного
выражений, используя
массив.
const items = [10, 20, 30, 40];
const [a, b] = items;
console.log(a); // 10
console.log(b); // 20
const [, , c] = items;
console.log(c); // 30
const [x, y, ...others] = items;
console.log(others); // [30, 40]](https://image.slidesharecdn.com/1-200525071704/85/Javascript-5-320.jpg)
![Rest-параметры в функциях
const getSum = (...args) => args.reduce((sum, curr) => sum + curr, 0);
console.log(getSum(1, 4, 5, 7, 8)); // 25
console.log(getSum()); // 0
console.log(getSum(100, 400, 600)) // 1100
const items = [10, 30, 40, 60];
console.log(getSum(...items)); // 140;
console.log(getSum(60, 100, ...items, 200)) ; // 500
• Rest-параметры в сигнатуре функции могут указываться только один
раз в конце списка параметров.](https://image.slidesharecdn.com/1-200525071704/85/Javascript-7-320.jpg)
![Структуризация массива
const nums = [2, 4, 6];
const chars = ['a', 'b', 'c'];
const items = [true, ...nums, false, ...chars];
const duplicatedItems = items;
console.log(items === duplicatedItems); // true
const clonedItems = [...items];
console.log(clonedItems === items); // false](https://image.slidesharecdn.com/1-200525071704/85/Javascript-9-320.jpg)
![Сортировка массивов
• В общем случае метод .sort делает сортировку в алфавитном
порядке.
const names = ["Bob", "Alex", "Maria", "John"];
names.sort();
console.log(names); //['Alex', 'Bob', 'John', 'Maria']
const nums = [150, 44, 9, 1065, 296];
nums.sort();
console.log(nums); // [1065, 150, 296, 44, 9]](https://image.slidesharecdn.com/1-200525071704/85/Javascript-12-320.jpg)
![Сортировка массивов (2)
const nums = [150, 44, 9, 1065, 296];
const compareFunction = function(a, b) {
if (a < b) {
// a левее b
return -1;
}
if (a > b) {
// a правее b
return 1;
}
return 0;
}
nums.sort(compareFunction);
console.log(nums); // [9, 44, 150, 296, 1065]](https://image.slidesharecdn.com/1-200525071704/85/Javascript-13-320.jpg)
![Сортировка массивов (3)
• Функция сравнения должна вернуть число <0 для элементов A, B в случае,
если А должен стоять правее В в массиве. Если нужно, чтобы А был левее
В, то функция должна вернуть число, большее 0. Если их порядок не
важен, то функция может вернуть 0.
• Сортировка изменяет сам массив, а не возвращает новый!
• Если необходимо в результате сортировки не терять старый массив, то
перед сортировкой его нужно клонировать.
const nums = [150, 44, 9, 1065, 296];
nums.sort((a, b) => a - b);
console.log(nums); // [9, 44, 150, 296, 1065]](https://image.slidesharecdn.com/1-200525071704/85/Javascript-14-320.jpg)
![Регулярные выражения
• Регулярным выражением называется шаблон, по которому можно
осуществлять поиск подстроки в какой-либо строке.
const exp = /d+/g;
const str = "A 100 B 10 X 20 N 400";
console.log(str.match(exp)); // ["100", "10", "20", "400"]
console.log(exp.test(str)); // true](https://image.slidesharecdn.com/1-200525071704/85/Javascript-16-320.jpg)
![Символьные классы (3)
• Перечисление позволяет указать определенный набор символов
(или диапазон), который может стоять в строке на данном месте в
шаблоне поиска.
/A[xyz123]B/
// Найдет строку длиной 3, где посередине - один из символов xyz123
// Например, A3B, AzB
/A[a-z]/
// Найдет строку длиной 2, где на втором месте - один из символов от a до z
// Например, Ab, Af, Ax
/[^ABCabc][0-9a-z]/
// Найдет строку длиной 2, где первый символ - любой, кроме ABCabc
// А второй - цифра от 0 до 9 или символ от a до z](https://image.slidesharecdn.com/1-200525071704/85/Javascript-19-320.jpg)
![Квантификаторы
• Квантификаторы – специальные символы, указывающие, что
предыдущий символьный класс должен повторяться в строке
определенное количество раз.
Квантификатор Количество Примеры
* 0 и более /[a-z]*/ /.*/ /as*b/
+ 1 и более /[0-9a-fA-F]+/
? 0 или 1 /My name:?sw+/
{n} Ровно n /[0-9]{6}/
{n, m} От n до m /[a-z]{2,16}/
{n, } n и более /w{3,}/
{, n} От 0 до n /d{,8}$/](https://image.slidesharecdn.com/1-200525071704/85/Javascript-22-320.jpg)
![Флаги
• Флаги регулярных выражений не задают шаблон поиска, а
указывают, каким образом осуществлять сам процесс поиска.
• Флаги могут комбинироваться друг с другом.
Флаг Описание Примеры
//g Глобальный поиск. Регулярное выражение с этим флагом будет
искать все совпадения строки с шаблоном, а не только первое
/[a-z]{4}-[0-9]{2}/g
//i Регистронезависимый поиск. При использовании этого флага
разница между прописными и строчными буквами не
учитывается
/s[a-z]*s/i
//m Многострочный поиск. Ищет по всем строкам , а не только до
первого знака переноса в строке. При этом символы
начала/конца строки указывают на начало/конец каждой строки
внутри переменной.
/.$/m](https://image.slidesharecdn.com/1-200525071704/85/Javascript-23-320.jpg)
![Запоминающие скобки
• Запоминающие скобки позволяют отдельно запомнить только часть
найденной выражением подстроки.
• Не работает с глобальным флагом.
const expr = /[a-z]{2}-[0-9]{4}/i;
const text = `My car's number is AX-3328.`;
console.log(text.match(expr));
// ["AX-3328"]
const rememberExpr = /[a-z]{2}-([0-9]{4})/i
console.log(text.match(rememberExpr));
// ["AX-3328", "3328"]](https://image.slidesharecdn.com/1-200525071704/85/Javascript-24-320.jpg)
Дополнительные возможности Javascript
- 1. Возможности синтаксиса Javascript. Браузерное окружение. Занятие 9 из 32. Курс Frontend-разработки на Javascript + Vue/React
- 3. Задача 0. • Написать функцию, которая принимает число и возвращает true|false в зависимости от того, делится ли число на 3. • Сдать решение преподавателю по готовности.
- 4. Шаблонные строки • Шаблонные строки позволяют вставлять выражения в строку более удобным способом: "Hello, my name is " + name + "! I am " + age + " years old!"; `Hello, my name is ${name}! I am ${age} years old!` • В Javascript принято использовать строки с одинарными кавычками (‘), если вставок в строку нет, а если есть – то шаблонные.
- 5. Деструктурирующее присвоение • Деструктуризация позволяет задать значения сразу нескольким переменным в рамках одного выражений, используя массив. const items = [10, 20, 30, 40]; const [a, b] = items; console.log(a); // 10 console.log(b); // 20 const [, , c] = items; console.log(c); // 30 const [x, y, ...others] = items; console.log(others); // [30, 40]
- 6. Деструктурирующее присвоение (2) const house = { address: 'Minsk, Independence ave, 301', floors: 21, area: 22103, rooms: 1000 }; const {address, floors} = house; console.log(address); // Minsk, Independence ave, 301 console.log(floors); // 21 const {area: metres} = house; console.log(metres); // 22103
- 7. Rest-параметры в функциях const getSum = (...args) => args.reduce((sum, curr) => sum + curr, 0); console.log(getSum(1, 4, 5, 7, 8)); // 25 console.log(getSum()); // 0 console.log(getSum(100, 400, 600)) // 1100 const items = [10, 30, 40, 60]; console.log(getSum(...items)); // 140; console.log(getSum(60, 100, ...items, 200)) ; // 500 • Rest-параметры в сигнатуре функции могут указываться только один раз в конце списка параметров.
- 8. Деструктуризация объекта в функции const printR = ({r}) => console.log(r); const circle = { x: 100, y: 300, r: 35, } printR(circle); // 35
- 9. Структуризация массива const nums = [2, 4, 6]; const chars = ['a', 'b', 'c']; const items = [true, ...nums, false, ...chars]; const duplicatedItems = items; console.log(items === duplicatedItems); // true const clonedItems = [...items]; console.log(clonedItems === items); // false
- 10. Структуризация объекта const x = 10; const y = 20; const point = {x, y}; console.log(point); // {x: 10, y: 20}; const circle = { r: 40, ...point }; console.log(circle); // {x: 10, y: 20, r: 40}
- 11. Задача 1. • Создать объект Банковский счёт. У него есть номер, дата открытия, баланс и метод, который принимает в себя числа (любое число аргументов) и добавляет их на баланс. 1. Создать две переменные, которые деструктурируют счёт – номер и дату открытия. Вывести эти переменные в консоль. 2. Отправить в метод увеличения баланса число. Вывести баланс на консоль. 3. Создать массив из 5 чисел. Отправить этот массив в деструктурированном виде в метод увеличения баланса. Вывести баланс. • Показать решение преподавателю.
- 12. Сортировка массивов • В общем случае метод .sort делает сортировку в алфавитном порядке. const names = ["Bob", "Alex", "Maria", "John"]; names.sort(); console.log(names); //['Alex', 'Bob', 'John', 'Maria'] const nums = [150, 44, 9, 1065, 296]; nums.sort(); console.log(nums); // [1065, 150, 296, 44, 9]
- 13. Сортировка массивов (2) const nums = [150, 44, 9, 1065, 296]; const compareFunction = function(a, b) { if (a < b) { // a левее b return -1; } if (a > b) { // a правее b return 1; } return 0; } nums.sort(compareFunction); console.log(nums); // [9, 44, 150, 296, 1065]
- 14. Сортировка массивов (3) • Функция сравнения должна вернуть число <0 для элементов A, B в случае, если А должен стоять правее В в массиве. Если нужно, чтобы А был левее В, то функция должна вернуть число, большее 0. Если их порядок не важен, то функция может вернуть 0. • Сортировка изменяет сам массив, а не возвращает новый! • Если необходимо в результате сортировки не терять старый массив, то перед сортировкой его нужно клонировать. const nums = [150, 44, 9, 1065, 296]; nums.sort((a, b) => a - b); console.log(nums); // [9, 44, 150, 296, 1065]
- 15. Задача 2. • Сгенерируйте массив из 100 объектов, которые хранят информацию о кругах (поля x, y, r – случайные числа от 0 до 1000). • Отсортируйте этот массив по убыванию радиусов этих кругов. • Выведите на консоль 10 самых больших кругов. (использовать slice) • Покажите решение преподавателю.
- 16. Регулярные выражения • Регулярным выражением называется шаблон, по которому можно осуществлять поиск подстроки в какой-либо строке. const exp = /d+/g; const str = "A 100 B 10 X 20 N 400"; console.log(str.match(exp)); // ["100", "10", "20", "400"] console.log(exp.test(str)); // true
- 17. Символьные классы • Символьным классом называется специальное обозначение в регулярном выражении, указывающее, что в данном месте в строке может находиться любой символ из диапазона, определяемого этим символьным классом. /ABC/ // Найдет строку ABC /aBCd/ // Найдет строку aBCd /aB.x/ // Найдет строку, в которой первые два символа - // это aB, на третьем месте - любой символ, и на // четвертом - x. Например, aB#x
- 18. Символьные классы (2) Символьный класс Символы в классе . Любой символ d Любая цифра от 0 до 9 D Любой символ, кроме цифр от 0 до 9 n r t Символ переноса строки; символ возврата каретки; символ табуляции s Любой пробельный символ, включая сам пробел и некоторые дополнительные S Любой символ, кроме пробельных w Любая латинская буква в любом регистре или цифра W Все, кроме w • Если в регулярном выражении нужно использовать символ, который имеет специальное значение в языке шаблонов, он экранируется обратным слэшем, например /./
- 19. Символьные классы (3) • Перечисление позволяет указать определенный набор символов (или диапазон), который может стоять в строке на данном месте в шаблоне поиска. /A[xyz123]B/ // Найдет строку длиной 3, где посередине - один из символов xyz123 // Например, A3B, AzB /A[a-z]/ // Найдет строку длиной 2, где на втором месте - один из символов от a до z // Например, Ab, Af, Ax /[^ABCabc][0-9a-z]/ // Найдет строку длиной 2, где первый символ - любой, кроме ABCabc // А второй - цифра от 0 до 9 или символ от a до z
- 20. Символы конца/начала строки /^abc/; // Найдет abc в `abcdef`, но не в `fgeabc` /d$/; // Найдет любую цифру в конце: например, 4 в `Road 4`, // но не в `Road 4, Main` /^..x$/ // Найдет любую строку из 3 символов, где последний - x, // если сама строка состоит из трех символов. • Символы начала/конца строки (^, $) указывают, что найденная шаблоном строка должна находиться в начале/конце строки, в которой был произведен поиск.
- 21. Задача 3. • Пользователь вводит строку. • Проверить, есть ли в этой строке индекс некоторой страны: • 6 цифр • Первая цифра – 1 или 2 • Вторая цифра – от 0 до 6 • Третья цифра – 0 • Четвертая, пятая цифра – от 0 до 9 • Шестая цифра – от 1 до 9, исключая 4 • Примеры: 240594, 100019, 130996 • Не подойдут: 900334, 270454, 260454 • Покажите решение преподавателю
- 22. Квантификаторы • Квантификаторы – специальные символы, указывающие, что предыдущий символьный класс должен повторяться в строке определенное количество раз. Квантификатор Количество Примеры * 0 и более /[a-z]*/ /.*/ /as*b/ + 1 и более /[0-9a-fA-F]+/ ? 0 или 1 /My name:?sw+/ {n} Ровно n /[0-9]{6}/ {n, m} От n до m /[a-z]{2,16}/ {n, } n и более /w{3,}/ {, n} От 0 до n /d{,8}$/
- 23. Флаги • Флаги регулярных выражений не задают шаблон поиска, а указывают, каким образом осуществлять сам процесс поиска. • Флаги могут комбинироваться друг с другом. Флаг Описание Примеры //g Глобальный поиск. Регулярное выражение с этим флагом будет искать все совпадения строки с шаблоном, а не только первое /[a-z]{4}-[0-9]{2}/g //i Регистронезависимый поиск. При использовании этого флага разница между прописными и строчными буквами не учитывается /s[a-z]*s/i //m Многострочный поиск. Ищет по всем строкам , а не только до первого знака переноса в строке. При этом символы начала/конца строки указывают на начало/конец каждой строки внутри переменной. /.$/m
- 24. Запоминающие скобки • Запоминающие скобки позволяют отдельно запомнить только часть найденной выражением подстроки. • Не работает с глобальным флагом. const expr = /[a-z]{2}-[0-9]{4}/i; const text = `My car's number is AX-3328.`; console.log(text.match(expr)); // ["AX-3328"] const rememberExpr = /[a-z]{2}-([0-9]{4})/i console.log(text.match(rememberExpr)); // ["AX-3328", "3328"]
- 25. Задача 4. • Пользователь вводит строку, в которой записан его почтовый адрес. 1. Проверить, является ли его строка валидным почтовым адресом. 2. Найти и вывести адрес почтового сервера из его адреса. • Сдать решение преподавателю по готовности.
- 26. Глобальная область видимости • В Javascript переменные, созданные при помощи let, const имеют блочную область видимости. Это значит, что обратиться к такой переменной можно только внутри того блока ({}), в котором она была создана. • Весь скрипт выполняется в так называемой глобальной области видимости. В этой области уже существует определенный перечень переменных, которые доступны в скрипте. Все такие переменные собраны в один объект, который доступен в браузере из предопределенной переменной window.
- 27. Глобальная область видимости (2) • Примеры: • Функции alert, prompt находятся в ГОВ и доступны через window.alert, window.prompt • Конструкторы Date, RegExp, объект Math также находятся в ГОВ и доступны через переменную window • Переменная window сама находится в ГОВ и доступна по адресу window.window • Создание переменных без помощи const/let приведет к тому, что в ГОВ появится новое поле с названием таким же, как эта переменная и в нее попадет значение. Визуально это сработает как создание переменной, но такая «переменная» будет иметь глобальную область видимости.
- 28. Структура клиентского JS • Все возможности Javascript, доступные в браузере, делятся на три категории: • Ядро JS. К нему относятся синтаксические возможности языка, конструкторы даты, математические вычисления и всё остальное, что описывает стандарт ECMAScript • Browser Object Model (BOM) – набор возможностей в window (и сам window), которые позволяют скрипту обращаться с внешним окружением страницы – браузером. • Document Object Model (DOM) – набор возможностей и API, который позволяет при помощи скрипта управлять структурой страницы, на которой запущен скрипт, и общаться с ней.
- 29. Информация об окружении из BOM • В объекте window присутствуют встроенные объекты, которые позволяют получать информацию об окружении страницы, на которой запущен скрипт: • window.screen • window.location • window.history • window.navigator
- 30. Дополнительные материалы Шаблонные строки https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/te mplate_strings Деструктурирующее присваивание https://learn.javascript.ru/destructuring Rest/Spread - оператор https://bit.ly/2I1OG2E Сортировка массивов https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Gl obal_Objects/Array/sort Regular Expressions https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Regul ar_Expressions Замыкания в JS https://developer.mozilla.org/ru/docs/Web/JavaScript/Closures window.screen https://developer.mozilla.org/ru/docs/Web/API/Screen window.history https://developer.mozilla.org/ru/docs/Web/API/History window.navigator https://developer.mozilla.org/ru/docs/Web/API/Navigator window.location https://developer.mozilla.org/ru/docs/Web/API/Location
- 31. Домашнее задание 1. Написать функцию, которая принимает массив объектов и название ключа, по которому нужно его отсортировать. Вернёт новый массив с отсортированными объектами. Вывести вместе старый и новый массивы. 2. Найти во введённом тексте все американские номера телефонов (+1). В номере цифры могут разделяться внутри дефисами. 3. Написать скрипт, который выведет домен 1-го уровня той страницы, на которой запущен. 4. Вывести в консоль количество квадратов 60*60 пикселей, которые полностью поместятся в области просмотра страницы в виде сетки.