0xD34F

success(response) {
  $('#api-wb').html(JSON.parse(response).loads.map(n => `
    <div class="item">
      <div><b>${n.title}</b></div>
      <div><a href="${n.comments_url}">comments (${n.comments_num})</a></div>
      <div><img src="${n.files[0].small}"></div>
    </div>
  `).join(''));
}

https://jsfiddle.net/gcybmo64/

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

Уберите модификатор g, он тут недоступен; вместо preg_match следует использовать preg_match_all.

const arr3 = arr1.map(n => (arr2.find(m => m.date === n) || { count: null }).count);

или

const obj = arr2.reduce((acc, n) => (acc[n.date] = n.count, acc), {});
const arr3 = arr1.map(n => obj[n] || null);

или

const arr3 = arr1.map(function(n) {
  return this.get(n) || null;
}, new Map(arr2.map(n => [ n.date, n.count ])));

Вы засовываете в Promise.all пустой массив, все push'и выполняются после того, как отрабатывает object.map (search - она же асинхронная, да?). Надо при обходе object возвращать промис, который должен резолвиться в коллбеке функции search. Как-то так:

const statusArray = object.map(item => {
  const opts = {
    maxResults: 5,
    key: users[2].token,
  };

  return new Promise((resolve, reject) => {
    search(item.title, opts, (err, videos) => {
      if (err) {
        throw err;
      }
      item.youtubeId.new = videos[0].id;
      item.videos = videos;        
      resolve(ArticleController.addArticle(item));
    });
  });
});

// достаёте компонент из пропсов, обратите внимание, что
// имя переменной должно начинаться с большой буквы
const Component = this.props.component;

// ну и рендерите его
<Component />

\b[\dA-Z]{5}\b

Где элементы находятся, какой класс и у скольких надо удалить:

const parent = document.querySelector('ul');
const className = 'elem';
const count = 2;

Удаляем:

for (let i = parent.children.length, j = count; i-- && j--;) {
  parent.children[i].classList.remove(className);
}

// или

Array.prototype.forEach.call(parent.children, (n, i, a) => {
  n.classList.toggle(className, i + count < a.length);
});

// или

parent.querySelectorAll(`.${className}:nth-last-child(-n + ${count})`).forEach(n => {
  n.classList.value = n.classList.value.replace(RegExp(`(^| )${className}( |$)`), ' ').trim();
});

// или

for (
  let i = 0, el = parent.lastElementChild;
  i < count && el;
  i++, el = el.previousElementSibling
) {
  el.className = el.className.split(' ').filter(n => n !== className).join(' ');
}

Никакой цикл тут не нужен. В смысле - в явном виде:

$('.one .qwer').css('font-size', i => `${12 + i * 4}px`);

И без jquery цикл тоже вручную организовывать не придётся:

document.querySelectorAll('.one .qwer').forEach((n, i) => {
  n.style.fontSize = (-~-~-~i << 2) + 'px';
});

Но, конечно, если очень хочется, то можно и сделать:

const items = document.querySelectorAll('.one .qwer');
for (let i = 0, j = 12; i < items.length; i++, j += 4) {
  items[i].style.setProperty('font-size', ''.concat(j, 'px'));
}

const getTableData = ({ rows: [ head, ...rows ] }) =>
  rows.map(function({ cells: c }) {
    return this.reduce((obj, key, i) => (
      obj[key] = c[i].innerText,
      obj
    ), {});
  }, Array.from(head.cells, n => n.innerText));


const tableData = getTableData(document.querySelector('table'));

Сохраняйте значение scrollHeight. И делайте watch на массив элементов - в обработчике вычисляйте разницу между старым и новым значениями scrollHeight, корректируйте соответствующим образом scrollTop. Как-то так.

С кого начнём выбирать элементы: const selector = '.active';.

Выбираем:

const $result = $(selector).nextAll().addBack();

// или

const result = document.querySelectorAll(`${selector}, ${selector} ~ *`);

// или

const result = [];
for (
  let el = document.querySelector(selector);
  el;
  el = el.nextElementSibling
) {
  result.push(el);
}

// или

const el = document.querySelector(selector);
const siblings = el ? [...el.parentNode.children] : [];
const result = siblings.slice(siblings.indexOf(el));

array.map((n, i) => typeof n.id === 'string' ? i : null).filter(n => n !== null)

или

array.reduce((acc, n, i) => (`${n.id}` === n.id && acc.push(i), acc), [])

https://jsfiddle.net/mn0z4fu5/

например (поскольку свой svg вы решили не показывать, взял первый нагугленный)

с помощью lodash

const obj = _.fromPairs(_.map(data, n => [ n.name, n ]));

на чистом js

const obj = data.reduce((acc, n) => (acc[n.name] = n, acc), {});

str.replace(/\-\d+x\d+/, '')

Вы один и тот же круг добавляете несколько раз. А надо для каждого набора координат создавать отдельный.

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

<button onclick="start()" type="button">Start</button>
<button onclick="stop()">Stop</button>
<canvas width="300" height="300"></canvas>

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const coord = { x: canvas.width / 2, y: canvas.height / 3 };
const length = canvas.width / 3;
const angleMax = 120;
const angleMin = 60;
let angleChange = 1;
let angle = 60;
let active = null;

function stop() {
  active = false;
}

function start() {
  active = true;
  draw();
}

function draw() {
  if (!active) {
    return;
  }

  const { x, y } = coord;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.lineWidth = 5;
  ctx.moveTo(x, y);
  const _a = angle * Math.PI / 180;
  ctx.lineTo(x + length * Math.cos(_a), y + length * Math.sin(_a));

  angle += angleChange;
  if (angle === angleMin || angle === angleMax) {
    angleChange *= -1;
  }

  ctx.stroke();

  requestAnimationFrame(draw);
}