Anton Bobylev

Challenge accepted!

function fill(array, filler, start, end) {
  return array.fill(filler, start, end);
}

Вот набросок, далее допиливайте сами

Хардкорное решение на SVG

https://jsfiddle.net/zsd81nw0/

Вставить svg кодом, вы пытаетесь обратится не к существующему элементу.

Был такой же вопрос у меня.
Железо: Intel Xeon E-1245V2, 32GB Ram, Asrock Z77 Fatal1ty Professional (можно было Z77 Performance), пока 2 харда по 1TB, две видеокарты Gigabyte Radeon HD 7770.
Почему Asrock Z77 Fatal1ty Professional — изначально планировал для каждой виртуалки свой ssd. Но чтобы он работал правильно (TRIM), необходимо выделять весь SATA контроллер. У Asrock его 3. SSD пока не поставил, думаю поставить для web-сервера.
Так же есть поддержка VT-d, которая необходима для проброса видеокарт гостевой операционке.
Софт виртуализации: Xen Cloud Platform 1.6.

Про железо: сначала выбрал материнку Gigabyte GA-Z77X-UD5H, но при включенном VT-d не работают оба Marvell SATA контроллера.
Проц во встроенным видео — в итоге у меня 3 видеокарты, 2 для гостевых операционок, одна (встроенная) для гипервизора. Вроде как её можно пробросить в гостевую ось, но я не пробовал (и, возможно даже не буду).

В итоге: пока 2 гостевые операционки (пока 8GB ram) со своей видеокартой, и своим хардом по 1TB (сделаны виртуальные диски, возможно, надо было пробрасывать в госевую ось, и уже там делить его), каждая показывает одинаковый встроенный рейтинг: проц 7.7, память 7.7, видео 7.5, игровая графика 7.5, диск 5.9.
Проц нагружен на процентов 10%-20% во время обычной работы, во время игры (с нормальными настройками, зависит от игры) на одной виртуалке — 2-3 ядра из 8 (threads?) работают в диапазоне 40-90%.
У меня одно рабочее место находится в соседней комнате (:, туда протянут 10м HDMI, 10м USB 2.0 (активный), и там установлен USB HUB с отдельным питанием для подключения клавиатуры, мышки, флешек и прочей ерунды, звук через HDMI->выход в мониторе.
При пробросе USB контроллера есть нюанс — 0000:00:1d контроллер не подключал USB устройсва через 10м кабель по 2.0, только 1.1. Поменял на 0000:00:1a — всё заработало. Без 10м удлинителя всё работает без проблем.

В планах: поставить веб-сервер на SSD (с пробросом отдельного SATA контроллера), ещё пару хардов для бекапов и файлового сервера.
Под вопросом: Перенести гипервизор на CF через контроллер IDE-CF, чтобы небыл привязан к харду.

Может кто-нибудь подсказать почему так происходит и как исправить?

Отвечать на вопрос "почему" особого смысла нет - ерундой какой-то занимаетесь, все эти дополнительные массивы, кто вас этим глупостям научил?

Как исправить - да выбросить всё лишнее на хрен, оставить один массив items, с ним и работать:

class AddItems extends React.Component {
  state = {
    value: '',
    items: [],
  }

  inputChange = ({ target: { value } }) => {
    this.setState({ value });
  }

  addNewItem = () => {
    if (this.state.value) {
      this.setState({
        items: [ ...this.state.items, {
          text: this.state.value,
          id: (new Date()).getTime().toString(),
        } ],
        value: '',
      });
    }
  }

  render() {
    return (
      <div className="addItems">
        <div className="addSection">
          <input type="text" value={this.state.value} onChange={this.inputChange} />
          <input type="submit" onClick={this.addNewItem} />
        </div>
        <div className="listSection">
          <ul>{this.state.items.map((item) => <li key={item.id}>{item.text}</li>)}</ul>
        </div>
      </div>
    )
  }
}

Ваша постановка вопроса

Как в объект лучше всего добавить содержимое другого объекта (ES6)?

подразумевает изменение существующего объекта, а не комбинацию двух в третий, оператором ... это сделать невозможно, так что
Object.assign(obj1 , obj2);
В вашем коде вы в переменной obj1 получите новый объект, который комбинирует свойства первого и второго

const someSrt = "954  432 534  test abc test test test abc test test abc ";

const words = someSrt.match(/([a-zA-Z]+)/g);
const numbers = someSrt.match(/(\d+)/g);

console.log(words); // ["test", "abc", "test", "test", "test", "abc", "test", "test", "abc"]
console.log(numbers); // ["954", "432", "534"]

Перейдите в пункт меню Preferences - Key Bindings и разместите в секции User следующий код:

{ "keys": ["enter"], "command": "insert", "args": {"characters": "\n\t"}, "context":
	[
		{ "key": "setting.auto_indent", "operator": "equal", "operand": true },
		{ "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true },
		{ "key": "preceding_text", "operator": "regex_contains", "operand": "\\{$", "match_all": true },
		{ "key": "following_text", "operator": "regex_contains", "operand": "^\\}", "match_all": true },
		{ "key": "selector", "operator": "equal", "operand": "source.css" }
	]
}

Это изменение приведет к тому, что после нажатия клавиши enter в css файле у вас помимо переноса строки будет добавляться символ табуляции. При нажатии на { поведение будет аналогичным. Как в случае пустых скобок:

.test {
	}

Так и в случае с автоматической подстановкой скобок:

.test // нажимаем здесь {
	width: 40px;

.test {
	width: 40px;} // автоматически подставляется }

https://stackoverflow.com/questions/27670401/using...

Списком. Если нужны примеры - ищите в поисковиках по запросу "timeline html"
Вот мой выбор: https://adminlte.io/themes/AdminLTE/pages/UI/timel...

Стоит. Каждой задаче свой инструмент. Если ангуляр и реакт вошли в моду, это не значит, что способы упрощённой манипуляции домом из неё вышли. Если тебе кто-то говорит, что jQuery - костыль для людей, не умеющих нативно перебирать ноды или писать xmlhttprequest - скажи им, что компьютер - это костыль для людей, не умеющих жить без гугла и социалок. jQuery всегда будет популярен. Он упрощает простые обмены данных, классов в пределах DOM, умеет работать с ajax и значительно упрощает синтаксис.

UPDATE: реальные тестовые задания и разборы здесь, ответы на все вопросы из поста в моем блоге об обучении react.

не включая основы js

Извините, но стандартная задача, про "напишите функуцию add, которая при вызове add(1)(2) вернет 3" - многих положила на лопатки =) Поэтому будьте готовы..

React
0) Какую проблему решает react ?
1) Мгновенно ли срабатывает setState? Если нет, то как выполнить код, который 100% выполнится после того, как новый state будет установлен?
2) Зачем многие постоянно пишут в constructor: this.FUNCTION_NAME = this.FUNCTION_NAME.bind(this) и отсюда вопрос вытекает чему равно this в разных местах вашего компонента...
3) в каких методах жизненого цикла стоит выполнять xhr запросы? В каких стоит "обновлять state на основе props"?
4) Что будет если вызвать this.setState в render методе компонента?
5) зачем нужен componenWIllUnmount, приведите пример..
6) Контролируемые, не контролируемые компоненты
7) Как организовать роутинг в реакт приложении? (ответ: взять react-router - подходит, но было бы круто, если бы вы рассказали, как он примерно работает)*
8) Зачем нужны propTypes? Что происходит с ними в production сборке?
9) Как можно удобно "отлаживать" чужой код приложения, написанного на react (намек в сторону React devtools)
...

Redux
0) Какую проблему решает redux?
1) Зачем многие создают типы действий NAME_REQUEST / NAME_SUCCESS ? А заодно, что такое "действие", а что такое "создатель действия"...
2) Что такое редьюсер? Можете написать простой редьюсер без react/redux?*
3) Для чего нужен redux-thunk? Как он работает? Напишите (можно псевдокод) асинхронный создатель действия (либо, если надоело говорить "терминами" - асинхронный aciton)
4) Как компоненты приложения получают "пропсы" из "стора"?*
5) Можно ли (и считается ли это нормальным) использовать state, если используется Redux?
6) Почему в reducer'ax мы возвращаем новые объекты? Приведите пример, когда вы возвращаете новый объект, а когда тот же самый.
6.5) А так же, "как в js вообще это работает?". Например:

let obj1 { name: 'Test', age: 100 }
let obj2 = obj1
obj2.name = 'Test_new'

Что будет в obj1, почему? В каких случаях объекты могут быть равны?
7) Что возвращает функция connect (из react-redux)?
...

Общее:
0) package.json
1) Webpack, gulp, etc...
2) node.js
3) promise

Что-нибудь практическое:
1) Как бы вы валидировали форму, если ошибки валидации приходят после submit'a ее на сервер..
2) Почему не работает следующий код, сделайте чтобы работало
...
На истину не претендую, но такие вопросы имели место быть на собеседованиях. В беседе можно многое разузнать дополнительными вопросами и так далее. Так же, если часть вопросов вам неизвестна - не беда, многие и на половину ответить не могут.

p.s. возможно дополню...
p.p.s. звездочкой отметил, на мой взгляд не самые необходимые для junior-собеседования вопросы.