0xD34F

@media screen and (max-width: 768px) {
  br {
    display: none;
  }
}

function merge(nums1, m, nums2, n) {
  for (let i = m + n, i1 = m - 1, i2 = n - 1; i--;) {
    nums1[i] = i2 < 0 || nums1[i1] > nums2[i2] ? nums1[i1--] : nums2[i2--];
  }
}

function randomCall(items) {
  const max = items.reduce((acc, n) => acc + n.ratio, 0);

  return function(...args) {
    const val = Math.random() * max;
    for (let sum = 0, i = 0; i < items.length; i++) {
      sum += items[i].ratio;
      if (sum > val) {
        return items[i].func.apply(this, args);
      }
    }
  };
}

const func = randomCall([
  { func: func1, ratio: 1 },
  { func: func2, ratio: 2 },
  { func: func3, ratio: 3 },
  { func: func4, ratio: 4 },
]);

https://jsfiddle.net/pgnL6at1/

Какое значение нас интересует: const value = 'myValue';.

Как будем проверять его наличие:

// если речь идёт о каком-то конкретном свойстве
const hasValue = x => x && x.value === value;

// если имя свойства не важно
const hasValue = x => Object.values(x || {}).includes(value);

Чтобы обойти вложенные объекты можно применить рекурсию:

const find = (data, test) =>
  test(data)
    ? data
    : data === Object(data)
      ? Object.values(data).reduce((found, n) =>
          found !== null ? found : find(n, test)
        , null)
      : null;

А можно и не применять:

function find(data, test) {
  for (const stack = [ data ]; stack.length;) {
    const n = stack.pop();
    if (test(n)) {
      return n;
    } else if (n instanceof Object) {
      stack.push(...Object.values(n).reverse());
    }
  }

  return null;
}

Ищем объект: const obj = find(arrayData, hasValue);.

state = {
  disabled: false,
}

toggle(disabled) {
  this.setState(() => ({ disabled }));
}

onClick = () => {
  this.toggle(true);
  setTimeout(() => this.toggle(false), 2000);
}

<button disabled={this.state.disabled} onClick={this.onClick}>click me</button>

Классы замените data-атрибутом, в зависимости от значения которого будет стилизоваться сам .item, а не вложенные в него элементы:

.item[data-xxx="1"]::before { background: #444; }
.item[data-xxx="2"]::before { background: #555; }
.item[data-xxx="3"]::before { background: #666; }
.item[data-xxx="4"]::before { background: #777; }
.item[data-xxx="5"]::before { background: #888; }
.item[data-xxx="6"]::before { background: #999; }

Соответственно, засовывать шесть div'ов в каждый .item не надо:

$('#counter').on('input', e => {
  $('#results').html('<div class="item"></div>'.repeat(e.target.value));
}).trigger('input');

// или

const results = document.querySelector('#results');
const counter = document.querySelector('#counter');

counter.addEventListener('input', ({ target: { value } }) => {
  results.innerHTML = Array(++value).join('<div class="item"></div>');
});
counter.dispatchEvent(new Event('input'));

Нет div'ов - не надо ни у кого переключать видимость. Достаточно выставить атрибуту случайное значение:

$('#view').on('click', () => $('.item').attr('data-xxx', () => 1 + Math.random() * 6 | 0));

// или

document.querySelector('#view').addEventListener('click', () => {
  document.querySelectorAll('.item').forEach(n => n.dataset.xxx = -~(Math.random() * 6));
});

https://jsfiddle.net/L76mav3t/

preg_match('~(?<=vk\.com/)\S+~', $str, $match);
$group_name = $match[0];

document.querySelector('table').addEventListener('click', ({ target: t }) => {
  const next = t.matches('input[type="button"]') && t.parentNode.nextElementSibling;
  const input = next && next.querySelector('input');
  input && (input.type = 'text');
});

Вместо состояния всех элементов храните имя/id/индекс открытого:

state = {
  opened: null,
}

toggle = ({ target: { dataset: { name } } }) => {
  this.setState(({ opened }) => ({
    opened: opened === name ? null : name,
  }));
}

https://jsfiddle.net/bexgm6uz/

Object.fromEntries((url.match(/(?<=utm_).+?=[^&]*/g) || []).map(n => n.split('=')))

или

[...url.matchAll(/utm_([^=]+)=([^&]*)/g)].reduce((acc, [ , k, v ]) => (acc[k] = v, acc), {})

или

Array
  .from(new URL(url).searchParams)
  .filter(n => n[0].startsWith('utm_'))
  .reduce((acc, n) => ({ ...acc, [n[0].slice(4)]: n[1] }), {})

Что можно сделать:

1. Установить значение select'а: select.value = '0';
   
2. Установить индекс выбранного option'а: select.selectedIndex = 0;
   
3. Назначить true в качестве значения свойства selected тому option'у, на который хотите переключиться:
   
   

   select[0].selected = true;
   // или
   select.options[0].selected = true;
   // или
   select.children[0].selected = true;
   // или
   select.firstElementChild.selected = true;
   // или
   select.querySelector('[selected]').selected = true;

   
   
4. Перезаписать внутреннюю разметку select'а: select.innerHTML += '';
   

Не дублируя код инициализации

Очевидно же - сделать функцию, которая будет принимать id/элемент (контейнер для карты) и данные маркеров.

Как блокировать элементы в зависимости от значения data-атрибута:

const disableByType = (elements, type) =>
  elements.forEach(n => n.disabled = n.dataset.type2 !== type);

Блокируем:

// можно сделать делегированный обработчик
document.addEventListener('change', ({ target: { dataset: { type1 } } }) => {
  if (type1) {
    disableByType(document.querySelectorAll('[data-type2]'), type1);
  }
});

// или, назначить обработчик каждой радиокнопке индивидуально
const radios1 = document.querySelectorAll('[data-type1]');
const radios2 = document.querySelectorAll('[data-type2]');
const onChange = e => disableByType(radios2, e.target.dataset.type1);
radios1.forEach(n => n.addEventListener('change', onChange));

Храните вместо значения его индекс. При клике увеличивайте его на единицу.

Соответственно, если надо значение показать:

{{ массивВозможныхЗначений[индексЗначения] }}

Ну или, если будете хранить сами значения - при клике ищите индекс значения в массиве, берёте следующее:

следующееЗначение = массивВозможныхЗначений[массивВозможныхЗначений.indexOf(текущееЗначение) + 1]

UPD. Как это может выглядеть: раз, два.

const entries = Object.entries(obj);
const mustBeRemoved = v =>
  (v instanceof Object && !Object.keys(v).length) ||
  (!v && typeof v !== 'boolean');

Собираем новый объект:

const newObj = Object.fromEntries(entries.filter(n => !mustBeRemoved(n[1])));

Удаляем из существующего:

entries.forEach(n => mustBeRemoved(n[1]) && delete obj[n[0]]);

function createTree($data, $levelKey, $childrenKey) {
  $tree = [];

  foreach ($data as $n) {
    $arr = &$tree;

    for ($level = $data[0][$levelKey]; $n[$levelKey] > $level; $level++) {
      $arr = &$arr[count($arr) - 1][$childrenKey];
    }

    $arr[] = $n + [ $childrenKey => [] ];
  }

  return $tree;
}

$tree = createTree($arr, 'depth', 'children');

или

function createTree($data, $params = []) {
  $levelKey = $params['levelKey'] ?? 'level';
  $childrenKey = $params['childrenKey'] ?? 'children';

  $root = [];
  $parents = [ $data[0][$levelKey] => &$root ];

  foreach ($data as $n) {
    $n[$childrenKey] = [];
    $level = $n[$levelKey];
    $p = &$parents[$level];
    $p[] = $n;
    $parents[-~$level] = &$p[~-count($p)][$childrenKey];
  }

  return $root;
}

$tree = createTree($arr, [ 'levelKey' => 'depth' ]);

https://jsfiddle.net/gqa2wrkp/

Что и куда будем копировать:

const source = document.querySelector('.box1').children;
const target = document.querySelector('.box2');

Копируем:

target.firstElementChild.insertAdjacentHTML('afterend', Array
  .from(source, ({ innerText: n }) => `<p><a href="#${n}">${n}</a></p>`)
  .join('')
);

или

target.children[0].after(...Array.prototype.map.call(source, n => {
  const p = document.createElement('p');
  p.append(document.createElement('a'));
  p.lastChild.href = '#' + n.textContent;
  p.lastChild.text = n.textContent;
  return p;
}));

preg_match('\/\/.+\?', $embed, $matches);

Разделители где?

echo $matches;

Это массив, так что $matches[0]

Так что надо-то - задавать карточкам различные стили (а это и есть "переключение вида"), или переключаться между разными наборами карточек (которые вы показали в песочнице)?