0xD34F

Забыли вызвать родительский конструктор в потомке: Construct1.apply(this, arguments);.

$c = array_map(function($n) use($b) {
  return $b[$n] ?? 'NaN';
}, $a);

скрытые радиокнопки:

<label class="button">
  <input type="radio" name="button">
  <span>click me</span>
</label>

<label class="button">
  <input type="radio" name="button">
  <span>click me</span>
</label>

.button input {
  display: none;
}

.button input:checked + span {
  background: red;
  color: white;
}

computed: {
  namesFilter() {
    const name = this.name_from.toLowerCase();
    const names = this.names;
    const filterBy = [ 3, 4 ];

    return name
      ? names.filter(n => filterBy.some(i => n.children.item[i].value.toLowerCase().includes(name)))
      : names;
  },
},

Ну и понятно, какой напрашивается следующий шаг - сделать filterBy свойством компонента, привязать его содержимое через v-model к, например, чекбоксам, и вот уже пользователь может настраивать фильтрацию по произвольному количеству свойств.

arr
  .reduce({}){|acc, n| acc.update(n[:books])}
  .collect{|k, v| { author: k, book: v[:book] }}
  .sort_by{|n| n[:author]}

https://momentjs.com/

moment.locale('ru');

document.querySelector('#load').addEventListener('click', function load() {
  fetch('https://api.github.com/users/fristyr/repos')
    .then(r => r.json())
    .then(data => {
      const formatIn = 'YYYY-MM-DDTHH:mm:ss';
      const formatOut = 'DD MMMM YYYY';

      document.querySelector('.repo-wrapp').insertAdjacentHTML('afterbegin', data.map(item => `
        <article class="repo"> 
          <a href="${item.html_url}" class="repo__name">${item.name}</a>
          <br>
          <span class="repo__technology">${item.language}</span> 
          <span class="repo__update">${moment(item.updated_at, formatIn).format(formatOut)}</span>
        </article>`
      ).join(' '));
    });
});

currentTarget:

event.currentTarget.getAttribute('имя_атрибута')

Или, есть вариант атрибут вообще не устанавливать, а передавать в обработчик нужное значение:

onClick={e => props.arrowHandler(e, VALUE)}

если условия задачи поменяются и...

Очевидно же - надо сделать отдельный компонент. "Условия" передавать через props, чтобы было как-то так:

<EditorWithTableOfContents tags={[ 'h1' ]} />
<EditorWithTableOfContents tags={[ 'h2', 'h3' ]} />

Сбор информации о заголовках - достаточно получить элементы и сохранить пары тэг-текст. При создании оглавления индексы элементам указываете общие, без разделения по тэгам. Когда надо выполнить прокрутку, берёте внутри редактора элемент с этим индексом:

const EditorWithTableOfContents = ({ tags }) => {
  const [headers, setHeaders] = useState([]);
  const editorEl = useRef(null);

  const onChange = e => {
    setHeaders(Array.from(
      e.editor.document.$.querySelectorAll(tags.join(', ')),
      n => [ n.tagName, n.innerText ]
    ));
  };

  const goToAnchor = e => {
    const index = e.target.dataset.index;
    const d = editorEl.current.editor.document.$;

    d.documentElement.scrollTo({
      top: d.querySelectorAll(tags.join(', '))[index].offsetTop,
      behavior: 'smooth',
    });
  };

  return (
    <div>
      <CKEditor
        data={initData}
        onInstanceReady={onChange}
        onChange={onChange}
        ref={editorEl}
      />
      <h2>Содержание</h2>
      {headers.map(([Tag, text], index) => (
        <Tag key={index} data-index={index} onClick={goToAnchor}>
          {text}
        </Tag>
      ))}
    </div>
  );
};

https://codesandbox.io/s/for-https-qna-habr-com-q-...

Так дела не делаются. Страницу следует отрисовывать сразу, а пока данные не загрузились, пользователю показывают индикатор загрузки:

data ? <КакойТоКомпонентДляОтображенияДанных data={data} /> : <Preloader />

Пересчитывайте значение при выводе:

<div id="slider"></div>
<div id="value"></div>

const min = 100;
const max = 500;

$('#slider').slider({
  min,
  max,
  value: min + Math.random() * (max - min) | 0,
  range: 'min',
  animate: 'fast',
  slide: (e, ui) => $('#value').html(max - ui.value + min),
});

А зачем какой-то отдельный массив? Храните состояние чекбоксов в элементах workers.

При изменении состояния чекбоксов обновляйте workers:

inputChange = e => {
  const index = +e.target.dataset.index;

  this.setState({
    workers: this.state.workers.map((n, i) => i === index
      ? { ...n, checked: e.target.checked }
      : n
    ),
  });
}

<input
  type="checkbox"
  data-index={index}
  onChange={this.inputChange}
  checked={item.checked}
/>

Соответственно, вычисление суммы будет выглядеть так:

const sum = this.state.workers.reduce((acc, n) => acc + (n.checked ? n.salary : 0), 0);

https://codesandbox.io/s/ol342z1znz

Вы добавляете скрываемому элементу класс, переключающий свойство display, одновременно с классом, который задаёт изменение прозрачности - поэтому пронаблюдать последнее вы не успеваете. Переключайте display после того, как анимация будет завершена - для этого можно подписаться на событие transitionend:

const $headers = $('.callback-list__item');
const $content = $('.callback-content__item');
$content.slice(1).addClass('hidden delete');

$(document).on('click', '.callback-list__item:not(.callback-list--active)', function() {
  $headers
    .removeClass('callback-list--active')
    .filter(this)
    .addClass('callback-list--active');

  const i = $headers.index(this);
  $content
    .not('.delete')
    .addClass('hidden')
    .one('transitionend', function() {
      $(this).addClass('delete');
      const $item = $content.eq(i).removeClass('delete');
      setTimeout(() => $item.removeClass('hidden'), 0);
    });
});

Контекст потерялся. Ну и не надо пытаться достучаться до элемента через querySelector - он доступен как свойство target объекта события.

submitText = (e) => {
  this.setState({
    text: e.target.value,
  });
}

У вас created в methods лежит, так что это не хук жизненного цикла получается, а метод, автоматически он вызываться не будет.

Контекст потеряли, this при обработке ответа - вовсе не экземпляр vue.

Используйте стрелочные функции - замените function (response) { на (response) => {.

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

axios(...).then(function(response) {
  this.info = response.data;
}.bind(this));

Или перед запросом сохраняйте контекст в отдельную переменную, и работайте в коллбеке с ней вместо this:

const that = this;
axios(...).then(function(response) {
  that.info = response.data;
});

Или вынесите код коллбека в отдельный метод - vue сам привяжет контекст:

methods: {
  processResponse({ data }) {
    this.info = data;
  },
},
mounted() {
  axios(...).then(this.processResponse);
},

Или используйте async-await, нет коллбеков - нет потери контекста:

async mounted() {
  try {
    this.info = (await axios(...)).data;
  } catch (e) {}
},

нигде

.banner h1 {
  margin-top: 0;
}

$found = null;

foreach ($arr as $item) {
  if (in_array($item['name'], $if_arr)) {
    $found = $item;
    break;
  }
}

if ($found) {
  // ...
}

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

const options = [
  [ 'hello, world!!', 'fuck the world', 'fuck everything' ],
  500,
  (elem => item => elem.textContent = item)
  (document.querySelector('.slide-words')),
];

Можно устанавливать интервал:

function interval(arr, delay, callback) {
  let i = -1;

  return arr.length
    ? setInterval(() => callback(arr[i = -~i % arr.length]), delay)
    : null;
}

const intervalId = interval(...options);
// надо остановить, делаем так: clearInterval(intervalId);

Или воспользоваться рекурсивными таймаутами:

function interval(arr, delay, callback) {
  let timeoutId = null;

  arr.length && (function next(i) {
    timeoutId = setTimeout(() => {
      callback(arr[i]);
      next((i + 1) % arr.length);
    }, delay);
  })(0);

  return () => clearTimeout(timeoutId);
}

const stop = interval.apply(null, options);
// надо остановить, делаем так: stop();