0xD34F

const result = arr.reduce((acc, n) => acc * n.values, 1);

или

const result = eval(arr.map(n => n.values).join('*')) ?? 1;

или

let result = 1;
for (const { values: n } of arr) {
  result *= n;
}

или

let result = 1;
for (let i = 0; i < arr.length; i++) {
  result = result * arr[i].values;
}

или

const result = (function mul(i) {
  return i >= arr.length
    ? 1
    : arr[i].values * mul(-~i);
})(0);

В переданной строке не только параметры - соответственно, разобрана она была неправильно.

Используйте URL вместо URLSearchParams:

const url = new URL('https://qna.habr.com/?test=123&frukt=yabloko');
console.log(url.searchParams.get('test'));

Или вырезайте из строки лишнее:

const str = 'https://qna.habr.com/?test=123&frukt=yabloko';
const usp = new URLSearchParams(str.replace(/^[^?]*\?/, '')); // или str.split('?').pop()
console.log(usp.get('test'));

Открываем документацию, читаем:

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

Хотите иметь доступ к старому значению - следите не за всем объектом, а только за нужным свойством:

watch: {
  'obj.propName'(newValue, oldValue) {
    ...
  },
},

Если же надо следить за многими свойствами сразу, и создавать отдельный наблюдатель под каждое не хотите... Ну, вон там выше, в цитате из документации, прозрачно намекается, что делать - вместо изменения свойства заменяйте объект целиком на новый. Т.е., было obj.propName = value, а будет obj = { ...obj, propName: value }. Ну а дальше можно уже сравнивать свойства в старом и новом объектах, чтобы найти, какое конкретно было изменено.

Информацию о валютах сложить в массив объектов вида { имя валюты, относительная стоимость }.
На основе этого массива создавать input'ы.
Когда пользователь что-то вводит, запоминать не только значение, но и имя валюты.
Вывод значений - последняя редактировавшаяся валюта как есть, для остальных значение умножается на отношение относительных стоимостей, собственной и последней редактировавшейся.

https://jsfiddle.net/3h8zfw2k/

[ 5, 8, 10 ].forEach((n, i, a) => $items.slice(a[i - 1], n).wrapAll('<div>'));

После кого и что надо добавить:

const elements = document.querySelectorAll('.wrapper-boxes');
const tag = 'button';
const text = 'click me';
const className = 'xxx';

Добавляем:

elements.forEach(n => {
  n.after(document.createElement(tag));
  n.nextSibling.textContent = text;
  n.nextSibling.classList.add(className);
});

или

for (const { parentNode, nextSibling } of elements) {
  const el = document.createElement(tag);
  el.innerText = text;
  el.className = className;
  parentNode.insertBefore(el, nextSibling);
}

или

for (let i = 0; i < elements.length; i++) {
  elements[i].insertAdjacentHTML(
    'afterend',
    `<${tag} class="${className}">${text}</${tag}>`
  );
}

или

(function insert(i, n = elements.item(i)) {
  if (n) {
    const el = document.createElement(tag);
    el.appendChild(new Text(text));
    el.classList.value = className;
    n.insertAdjacentElement('afterend', el);
    insert(-~i);
  }
})(0);

Но как получить доступ к интервалу из уже имеющегося useEffect?

очистка эффекта

const arr = Object
  .entries(obj)
  .reduce((acc, [ k, values ]) => (
    values.forEach((v, i) => (acc[i] ??= {})[k] = v),
    acc
  ), []);

или

const keys = Object.keys(obj);
const arr = obj[keys[0]]?.map((_, i) => {
  return Object.fromEntries(keys.map(k => [ k, obj[k][i] ]));
}) ?? [];

или

const zip = (arrs, defaultValue = null) =>
  Array.from(
    { length: Math.max(...arrs.map(n => n.length)) },
    (_, i) => arrs.map(n => i < n.length ? n[i] : defaultValue)
  );

const combine = (keys, values, defaultValue = null) =>
  keys.reduce((acc, n, i) => (
    acc[n] = i < values.length ? values[i] : defaultValue,
    acc
  ), {});

const arr = Array.from(
  zip(Object.values(obj)),
  combine.bind(null, Object.keys(obj))
);

О каком индексе идёт речь: const index = 0;.

Достаём элементы:

const duplicates = arr.filter((n, i, a) => a.filter(m => m[index] === n[index]).length > 1);

или

const duplicates = Object
  .values(arr.reduce((acc, n) => ((acc[n[index]] ??= []).push(n), acc), {}))
  .flatMap(n => ~-n.length ? n : []);

или

const duplicates = Array
  .from(arr.reduce(
    (acc, n) => (acc.get(n[index]).push(n), acc),
    new Map(arr.map(n => [ n[index], [] ]))
  ).values())
  .reduce((acc, n) => (n.length > 1 && acc.push(...n), acc), []);

или

const duplicates = arr.filter(function(n) {
  return this.get(n[index]);
}, arr.reduce((acc, { [index]: n }) => acc.set(n, acc.has(n)), new Map));

document.querySelector('.btn--start').addEventListener('click', filterItems);
document.querySelector('select').addEventListener('change', e => e.target.value === 'all' && filterItems());

function filterItems() {
  const val = document.querySelector('select').value;

  document.querySelectorAll('.item').forEach(n => {
    n.style.display = [ n.dataset.elem, 'all' ].includes(val)
      ? 'block'
      : 'none';
  });
}

Object.fromEntries(new URLSearchParams(arr.join('&')))

или

arr.reduce((acc, n) => (
  n = n.split('='),
  acc[n[0]] = n[1],
  acc
), {})

или

Object.assign(...arr.map(n => n.match(/[^=]+/g)).map(([ k, v ]) => ({ [k]: v })))

или

eval(`({${arr.map(n => `"${n.replace('=', '":"')}"`)}})`)

<div data-value="69"></div>
<div data-value="187"></div>
<div data-value="666"></div>

function animateValue(elem) {
  return new Promise(resolve => {
    const endValue = +elem.dataset.value;
    let currValue = 0;

    const interval = setInterval(() => {
      if (++currValue === endValue) {
        clearInterval(interval);
        resolve();
      }

      elem.innerText = currValue;
    }, 20);
  });
}


Array
  .from(document.querySelectorAll('[data-value]'))
  .reduce((p, c) => p.then(() => animateValue(c)), Promise.resolve());

https://jsfiddle.net/L9f1a2u5/1/

Таких имён у переменных быть не может, так что придётся переименовать. Например:

function({ 'xxx-yyy': xxxYyy }) {

}

def chunked(arr, chunk_size):
  return [ arr[i:i + chunk_size] for i in range(0, len(arr), chunk_size) ]


print(chunked([ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ], 4)) # [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9]]

Нормально, об этом прямо говорится в документации:

The useRef() Hook isn’t just for DOM refs. The “ref” object is a generic container whose current property is mutable and can hold any value, similar to an instance property on a class.

Работает. А кнопка горизонтально не по центру, потому что соответствующее центрирование не задано. Потому что justify-content распределяет содержимое блока вдоль главной оси, в качестве которой у вас установлена вертикальная (flex-direction: column).

Используйте align-items.

Делаем просто:

const result = arr.reduce((acc, n, i) => (
  (i & 1) || acc.push(0),
  acc[~-acc.length] += n,
  acc
), []);

Делаем сложно:

function* chunked(data, chunkSize) {
  const iter = data[Symbol.iterator]();

  for (let chunk = [], n; !n?.done && (n = iter.next());) {
    if (!n.done) {
      chunk.push(n.value);
    }

    if (chunk.length === chunkSize || (n.done && chunk.length)) {
      yield chunk;
      chunk = [];
    }
  }
}

function sum(data, val = n => n) {
  const getVal = val instanceof Function ? val : n => n[val];
  let result = 0;

  for (const n of data) {
    result += getVal(n);
  }

  return result;
}

const result = Array.from(chunked(arr, 2), n => sum(n));

В родительском компоненте выполняйте привязку параметра isOpen с помощью директивы v-model, замените :is-open="item.isOpen" на v-model:is-open="item.isOpen".

Соответственно, в дочернем компоненте вместо прямого изменения значения параметра отправляйте новое значение родителю, замените isOpen = !isOpen на $emit('update:isOpen', !isOpen).

Через псевдоэлемент.

Если текст всегда одинаковый, тогда

.active {
  &::after {
    content: "hello, world!!";
  }
}

Если разный, положите его в data-атрибут:

<a class="tabs-select__button" data-text="hello, world!!">
<a class="tabs-select__button" data-text="fuck the world">

.active {
  &::after {
    content: attr(data-text);
  }
}

Соберём содержимое вложенных массивов в один:

const flatArr = arr.flatMap(n => Array.isArray(n.DOP) ? n.DOP : []);
// или
const flatArr = Array.prototype.concat.apply([], arr.map(n => n.DOP ?? []));
// или
const flatArr = arr.reduce((acc, n) => (n.DOP && acc.push(...n.DOP), acc), []);

Получим уникальные объекты:

const unique = Object.values(Object.fromEntries(flatArr.map(n => [ n.NAME, n ])));
// или
const unique = flatArr.filter(function({ NAME: n }) {
  return !(this[n] = this.hasOwnProperty(n));
}, {});
// или
const unique = flatArr.filter((n, i, a) => n === a.find(m => m.NAME === n.NAME));