Дмитрий Беляев

Вот так можно собрать все ключи, что есть в localStorage:

const storageKeys = Array.from({length: localStorage.length}, (_, i) => localStorage.key(i));
console.log(storageKeys);

test: '/\.png$/'
ковычки лишние
test: /\.png$/

вместо проверки className, который содержит строку со всеми классами элемента, проверьте:event.target.classList.contains('delete__button')

Можно так же медиа запросами:
https://developer.mozilla.org/ru/docs/Web/API/Wind...
Можно даже подписаться на изменение состояния по медиа запросу:
https://developer.mozilla.org/en-US/docs/Web/API/M...

arr.flatMap(el => el.region).flatMap(el => el.cities).map(el => el.name)

Потому что прототипы есть только у объектов, то есть у сущностей (entity) для которых верноtypeof entity === 'object'Правда тут есть одно исключение - в спеке нет типа function, а во всех реализациях он есть по историческим причинам. То есть с точки зрения спеки:typeof function(){} === 'object'а на деле:typeof function(){} === 'function'Поэтому правильное тождество будет такое:

typeof entity === 'object' || typeof entity === 'function'

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

1 instanceof Number
1 instanceof Object
'a' instanceof String
'a' instanceof Object
true instanceof Boolean
true instanceof Object
1n instanceof BigInt
1n instanceof Object
Symbol() instanceof Symbol
Symbol() instanceof Object
null instanceof Object
undefined instanceof Object

все эти выражения ложны, а как известно instanceof проверяет именно прототипы.

А для того чтоб работали методы для большинства этих типов есть объектные обертки, к которым присутствует неявное приведение при обращении к свойствам через точку или квадратные скобки. Эти обертки не сложно получить передав данные примитивы в Object как функцию, а не как конструктор:

Object(1) instanceof Number
Object(1) instanceof Object
Object('a') instanceof String
Object('a') instanceof Object
Object(true) instanceof Boolean
Object(true) instanceof Object
Object(1n) instanceof BigInt
Object(1n) instanceof Object
Object(Symbol()) instanceof Symbol
Object(Symbol()) instanceof Object

все эти выражения истинны.
Однако надо понимать, что обертка - это уже не примитив:

typeof Object(1) === 'object'
typeof Object('a') === 'object'
typeof Object(true) === 'object'
typeof Object(1n) === 'object'
typeof Object(Symbol()) === 'object'

это все так же истинно.

А вот у юнит-типов (типов-значений) null и undefined таких оберток нет. И хотя Object(null) и Object(undefined) возвращают просто пустой объект, обратится к методам null и undefined нельзя:

null.property // TypeError: Cannot read property 'property' of null
undefined.property // TypeError: Cannot read property 'property' of undefined

Если строка действительно такого простого вида, то регулярки - непростительное расточительство ресурсов.
'2020-09-30'.split('-').reverse().join('.')
Ну а если в большой строке заменить, то:

'2020-09-30'.replace(/(\d{4})-(\d{2})-(\d{2})/, '$3.$2.$1')

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

Говорить о том, что некие фичи устарели - крайне глупо, если знать, что они ведут себя иначе, чем более модные альтернативы. Предлагаю немного разобраться и начать с того что на поверхности:
- getElementById и querySelector возвращают конкретную ноду в единственном экземпляре
- querySelectorAll и getElementsByName возвращает статичную коллекцию NodeList
- getElementsByClassName, getElementsByTagName и getElementsByTagNameNS возвращают динамическую коллекцию HTMLCollection
Как видим результат у разного апи различен, а значит и говорить, что некоторые из них устарели - глупо.
С устареванием вроде разобрались, но в вопросе еще есть часть "чем лучше". И тут есть теория, что getElementsBy* быстрее querySelector*. Чисто теоретически звучит логично, querySelector* должен делать полный поиск по дереву со сложностью O(n), а getElementsBy* могут использовать индексы на базе HashMap и получать данные со сложностью O(1), тут и особенности HTMLCollection будут кстати, так как можно не копировать коллекцию, а отдавать одну и ту же (и браузеры действительно так делают). Но без пруфов теория так и останется теорией.Гораздо лучше тут выглядят исходники. И я выбрал исходники chromium, как самого распространенного:
- getElementsBy* методы все как один обращаются к некой шаблонной функции EnsureCachedCollection, которая в свою очередь обращается к некоему NodeLists кэшу, устроенному внутри действительно как HashMap или что-то наподобие. Никакого поиска тут нет, просто берутся готовые значения, сложность у всего этого действительно константная O(1).
- querySelector* используют абстракцию SelectorQuery, которая и в самом деле делает поиск по DOM. Но данный поиск неплохо оптимизирован и обвешан кэшами. Притом CSSOM использует абсолютно тот же алгоритм поиска DOM нод для каждого селектора в css.

На этом спор думаю можно закрыть. querySelector* методы действительно могут быть медленнее, но чтоб убить ими производительность, нужно очень постараться. На фоне того, что пишут кривые ручки среднестатистического дешевого js-кодера это будет незначительной потерей измеряемой в наносекундах. Используйте то что удобнее в каждой конкретной ситуации.

Данная задача в принципе не решается сортировкой, так как сортировка это про отношение больше/меньше/равно, которого в данном случае нет.
Самое простое здесь, это построить из этих элементов двусвязный список, а затем преобразовать его в результирующий массив:

function orderArray(arr) {
  // для начала построим ноды списка и соберем их в 2 HashMap по обоим строкам
  const maps = arr.reduce((acc, item) => {
    const node = {item, next: null, prev: null};
    acc[0][item[0]] = node;
    acc[1][item[1]] = node;
    return acc;
  }, [{}, {}]);

  // после пройдемся по обоим HashMap и соединим связи
  for(const key of Object.keys(maps[0])) {
    maps[0][key].next = maps[0][maps[0][key].item[1]] || null;
  }
  for(const key of Object.keys(maps[1])) {
    maps[1][key].prev = maps[1][maps[1][key].item[0]] || null;
  }

  // найдем начальную ноду списка (ноду без предыдущей ноды)
  let cur = Object.values(maps[0]).find(({prev}) => prev === null);

  // и начиная с нее соберем список в массив
  const result = [];
  while(cur) {
    result.push(cur.item);
    cur = cur.next;
  }

  return result;
}

console.log(orderArray([['butter', 'jelly'], ['bananas', 'apples'], ['peanuts', 'butter'], ['jelly', 'bananas']]));

Первое что нужно понимать, что async/await - это всего лишь синтаксический сахар над промисами, а значит имеет все особенности работы с ними:
Во-первых, промис может разрешится (или отклонится, но в этой задаче reject не нужен) только единожды. Это сильно отличает их от событий, которые могут происходить многократно.
Во-вторых, промисы обрабатываются на особой фазе event loop называемой microtasks, что опять же отличается от событий, которые выполняются на другой фазе (tasks). Это означает, что обработка промиса (колбэк метода then, или сахар над ним в виде await оператора) всегда произойдет асинхронно от возникновения события. Это накладывает ряд ограничений, например не получится сделать preventDefault у объекта или не получится запустить действия требующие синхронной работы из trusted события (play не muted video/audio, вход в фулскрин и тд).

В простом варианте можно слушать событие разово, для чего можно использовать параметр once. Так же для оптимизации можно использовать параметр passive, так как нам все равно поздно вызывать preventDefault, а в некоторых случаях это может дать нам оптимизацию. Ну и управлять параметром capture попросту бесполезно, так как обработка будет в любом случае после обеих фаз. В итоге для этого можно пользоваться такой функцией хелпером:

function listenOnce(target, event) {
    return new Promise(resolve => {
        target.addEventListener(event, resolve, {
            once: true,
            passive: true
        });
    });
}

// использование
const event = await listenOnce(document, 'DOMContentLoaded');
console.log(event);

Если же нужно слушать событие многократно, то разумно обернуть прослушивание события в асинхронный итератор. Здесь так же присутствуют все ограничения связанные с промисами, но за счет того, что у нас будет итератор по множеству промисов, мы сможем слушать событие многократно. так же тут нужно предусмотреть возможность отписаться от события. Хелпер для данного случая получится такой:

function listen(target, event) {
    let currentResolve = () => {};
    const handler = event => currentResolve({value: event, done: false});
    return {
        [Symbol.asyncIterator]() {
            target.addEventListener(event, handler, {passive: true});
            return {next: () => new Promise(resolve => {
                currentResolve = resolve;
            })};
        },
        stop() {
            target.removeEventListener(event, handler);
            currentResolve({done: true});
        }
    };
}

// использование
for await(const event = listenOnce(window, 'scroll')) {
    console.log(event);
}

// с отпиской
const eventIterator = listenOnce(window, 'scroll');
let count = 10;
for await(const event = eventIterator) {
    console.log(event);
    if(--i === 0) {
        eventIterator.stop();
    }
}

// небольшая функция хелпер, чтоб писать меньше кода:
const appendNewDiv = parent => parent.appendChild(document.createElement('div'));

// создадим основные эллементы
const wrap = appendNewDiv(albumTrack);
const title = appendNewDiv(wrap);
const itemAlbumWrap = appendNewDiv(wrap);
const itemAlbum = appendNewDiv(itemAlbumWrap);

wrap.classList.add('album__item');
title.classList.add('album_title');
itemAlbumWrap.classList.add('album__item__wrap');
itemAlbum.classList.add('album__photo');

// сюда будем складывать элементы, которые должны удалятся при смене number
let elements = [];

// функция, через которую меняем отображаемые данные по number
const renderByNumber = number => {
    const {albumId, albums} = arr2[number];
    elements.forEach(e => wrap.removeChild(e));
    title.textContent = `Альбом ${albumId}`;
    elements = albums.map(album => {
        const e = appendNewDiv(wrap);
        e.textContent = album.title;
        return e;
    });
};

// при изменении number теперь просто вызываем
renderByNumber(number);

https://developer.mozilla.org/ru/docs/Web/JavaScri...

У HTMLCollection нет метода every, и метода includes тоже нет, как и метода some у DOMElement