Полные заметки по JS #9 🧵

Добро пожаловать в следующую статью моих заметок по JavaScript.

В этой статье мы поговорим о: множествах, сопоставлениях, строковых операциях, выборе правильного типа данных

Все содержание взято из замечательного курса Йонаса Шмедтманна Полный курс JavaScript 2022: от нуля до эксперта!

Пожалуйста, купите курс, чтобы понять его содержание, это просто мои краткие заметки о курсе.

В js долгое время не было сетов и карт, после ES6 они включаются в язык.

Наборы

Наборы — это неповторяющиеся структуры данных. Они могут хранить различные типы данных

const foodSet = new Set([
‘Pizza’,
‘Pizza’,
‘Pasta’,
‘Pasta’,
3,
4,
3
]);
//Pizza, Pasta, 3, 4

Наборы принимают итерации, поэтому они также принимают строки.

const ecemSet = new Set(‘Ecem’); // ‘E’, ‘c’, ‘m’

У него потрясающие функции

foodSet.has(‘Pizza’); //true
foodSet.add(‘Garlic Bread’);
foodSet.delete(‘Pasta’);

Как получить значения из набора

cl(foodSet[2]); //undefined

У наборов нет индексов, они неупорядочены, поэтому мы не можем использовать квадратный синтаксис. На самом деле нет способа получить данные из набора, и если подумать, то это вполне логично. Если все данные уникальны для набора, то нет смысла пытаться их получить.

Все, что нам нужно знать, находится ли значение в наборе.

Мы можем сбросить набор, используя .clean()

foodSet.clear();

Наборы повторяемы, поэтому мы можем использовать их в цикле for.

for (const food of foodSet) {
cl(food);
}

Наборы действительно полезны при поиске уникальных элементов массива.

Это здорово, но возвращает набор, а у наборов нет некоторых полезных методов, которые есть у массивов. Итак, как преобразовать их в массив?

Чтобы найти размер набора, нам даже не нужно преобразовывать его в массив

cl(new Set([‘a’, ‘a’, ‘b’]).size); // 2

То же самое можно использовать, чтобы узнать, сколько букв у вас в имени.

cl( new Set(‘Baris’).size ); // 5

Конечно же, он найдет уникальных персонажей.

Карты: основы

Карты гораздо полезнее наборов.

Карты — это пары ключ-значение, подобные объектам. Самая большая разница между объектами заключается в том, что свойства карты могут быть любого типа, даже объекты, массивы и другие карты. Эта функция открывает множество дверей для карт.

const rest = new Map();
rest.set(‘name’, ‘Classico Italiano’); 
// First the name of the parameter then the value
rest.set(1, ‘Firenze, Italy’);
cl(rest.set(2, ‘Lisbon, Portugal’)); 
//Add to the map and returns the whole map
rest
.set(‘Categories’, [‘Pizzeria’, ‘Vegetarian’, ‘Tasty’])
.set(‘open’, 11)
.set(false, ‘close’);
console.log(rest);

Он не вкладывает их каждый раз, когда мы используем набор, который он просто добавляет к карте.

Чтобы получить данные с карты, мы используем метод get с именем свойства

cl(rest.get(‘Categories’));

Умный пример

cl(rest.has(‘categories’));
rest.delete(2);
cl(rest.size) // 7

Получение значения ключа массива

rest.set([1, 2], ‘data’);
rest.get([1,2]); // Returns undefined because both of the arrays has different places in memory
// Our map checks the address and says that it does not exist

Чтобы получить данные, что мы должны сделать?

const arr = [1,2]
rest.set(arr, ‘data’);
rest.get(arr);

Элементы DOM как ключи

rest.set(document.querySelector(‘h1’), ‘Heading’);

Карты: итерация

Создание альтернативной карты

Мы также можем напрямую преобразовать Object.entries в карту, потому что это одно и то же: ключ и значение.

const hoursMap = new Map(Object.entries(openingHours));

Итерация карты

Карта — это повторяемый тип данных.

Допустим, мы хотим напечатать 3 ответа на вопрос Карта

for ( [key, value] of question) {
if (typeof key === ‘number’) {
cl(`Answer ${key}: ${value}`);
}
}

Преобразовать карту в массив

Мы снова используем оператор спреда

cl(…question);

Вы также можете взять ключи и значения

cl([…question.keys()]);
cl([…question.values()]);

Резюме: какую структуру данных использовать?

Работа со строками, часть 1

‘Baris’.length; //5
const airline = ‘TAP Air Portugal’;
cl(airline.indexOf(‘r’)); // 6
cl(airline.lastIndexOf(‘r’)); // 10 starts counting from the end
cl(airline.indexOf(‘Portugal’)); // 8 can also search for the whole word
cl(airline.indexOf(‘portugal’)); // -1 because index is case sensitive
cl(airline.slice(4)); // ‘Air Portugal’ remember that string is 0 indexed
cl(airline.slice(4, 7)); // ‘Air’
cl(airline.slice(0, airline.indexOf(‘ ‘))); // ‘TAP’ this is a cool trick to extract first word
cl(airline.slice(airline.lastIndexOf(‘ ‘) + 1)); // ‘Portugal’ we added 1 to avoid including space
cl(airline.slice(-2)); // ‘al’ We can even write negative numbers to count

Заниматься боксом

Если строки JS являются примитивами, как мы можем использовать эти методы?

Всякий раз, когда мы вызываем строковый метод, js тайно изменяет нашу строку строковым объектом.

new String(‘your old string’);

Затем используем методы этого объекта.

И всякий раз, когда мы заканчиваем операцию, JS возвращает строку обратно в примитивное состояние, даже если мы изначально создаем строку как объект.

Работа со строками, часть 2

const airline = ‘TAP Air Portugal’;
cl(airline.toLowerCase()); // ‘tap air portugal’
cl(airline.toUpperCase()); // ‘TAP AIR PORTUGAL’
const spacedString = ‘ Strriing ‘;
cl(spacedString.trim()); // ‘Strriing’ you can also use trimStart and trimEnd
const priceGB = ‘298,97£’; // We need to convert it to . and $ to also work with US
let priceUS = priceGB.replace(‘£’,’$’).replace(‘,’, ‘.’);
//However replace has a weak poin it replaces only the first occurence but there is a solution for that
let str = ‘baris baris baris ecem’;
str.replaceAll(‘baris’, ‘ecem’); // “ecem ecem ecem ecem”
str.replace(/baris/g, ‘ecem’); // A simple look at the regex in js
const plane = ‘A30neo’;
cl(plane.includes(‘A320’)); // true
cl(plane.startsWith(‘Air’)); // false we can also use .endsWith()

Работа со строками, часть 3

cl(‘a+very+nice+string’.split(‘+’)); // ‘A very nice string’
const [firstName, lastName] = ‘Baris Balli’.split(‘ ‘);
const newName = [‘Mr.’, firstName, lastName.toUpperCase()].join(‘ ‘);
//Padding
const message = ‘Go to gate 23!’;
cl(message.padStart(25, ‘+’)); // ‘++++++++++++++Go to gate 23!’

Padding просто заполняет пустое пространство до заполнения 25-символьного пространства.

Посмотрите первую статью в этой ветке js notes!

См. предыдущую статью этой ветки js notes!

См. следующую статью в этой ветке js notes!

Подпишитесь на меня в Twitter 💣🔥

Почитайте обо мне и многих других замечательных технических блоггерах в разделе Dev Genius»