JavaScript. Функции. Списки. Циклы. Строки

1.

JavaScript
Функции. Списки. Циклы. Строки.
Москва, 2024

2.

Константы
Условия и Циклы
Функции
Операторы нулевого слияния
Строки
Списки
Объекты
Деструктиризация
Импорт файлов
Задания

3.

Переменные
Константы
let greeting = ‘Father!'
const surfaceOfMars = surfaceArea(3390);
Интерполяция: console.log(`${greeting}, ${firstName}!`);
typeof something - возвращает тип переменной
3

4.

Условия и циклы
Условия
Циклы
While
let i = 1;
while (i <= lastNumber) {
console.log(i);
i = i + 1;
}
Тернарный оператор
const abs = (number) => {
return number >= 0 ? number : -number;
};
Составная проверка
switch (status) {
case 'processing': // status === 'processing' (строгое соответствие)
// Делаем раз
break;
case ‘paid':
// Делаем два
break;
for..in (перебор свойств объекта)
case 'new':
let obj = { a: 1, b: 2, c: 3 };
// Делаем три
break;
for (var prop in obj) {
default: // else
console.log("obj." + prop + " = " + obj[prop]);
}
// Делаем четыре
}
4
For
const reverseString = (str) => {
let result = '';
for (let i = 0; i < str.length; i += 1) {
result = `${str[i]}${result}`;
}
return result;
};
for..of (посимвольный перебор)
for (const name of userNames) {
console.log(name);
}

5.

function Company(name, website) {
Функции
this.name = name;
this.website = website;
this.getName = getName;
this.getWebsite = getWebsite;
const pow = (x, base = 2) => {
};
return x ** base;
};
const double = (x) => x ** 2;
5

6.

Операторы нулевого
слияния
Результат выражения a ?? b будет следующим:
если a определено, то a,
Оператор ?? нельзя
использовать вместе с &&
и || без скобок.
если a null или undefined , то b
Оператор || не различает false, 0,
пустую строку "" и null/undefined:
Оператор нулевого присваивания: ??=
|| возвращает первое истинное
значение.
x ??= y
?? возвращает первое определённое
значение.
let user;
alert(user ?? "Пользователь"); // Анонимный пользователь (user не существует)
6

7.

Строки
str.split(separator) - разбить строку по разделителю separator
str.charAt(pos)/str[pos] - получить символ, который занимает позицию pos
Методы toLowerCase() и toUpperCase() меняют регистр символов
str.indexOf(substr, pos) - ищет подстроку substr в строке str, начиная с
позиции pos, и возвращает позицию, на которой располагается
совпадение, либо -1 при отсутствии совпадений
str.includes(substr, pos) - возвращает true, если в строке str есть подстрока
substr, либо false, если нет
str.slice(start [, end]) - Возвращает часть строки от start до (не включая) end
str.substr(start [, length]) - Возвращает часть строки от start длины length
7

8.

Списки
// создание списка
// указывание значений
enum Membership {
Simple,
Standart,
Premium
}
const membership = Membership.Standart
const membershipReverse = Membership[2]
Premium
// по умолчанию присвоится 1
// присвоится значение
enum SocialMedia {
Vk = ‘VK’,
WhatsApp = ‘WHATSAPP’,
Telegram = ‘TELEGRAM’
}
const social = SocialMedia.Telegram
TELEGRAM
// присвоится значение
8

9.

Объекты
Определение:
const user = {
email: 'inna@example.com',
name: 'Inna',
password: ‘qwerty’,
"likes cats": true,
};
user.children = [
{ name: 'Mila', age: 1 },
Вызов:
user.name; // ‘Inna'
user["likes cats"]; // true
{ name: 'Petr', age: 10 },
];
user.children[0].name; // 'Mila'
Переопределение:
user.married = false;
Удаление:
delete user.email;
obj?.one?.two?.three
9

10.

Объекты
Создание:
let user = new Object(); // синтаксис "конструктор
объекта"
let user = {}; // синтаксис "литерал объекта"
let color = "tail";
let user = {
name: "Leva",
age: 10,
[color]: ‘black’
};
user
Вычисляемое свойство
let key = prompt("Что вы хотите узнать о пользователе?", "name");
alert( user[key] ); // Leva (если ввели "name")
alert( user[tail] ); // black (если ввели "tail")
10

11.

Объекты
Существует специальный оператор "in" для проверки существования
свойства в объекте:
"key" in object
Для перебора всех свойств объекта используется цикл for..in:
let color = "tail";
let user = {
name: "Leva",
age: 10,
[color]: ‘black’
};
for (let key in user) {
// ключи
alert( key ); // name, age, tail
// значения ключей
alert( user[key] ); // Leva, 10, black
}
11

12.

Деструктиризация
const func = ({ name, surname }) => {
console.log(name);
console.log(surname);
};
const numbers = [1, 7, 4];
// const user = response.data.attributes;
// const links = response.data.links;
// const author = response.data.relationships.author;
const { links, attributes: user, relationships: { author } } =
response.data;
sum(...numbers); // 12
const user = { name: 'Tirion', email: 'support@hexlet.io', age: 44 };
const { name, ...rest } = user; // rest = { email: 'support@hexlet.io', age: 44 }
12

13.

Импорт и экспорт
Импорт элементов: import { surfaceArea, square } from ‘./math.js’;
Импорт по умолчанию: import surfaceArea from ‘./math.js’;
Импорт всего модуля и назначение ему имени mathematics: import * as
mathematics from ‘./math.js’;
Экспорт функции: export const square = (x) => {
return x * x;
};
Экспорт по умолчанию: export default surfaceArea;
Экспорт определённых функций: export { pi, e, square, surfaceArea };
13

14.

Задание 1. Работа с объектом
1 вариант
2 вариант
1.
Создайте пустой объект teacher.
2.
Добавьте свойство firstName с пустым значением.
3.
Добавьте свойство lastName с любым значением.
4.
Добавьте свойство subject со значением «Математика».
5.
Измените значение свойства firstName на строковое.
6. Удалите свойство lastName из объекта.
6.
Удалите свойство lastName из объекта.
7. Добавьте новое свойство courses, которое будет
массивом с элементами «Математика» и «Физика».
7.
Добавьте новое свойство experience, которое будет
содержать количество лет работы (например, 10).
8. Добавьте новый курс «Информатика» в конец массива
courses.
8.
Добавьте новое свойство classes, которое будет
массивом с элементами «9ИС» и «11ИС».
9.
Добавьте новый класс «9ГД» в начало массива classes.
10.
Добавьте функцию, которая будет выводить все свойства
объекта в консоль по алфавиту.
1. Создайте пустой объект student.
2. Добавьте свойство firstName со значением «Синди».
3. Добавьте свойство lastName со значением своей
фамилии.
4. Добавьте свойство age со значением 20.
5. Измените значение свойства firstName на своего имени.
9. Выведите все свойства объекта в консоль.
10. Добавьте стрелочную функцию, которая будет
добавлять оценку по предмету в объект.
14

15.

Задание 2. Работа с циклами
1 вариант
2 вариант
1. Создайте массив рас, например: ["Человек", "Эльф",
"Драконид", "Гном", "Вампир", "Орк", "Оборотень"]
1.
Создайте массив классов, например: ["Воин", "Маг",
"Стрелок", "Убийца", "Танк", "Инженер", "Призыватель"]
2.
Создайте функцию для формирования массива
пользователей:
1.
С помощью метода confirm предлагайте пользователю
класс, пока он не согласится.
2.
С помощью метода prompt считайте у пользователя имя.
3.
Сохраните пользователя в виде строки «КлассИмя»,
состоящей из соединения строк его класса и имени.
3.
После того, как в, созданном таким образом, массиве
будет больше 2 пользователей, подсчитывайте, сколько в
нём магов и выводите эту цифру в консоль.
4.
Добавляйте пользователей, пока количество магов не
будет равняться 3.
2. С помощью метода prompt считайте у пользователя расу.
3. Приведите полученную строку к хранимому виду: первая
буква заглавная, остальные - в нижнем регистре.
4. Проверьте, есть ли введённая раса в исходном массиве.
5. Если такой расы нет, предложите пользователю ввести
строку заново, пока он не введёт существующую расу.
6. Если проверка расы прошла успешно, создайте объект героя
с новым именем (русской раскладки) и выбранной расой.
7. Выведите в консоль полученный объект.
8. Все, полученные таким образом, объекты пользователей
сохранять в общий массив. Всего их должно быть 3.
9. Создать копию массива из трёх пользователей.
10. Добавить в копию для каждого объекта показатель уровня
героя и отсортировать копию по имени.
15

16.

Задание
3. Работа со строками
1. Посчитайте сколько гласных содержится в
имени пользователя у каждого объекта.
2. Выведите в консоль это число.
3. Найдите имена, в которых содержится
сочетание "ен".
4. Выведите через общий alert
получившееся имена пользователей,
содержащие искомое сочетание.
16

17.

Задание
4. Деструктуризация
1. Создайте массив colors с элементами «Красный», «Зеленый» и «Синий».
2. Используя деструктуризацию, присвойте первые два элемента массива переменным firstColor и secondColor.
3. Добавьте элемент «Желтый» в конец массива colors.
4. Создайте объект car с свойствами brand, model и year.
5. Используя деструктуризацию, извлеките свойства brand и model в отдельные переменные.
6. Измените значение свойства year на текущее значение (например, 2024).
7. Создайте новый объект owner, который будет содержать имя владельца и возраст.
8. Используя деструктуризацию, извлеките имя владельца в переменную ownerName.
9. Создайте функцию displayCarInfo, которая принимает объект car и выводит информацию о машине, используя
деструктуризацию для извлечения свойств.
10. Выведите все значения, полученные в результате деструктуризации, в консоль.
17

18.

НА ЭТОМ ВСЁ