DevGang
Авторизоваться

JavaScript: Давайте узнаем о Set и его возможностях

Не будь дубликатом, иначе Set поймает тебя

ES2015 / ES6 дал нам много полезных инструментов и функций, но наиболее выдающимся для меня является Set. Он не используется в полной мере. Я надеюсь убедить вас в его ценности в этой статье, чтобы вы могли воспользоваться всеми преимуществами этой прекрасной утилиты.

Так что же такое Сет, спросите вы?

Объект Set позволяет хранить уникальные значения любого типа, будь то примитивные значения или ссылки на объекты». MDN.

Набор удаляет повторяющиеся записи.

Основная функциональность

Всякий раз , когда вы хотите использовать SET, вы должны инициализировать его , используя ключевое слово new.

// Все действительные способы инициализации set.
const newSet1 = new Set();
const newSet2 = new Set(null);
const newSet3 = new Set([1, 2, 3, 4, 5]);

Set методы

add, как предполагает его название, добавляет новые записи. Если в любое время в набор будет добавлено дублирующее значение, оно будет отброшено с помощью strict equality.

const newSet = new Set();
newSet.add("C");
newSet.add(1);
newSet.add("C");

newSet.add("H").add("C");

newSet.forEach(el => {
 console.log(el);
 // expected output: C
 // expected output: 1
 // expected output: H
});

has проверяет, существует ли значение, которое вы передаете, в newSet. Если значение существует, оно вернет логическое значение true и вернется false, если оно не существует

const newSet = new Set(["A", 2, "B", 4, "C"]);

console.log(newSet.has("A"));
// expected output: true

console.log(newSet.has(4));
// expected output: true

console.log(newSet.has(5));
// expected output: false

clear и delete являются двумя наиболее важными функциями Set, если вы хотите удалить все записи или удалить определенное значение.

const newSet = new Set(["A", 2, "B", 4, "C"]);

newSet.delete("C");
// expected output: true

newSet.delete("C");
// expected output: false

newSet.size
// expected output: 4

newSet.clear();
// expected output: undefined

newSet.size
// expected output: 0

keys и values оба имеют одинаковую функциональность, что странно, если подумать о том, как они ведут себя с объектами JS. Они оба возвращают объект. Это означает, что вы можете получить доступ к  методу iterator.next(), чтобы получить его значение.

const newSet = new Set(null);
newSet.add("Apples");
newSet.add(12);

let iterator = newSet.keys();  // same as newSet.values();

console.log(iterator.next().value);
// expected output: Apples

console.log(iterator.next().value);
// expected output: 12

console.log(iterator.next().value);
// expected output: undefined

Собери все вместе

Давайте создадим простую функцию для хакерской вечеринки. Функция добавляет пользователей в список, только если они имеют одобрение администратора. Таким образом, вы должны иметь имя администратора с вашей записью, которая является секретной (хотя и не в этой статье). В конце программы будет сказано, кто приглашен.

// Администраторы
const allowedAdminUsers = new Set(["Naimat", "Ismat", "Azad"]);

// пустой набор, сохраненный в памяти
const finalList = new Set();

// Функция добавления пользователей в список разрешений
const addUsers = ({user, admin}) => {
 
 // Проверка, присутствует ли admin в списке allowedAdminUsers
 // и нет ли пользователя в наборе
 if(allowedAdminUsers.has(admin) && !finalList.has(user)) {  
   // Возвращаем список пользователей
   return finalList.add(user);
 }

 // Console.log это сообщение, если условие if не проходит 
 console.log(`user ${user} is already in the list or isn't allowed`);
};

// Добавить несколько записей
addUsers({user: "Asep", admin: "Naimat"});
addUsers({user: "John", admin: "Ismat"});

// Давайте снова добавим Джона, и на этот раз будет показана внутренняя ошибка
addUsers({user: "John", admin: "Azad"});

const inviationList = [...finalList].map(user => `${user} is invited`);

console.log(inviationList);
// Ожидаемый результат:  ["Asep is invited", "John is invited"]

Этого достаточно для нас, чтобы использовать Set сегодня в наших проектах. 🎓

#JavaScript #Начинающим
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

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

Попробовать

Оплатив хостинг 25$ в подарок вы получите 100$ на счет

Получить