Сергей Соколов

Array.from(str, n => n < 5 ? 0 : 1).join('')

// или

[...str].reduce((acc, n) => acc + +(n >= 5), '')

// или

''.concat(...str.split('').map(n => Math.floor(n / 5)))

// или

[].map.call(str, n => -~-~-~n >> 3).join``

// или

str.replace(/./g, m => Number('56789'.includes(m)))

// или

str.replace(/[1-4]/g, 0).replace(/[5-9]/g, 1)

str.slice(1, -1).split(', ')

или

JSON.parse(str.replace(/[а-яё]+/g, '"$&"'))

или

str.match(/[^\s\[\],]+/g) ?? []

с чего вы взяли, что это вообще есть на странице?
все вменяемые делают это на сервере.

const columns = [ '#', ...new Set(persons.flatMap(Object.keys)) ];

Собираем разметку:

document.body.insertAdjacentHTML('beforeend', `
  <table>
    <thead>
      <tr>${columns.map(col => `
        <th>${col}</th>`).join('')}
      </tr>
    </thead>
    <tbody>${persons.map((person, i) => `
      <tr>${columns.map((col, j) => `
        <td>${j ? person[col] ?? '-' : i}</td>`).join('')}
      </tr>`).join('')}
    </tbody>
  </table>
`);

Или, создаём элементы напрямую:

const table = document.createElement('table');

table.createTHead().insertRow().append(...columns.reduce((acc, col) => (
  (acc[acc.length] = document.createElement('th')).textContent = col,
  acc
), []));

persons.forEach(function(person, i) {
  const tr = this.insertRow();
  columns.forEach((col, j) => tr.insertCell().textContent = j ? person[col] ?? '-' : i);
}, table.createTBody());

document.body.append(table);

Риск только один - если у Вас на сайте имеются сторонние скрипты и они шерстят localStorage, то они одолжат все содержимое локалстораджа себе

async function Func() {
  console.log('START');

  await new Promise(r => {
    $('div').one('click', () => (console.log('CLICK'), r()));
  });

  console.log('END');
}

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

const find = (data, key) => Object
  .entries(data instanceof Object ? data : {})
  .reduce((found, [ k, v ]) => found ?? (k === key ? v : find(v, key)), null);

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

function find(data, key) {
  for (const stack = [ data ]; stack.length;) {
    const n = stack.pop();
    if (n?.hasOwnProperty(key)) {
      return n[key];
    }

    stack.push(...Object.values(n ?? {}));
  }

  return null;
}

С каждым "неудачным" вызовом функции camel у вас добавляется ещё один промис, ждущий разрешения. 10 "неудачных" вызовов - 10 промисов в режиме ожидания. 1000 попыток - 1000 промисов. И т.д. Каждый съедает немного памяти.

Не нужно вам тут никакого "самовызова". Вместо рекурсии сделайте цикл:

async function test() {
  let result = null;

  do {
    result = await camel() || await new Promise(r => setTimeout(r, 1000));
  } while (!result);

  return result;
}

Опциональные параметры

const result = Object.entries(obj).reduce((acc, [key, nums]) => {
    if (Array.isArray(nums)) {
      acc[key] = nums.reduce((acc, num) => acc + num, 0) / nums.length;
    }
    return acc;
  }, {});

const sum = arr.reduceRight((acc, n) => n && acc + n, 0);

или

let sum = 0;
for (let i = 0; arr[i]; sum += arr[i++]) ;

или

let sum = 0;
for (const n of arr) {
  if (!n) {
    break;
  }
  sum += n;
}

или

const sum = (function sum(arr, i = 0) {
  return arr[i] ? arr[i] + sum(arr, i + 1) : 0;
})(arr);

Это "сложение" (не сложение) работает только для целых чисел >= 0.

Если передать в Array одно число, будет создан (будет попытка создания - отрицательные и нецелые числа приведут к ошибке) массив указанной длины. Метод push может принимать несколько значений, а возвращает - новую длину массива, после добавления элементов. Т.е., в массив из трёх элементов добавили ещё четыре, и получили длину.

Сортируем существующий массив:

arr.sort((a, b) => {
  return Number.isNaN(+a) || Number.isNaN(+b)
    ? a.localeCompare(b)
    : a - b;
});

// или

arr.sort((a, b) => (a - b) || a.localeCompare(b));

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

const sorted = (arr, keys) => arr
  .map(n => [ n ].concat(keys(n)))
  .sort((a, b) => {
    let diff = 0;
    a.find((n, i) => diff = i && ((n < b[i]) ? -1 : +(n > b[i])));
    return diff;
  })
  .map(n => n[0]);


const sortedArr = sorted(arr, n => [ +n, n.toLowerCase() ]);

Используйте currentTarget, если внутри обработчика нужен элемент, к которому обработчик привязан.

Или вместо объекта события можете воспользоваться this - это и будет ссылка на нужный элемент. Конечно, только в том случае, если какое-то другое значение не было заранее привязано к обработчику (как такое может быть - bind и стрелочные функции).

Ещё бывает так (не ваш случай, но упомянуть стоит), что обработчик висит выше нужного элемента - в этом случае можно подняться до него от target с помощью closest.

Лично у меня забывается то, что я не использую каждый день, но чем больше я использовал это раньше, тем быстрее оно вспоминается. И в любом случае единожды понятное вспоминается сильно быстрее изучения заново.