Окончательно! Когда Set был представлен в прошлом, он уже сделал нашу жизнь лучше. Нам удалось легко создавать уникальные списки, а также повысить производительность при поиске и настройке элементов в этих списках.

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

Без лишних слов, приступим.

Разница

Возвращает новый набор, содержащий элементы, которые существуют в первом наборе, но отсутствуют во втором.

Пример: вы хотите узнать, какие пользователи посетили сайт на этой неделе, но не заходили на него в прошлом месяце.

Как этим пользоваться?

const thisWeekUsers = new Set([1, 2, 3, 4]);
const lastMonthUsers = new Set([3, 4, 5, 6]);

const newUsers = thisWeekUsers.difference(lastMonthUsers);

console.log(newUsers); // Set(2) { 1, 2 }

Как мы бы это делали раньше?

const thisWeekUsers = [1, 2, 3, 4];
const lastMonthUsers = [3, 4, 5, 6];

let newUsers = thisWeekUsers.filter(x => !lastMonthUsers.includes(x));

console.log(newUsers); // (2) [1,2]

Подробнее: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/difference

Пересечение

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

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

Как этим пользоваться?

const booksBundle = new Set([1, 2, 3, 4]);
const cart = new Set([3, 4, 5, 6]);

const booksToAdd = booksBundle.intersection(cart);

console.log(booksToAdd); // Set(2) { 3, 4 }

Как мы бы это делали раньше?

const booksBundle = [1, 2, 3, 4];
const cart = [3, 4, 5, 6];

const booksToAdd = booksBundle.filter(book => cart.includes(book));

console.log(booksToAdd); // (2) [3, 4]

Подробнее: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/intersection

Симметричная разница

Возвращает новый набор со значениями, которые не повторяются ни в одной группе.

Пример: проверка наличия товаров в разных магазинах, чтобы определить, какие товары можно обменять.

Как этим пользоваться?

const firstStore = new Set([1, 2, 3, 4]);
const secondStore = new Set([3, 4, 5, 6]);

const overstockedItems = firstStore.symmetricDifference(secondStore);

console.log(overstockedItems); // Set(4) { 1, 2, 5, 6 }

Как мы бы это делали раньше?

const firstStore = [1, 2, 3, 4];
const secondStore = [3, 4, 5, 6];

const allItems = [firstStore, secondStore].flat();
const overstockedItems = allItems.filter(item => {
  return !firstStore.includes(item) || !secondStore.includes(item);
});

console.log(overstockedItems); // (4) [1, 2, 5, 6]

Подробнее: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/symmetricDifference

Союз

Возвращает новый набор со значениями из обеих групп, но без повторения значений.

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

Как этим пользоваться?

const yourPlaylist = new Set([1, 2, 3, 4]);
const friendPlaylist = new Set([3, 4, 5, 6]);

const mergedPlaylist = yourPlaylist.union(friendPlaylist);

console.log(mergedPlaylist); // Set(6) { 1, 2, 3, 4, 5, 6 }

Как мы бы это делали раньше?

const yourPlaylist = [1, 2, 3, 4];
const friendPlaylist = [3, 4, 5, 6];

const mergedPlaylist = new Set([yourPlaylist, friendPlaylist].flat());

console.log(mergedPlaylist); // (6) [1, 2, 3, 4, 5, 6]

Подробнее: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/union

Непересекающееся от?

Он возвращает логическое значение. Это true, если оба Set не имеют общих значений, и false, если у них есть хотя бы одно общее значение.

Пример: посмотрите, есть ли товары, входящие в другие группы.

Как этим пользоваться?

const electronics = new Set([1, 2, 3, 4]);
const furniture = new Set([3, 4, 5, 6]);
const groceries = new Set(['apple']);

console.log(electronics.isDisjointFrom(furniture)); // false
console.log(electronics.isDisjointFrom(groceries)); // true

Как мы бы это делали раньше?

const electronics = [1, 2, 3, 4];
const furniture = [3, 4, 5, 6];
const groceries = ['apple'];

function isDisjoint(array1, array2) {
  return array1.every(item => !array2.includes(item));
}

console.log(isDisjoint(electronics, furniture)); // false
console.log(isDisjoint(electronics, groceries)); // true

Подробнее: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/isDisjointFrom

Является ли супермножество/подмножество?

Эти две функции очень похожи. Оба они возвращают логическое значение и являются прямыми противоположностями. Superset вернет true, если Set является расширенным набором другого, а Subset вернет true, если Set является подмножеством другого.

Я объединил эти функции, потому что знания ответа на одну из них достаточно, чтобы знать другую. Набор может быть только надмножеством подмножества Набора.

Пример. Узнайте, входят ли пользователи в группу компаний.

Как этим пользоваться?

const itDepartment = new Set([1, 2, 3, 4]);
const genZFromToronto = new Set([3, 4]);

console.log(itDepartment.isSupersetOf(genZFromToronto)); // true
console.log(genZFromToronto.isSubsetOf(itDepartment)); // true

Как мы бы это делали раньше?

const itDepartment = [1, 2, 3, 4];
const genZFromToronto = [3, 4];

console.log(genZFromToronto.every(item => itDepartment.includes(item))); // true

Подробнее:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/isSupersetOf
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/isSubsetOf

Теперь все готово. Мне не жаль использовать это в вашем проекте!

Дайте мне знать, если вам тоже интересна эта функция, другая функция или вы хотите увидеть что-то еще. До следующего раза o/