0xD34F

Такие варианты есть:

document.querySelectorAll('h2').forEach(n => {
  const [ season, , episode ] = n.innerText.split(' ');
  if (+episode === 1) {
    n.id = `season-${season}`;
  }
});

[...document.querySelectorAll('h2')]
  .filter(n => n.innerText.endsWith(', 1 серия'))
  .forEach((n, i) => n.id = `season-${i + 1}`);

document.querySelectorAll('h2').forEach((n, i, a) => {
  const prev = i && a[i - 1].innerText.match(/\d+/)[0];
  const curr = n.innerText.match(/\d+/)[0];
  if (curr !== prev) {
    n.id = `season-${curr}`;
  }
});

Array
  .from(document.querySelectorAll('h2'))
  .reduce((acc, n) => (acc[parseInt(n.innerText)] ??= n, acc), [])
  .forEach((n, i) => n.id = `season-${i}`);

<div class="slider">

$('.slick').slick({

Так как правильно - slider или slick? Вы бы определились.

data-category="orange"

var filterClass = $(this).data('category');

$('.slick').slick('slickFilter', filterClass);

Где-то тут точки не хватает - имена классов, они точкой в начале обозначаются.

А ещё сброс фильтра (пункт "all color") работать не будет - это надо отдельно обрабатывать:

$('.category__menu').on('click', 'li', function() {
  $('.slider').slick('slickUnfilter');

  const category = $(this).data('category');
  if (category !== 'allPost') {
    $('.slider').slick('slickFilter', `.${category}`);
  }
});

Коротко:

const transpose = matrix => Array.from(
  { length: matrix[0]?.length ?? 0 },
  (_, i) => matrix.map(n => n[i])
);

Длинно:

function transpose(matrix) {
  const result = Array(matrix.length && matrix[0].length);

  for (let i = 0; i < result.length; i++) {
    result[i] = [];

    for (let j = 0; j < matrix.length; j++) {
      result[i][j] = matrix[j][i];
    }
  }

  return result;
}

const groupAdjacent = (arr, newGroup) =>
  arr.reduce((acc, n, i, a) => (
    (!i || newGroup(n, a[~-i])) && acc.push([]),
    acc[~-acc.length].push(n),
    acc
  ), []);


const result = groupAdjacent(arr, (c, p) => c !== -~p);

или (если гарантируется, что элементы массива образуют возрастающую последовательность)

function group(data, key) {
  const grouped = new Map;
  let i = -1;

  for (const n of data) {
    const k = key(n, ++i);
    grouped.set(k, grouped.get(k) ?? []).get(k).push(n);
  }

  return grouped;
}


const result = [...group(arr, (n, i) => n - i).values()];

const [ form, setForm ] = useState({
  login: '',
  password: '',
});

const onChange = ({ target: t }) => setForm({ ...form, [t.name]: t.value });

<input name="login" value={form.login} onChange={onChange} />
<input name="password" value={form.password} onChange={onChange} />

$('.js-cropped-word').text((i, text) => text.replace(/(?<=\S{19,}).+/, '...'));

UPD. Вынесено из комментариев:

В Сафари не работает

Это из-за lookbehind. Делайте тогда так:

document.querySelectorAll('.js-cropped-word').forEach(n => {
  n.textContent = n.textContent.replace(/(\S{19}).+/, '$1...');
});

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

const max = 19;

for (const n of document.getElementsByClassName('js-cropped-word')) {
  const words = n.innerText.split(' ');
  const i = words.findIndex(n => n.length > max);
  if (i !== -1) {
    words.length = i + 1;
    words[i] = words[i].slice(0, max) + '...';
    n.innerText = words.join(' ');
  }
}

const [ width, setWidth ] = useState(0);
const onChange = e => setWidth(e.target.value);
const styles = { width: `${width}px` };

<input value={width} onChange={onChange} />
<div style={styles}>

Кого и во что надо обернуть:

const elements = document.querySelectorAll('input[type="button"]');
const wrapperTag = 'div';
const wrapperClass = 'block';

Оборачиваем:

elements.forEach(n => {
  const wrapper = document.createElement(wrapperTag);
  n.replaceWith(wrapper);
  wrapper.classList.add(wrapperClass);
  wrapper.append(n);
});

или

for (const n of elements) {
  n.after(document.createElement(wrapperTag));
  n.nextSibling.className = wrapperClass;
  n.nextSibling.appendChild(n);
}

или

for (let i = 0; i < elements.length; i++) {
  const n = elements[i];
  n.outerHTML = `<${wrapperTag} class="${wrapperClass}">${n.outerHTML}</${wrapperTag}>`;
}

или

(function wrap(i, n = elements[i]) {
  if (n) {
    const wrapper = document.createElement(wrapperTag);
    n.parentNode.replaceChild(wrapper, n);
    wrapper.classList.value = wrapperClass;
    wrapper.insertAdjacentElement('afterbegin', n);
    wrap(-~i);
  }
})(0);

Первым делом надо сложить значения удаляемых option'ов в массив:

const values = [ '1', '2', '3' ];

Дальше возможны варианты:

[...selectEl].forEach(n => values.includes(n.value) && n.remove());

или

for (const n of selectEl.querySelectorAll(values.map(n => `[value="${n}"]`))) {
  selectEl.removeChild(n);
}

или

for (let i = selectEl.options.length; i--;) {
  const n = selectEl.options[i];
  if (values.indexOf(n.value) !== -1) {
    n.outerHTML = '';
  }
}

Обычный img у меня не сработал.

Где код, почему не показали, что конкретно пытались делать? Вдруг что-то не то? Да конечно не то - всё работает.

Ещё есть вариант вместо img использовать background-image.

Кто-то невнимательно читал документацию.

Замените product.amount = 1; на Vue.set(product, 'amount', 1);.

Или, замените

product.amount = 1;
state.items.push(product);

на

state.items.push({
  ...product,
  amount: 1,
});

constructor(el) {
  if (typeof el === 'string') {
    el = document.querySelectorAll(el);
  }

  if (typeof el[Symbol.iterator] === 'function') {
    return Array.from(el, n => new Select(n));
  }

  this.$select = el;

  // дальше всё по-старому

Как отфильтровать массив:

const filterArrByObj = (arr, obj) =>
  Object.entries(obj).reduce((arr, [ k, v ]) => {
    return arr.filter(Array.isArray(v)
      ? n => v.includes(n[k])
//           !v.length || v.includes(n[k]), если при пустом массиве допустимо любое значение
      : n => v === n[k]
//           n[k].includes(v), если точное соответствие не нужно
    );
  }, arr);

Отфильтрованные данные оформляете в виде вычисляемого свойства:

computed: {
  filteredData() {
    return filterArrByObj(this.data, this.filters);
  },
},

Значение которого используете при рендеринге таблицы вместо исходных данных:

<tr v-for="n in filteredData">
  ...

fill = tuple(map(int, color['color_shape'].split(' ')))

Классы calc__price и calc__payment заменить на общий calc.

const $price = $('#price');
const $firstPayment = $('#first-payment');

function update($elem) {
  $elem.closest('.calc').find('output').text($elem.val());
  $('.payment-percent').html(Math.round($firstPayment.val() * 100 / $price.val()) + '%');
}


$price.closest('.calc').on('input', function() {
  const val = $price.val();

  $firstPayment
    .val((i, v) => Math.min(v, val))
    .attr('max', val)
    .rangeslider('update', true);

  update($firstPayment);
});

$price.add($firstPayment)
  .rangeslider({ polyfill: false })
  .closest('.calc')
  .on('input', e => update($(e.target)))
  .end()
  .trigger('input');

Рекурсия есть:

function walkNested(val, callback) {
  callback(val);

  if (val instanceof Object) {
    Object.values(val).forEach(n => walkNested(n, callback));
  }
}


walkNested(obj, n => n?.touched === true && (n.touched = false));

Рекурсии нет:

function walkNested(val, callback) {
  for (const stack = [ val ]; stack.length;) {
    const n = stack.pop();
    callback(n);
    stack.push(...Object.values(n ?? {}));
  }
}

Какие ключи хотелось бы иметь: const keys = [ 'city', 'country' ];.

Собираем новый массив:

const newArr = arr.map(n => Object.fromEntries(Object.values(n).map((v, i) => [ keys[i], v ])));

Обновляем существующий:

arr.forEach(n => Object.entries(n).forEach(([ k, v ], i) => (delete n[k], n[keys[i]] = v)));

str.replace(/\t.*/s, '')
// или
str.match(/^[^\t]*/)[0]
// или
str.slice(0, str.search(/\t|$/))
// или
str.split('\t', 1).pop()
// или
[...str].reduceRight((acc, n) => n === '\t' ? '' : n + acc, '')

Никаких ошибок нет, всё правильно, как и должно быть. Сколько есть уникальных ключей - столько записей в map'е и создаётся. Как по одному ключу может быть доступно несколько значений? Никак, это абсурд. Очевидно, вы плохо понимаете, чего хотите сделать.