0xD34F

Этот код вместо результата выводит undefined.

Под "выводит" вы подразумеваете результат вызова console.log, да? Что ж, ничего ваш код не выводит - console.log не вызывается ни разу, undefined возникает в консоли потому, что последнее, что вы делаете - вызываете метод subscribe, который ничего не возвращает.

Отсутствие вывода обусловлено пустотой массива result, а пуст он потому, что... Нет, не буду объяснять - разберитесь, как стрелочными функциями пользоваться, и найдите свои ошибки сами.

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

const elements = document.querySelectorAll('.news-full-text img');

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

for (const n of elements) {
  const el = document.createElement('div');
  el.className = 'image';
  el.appendChild(document.createElement('div'));
  el.lastChild.className = 'image-social';
  el.lastChild.textContent = 'социальные кнопки';
  n.insertAdjacentElement('afterend', el);
  el.insertAdjacentElement('afterbegin', n);
}

или

elements.forEach(n => n.outerHTML = `
  <div class="image">
    ${n.outerHTML}
    <div class="image-social">социальные кнопки</div>
  </div>
`);

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

const containerSelector = '.spoiler-container';
const headerSelector = '.spoiler-header';
const contentSelector = '.spoiler-content';
const activeClass = 'active';
const toggleEffect = 'slideToggle'; // или fadeToggle, или toggle
const hideEffect = 'slideUp'; // или fadeOut, или hide

function toggle($containers, $container) {
  $containers
    .not($container)
    .removeClass(activeClass)
    .find(contentSelector)
    [hideEffect]();

  $container
    .toggleClass(activeClass)
    .find(contentSelector)
    [toggleEffect]();
}

Обработчик клика подключается блокам со спойлерами, но клики слушаться будут только по заголовкам:

const $containers = $(containerSelector).on('click', headerSelector, e => {
  toggle($containers, $(e.delegateTarget));
});

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

$(document).on('click', `${containerSelector} ${headerSelector}`, e => {
  toggle($(containerSelector), $(e.target).closest(containerSelector));
});

Используйте Proxy:

const arr = new Proxy([], {
  get(target, prop) {
    const value = target[prop];
    return value instanceof Function
      ? (...args) => {
          console.log(`метод "${prop}" вызван со следующими аргументами:`, args);
          return value.apply(target, args);
        }
      : value;
  },
  set(target, prop, value) {
    console.log(`свойству "${prop}" наначено следующее значение:`, value);
    target[prop] = value;
    return true;
  },
});

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

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

const str = 'qwe//qwe';
const reg = /(qwe\/).*(\/qwe)/;
const replacement = 'hello, world!!';
const newStr = str.replace(reg, `$1${replacement}$2`);

<button>add</button>

document.querySelector('button').addEventListener('click', function() {
  document.body.appendChild(document.createElement('div'));
});

div {
  height: 50px;
  margin: 5px;
  background: red;
  animation: show-div 3s;
}
@keyframes show-div {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

if (cell.textContent === num) {

Дайте-ка угадаю - num, это число, да? Сенсация! Шок! - число не может быть равно строке.

Сравнивайте с приведением типов:

if (cell.textContent == num) {

Или явным образом приводите значения к одному типу:

// строку в число
if (+cell.textContent === num) {

// число в строку
if (cell.textContent === `${num}`) {

document.querySelector('.animate-all').addEventListener('click', e => {
  e.target.hidden = true;

  forEachWithDelay(
    document.querySelectorAll('[data-color]'),
    500,
    el => el.parentNode.style.backgroundColor = el.dataset.color
  );
});

Как может выглядеть функция forEachWithDelay? Такие есть варианты:

• Сразу назначаем таймауты для всех элементов:
  
  

  function forEachWithDelay(arr, delay, callback) {
    Array.prototype.forEach.call(arr, (n, i) => {
      setTimeout(callback, (i + 1) * delay, n);
    });
  }

  
  
• Следующий таймаут назначается в коллбеке предыдущего:
  
  

  function forEachWithDelay(arr, delay, callback) {
    (function next(i) {
      if (i < arr.length) {
        setTimeout(() => {
          callback(arr[i]);
          next(-~i);
        }, delay);
      }
    })(0);
  }

  
  
• Назначаем интервал:
  
  

  function forEachWithDelay(arr, delay, callback) {
    let i = -1;
    const intervalId = setInterval(() => {
      if (++i < arr.length) {
        callback(arr[i]);
      } else {
        clearInterval(intervalId);
      }
    }, delay);
  }

  
  

Как поменять элементу цвет его background'а:

const setBgColor = (el, color) =>
  el.style.backgroundColor = color;
  // или
  el.style.setProperty('background-color', color);
  // или
  el.style.cssText += `background-color: ${color}`;
  // или
  el.setAttribute('style', `background-color: ${color}`);

Меняем:

document.addEventListener('click', ({ target: t }) => {
  const { color } = t.dataset;
  if (color) {
    for (; t.tagName !== 'LI'; t = t.parentNode) ;
    setBgColor(t, color);
  }
});

// или

document.querySelectorAll('[data-color]').forEach(function(n) {
  n.addEventListener('click', this);
}, function() {
  setBgColor(this.closest('li'), this.getAttribute('data-color'));
});

const grouped = Object.values(arr.reduce((acc, { title, value: money }) => {
  (acc[title] = acc[title] || { title, data: [] }).data.push({ money });
  return acc;
}, {}));

Делаете функцию полного подсчёта суммы, назначаете её элементам управления в качестве обработчика событий, возникающих при действиях пользователя:

$('#production, #col, .pay, [name="size"]').on('input', recalcPrice);
recalcPrice();

function recalcPrice() {
  const price = [
    $('#production').val(),
    ...$('.pay:checked').get().map(n => n.value),
    $('[name="size"]:checked').val(),
  ].reduce((acc, n) => acc + (n | 0), 0);

  $('#final_price').html(price * ($('#col').val() | 0));
}

const title = document.getElementById('title');
title.innerHTML = Array.from(title.innerText, n => `<span>${n}</span>`).join('');

или

const title = document.querySelector('#title');
title.innerHTML = title.textContent.replace(/./g, '<span>$&</span>');

https://jsfiddle.net/uwjg6qb3/

cards.filter(n => n.tags.some(m => m.tag === tag))

То, что значение i в момент выполнения document.getElementsByClassName("desc")[i] будет тем же, что и в момент выполнения acc[i].addEventListener есть ни на чём не основанная фантазия, не соответствующая реальности.

Вот если вы объявите i в заголовке цикла с помощью let - тогда да, работать будет.

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

.active .desc {
  display: block;
}

const itemSelector = '.tab-pane';
const buttonSelector = `${itemSelector} .material_info`;
const activeClass = 'active';
const toggle = el => el.closest(itemSelector).classList.toggle(activeClass);


// слушаем клики на кнопках
document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => toggle(e.target));

// или, применяем делегирование - назначаем обработчик один раз общему предку кнопок,
// внутри проверяем, где случился клик
document.addEventListener('click', ({ target: t }) => {
  if (t = t.closest(buttonSelector)) {
    toggle(t);
  }
});

Получение случайного числа:

const random = (min, max) =>
  Math.floor(Math.random() * (max - min + 1)) + min;

Создание матрицы:

function createMatrix(rows, cols, min, max) {
  const matrix = [];

  for (let i = 0; i < rows; i++) {
    matrix.push([]);

    for (let j = 0; j < cols; j++) {
      matrix[i][j] = random(min, max);
    }
  }

  return matrix;
}

// или

const createMatrix = (rows, cols, min, max) =>
  Array.from({ length: rows }, () =>
    Array.from({ length: cols }, () =>
      random(min, max)
    )
  );

Вывод:

function outputMatrix(matrix, el) {
  const table = document.createElement('table');

  matrix.forEach(function(n) {
    const tr = this.insertRow();
    n.forEach(m => tr.insertCell().textContent = m);
  }, table.createTBody());

  el.appendChild(table);
}

// или

function outputMatrix(matrix, el) {
  el.insertAdjacentHTML('beforeend', `
    <table>
      <tbody>${matrix.map(n => `
        <tr>${n.map(m => `
          <td>${m}</td>`).join('')}
        </tr>`).join('')}
      </tbody>
    </table>
  `);
}

Как всем этим пользоваться:

outputMatrix(createMatrix(5, 5, 10, 30), document.body);

moment.js:

moment(date).format('DD.MM.YYYY')

или

[
  `${date.getDate()}`.padStart(2, 0),
  `${date.getMonth() + 1}`.padStart(2, 0),
  date.getFullYear(),
].join('.')

или

date.toLocaleDateString('ru-RU')

Хочу научиться использовать последние стандарты (ES7, ES8), смотрел их разные фишки, хотелось бы попробовать, но как эти стандарты можно активировать?

Babel вам в помощь.

Видел фишки что то вроде "Точечный синтаксис"
Что-то вроде этого:
console.log ('Привет Мир!');
можно заменить на
c.l.'Привет Мир!'..

Это здесь? С первым апреля вас.

А что, по-вашему это нормально, что функция, использующаяся в качестве обработчика onmessage в основном потоке выполнения, определяется в файле воркера?

UPD. И ещё косяк:

new Worker("PrimeWorker.js");

А вот соответственно и код PrimeWork.js:

Так как всё-таки правильно - PrimeWorker или PrimeWork? Вы уж определитесь.