0xD34F

При каждом ресайзе у вас вызывается sandwitch, в котором назначается обработчик клика. Отресайзили окно 10 раз - вот вам 10 обработчиков.

Не очень понятно, зачем вообще тут нужно отслеживать ресайз - вешайте обработчик сразу, и уже внутри него проверяйте ширину окна, как-то так:

$(document).on('click', '.sandwitch', function () {
  if ($(window).width() < 520) {
    $(this).toggleClass('sandwitch--active');
    $('.main-menu-list').slideToggle();
  }
});

Ну так вы же полностью переписываете объект:

state = {
    field: newField,
    currentPlayer: newPlayer
};

Где тут свойство winnner? Не вижу. А-у-у-у, winner, ты где? Нет никого.

Может, вы хотели объект дополнить? Типа, Object.assign(state, { ... }).

function foo(...args) {
  console.log(args[N]);
}

или

function foo() {
  console.log(arguments[N]);
}

или

function foo(...{ [N]: x }) {
  console.log(x);
}

Получаем коллекцию элементов, вызываем конструктор для каждого из них:

const cards = Array.from(
  document.querySelectorAll('[data-component="card"]'),
  n => new Card(n)
);

Можно спрятать это дело в сам конструктор - пусть возможным типом параметра будет не только элемент, но и строка. В этом случае подменяйте возвращаемое значение:

constructor(el) {
  if (typeof el === 'string') {
    return Array.from(document.querySelectorAll(el), n => new Card(n));
  }

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

И тогда можно будет делать так:

const cards = new Card('[data-component="card"]');

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

Подозреваю, что виноват ".parents()"

И? Никак свои подозрения проверить не попытались? Можно же было посмотреть, что parents возвращает (и чем в результате оказываются prevBtn/nextBtn). Или прочесть об этом в документации.

Меняйте его на .closest('.block') или .parent().next('.slider-btns').

const table = $(this).closest('table').DataTable();

<input type="text" value="0.00">

document.querySelector('input').addEventListener('keypress', function(e) {
  e.preventDefault();
  this.value = this.value.replace(/(0)(?!.*\1)/, e.key);
});

Запоминать последний вызов и резолвить только его?

const index = arr.findIndex(n => n.id === id);
if (index !== -1) {
  arr.splice(index, 1);
}

или, если нужен новый массив:

const newArr = arr.filter(n => n.id !== id);

Если же id имеют не уникальные значения, то создание нового массива остаётся без изменений, а модификация существующего может выглядеть так:

for (let i = arr.length; i--;) {
  if (arr[i].id === id) {
    arr.splice(i, 1);
  }
}

или так (да, reduceRight используется не совсем по назначения, как и оператор &&):

arr.reduceRight((_, n, i, a) => n.id === id && a.splice(i, 1), null);

или так:

let countDeleted = 0;

for (let i = 0; i < arr.length; i++) {
  arr[i - countDeleted] = arr[i];
  countDeleted += arr[i].id === id;
}

arr.length -= countDeleted;

или так:

arr.splice(0, arr.length, ...arr.filter(n => n.id !== id));

<input type="range" min="20" max="200" value="100">
<img src="...">

document.querySelector('input').addEventListener('input', function() {
  document.querySelector('img').style.filter = `brightness(${this.value}%)`;
});

https://codepen.io/anon/pen/ZNgoBL?editors=1010

$(this).closest('tr').index()

В обработчике start это будет индекс перемещаемого элемента; в drop, соответственно - куда переместили.

$('.box').each((i, n) => {
  const $blocks = $('.section .block', n);
  $('.imgs img', n).each((i, n) => $blocks.eq(i).append(n));
});

или

document.querySelectorAll('.box').forEach(n => {
  const images = n.querySelectorAll('img');
  n.querySelectorAll('.block').forEach((n, i) => n.append(images[i]));
});

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

return this.data();

const chunked = (data, chunkSize) =>
  Array.prototype.reduce.call(
    data,
    (acc, n, i) => (
      i = i / chunkSize | 0,
      (acc[i] = acc[i] || []).push(n),
      acc
    ),
    []
  );


console.log(chunked([...Array(10).keys()], 3));
console.log(chunked('ABCDEFG', 2));
console.log(chunked(document.querySelectorAll('img'), 5));

Потому что ошибка. Потому что пытаетесь прочитать свойство у undefined. Получаете udnefined потому что дергаете несуществующий элемент массива. Потому что цикл делает итераций больше, чем в массиве элементов. Потому что вместо длины массива слов сравниваете значение счётчика цикла с длиной строки, из которой слова нарезали.

Меняйте

for (let i = 0; i < answer.length - 1; i++)

на

for (let i = 0; i < words.length; i++)

UPD. https://jsfiddle.net/h0xm9ysc/

Ну так наверное надо стили элементу задавать, а не строкам: p.style.color = colors[i].

Ищем готовое или реализовываем самостоятельно:

function throttle(f, delay) {
  let lastCall = -Infinity;

  return function() {
    const now = +new Date;
    if (now - lastCall > delay) {
      lastCall = now;
      return f.apply(this, arguments);
    }
  };
}

Object.entries(props).filter(n => n[1]).map(n => n[0]).join(',')

// или

`${Object.entries(props).reduce((acc, [ k, v ]) => (v && acc.push(k), acc), [])}`

// или

Object.entries(props).map(n => n[1] && n[0]).filter(Boolean).toString()

// или

'' + Object.keys(props).reduce((acc, n) => props[n] ? [ ...acc, n ] : acc, [])

// или

String(Object.keys(props).filter(n => props[n]))

Object.values(db).map(Object.values).flat(2).map(n => n.filename)

Цвета сложить в массив:

const colors = [ 'red', 'lime', 'yellow', 'aqua', 'brown', 'magenta' ];

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

$('.item').css('background-color', i => colors[i % colors.length]);

// или

document.querySelectorAll('.item').forEach((n, i) => {
  n.style.backgroundColor = colors[i % colors.length];
});