0xD34F

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 = e => {
    if (e.key === 'ArrowRight') {
      setFocus(focus => focus + 1);
    }
  };

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

new_arr = [ list(map(int, str(n))) for n in arr ]

state = {
  phones: [
    { id: 1, title: '', number: '' },
  ],
}

onChange = ({ target: { value, name, dataset: { index } } }) => {
  this.setState(({ phones }) => ({
    phones: phones.map((n, i) => +index === i
      ? { ...n, [name]: value }
      : n
    ),
  }));
}

addPhone = () => {
  this.setState(({ phones }) => ({
    phones: [
      ...phones,
      {
        id: 1 + Math.max(...phones.map(n => n.id)),
        title: '',
        number: '',
      },
    ],
  }));
}

delPhone = ({ target: { dataset: { index } } }) => {
  this.setState(({ phones }) => ({
    phones: phones.filter((n, i) => i !== +index),
  }));
}

render() {
  return (
    <div>
      {this.state.phones.map((n, i) => (
        <div key={n.id}>
          <input name="title" data-index={i} value={n.title} onChange={this.onChange} />
          <input name="number" data-index={i} value={n.number} onChange={this.onChange} />
          {i ? <button data-index={i} onClick={this.delPhone}>x</button> : null}
        </div>
      ))}
      <button onClick={this.addPhone}>Add</button>
    </div>
  );
}

data: () => ({
  currencies: [
    { title:  'рубль', rate:     1, val: 0 },
    { title: 'доллар', rate: 62.65, val: 0 },
    { title:   'евро', rate: 60.90, val: 0 },
  ],
}),
methods: {
  onInput({ rate, val }) {
    this.currencies.forEach(n => n.val = val * rate / n.rate);
  },
},

<div v-for="n in currencies">
  <input
    v-model.number="n.val"
    @input="onInput(n)"
    type="number"
    min="0"
  >
  {{ n.title }}
</div>

Что я делаю не так

В сообщении об ошибке сказано.

как решить проблему?

Найти у себя в коде косяк, о котором говорится в сообщении об ошибке и исправить его (как именно исправить - в сообщении об ошибке тоже кстати сказано).

Я бы предположил, что стоит сделать следующее: { LikeIcon } ---> <LikeIcon />.

const statsMeta = [
  { title: 'отредактированные', count: item => +item.edited },
  { title: 'неотредактированные', count: item => +!item.edited },
  { title: 'всего', count: () => 1 },
];

const statsData = allMessages.reduce((acc, n) => (
  statsMeta.forEach((m, i) => acc[i] += m.count(n)),
  acc
), Array(statsMeta.length).fill(0));

console.log(statsMeta.map((n, i) => `${n.title}: ${statsData[i]}`).join('\n'));

Кого надо удалить: const classPrefix = 'modal--';

Удаляем:

Array.from(el.classList).forEach(n => el.classList.toggle(n, !!n.indexOf(classPrefix)));

или

el.classList.remove(...[...el.classList].filter(n => n.startsWith(classPrefix)));

или

for (let i = el.classList.length; i--;) {
  if (el.classList[i].search(classPrefix) === 0) {
    el.classList.remove(el.classList[i]);
  }
}

или

el.classList.value = el.classList.value
  .split(' ')
  .filter(RegExp.prototype.test.bind(RegExp(`^(?!${classPrefix})`)))
  .join(' ');

или

el.className = el.className.replace(RegExp(`(^| )${classPrefix}\\S*`, 'g'), '').trim();

Делаем просто, ровно то, что спрошено:

const result = arr1.filter(function(n) {
  return !this.has(n[0]);
}, new Set(arr2.map(n => n[0])));

Делаем сложно, решаем задачу в более общем виде:

function diff(data1, data2, compare = (a, b) => a === b) {
  const arr = Array.isArray(data2) ? data2 : [...data2];
  const result = [];

  for (const n of data1) {
    if (!arr.some(m => compare(m, n))) {
      result.push(n);
    }
  }

  return result;
}

const result = diff(
  arr1,
  arr2,
  (a, b) => a.length === b.length && a.every((n, i) => Object.is(n, b[i]))
);

или

const diff = function*(data1, data2, keys = n => n) {
  const tree = new Map;

  for (const n of data2) []
    .concat(keys(n))
    .reduce((p, c) => p.set(c, p.get(c) ?? new Map).get(c), tree)
    .set(this, true);

  for (const n of data1) {
    if (![].concat(keys(n)).reduce((p, c) => p?.get(c), tree)?.get(this)) {
      yield n;
    }
  }
}.bind(Symbol());

const result = [...diff(arr1, arr2)];

const result = arr2.map(function(n) {
  return Object.fromEntries(this.map(m => [ m[1], n[m[0]] ]));
}, arr1.flatMap(Object.entries));

или

const keys = Object.entries(Object.assign({}, ...arr1));
const result = arr2.map(n => keys.reduce((acc, m) => (acc[m[1]] = n[m[0]], acc), {}));

Встречный вопрос: почему вы решили, что должно быть иначе? Код, который бы доставал данные из localStorage и клал их в todos, где он, почему его нет? Должен быть, например:

const [ todos, setTodos ] = useState(() => {
  let todos = null;

  try {
    todos = JSON.parse(localStorage.getItem('todos'));
  } catch (e) {};

  return Array.isArray(todos) ? todos : [];
});

Уверен, здесь вы ждёте, что добавляемый объект окажется в localStorage:

setTodos([
  ...todos,
  {
    id: Date.now(),
    complete: false,
    title: value,
  },
]);
localStorage.setItem("todos", JSON.stringify(todos));

Этого происходить не будет (ну, пока ещё что-то не добавите, и это "ещё что-то" тоже попадёт в localStorage не сразу). Вы не понимаете, что происходит при вызове setTodos. Откройте документацию и разберитесь. Сохранение в localStorage следует делать через useEffect:

useEffect(() => {
  localStorage.setItem('todos', JSON.stringify(todos));
}, [ todos ]);