0xD34F

Делегирование, назначаем обработчик события один раз для всех:

document.addEventListener('input', ({ target: t }) => {
  if (t.classList.contains('rating__value')) {
    const value = +t.value;

    t.closest('.item-rating').querySelector('.rating__dynamic').innerHTML = Array
      .from({ length: 5 }, (n, i) => `<span class="char">${'☆★'[+(value > i)]}</span>`)
      .join('');
  }
});

document.querySelectorAll('.rating__value').forEach(n => {
  n.dispatchEvent(new Event('input', { bubbles: true }));
});

Или, каждому элементу индивидуально:

for (const n of document.getElementsByClassName('rating__value')) {
  n.previousElementSibling.innerHTML = '<span class="char"></span>'.repeat(5);
  n.addEventListener('input', onRatingInput);
  onRatingInput.call(n);
}

function onRatingInput() {
  const value = this.value | 0;
  const stars = this.previousElementSibling.children;

  for (let i = 0; i < stars.length; i++) {
    stars[i].innerText = value > i ? '★' : '☆';
  }
}

Прочтите хотя бы первые два абзаца.

const sortedArr = arr
  .map(n => [ n, new Date(n.date.replace(/(\d+)\.(\d+)\.(\d+)/, '$3-$2-$1')) ])
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0]);

button с классами .tool и .название цвета

Повелеваю: цвет унести в data-атрибут.

let color = '#000';

document.querySelector('селектор контейнера с кнопками').addEventListener('click', e => {
  if (e.target.classList.contains('tool')) {
    color = e.target.dataset.color;
  }
});

document.querySelector('селектор контейнера с "пикселями"').addEventListener('click', e => {
  if (e.target.classList.contains('pixel')) {
    e.target.style.backgroundColor = color;
  }
});

filterBox.forEach(n => {
  n.classList.toggle('none', ![ 'all', n.dataset.work ].includes(filterBtn));
});

const element = document.querySelector(`.js-filter-wrap a[data-filter="${конкретноеЗначение}"]`);
if (element) {
  ...

Или, если уже есть коллекция элементов, в которой надо найти подходящий:

const element = [...elements].find(n => n.dataset.filter === конкретноеЗначение);
if (element) {
  ...

1. Собрать из вложенных массивов один общий
   
2. Отсортировать полученный массив
   
3. Взять сколько надо первых/последних (зависит от направления сортировки) элементов
   

const result = arr
  .flatMap(n => n.subcategories)
  .sort((a, b) => a.rating - b.rating)
  .slice(-2);

Там, внутри самой спецификации, всё объясняется:

1. Internal Methods and Internal Slots:
   
   

   Internal methods and internal slots are identified within this specification using names enclosed in double square brackets...

   
   
2. Well-Known Symbols:
   
   

   Within this specification a well-known symbol is referred to by using a notation of the form @@name...

   
   
3. Well-Known Intrinsic Objects:
   
   

   Within this specification a reference such as %name% means the intrinsic object...

   
   

let displayMessage = '';
doItems.forEach((item, i) => {
    displayMessage += `
    <li class="do__item">
        <input type="checkbox" id="do_${i}" ${item.checked ? 'checked': ' '}>
        <label for="do_${i}" class="${item.checked ? 'checked' : ' '}">${item.message}</label>
        <button class="remove" id="do_${i}">Delete</button>
    </li>`;
    block.innerHTML = displayMessage;
});

Установка значения block.innerHTML должна производиться после forEach'а, а не внутри.

UPD. Кстати, а какого хрена у вас элементы с одинаковыми id (input и button)?

Определяете максимальное расстояние от курсора, на котором элементы должны начинать движение. По событию mousemove на родителе считаете расстояния до элементов (теорема Пифагора), тем, кто достаточно близко, задаёте translate. Чтобы смена положения была плавной, в стилях определяете transition для translate'а.

https://jsfiddle.net/w6jf480k/1/

Вставить - никак. Строки в js изменять нельзя. Можно сделать новую:

const insert = (str, index, ch) =>
  str.replace(RegExp(`(?<=.{${index}})`), ch);

// или

const insert = (str, index, ch) =>
  str.replace(RegExp(`.{${index}}`), `$&${ch}`);

// или

const insert = (str, index, ch) =>
  str.length >= index ? str.slice(0, index) + ch + str.slice(index) : str;

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

<input type="radio" name="method" data-placeholder="hello, world!!">
<input type="radio" name="method" data-placeholder="fuck the world">
<input type="radio" name="method" data-placeholder="fuck everything">

Как передать это значение из радиокнопки в инпут:

const updatePlaceholder = (input, radio) =>
  input.placeholder = radio.dataset.placeholder;
  // или
  // input.setAttribute('placeholder', radio.getAttribute('data-placeholder'));
  // input.attributes.placeholder.value = radio.attributes['data-placeholder'].value;

По событию change, имеющим своим источником радиокнопку, надо получить инпут, находящийся внутри той же формы. Можно от радиокнопки подняться к форме, внутри которой уже искать инпут. Или просто пройти по ссылкам - из радиокнопки в форму, которой она принадлежит, из коллекции элементов формы получить инпут по его имени.

Обработчик события change можно сделать делегированным:

document.addEventListener('change', ({ target: t }) => {
  if (t.matches('input[name="method"]')) {
    updatePlaceholder(t.closest('form').querySelector('[name="wallet"]'), t);
  }
});

Или назначать каждой радиокнопке индивидуально:

const onChange = ({ target: t }) =>
  updatePlaceholder(t.form.elements.wallet, t);

for (const form of document.forms) {
  for (const radio of form.elements.method) {
    radio.addEventListener('change', onChange);
  }
}

$.param($(this).serializeArray().filter(n => +n.value && n.name !== 'mode'))

str.replace(/(\+\d)(\d{3})\d{5}/, '$1 ($2) ***-**-')

Всё так, всё работает. Между "не работает" и "работает не так, как я задумал" есть существенная разница, попытайтесь её осознать.

Во-первых, чтобы результирующий массив был непустым, надо, как минимум, из коллбека фильтрации что-то возвращать. При использовании map'а - тоже. Кстати, а зачем map? Непонятно. Возможно, вместо него нужен some.

Во-вторых - в dataset лежат строки, сравниваете их вы с числами. Без приведения типов. Очевидно, что результаты подобных проверок всегда будут ложными.

/(?=.*\d\d)^\D.{5,}$/

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

const count = arr.reduce((acc, n) => (acc[n] = (acc[n] ?? 0) + 1, acc), {});
const newArr = arr.map(n => count[n] > 1 ? newValue : n);

// или

const newArr = arr.map(function(n) {
  return this.get(n) ? newValue : n;
}, arr.reduce((acc, n) => acc.set(n, acc.has(n)), new Map));

// или

const newArr = arr.map((n, i, a) => a.indexOf(n) !== a.lastIndexOf(n) ? newValue : n);

Обновить существующий:

arr.forEach(function(n, i, a) {
  a[i] = this.get(n) > 1 ? newValue : n;
}, arr.reduce((acc, n) => acc.set(n, -~acc.get(n)), new Map));

// или

const duplicates = arr.reduce((acc, n) => (acc[n] = acc.hasOwnProperty(n), acc), {});
arr.splice(0, arr.length, ...arr.map(n => duplicates[n] ? newValue : n));

// или

Object
  .values(arr.reduce((acc, n, i) => ((acc[n] ??= []).push(i), acc), {}))
  .forEach(n => n.length > 1 && n.forEach(i => arr[i] = newValue));

$('.payment-innovation .item').css('opacity', 0);

$('.payment-innovation .list-block__head').click(function() {
  const $this = $(this);
  const $items = $this.closest('.list-block').find('.item');
  const visible = $this.toggleClass('visible').hasClass('visible');
  const duration = 400;

  $items.each((i, n) => $(n)
    .delay((visible ? i : $items.length - i - 1) * duration)
    .animate({ opacity: +visible }, duration)
  );
}).click();

svgElem.setAttributeNS('http://www.w3.org/2000/svg', 'viewBox', '0 0 50 50')

Или пусть создание элемента выглядит так:

document.createElementNS('http://www.w3.org/2000/svg', 'svg')