0xD34F

Кого складываем:

const elements = document.querySelectorAll('[name^=AR_AMOUNT]');

Нормальный способ - перебираем коллекцию элементов (цикл в явном виде или с помощью методов массива), достаём значения, складываем:

const sum = Array.prototype.reduce.call(
  elements,
  (acc, n) => acc + +n.value,
  0
);

// или

let sum = 0;
for (const { value } of elements) {
  sum += Number(value);
}

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

const sum = (function sum(arr, i) {
  return arr[i] ? parseFloat(arr[i].value) + sum(arr, i + 1) : 0;
})(elements, 0);

Дикий способ - сами ничего считать не будем. Выдёргиваем из коллекции элементов значения; склеиваем их, используя в качестве разделителя символ +, в строку; строку отдаём в eval; всё, сумма получена (ну, почти, если исходная коллекция элементов была пуста, то строка тоже будет пустой, так что надо не забыть подставить 0 вместо возможного undefined, который является результатом выполнения пустой строки):

const sum = eval(Array.from(elements, n => n.value).join('+')) ?? 0;

function Typewriter({ text }) {
  const [ length, setLength ] = useState(0);

  useEffect(() => {
    setLength(0);

    const interval = setInterval(setLength, 100, length => {
      if (++length >= text.length) {
        clearInterval(interval);
      }

      return length;
    });

    return () => clearInterval(interval);
  }, [ text ]);

  return <div>{text.slice(0, length)}</div>;
}

Перебираем массив от конца к началу:

main.innerHTML = arr.reduceRight((content, tag) => `<${tag}>${content}</${tag}>`, '');

// или

main.append(arr.reduceRight((content, tag) => {
  const el = document.createElement(tag);
  el.append(content);
  return el;
}, ''));

И наоборот:

main.insertAdjacentHTML('beforeend', (function next(i) {
  return arr[i] ? `<${arr[i]}>${next(-~i)}</${arr[i]}>` : '';
})(0));

// или

arr.forEach(function(tag) {
  this[0].appendChild(document.createElement(tag));
  this[0] = this[0].lastChild;
}, [ main ]);

const merge = (target, ...sources) =>
  sources.reduce((acc, n) => (
    Object.entries(n).forEach(([ k, v ]) =>
      acc[k] = v instanceof Object
        ? merge(acc[k] instanceof Object ? acc[k] : {}, v)
        : v
    ),
    acc
  ), target);


const result = merge({}, ...arrayObj);

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

const sorted = (data, key) => Array
  .from(data, n => [ key(n), n ])
  .sort(([a], [b]) => a < b ? -1 : +(a > b))
  .map(n => n[1]);

Как отсортировать содержимое DOM-элемента - да просто добавить ему это содержимое в отсортированном виде:

const sortChildren = (el, key) =>
  el.append(...sorted(el.children, key));

Направление сортировки будем указывать с помощью data-атрибута:

<button data-order="-1">От большего к меньшему</button>
<button data-order="+1">От меньшего к большему</button>

Кнопкам назначаем общий обработчик клика, где сортируем содержимое .catalog-items (вес элемента - число внутри, умноженное на направление сортировки), кликнутой кнопке класс добавляем, у остальных убираем:

const wrapper = document.querySelector('.catalog-items');
const buttons = document.querySelectorAll('[data-order]');

buttons.forEach(n => n.addEventListener('click', onClick));

function onClick({ target: t }) {
  const order = +t.dataset.order;
  sortChildren(wrapper, el => parseInt(el.innerText) * order);
  buttons.forEach(n => n.classList.toggle('active', n === t));
}

В документации не нашёл явных примеров.

плохо искали

options: {
  plugins: {
    legend: {
      onClick(e, legendItem, { chart }) {
        this.legendItems.forEach((n, i) => {
          chart.getDatasetMeta(i).hidden = n !== legendItem && (legendItem.hidden || !n.hidden);
        });

        chart.update();
      },
    },
  },
},

https://jsfiddle.net/79Lfjor6/

nextEl: prevRef.current

Суть проблемы - current имеет значение null при первом рендеринге. Так что придётся заставить компонент отрендериться ещё раз. Например, можно это сделать путём сохранения ссылки на экземпляр swiper'а в стейт (да, с одной стороны костыль, с другой - наверняка пригодится в будущем):

const [ swiper, setSwiper ] = useState();

<Swiper
  onSwiper={setSwiper}
  ...

https://codesandbox.io/s/for-https-qna-habr-com-q-...

Или, так же получаете экземпляр swiper'а, но вырезаете к чёрту navigation, вместо того, чтобы передавать ref'ы в экземпляр компонента Swiper, добавьте элементам, которые должны выступать в роли кнопок, обработчики клика, где будут дёргаться методы slidePrev/slideNext:

- ref={prevRef}
+ onClick={() => swiper.slidePrev()}

https://stackblitz.com/edit/stackblitz-starters-rr...

$arrToStr = fn($arr) => implode(', ', array_map(fn($v, $k) => "$k: $v", $arr, array_keys($arr)));
echo implode("\n", array_map($arrToStr, $users));

data: () => ({
  maxlen: 10,
  items: [
    'hello, world!!',
    'fuck the world',
    'fuck everything',
    '1234567890',
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit,',
   ],
}),
methods: {
  short1: (str, maxlen) => str.length <= maxlen ? str : str.slice(0, maxlen) + '...',
  short2: (str, maxlen) => str.substring(0, maxlen) + (str.charAt(maxlen) && '...'),
  short3: (str, maxlen) => str.replace(RegExp(`(.{${maxlen}}).+`), '$1...'),
  short4: (str, maxlen) => str.replace(RegExp(`(?<=.{${maxlen}}).+`), '...'),
},

<input type="range" min="1" max="20" v-model="maxlen">
<span>{{ maxlen }}</span>

<div v-for="n in items">
  <div v-text="short1(n, maxlen)"></div>
  <div v-html="short2(n, maxlen)"></div>
  <div :text-content.prop="short3(n, maxlen)"></div>
  <div>{{ short4(n, maxlen) }}</div>
</div>

https://jsfiddle.net/dxm0gsnf/

"Числовые" функции проверяют, является ли переданное им значение функцией, если да - вызывают её со своим числом в качестве аргумента, нет - просто возвращают число.

Функции операций принимают второе число, возвращают функцию, принимающую первое число и производящую над переданными числами операцию.

const [ zero, one, two, three, four, five, six, seven, eight, nine ] = Array.from(
  { length: 10 },
  (_, i) => f => f instanceof Function ? f(i) : i
  // или
  // (_, i) => f => f?.(i) ?? i
);

const plus = a => b => b + a;
const minus = a => b => b - a;
const times = a => b => b * a;
const dividedBy = a => b => b / a | 0;

const sortDigits = num => +[...`${num}`].sort((a, b) => b - a).join('');

или

const sortDigits = num => ''.concat.apply('', num.toString().split('').sort().reverse()) - 0;

или

const sortDigits = num => Number(Array
  .from('' + num)
  .reduce((acc, n) => (acc[n]++, acc), Array(10).fill(0))
  .reduceRight((acc, n, i) => acc + String(i).repeat(n), '')
);

или

const sortDigits = num => Array
  .prototype
  .reduce
  .call(String(num), (acc, n) => ((acc[9 - n] ??= []).push(n | 0), acc), [])
  .flat()
  .reduce((acc, n) => acc * 10 + n, 0);

^\d{8}(\d{4})?$

^(?!.*__)@[a-z][a-z\d_]{4,34}$

from collections import Counter

item = Counter(arr).most_common(1)[0][0]

computed: {
  columns() {
    return Object.keys(this.fedresurs.find(n => n.items.length)?.items[0] ?? {});
  },
},

<table v-for="messages in fedresurs">
  <caption>{{ messages.title }}</caption>
  <thead>
    <tr>
      <th v-for="column in columns">{{ column }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in messages.items">
      <td v-for="column in columns">{{ item[column] }}</td>
    </tr>
  </tbody>
</table>

Цикл не нужен, просто products.insert(contentsOf: drinks, at: 0).

Ну или поэлементно добавляйте:

for n in drinks.reversed() {
  products.insert(n, at: 0)
}

// или

for i in (0 ..< drinks.count) {
  products.insert(drinks[i], at: i)
}

Использую yandex-map@beta

Beta? Зачем пытаться использовать заведомо неготовый инструмент?

пытаюсь изменить параметр zoom в YandexMap, но не работает, и что-то мне подсказывает, что не всё так просто

Знаете - да. Не всё так просто. Открыл я исходник компонента, и не смог найти там никакого кода, который бы отвечал за изменение состояния карты при изменении значений параметров. Так что придётся менять zoom вручную, напрямую обращаясь к карте:

setup() {
  ...
  let map = null;

  return {
    ...
    onCreate: e => map = e,
    updateZoom: z => map.setZoom(Math.max(1, Math.min(19, map.getZoom() + z))),
  };
},

<yandex-map
  ...
  @created="onCreate"
/>
...
<button @click="updateZoom(+1)">+</button>
<button @click="updateZoom(-1)">-</button>

Ну или ждите, пока компонент допилят.

срабатывает дважды, а в последующие разы увеличивается в разы

Всё правильно, получаете то поведение, какое описали, новое значение focus - новый обработчик:

useEffect(() => {
    window.addEventListener('keydown', onKeyPress);
}, [focus])

Старый-то вы не удаляете.

А вообще, есть способ получать актуальное значение focus без создания нового обработчика, так что вам и одного хватит:

useEffect(() => {
  const onKeyDown = ({ keyCode }) => {
    if (keyCode === 39) {
      setFocus(focus => focus + 1);
    }
  };

  window.addEventListener('keydown', onKeyDown);
  return () => window.removeEventListener('keydown', onKeyDown);
}, []);