Проблемы JavaScript - элементы, строки и циклы

Как и в случае с любыми другими приложениями, при написании приложений на JavaScript приходится решать сложные проблемы.

В этой статье мы рассмотрим некоторые решения распространенных проблем с JavaScript.

Удалить элемент по идентификатору

Мы можем удалить элемент по ID.

Есть несколько способов сделать это. Например, мы можем установить для свойства outerHTML элемента пустую строку:

document.getElementById("element-id").outerHTML = "";

Мы также можем получить родительский узел элемента.

Тогда мы можем вызвать removeChild для родителя и передать элемент, который мы хотим удалить, в качестве аргумента:

const element = document.getElementById("element-id");
element.parentNode.removeChild(element);

Смещение привязки HTML для настройки другого элемента

Мы можем сделать свойство position элемента относительным, а затем мы можем перемещать его куда захотим.

Например, если у нас есть элемент a:

<a class="anchor"></a>

Затем мы можем переместить его, написав:

a.anchor {
  display: block;
  position: relative;
  top: -250px;
  visibility: hidden;
}

Установив position на relative, мы можем переместить элемент привязки куда захотим.

Сравнение объектов JavaScript

Мы можем сравнивать объекты несколькими способами.

Однако мы не можем использовать операторы сравнения для их сравнения, поскольку два объекта считаются равными им только в том случае, если они ссылаются на один и тот же объект в памяти.

То же самое и с Object.is.

Следовательно, мы не можем использовать ни один из них.

Вместо этого один из способов сравнить 2 объекта - использовать метод JSON.stringify.

Если у наших объектов есть только примитивные значения или другие объекты с ними в объекте, то мы можем его использовать.

Мы можем написать:

JSON.stringify(obj1) === JSON.stringify(obj2)

При этом важен порядок свойств.

Если их порядок другой, то они считаются разными.

Итак, если у нас есть:

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 2, a: 1 };

Затем они будут структурированы в указанном порядке, так что это будут разные строки.

Мы также можем использовать Lodash для их сравнения. У него есть isEqual метод их сравнения.

Например, мы можем написать:

_.isEqual(obj1 , obj2)

сравнить их.

Получить выбранный вариант из раскрывающегося списка

Мы можем использовать text метод jQuery, чтобы получить выбранное значение.

Например, мы можем написать:

const selected = $('#dropdown').find(":selected").text();

Предполагая, что элемент select имеет идентификатор dropdown, мы можем использовать свойство :selected, чтобы получить выбранный элемент.

Затем мы можем использовать метод text, чтобы получить фактическое выбранное значение.

val() не будет работать, поскольку нажатие на параметр не меняет значение раскрывающегося списка.

Добавляется только свойство :selected.

Async и Await и forEach

Мы не можем использовать forEach с async и await в параллельном или последовательном запуске.

Если мы хотим выполнить несколько обещаний последовательно, мы можем использовать цикл for-of:

const printFiles = async () => {
  const files = await getFilePaths();
  for (const file of files) {
    const contents = await fs.readFile(file, 'utf8');
    console.log(contents);
  }
}

Цикл for-of будет запускать обещания последовательно.

Кроме того, с ES2018 есть много чего ждать.

Например, мы можем написать:

const printFiles = async () {
  const files = await getFilePaths()
  for await (const file of fs.readFile(file, 'utf8')) {
    console.log(contents)
  }
}

Они оба делают одно и то же.

Если мы хотим запускать обещания параллельно, мы можем использовать Promise.all.

Например, мы можем написать:

const printFiles = async () => {
  const files = await getFilePaths();
  const contents = await Promise.all(files.map((file) => fs.readFile(file, 'utf8')));
  console.log(contents);
}

Мы сопоставляем записи files с обещаниями, чтобы мы могли запускать их параллельно с Promise.all.

Проверить, заканчивается ли строка заданной подстрокой

У строки есть метод endsWith, чтобы проверить, заканчивается ли строка заданной подстрокой.

Например, мы можем написать:

const endWithWord = str.endsWith("world");

Мы просто вызываем endsWith с подстрокой, которую хотим проверить.

Заключение

Асинхронные функции не работают с forEach. Вместо этого мы можем использовать for-of, for-await-of или Promise.all для выполнения нескольких обещаний.

Мы можем использовать endsWith, чтобы проверить, заканчивается ли строка заданной строкой.

Чтобы получить выбранный элемент из раскрывающегося списка, мы можем использовать свойство :selected CSS.

Мы можем удалить элемент по идентификатору, получив его родительский элемент, а затем вызвать removeChild для элемента, который мы хотим удалить.