0xD34F

function createTree({
  data,
  idKey = 'id',
  parentKey = 'parentId',
  childrenKey = 'children',
}) {
  const tree = Object.fromEntries(data.map(n => [ n[idKey], { ...n, [childrenKey]: [] } ]));
  return Object.values(tree).filter(n => !tree[n[parentKey]]?.[childrenKey].push(n));
}


const result = createTree({
  data: components,
  childrenKey: 'components',
});

что делаю не так?

document.querySelectorAll('.panel').forEach(n => n.addEventListener('click', onClick));

function onClick() {
  const panel = this.closest('tr').nextElementSibling;
  const isActive = !panel.classList.contains('active');
  panel.classList.toggle('active', isActive);
  this.classList.toggle('changing-icon', isActive);
}

мне нужен не сам ответ

function findOutlier(integers) {
  const [ p0, p1, p2 ] = integers.slice(0, 3).map(n => n & 1);
  return p0 === p1
    ? integers.find(n => (n & 1) !== p0)
    : integers[+(p0 === p2)];
}

const findOutlier = arr => arr
  .reduce((acc, n) => (acc[n & 1].push(n), acc), [ [], [] ])
  .find(n => n.length === 1)
  .pop();

const findOutlier = arr => arr
  .sort((a, b) => (a & 1) - (b & 1))
  .at(-((arr[0] & 1) === (arr[1] & 1)));

function getFilterByCount(arr, filterFn, key) {
  const getKey = key instanceof Function ? key : key == null ? n => n : n => n[key];
  const count = arr.reduce((acc, n) => acc.set(getKey(n), -~acc.get(getKey(n))), new Map);
  return n => !!filterFn(count.get(getKey(n)));
}

const filterByCount = (...args) => args[0].filter(getFilterByCount(...args));


const newArr = filterByCount(arr, count => count > 1, 'props1');

function deleteByCount(arr, filterFn, key) {
  let numDeleted = 0;

  arr.forEach(function(n, i, a) {
    a[i - numDeleted] = n;
    numDeleted += this(n);
  }, getFilterByCount(arr, filterFn, key));

  arr.length -= numDeleted;
}


deleteByCount(arr, count => count < 2, n => n.props1);

for(var i = 0; i < tabss.children.length;i++); {
        tabss.children[i].classList.add('active')
}

const createTreeFromNestedSets = arr => [...arr]
  .sort((a, b) => a.left - b.left)
  .reduce((acc, n) => {
    while (acc.at(-1).at(-1).right < n.left) {
      acc.pop();
    }

    if (acc.at(-1).at(-1).right > n.left) {
      acc.push(acc.at(-1).at(-1).children);
    }

    acc.at(-1).push({ ...n, children: [] });

    return acc;
  }, [ [ { left: -Infinity, right: Infinity, children: [] } ] ])
  [0][0].children;

const createTreeHTML = (arr, nodeTemplate) =>
  Array.isArray(arr) && arr.length
    ? `<ul>${arr.map(n => `
         <li>
           ${nodeTemplate(n)}
           ${createTreeHTML(n.children, nodeTemplate)}
         </li>`).join('')}
       </ul>`
    : '';

containerElement.insertAdjacentHTML('beforeend', createTreeHTML(
  createTreeFromNestedSets(data),
  item => `<input data-id="${item.id}" type="checkbox">${item.name}`
));

function getDates(startStr, endStr) {
  const startDate = new Date(startStr.split('.').reverse().join('-'));
  const endDate = new Date(endStr.split('.').reverse().join('-'));
  const dates = [];

  for (; startDate <= endDate; startDate.setDate(startDate.getDate() + 1)) {
    dates.push(startDate.toLocaleDateString('ru-RU', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
    }));
  }

  return dates;
}

const inputs = [...document.querySelectorAll('.input')];
inputs.forEach(n => n.addEventListener('input', onInput));

function onInput({ target: t }) {
  if (t.value.length === t.maxLength) {
    t.nextElementSibling?.focus();
  }

  if (inputs.every(n => n.value.length === n.maxLength)) {
    // здесь дёргаете свою функцию
  }
}

const blockSelector = '.block';
const buttonSelector = `${blockSelector} .block__close`;

document.addEventListener('click', e => {
  const block = e.target.closest(buttonSelector)?.closest(blockSelector);
  block?.parentNode.removeChild(block);
});

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

не затрагивая строчку sort

users.sort((a,b) => a- b);

valueOf() {
  return this.age;
},

[Symbol.toPrimitive](hint) {
  return hint === 'number'
    ? this.age
    : `${this.name} is ${this.age} y.o.`;
},

const svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

const pathEl = document.createElement('path');

const group = (arr, ...keys) =>
  arr.reduce(((key, acc, n) => (
    (keys.reduce((obj, k) => obj[n[k]] ??= {}, acc)[n[key]] ??= []).push(n),
    acc
  )).bind(null, keys.pop()), {});


const grouped = group(arr, 'order', 'user_id', 'stream_id', 'currency_id');

function group(data, keys) {
  const result = {};

  for (const n of data) {
    const objKeys = [].concat(keys(n));
    const arrKey = objKeys.pop();
    (objKeys.reduce((obj, k) => obj[k] ??= {}, result)[arrKey] ??= []).push(n);
  }

  return result;
}


// ваш случай
group(arr, n => [ n.order, n.user_id, n.stream_id, n.currency_id ])

// а вообще, группировать можно не только массивы; количество признаков группировки
// может отличаться для различных элементов; сами признаки и имена групп не обязаны совпадать
// с какими-либо свойствами элементов, а могут являться производными от них значениями
group('12+345-!aщСxE_VЖg', n => {
  const low = n.toLowerCase();
  return (
    low !== n.toUpperCase() ? [ 'буквы', n === low ? 'строчные' : 'заглавные' ] :
    Number.isInteger(+n)    ? [ 'цифры', (n & 1)   ? 'нечётные' :    'чётные' ] :
                              'другое'
  );
})

const find = (obj, key, val) =>
  obj instanceof Object
    ? obj[key] === val
      ? obj
      : Object.values(obj).reduce((found, n) => found ?? find(n, key, val), null)
    : null;


const obj = find(fractal, 'id', id);

function find(obj, key, val) {
  for (const stack = [ obj ]; stack.length;) {
    const n = stack.pop();
    if (n instanceof Object) {
      if (n[key] === val) {
        return n;
      }

      stack.push(...Object.values(n));
    }
  }

  return null;
}

function sum(data) {
  let result = 0;

  for (const stack = [ data ]; stack.length;) {
    const n = stack.pop();
    stack.push(...(n instanceof Object ? Object.values(n) : []));
    result += typeof n === 'number' ? n : 0;
  }

  return result;
}

<label>
  Город:
  <select id="city"></select>
</label>
<label>
  Линия:
  <select id="line"></select>
</label>
<label>
  Станция:
  <select id="station"></select>
</label>

fetch('https://api.hh.ru/metro/').then(r => r.json()).then(subwayData => {
  const city = document.querySelector('#city');
  const line = document.querySelector('#line');
  const station = document.querySelector('#station');

  const getLines = () => subwayData[city.value].lines;
  const update = (el, data) => {
    el.replaceChildren(...data.map((n, i) => new Option(n.name, i)));
    el.dispatchEvent(new Event('change'));
  };

  city.addEventListener('change', () => update(line, getLines()));
  line.addEventListener('change', () => update(station, getLines()[line.value].stations));

  update(city, subwayData);
});

выводит не совсем то что мне надо

const bullshitChunks = (arr, chunkSize) =>
  Array.from(
    { length: arr.length - chunkSize + 1 },
    (n, i) => arr.slice(i, i + chunkSize)
  );


console.log(bullshitChunks([ 1, 2, 3, 4, 5, 6, 7 ], 4));
console.log(bullshitChunks('abcdefg', 5));

(
  products.find(n => n.product.id === newProduct.id) ??
  (products[products.length] = {
    product: { ...newProduct },
    count: 0,
  })
).count++;