0xD34F

explode/preg_split + array_slice + implode

Object.values(arr.reduce((acc, { id, value }) => {
  const type = typeof value;
  acc[id] = acc[id] ?? { id };
  acc[id][type] = (acc[id][type] ?? 0) + 1;
  return acc;
}, {}))

Добавьте $(this).remove() в конец обработчика клика.

str.match(/[^.]+(?=\.[^.]+(\/|$))/)[0]

Заворачиваете div с числом в отдельный экземпляр Spring, которому задаёте в качестве key само число:

<Spring
  key={this.state.number}
  from={{ opacity: 0, marginTop: 50 }}
  to={{ opacity: 1, marginTop: 0 }}
>
  {({ opacity, marginTop }) => (
    <div style={{ opacity, marginTop }}>{this.state.number}</div>
  )}
</Spring>

(?<!\{)\{(\w+)\}(?!\})

this.deleteItem = this.addItem.bind(this)

Так add или delete? Вы уж определитесь.

А ещё лучше - используйте при объявлении методов синтаксис стрелочных функций, и тогда вручную привязывать контекст будет не надо:

class App extends React.Component {
  addItem = e => {
    ...
  }

  deleteItem = key => {
    ...
  }
  ...

Пусть второй параметр будет массивом индексов, по умолчанию - пустой (соответственно, когда вызываете функцию сами, его передавать не надо). В начале обработки элемента данных кладёте его индекс в массив, после обработки убираете. Ну а текст - собираете из массива какой вам нужен:

const createTreeElement = (data, index = []) =>
  Array.isArray(data) && data.length
    ? data.reduce((ul, n, i) => (
        index.push(i),
        ul.append(document.createElement('li')),
        ul.lastChild.append(index.join('_'), createTreeElement(n.children, index)),
        index.pop(),
        ul
      ), document.createElement('ul'))
    : '';


document.body.append(createTreeElement(data));

Или, делаем второй параметр строкой. Как и массив из предыдущего варианта, по умолчанию пуста, указывать при самостоятельном вызове не надо. При обработке элемента массива собираем новую строку, состоящую из переданной в функцию и индекса:

const createTreeHTML = (data, index = '') =>
  data instanceof Array && data.length
    ? `<ul>${data.map((n, i) => `
         <li>
           ${(i = index + (index && '_') + i)}
           ${createTreeHTML(n.children, i)}
         </li>`).join('')}
       </ul>`
    : '';


document.body.insertAdjacentHTML('beforeend', createTreeHTML(data));

const filtered = arrWithObj.filter(n => !arr.includes(n.id));

// или

const filtered = arrWithObj.filter(function(n) {
  return !this.has(n.id);
}, new Set(arr));

// или

const filtered = Array.from(arr.reduce(
  (acc, n) => (acc.delete(n), acc),
  new Map(arrWithObj.map(n => [ n.id, n ]))
).values());

Да-да, документация для лохов, зачем её читать?

strict mode

const ul = document.querySelector('.ul-parent');

const groupedNodes = Array.prototype.reduce.call(
  ul.children,
  (acc, n) => {
    const k = n.textContent[0].toLowerCase();
    (acc[k] = acc[k] ?? []).push(n);
    return acc;
  },
  {}
);

ul.replaceWith(...Object.entries(groupedNodes).map(n => {
  const ul = document.createElement('ul');
  ul.classList.add('ul-parent', n[0] + '-litter');
  ul.append(...n[1]);
  return ul;
}));

или

const ul = document.querySelector('.ul-parent');

const groupedHTML = Array
  .from(ul.querySelectorAll(':scope > li'))
  .reduce((acc, { innerText: [ c ], outerHTML }) => {
    const k = c.toLowerCase();
    (acc[k] = acc[k] ?? []).push(outerHTML);
    return acc;
  }, {});

ul.outerHTML = Object
  .entries(groupedHTML)
  .map(([ k, v ]) => `<ul class="ul-parent ${k}-litter">${v.join('')}</ul>`)
  .join('');

document.addEventListener('click', e => {
  const div = e.target.closest('button')?.closest('div');
  if (div) {
    console.log(div.id);
  }
});

или

document.querySelectorAll('div button').forEach(function(n) {
  n.addEventListener('click', this);
}, e => console.log(e.currentTarget.closest('div').id));

Сортируем существующий массив:

arr.sort((a, b) => (a.rooms - b.rooms) || (a.square - b.square));

// или, в более общем виде

const sort = (arr, ...keys) =>
  arr.sort((a, b) => {
    let diff = 0;
    keys.find(k => diff = a[k] - b[k]);
    return diff;
  });


sort(arr, 'rooms', 'square');

Создаём отсортированный новый:

const sorted = (arr, keys) => arr
  .map(n => [ n ].concat(keys(n)))
  .sort((a, b) => {
    let diff = 0;
    for (let i = 0; ++i < a.length && !(diff = a[i] - b[i]);) ;
    return diff;
  })
  .map(n => n[0]);


const sortedArr = sorted(arr, n => [ n.rooms, n.square ]);

for i, (k, v) in enumerate(sorted(top_list.items(), key=lambda n: n[1], reverse=True), 1):
  print(f'{i}) {k} - {v}')

list1 = [ n for n in list1 if n in list2 ]

template.replace(/\{(.+?)\}/g, (m, g1) => user[g1] ?? m)

(?<=\.).+?(?=\?)

{this.state.card.map(id => (
  <Link to={`/api/events/${id}`}>
    <Main number={id} />
  </Link>
))}
<Switch>
  <Route
    path="/api/events/:id"
    render={props => <Description number={props.match.params.id} />}
  />
</Switch>

В родительском компоненте храните массив объектов с данными:

data: () => ({
  items: [],
}),

На основе этого массива создаёте с помощью v-for экземпляры дочернего компонента, к которым цепляете посредством v-model элементы массива:

<child-component v-for="(n, i) in items" v-model="items[i]"></child-component>

В дочернем компоненте делаете вычисляемое свойство: объект с данными, получаемый из родителя, заворачиваете в Proxy, который будет перехватывать установку значений свойств, собирать новый объект и отправлять его назад родителю:

props: [ 'value' ],
computed: {
  innerValue() {
    return new Proxy(this.value, {
      set: (target, prop, val) => {
        this.$emit('input', { ...target, [prop]: val });
        return true;
      },
    });
  },
},

Используете свойства этого объекта в v-model:

<input type="text" v-model="innerValue.someStringProp">
<input type="checkbox" v-model="innerValue.someBooleanProp">
<input type="number" v-model.number="innerValue.someNumberProp">

https://jsfiddle.net/aghpL7tf/2/