Dino Winchester

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

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

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

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));
}

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);

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>

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;

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 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 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), {}));

<style>
  input + label {
    color: #ff0000;
  }
</style>

<input type="checkbox" id="checkbox" />
<label for="checkbox">чекбокс</label>

1. input плохо стилизуется
   
2. label обычно ничем не примечателен в отличие от input, который информативен (содержит, например, атрибут type).
   

<style>
  label > input  {
    outline-color: #ff0000;
    outline-style: double;
  }
</style>

<label>
  <input type="checkbox" />
  чекбокс
</label>

1. input и label могут быть разнесены физически (находится в разных местах документа)
   
2. label может идти после input, что дает нам возможность обратиться в CSS от второго к первому
   

const resultArr = [];
for (let i = 0; i < arr.length; i++) {
  const item = arr[i];
  const obj = {};
  obj[item[0]] = item[1];
  resultArr.push(obj);
}

const resultArr = [];
for (let [prop, value] of arr) {
  const obj = { [prop]: value };
  resultArr.push(obj);
}