Mirrrta

function calc(val = 0) {
  const self = {
    add: v => (val += v, self),
    sub: v => (val -= v, self),
    mul: v => (val *= v, self),
    div: v => (val /= v, self),
    pow: v => (val **= v, self),
    toString: () => val,
  };

  return self;
}


calc().add(5).mul(5) + 1 // 26
+calc(100).div(10).sub(2) // 8
`${calc(2).pow(10)}` // "1024"

pathname
  .match(/\/[^/]+/g)
  .map((n, i, a) => a.slice(0, i + 1).join(''))
  .map(n => ({
    title: routes.find(r => RegExp(`^${r.url.replace(/:[^\/]+/g, '[^\/]+')}$`).test(n))?.title ?? '',
    url: n,
  }))

const arr = Array.from(str.matchAll(/[^\/]+/g), n => n[0]);

// или

const arr = str.match(/[^\/]+/g) ?? [];

// или

const arr = str.split('/').filter(Boolean);

// или

const arr = Array.prototype.reduce.call(str, (acc, n, i) => (
  (n !== '/') && (
    acc[1] !== i - 1 && acc[0].push(''),
    acc[0][acc[0].length - 1] += n,
    acc[1] = i
  ),
  acc
), [ [], -Infinity ])[0];

А вы и не должны это делать вручную. Такие урлы должен парсить роутер:
https://habr.com/ru/post/329996/
https://github.com/ReactTraining/react-router
и гуглите дальше

1. Вам нужно с строки location.pathname вытянуть значение. Допустим /menu11
2. Дальше создать рекурсивную функцию, которая будет возращать масив с обєктами предков.
Могу примерно код сделать.
3. Ну а потом уже просто мапить етот масив.

Тупо и банально так
https://jsfiddle.net/jeoh4xb8/

Общий смысл:
1. Нужно получить проценты. Проценты - величина относительная. В моём случае - относительно максимального веса.
2. Становиться ясно, что нужно найти максимальный вес и высчитать относительно него остальные
3. За ширину отвечает width, значит её мы и будем задавать динамически
4. Погнали:) Это только пример. Не нужно реализовывать всё точно так, особенно рендер.

.line {
  height: 10px;
  background-color: #333;
}

// полагаю, вы получаете с сервера нечно такое:
const data = [
  {
    weight: '76'
  },
  {
    weight: '54'
  },
  {
    weight: '30'
  }
]

// находим максимум
const maxWeight = Math.max.apply(null, data.map( item => +item.weight ))

// относительно максимума высчитываем проценты
const percents = data.map( item => {
  return +item.weight / maxWeight * 100
})

// генерируем линии
const generateLine = percents => {
  return percents.map( percent => {
    return `
      <div style="width:${percent}%" class="line"></div>
    `
  }).join('')
}

// делаем функцию для рендеринга
const render = html => {
  document.body.innerHTML = html
}

// рендерим
render( generateLine( percents ) )

Если у вас максимум всегда 10, присваиваем maxWeight 10 и в объекте меняем значения на числа в диапазоне от 0 до 10.

Все дело в приоритете операторов https://developer.mozilla.org/ru/docs/Web/JavaScri...

Потому что язык не предоставляет такой возможности. Всегда нужно писать "отдельно".

5 < 6 < 7 // true
// но при этом 
8 > 4 > 2 // false

потому что

(8 > 4)  > 2
(true) > 2
1 > 2

В общем оно и не должно так работать, читай про приоритеты операторов и ассоциативность.

как тоже самое сделать при помощи метода match?

(str.match(/\S+/g) ?? [])[2]

что будет быстрее?

split, но вы этого не заметите

const [ items, setItems ] = useState([
  { value: ..., text: '...', checked: false },
  { value: ..., text: '...', checked: false },
  ...
]);

const onChange = ({ target: { checked, dataset: { index } } }) => {
  setItems(items.map((n, i) => i === +index ? { ...n, checked } : n));
};

<form>
  {items.map((n, i) => (
    <div>
      <label>
        <input
          type="checkbox"
          data-index={i}
          value={n.value}
          checked={n.checked}
          onChange={onChange}
        />
        {n.text}
      </label>
    </div>
  ))}
  <button disabled={items.every(n => !n.checked)}>submit</button>
</form>

https://jsfiddle.net/ps6zt52a/

Смотря какая именно задача.

Для совсем произвольных объектов - jsonb (ну или jsonb[], чтобы был массив).

Если объекты одной структуры, можно создать свой композитный тип и колонку typename[].

dimox.name/custom-checkboxes-and-radio-buttons-usi...

Функция группировки:

const group = (arr, idKey, valKey) =>
  Object.values(arr.reduce((acc, { [idKey]: id, [valKey]: val }) => (
    (acc[id] = acc[id] ?? { [idKey]: id, [valKey]: [] })[valKey].push(val),
    acc
  ), {}));

В компоненте:

const groupedAddresses = useMemo(() => {
  return group(addresses, 'city', 'address');
}, [ addresses ]);

<ul>
  {groupedAddresses.map(n => (
    <li>
      <h3>{n.city}</h3>
      <ul>{n.address.map(m => <li>{m}</li>)}</ul>
    </li>
  ))}
</ul>

https://jsfiddle.net/vqLsyz0x/

let arr = [
{city: 'Москва', address: 'адрес 1'},
{city: 'Москва', address: 'адрес 2'},
{city: 'Петербург', address: 'адрес 3'},
{city: 'Москва', address: 'адрес 4'},
]

[...new Set(arr.map(item => item.city))].map(function(item) {
   return {city: item, address: arr.filter(itm => itm.city == item).map(itm => itm.address)}
})

const unique = Object.values(arr.reduce((acc, n) => (acc[n.name] = n, acc), {}));

const names = unique.map(({ name }, i) => ({ id: -~i, name }));
const ages = unique.map((n, i) => ({ id: i + 1, age: n.age }));

или

const extractUnique = (arr, idKey, keys) =>
  arr.reduce((acc, n) => {
    if (!acc[1].has(n[idKey])) {
      const id = acc[1].add(n[idKey]).size;
      keys.forEach((k, i) => acc[0][i].push({ id, [k]: n[k] }));
    }

    return acc;
  }, [ keys.map(() => []), new Set ])[0];


const [ names, ages ] = extractUnique(arr, 'name', [ 'name', 'age' ]);

Можете попробовать атрибутом pattern (htmlbook.ru/html/input/pattern) и с помощью плагина masked input ( https://itchief.ru/lessons/javascript/input-mask-f... )