Алексей Уколов

У вас прямо в коде есть адрес видео в ссылке (только она почему-то не другое видео ведёт). Однако, вы в функцию parseMediaURL передаёте картинку, а не эту ссылку.
Соответственно, как только вы будете брать URL видео из нужного места, а не из картинки, путь до картинки может стать любым.

Деструкция выглядит так: const { status } = result;
Вы же создаёте переменную status и в неё записываете объект {result: result}.
Поэтому возвращает ваша функция вот такую конструкцию:

{
  data: ...,
  status: {
    result: result,
  }
}

! - приведение к булевому значению и смена его «знака» на противоположный.
!! – приведение к булевому значению и двойная смена его «знака» на противоположный. То есть упрощение любого типа данных до true или false.

!42 -> false
!!42 -> true

Всё, что нужно для понимания: https://developer.mozilla.org/en-US/docs/Web/JavaS...

TS тут можно просто игнорировать, он никак не влияет на функционал. Но если хочется разобраться, то вот: https://www.typescriptlang.org/docs/handbook/2/gen...

Потому что bind возвращает новую функцию с прибитым this, а не изменяет ту, на которой вы его вызываете. Ну а эту новую функцию нужно куда-то сохранить.

P.S. React тут совершенно ни при чём.

Как я уже написал, код рабочий. Но его можно немного улучшить:

var o = {
    value: {
        orders: {
            tools: [
                {
                    tool1: 't1'
                }
            ],
            wood: [
                {
                    wood1: 'w1',
                }
            ],
        },
    }
}

var allOrders = [];
var ordersByType = o.value?.orders || {};

Object.keys(ordersByType).forEach((type) => {
    ordersByType[type].forEach((order) => {
        allOrders.push({
            ...order,
            type,
        });
    });
});

o.value.orders = allOrders;

Можно использовать и reduce, чтобы сэкономить пару строк, но многие (и я в их числе) считают, что использование этого метода сильно ухудшает читаемость кода.

Ну вы же привели 99% решения. Добавьте просто вычитание из 100 получающегося у вас шанса, чтобы его инвертировать. Ну или используйте ту цифру, что получается у вас, просто считайте, что это не шанс, а сложность.

Классическая потеря контекста. Можно вылечить так:

constructor(){
  this.MyVariable = {x: 0, y: 0};

  this.MyFunc = this.MyFunc.bind(this);
}

Возможно, уже появился какой-то дополнительный синтаксический сахар, который позволяет объявлять метод сразу с прибитым контекстом (помимо arrow function).

Как можно побороть проблему, оптимизировать может быть что-то?

Открыть DevTools на вкладке Performance и затрейсить рендеринг. Смотреть в получившиеся графики, искать, куда уходит время и ресурсы.
Но вообще, эту задачу скорее надо решать через UX - вряд ли кому-то вообще нужны разом эти 1000 графиков.

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

Первый и самый важный шаг вы сделали — идите дальше. Смотрите что у вас в document.getElementById('id').value, потом что в document.getElementById('id'), если в value пусто.
Это называется "отладка" или "дебаг" и это примерно половина работы программиста.

выводит новую форму

Вангую, что в итоге у вас куча одинаковых форм и, соответственно, куча инпутов с id="id", что, естественно, недопустимо.

Никак — скриншот делает не браузер.

.find((item) => (item.name = this.info)),

Здесь, явно, должно быть сравнение, а не присваивание.

Потому что надо явно ставить точки с запятой.

Давайте вместе подумаем, почему ваш селектор, в котором чёрным по белому написано checkbox, не выбирает radio. Но есть вероятность, что придётся искать кого-то ещё и соображать на троих.

const anchors = [];

[...document.querySelectorAll('a')].forEach(($link) => {
    let href = $link.getAttribute(`href`);

    if (href.startsWith(window.location.href)) {
        href = href.split(window.location.href).join(``);
    }

    if (href.startsWith(window.location.pathname)) {
        href = href.split(window.location.pathname).join(``);
    }

    if (href !== `#` && href.startsWith(`#`)) {
        anchors.push({
            href,
            text: $link.textConent,
        });
    }
});

console.log(anchors);

let users = [];
let nameFilter = ``;

// TODO: Тут вы реализуете изменение значения nameFilter из какого-то поля и после этого снова вызываете render()

const render = () => {
    document.body.innerHTML = users
        .filter((item) => !nameFilter || item.name.toUpperCase().includes(nameFilter.toUpperCase())
        .map((item) => `<span class="name">${item.name}</span>`).join(``));
}

fetch(`users.json`)
    .then((res) => res.json())
    .then((data) => users = data)
    .then(render);

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

получается так, что кнопка добавляется только к последней карточке

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

let panesList = document.querySelectorAll('.pane');
for (let pane of panesList) {
    let button = document.createElement('button');
    button.classList.add('remove-button');
    button.textContent = '[X]';

    pane.append(button);
}