0xD34F

JSON.parse / eval

ну или

({
  'false': false,
  'true': true,
})[str]

const chainScripts = src =>
  src.reduce((acc, n) => {
    return acc.then(() => new Promise((resolve, reject) => {
      const s = document.createElement('script');
      s.onload = resolve;
      s.onerror = reject;
      s.src = n;
      document.head.appendChild(s);
    }));
  }, Promise.resolve());

Как получить input'ы:

const inputs = new DOMParser()
  .parseFromString(str, 'text/html')
  .querySelectorAll('input');

// или

const { elements: inputs } = document
  .createRange()
  .createContextualFragment(str)
  .querySelector('form');

// или

const inputs =
  (el => (el.innerHTML = str, el.getElementsByTagName('input')))
  (document.createElement('div'));

Как извлечь name:

const getName = el => el.name;

// или

const getName = el => el.getAttribute('name');

// или

const getName = el => el.attributes.name.value;

Извлекаем:

const names = Array.from(inputs, getName);

// или

const names = Array.prototype.map.call(inputs, getName);

// или

const names = [];
for (const n of inputs) {
  names.push(getName(n));
}

// или

const names = [];
for (let i = 0; i < inputs.length; i++) {
  names[i] = getName(inputs[i]);
}

// или

const names = (function get(i, n = inputs.item(i)) {
  return n ? [ getName(n), ...get(i + 1) ] : [];
})(0);

str.match(/(?<=<-)[^/]+/g)

Или надо получить то, что находится между парами <-какой-то мусор/? Тогда так можно:

str.match(/(<-[^\/]*\/).*?(?=\1)/g).map(n => n.replace(/.*\//, ''))

const nodeToObj = node => ({
  type: node.nodeType,
  value: node.nodeValue,
  tag: node.tagName,
  childNodes: Array.from(node.childNodes, nodeToObj),
  attributes: node.attributes && Array.from(
    node.attributes,
    ({ name, value }) => ({ name, value })
  ),
});

const nodeToJSON = (node, ...args) =>
  JSON.stringify(nodeToObj(node), ...args);

const json = nodeToJSON(document.querySelector('.menu'), null, 2);
document.body.insertAdjacentHTML('beforeend', `<pre>${json}</pre>`);

О каких классах и data-атрибуте идёт речь:

const class1 = 'item';
const class2 = 'in';
const key = 'price';
const attr = `data-${key}`;

Как извлечь значение атрибута:

const getValue = el => +el.dataset[key];
// или
const getValue = el => parseFloat(el.getAttribute(attr));
// или
const getValue = el => Number(el.attributes[attr].value);

Извлекаем, складываем:

const sum = Array.prototype.reduce.call(
  document.querySelectorAll(`.${class1}.${class2}`),
  (acc, n) => acc + getValue(n),
  0
);

// или

let sum = 0;
for (const n of document.getElementsByClassName(class1)) {
  sum += getValue(n) * n.classList.contains(class2);
}

Сделаем функцию для извлечения вложенного значения - принимает корневой объект и ключи:

const getNested = (root, ...keys) => keys
  .flat(Infinity)
  .flatMap(n => typeof n === 'string' ? n.split('.') : n)
  .reduce((p, c) => p != null ? p[c] : void 0, root);

Ключи могут быть представлены различными способами - единое значение (типа путь), несколько значений (каждое передаётся отдельным аргументом), массивы (включая вложенные):

const id = getNested(e, 'path.1.attributes.uid.textContent');
// или
const id = getNested(e, 'path', 1, 'attributes', 'uid', 'textContent');
// или
const id = getNested(e, 'path.1', [ 'attributes', [ 'uid' ] ], 'textContent');

Или есть такая штука (UPD. Теперь и браузерами поддерживается):

const id = e?.path?.[1]?.attributes?.uid?.textContent;

Потому что событие mouseout возникает, когда курсор уходит на какой-либо из вложенных элементов - в вашем случае это i. Замените mouseout на mouseleave. А ещё почитайте - будет нелишним.

function handler(e) {
  console.log('hello, world!!');
  this.removeEventListener(e.type, handler);
}

document.addEventListener('click', handler);

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

document.addEventListener('click', handler, { once: true });

Надо запоминать индекс последнего подходящего элемента, если равен текущему минус один - помещаем текущий элемент в последнюю группу, нет - создаём новую:

const filterAndGroupAdjacent = (data, filterFn) =>
  Array.prototype.reduce.call(
    data,
    (acc, n, i, a) => {
      if (filterFn(n, i, a)) {
        const len = acc[0].length;
        (acc[1] === ~-i ? acc[0][~-len] : (acc[0][len] = [])).push(n);
        acc[1] = i;
      }

      return acc;
    },
    [ [], null ]
  )[0];

Примеры использования:

// достаём нечётные числа
filterAndGroupAdjacent(
  [ 1, 7, 3, 2, 3, 4, 4, 9, 5 ],
  n => n & 1
) // [ [1,7,3], [3], [9,5] ]

// буквы в верхнем регистре
filterAndGroupAdjacent(
  '1_Df+HNU*@qpJM!x',
  RegExp.prototype.test.bind(/[A-Z]/)
) // [ ["D"], ["H","N","U"], ["J","M"] ]

Кого надо кликнуть: const selector = '#form [type="radio"]:enabled';.

Кликаем:

$(selector).eq(0).click();

// или

(el => el && el.click())(document.querySelector(selector));

return data.map(n => n.join(columnDelimiter)).join(lineDelimiter);

$('ul.list').on('click', 'li', function(e) {
  if (e.target === this) {
    $(this).children('ul').slideToggle();
  }
});

или

$('ul.list li').click(e => {
  e.stopPropagation();
  $('> ul', e.currentTarget).slideToggle();
});

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

phone.value = phone.value.replace(/[^+0-9]/g, '').slice(0, 11);

А вообще, возможно вам следует посмотреть в сторону уже готовых решений (например), вместо того, чтобы заниматься подобным велосипедостроением.

Это чё, в setInterval запихнули подключение обработчика keydown? Умно. Не нужен тут никакой setInterval.

Сам обработчик keydown слишком сложно выглядит - зачем в четырёх разных местах делать один и тот же вызов функции? Сначала меняете координаты, а в самом конце - дёргаете перерисовку.

Размер картинок - а если решите поменять? Или опечатаетесь где-нибудь? Сделайте константу.

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

Как это всё может выглядеть:

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

const TILE_SIDE = 32;

let pickX = 0;
let pickY = 0;

const ground = new Image();
ground.src = 'Ground.png';
const pick = new Image();
pick.src = 'Pick.png';

document.addEventListener('keydown', function(e) {
  switch (e.key) {
    case 'w': pickY -= TILE_SIDE; break;
    case 'a': pickX -= TILE_SIDE; break;
    case 's': pickY += TILE_SIDE; break;
    case 'd': pickX += TILE_SIDE; break;

    default: return;
  }

  draw();
});

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (let x = 0; x < canvas.width; x += TILE_SIDE) {
    for (let y = 0; y < canvas.height; y += TILE_SIDE) {
      ctx.drawImage(ground, x, y);
    }
  }

  ctx.drawImage(pick, pickX, pickY);
}

draw();

<div class="accordionFaq"></div>

const playersOptions = [
  { source: '...' },
  { source: '...' },
  ...
];

$('.accordionFaq').html(playersOptions.map((n, i) => `
  <div class="accordionFaq-item">
    <div class="accordionFaq-head js-accordionFaq-head">
      Video #${i}
    </div>
    <div class="accordionFaq-body">
      <div id="player${i}"></div>
    </div>
  </div>
`).join('')).on('click', '.accordionFaq-head', function(e) {
  const index = $(this).closest('.accordionFaq-item').index();

  $('.accordionFaq-item', e.delegateTarget).each(function(i) {
    const
      $this = $(this),
      isClicked = i === index,
      active = isClicked && !$this.hasClass('active');

    $(this)
      .toggleClass('active', active)
      .find('.accordionFaq-body')
      [isClicked ? 'slideToggle' : 'slideUp']();

    playersOptions[i].player[active ? 'play' : 'pause']();
  });
});

playersOptions.forEach((n, i) => {
  n.player = new Clappr.Player({
    source: n.source,
    parentId: `#player${i}`,
  });
});

str.replace(/(\(.*?\))/g, m => '2'.repeat(m.length))

var sizeEmpty = $('#checkout-form').find('.empty_field').size();

Вот как, size значит... Ясно:

Note: This method has been removed in jQuery 3.0. Use the .length property instead.

В чём была проблема найти ответ на свой вопрос самостоятельно? Создаёте промисы, которые будут резолвиться через определённый промежуток времени, и смотрите, сколько пройдёт до получения результата в обоих случаях:

const getNum = () => new Promise(r => setTimeout(r, 1000, Math.random() * 100 | 0));

(async () => {
  console.time('xxx');
  const [ result1, result2 ] = [ await getNum(), await getNum() ];
  console.log(result1, result2);
  console.timeEnd('xxx');
})();

(async () => {
  console.time('yyy');
  const [ result1, result2 ] = await Promise.all([ getNum(), getNum() ]);
  console.log(result1, result2);
  console.timeEnd('yyy');
})();

$('table').on('change', 'select', ({ target: t }) => {
  const isNone = t.value === 'none';

  $(t)
    .closest('td')
    [isNone ? 'nextAll' : 'next']()
    .find('select')
    .prop('disabled', isNone)
    .val((i, val) => isNone ? 'none' : val);
});

или

document.querySelector('table').addEventListener('change', ({ target: t }) => {
  if (t.tagName === 'SELECT') {
    const isNone = t.value === 'none';
    const { cellIndex: i, parentNode: { children } } = t.closest('td');

    [...children].slice(i + 1, isNone ? undefined : i + 2).forEach(n => {
      const select = n.querySelector('select');
      select.disabled = isNone;
      select.value = isNone ? 'none' : select.value;
    });
  }
});