Александр

document.querySelectorAll('[data-block="road"]').length;

const array = [
  [
    { name: 'A', age: 10 },
    { name: 'B', age: 10 },
    { name: 'A', age: 10 },
    { name: 'B', age: 10 },
  ],
  [
    { name: 'C', age: 10 },
    { name: 'D', age: 10 },
    { name: 'C', age: 10 },
    { name: 'D', age: 10 },
  ],
];

const groupBy = (collection, extractKey) => {
  const cache = new Map();
  
  return collection.reduce((accumulator, entry) => {
    const key = extractKey(entry);
    if (!cache.has(key)) {
      const group = [];

      cache.set(key, group);
      accumulator.push(group);
    }
    cache.get(key).push(entry);

    return accumulator;
  }, []);
};

const newArray = array.map(entry => groupBy(entry, item => item.name));

console.log(newArray);
/*
[
  [
    [ { name: 'A', age: 10 }, { name: 'A', age: 10 } ],
    [ { name: 'B', age: 10 }, { name: 'B', age: 10 } ]
  ],
  [
    [ { name: 'C', age: 10 }, { name: 'C', age: 10 } ],
    [ { name: 'D', age: 10 }, { name: 'D', age: 10 } ]
  ]
]
*/

Также провел тесты, нашел самый шустрый вариант.

const groupBy = (collection, extractKey) => {
  const cache = new Map();
  
  for (const entry of collection) {
    const key = extractKey(entry);
    if (!cache.has(key)) {
      cache.set(key, []);
    }
    cache.get(key).push(entry);
  }
  
  return [...cache.values()];
};

const api = (isError = false, callback) => !isError
  ? callback(null, { code: 200 })
  : callback(new Error(), null);

const promisify = (handle = () => {}) => (...args) => new Promise((resolve, reject) => {
  handle(...args, (error, data) => {
    if (error) {
      reject(error);
    } else {
      resolve(data);
    }
  });
});

promisify(api)(true).then(data => {
  console.log('data', data);
}).catch(error => {
  console.log('error', error);
});

- $(".des-info__wrapper h2").addClass("_fix");
+ $(this).addClass("_fix");

- if (this.hasownproperty("secondMethod")) {
+ if (this.hasOwnProperty("secondMethod")) {

или

if ('secondMethod' in this) {
    ...
}

Вообще не понятно, почему в одном экземпляре класса будет метод, а другом - нет.

<template>
  <label>
    <input
      type="checkbox"
      @change="debouncedCheckboxChange"
      v-model="form.c1"
    />
    Check 1
  </label>
  <label>
    <input
      type="checkbox"
      @change="debouncedCheckboxChange"
      v-model="form.c2"
    />
    Check 2
  </label>
  <pre>{{ form }}</pre>
</template>

<script>
const debounce = (handle, duration = 0) => {
  let timeout = null;

  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => handle.apply(this, args), duration);
  };
};

export default {
  name: 'App',
  data() {
    return {
      form: {}
    };
  },
  methods: {
    checkboxChange() {
      this.form.date = Date.now();
    }
  },
  created() {
    this.debouncedCheckboxChange = debounce(this.checkboxChange, 1500);
  }
};
</script>

Пример. Документация.

Сделал пару примеров. Если захотите писать черным цветом, то можно использовать mix-blend-mode: overlay. Возможно существует более простое/красивое/элегантное решение, но я сейчас не придумаю такое. Можно сделать намного проще, если не будет следующего условия:

чтобы линии начинались с конца второй строки и примыкали ко второй строке

Либо вручную разделять на строки и только последней строке добавлять подчеркивание.

Dynamic Imports

PHP лучше работает с объектом типа FormData. Просто преобразуйте свой объект в него. И заголовок можно убрать.

const formData = new FormData();
for (const key in obj) {
    formData.append(key, obj[key]);
}
...
xhr.send(formData);

В том случае, если сервер не будет получать данные, можете попробовать добавить следующий код:

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

А ещё можно воспользоваться fetch.

const url = new URL(location.href)
url.searchParams.set('session', '1')
history.pushState(null, document.title, url.toString())

или

const params = new URLSearchParams(location.search);
params.set('session', '1');
location.search = params.toString();

const checkTag = (parent, tag, isImmediate = false) => {
	const selector = isImmediate ? `:scope > ${tag}` : tag;
	const element = parent.querySelector(selector);
	
	return element !== null;
};

String.prototype.myTrim = function () {
	return this.trim();
};

А выводить пробовали так?
console.log('result:', result[0]);