Сергей Соколов

Это задача об упаковке. Она сложная. И ближе даже не к задаче о рюкзаке, а к задаче о мульти-рюкзаке. Для больших размеров файлов и N решения, кроме переборного, нет.

Если N маленькое, то есть быстрые алгоритмы вроде Динамического Программирования. Но там и перебор будет не то, чтобы сильно медленнее.

Если вам не важно получить абсолютно минимально возможное количество папок, то подойдет какое-нибудь жадное решение. Оно даст хорошее приближение. Скажем, вместо 30 идеальных папок вы часто получите 40.

Например, кладите файлы в текущую папку, пока они туда помещаются. Потом создавайте следующую папку. Заполняйте ее, пока размер папки + размер следующего файла <= 2Mb.

Можно всякие эвристики сюда навешивать: например, отсортиовали файлы по размеру. Жадно пихаем самые большие файлы, пока помещается. Потом жадно пихаем самые маленькие. Потом начинаем новую папку.

Функции добавить параметр - глубину вложенности.

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

const addDepth = (val, depth = 0) =>
  val instanceof Object
    ? Object.entries(val).reduce((acc, n) => (
        acc[n[0]] = addDepth(n[1], depth + 1),
        acc
      ), { depth })
    : val;

Вы пытаетесь в качестве имени свойства использовать объект, а JS разрешает там только строки.
Объект приводится к строке и ваш код превращается в итоге вот в это:

dwayne['[object Object]'] = 123;
dwayne['[object Object]'] = 456;

console.log(dwayne['[object Object]']);

Думаю, тут уже понятно, почему результат именно такой.

При этом, если бы вы использовали другой синтаксис, то и результат был бы другим:

dwayne.daniel = 123; // аналог dwayne['daniel']
dwayne.jason = 456; // аналог dwayne['jason']

console.log(dwayne.daniel);

Но эти daniel и jason никак не связаны с одноимёнными объектами выше.

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

const units = [
  [ 'де?н', 24 * 60 * 60 ],
  [  'час',      60 * 60 ],
  [  'мин',           60 ],
  [  'сек',            1 ],
].map(n => [ RegExp(`\\d+(?=\\s+${n[0]})`), n[1] ]);

const getSeconds = str =>
  units.reduce((acc, n) => acc + n[0].exec(str) * n[1], 0);

getSeconds('2 часа 22 секунды') // 7222
getSeconds('99 минут') // 5940
getSeconds('1 час 1 минута 1 секунда') // 3661
getSeconds('1 день 23 часа 59 минут 60 секунд') // 172800
getSeconds('2 дня') // 172800
getSeconds('546 секунд и ещё 2 минуты') // 666

Если вдруг возможно повторение единиц измерения внутри одной строки, то поиск с помощью регулярных выражений должен быть глобальным - RegExp(`\\d+(?=\\s+${n[0]})`, 'g'), а функция подсчёта секунд примет следующий вид:

const getSeconds = str =>
  units.reduce((seconds, [ reg, multiplier ]) => {
    return [...str.matchAll(reg)].reduce((acc, n) => acc + n * multiplier, seconds);
  }, 0);

// или

const getSeconds = str => units
  .flatMap(n => (str.match(n[0]) ?? []).map(m => m * n[1]))
  .reduce((acc, n) => acc + n, 0);

// или

const getSeconds = str => eval(units
  .map(n => `${n[1]} * (${str.match(n[0])?.join('+') ?? 0})`)
  .join('+')
);

getSeconds('1 секунда плюс 3 секунды плюс 5 секунд') // 9
getSeconds('21 день, 7 дней, да ещё 3 дня - всего секунд в мае месяце будет') // 2678400

Никакой Three.js тут не нужен. Ну то есть, конечно, никто не мешает сделать все это на WebGL и прикрутить здоровенный фреймворк сверху, но все же это будет слегка избыточным решением в большинстве случаев. Такое можно аргументировать только если весь сайт изначально так и делается на WebGL и это просто "один из" эффектов, которые туда нужно интегрировать.

В 99% остальных случаев подобные штуки делаются одной svg-картинкой, одним path, который рисуется в зависимости от положения мышки и размеров контейнера. Немного школьной геометрии, ограничение диапазона возможных смещений всего этого - и дальше можно до посинения играть с алгоритмом расчета смещения, до тех пор, пока реакция на мышку не начнет нравится. Там уже нет универсального рецепта, все от дизайна зависит. Можно линейно привязать к положению мыши. Это обычно выглядит скучно. Можно использовать какую-то функцию от расстояния до центра, чтобы сделать движения менее равномерными. В каких-то случаях делают полноценный эффект инерции, как верно подмечено в соседнем ответе. Там получаются более естественные движения (обычно все это является развитием гравитационных моделей). Есть совсем замороченный подход, когда используется моделирование системы пружин (для общего развития можно загуглить силовые алгоритмы визуализации графов). Там можно получить целый ряд занятных эффектов, которые часто оказываются в тему как раз в таких фонах, где какие-то штуки связаны между собой прямыми линиями. Ну и можно просто вдохновиться какими-то физическими явлениями и сделать что-то "по мотивам".

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

tags = Array.from(new Set(data.flatMap(n => n.tags)));

Если массив по какой-то причине заменять нельзя, тогда удалите все элементы из существующего и запишите новые:

tags.splice(0, tags.length, ...new Set(data.flatMap(n => n.tags)));

Ну потому что не берёт: The structured clone algorithm > Supported types

Cloning DOM nodes likewise throws a DataCloneError exception.

Как минимум нельзя клонировать DOM, а в Event есть на него ссылки.

Чтобы преобразовать строку в число

+"76" == Number("76")

О каких кнопках и блоках идёт речь; по сколько блоков надо показывать при клике на кнопку; как показать блоки, если известна кликнутая кнопка:

const buttonSelector = '.added';
const itemSelector = '.added-block';
const activeClass = '_active';
const notActiveSelector = `${itemSelector}:not(.${activeClass})`;
const newActiveCount = 2;

function onButtonClick(button) {
  const items = [...button.parentNode.querySelectorAll(notActiveSelector)];
  items.slice(0, newActiveCount).forEach(n => n.classList.add(activeClass));
  button.disabled = items.length <= newActiveCount;
}

Назначаем обработчик клика каждой кнопке индивидуально:

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => onButtonClick(e.currentTarget));

Или, применяем делегирование:

document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    onButtonClick(button);
  }
});

let sum = 0;
for (let i = 0; i < arr.length && arr[i] >= 0; i += 1) {
  sum += arr[i];
}

dataset
Object.assign