Две лишние запятые

Question

В body должен появится див с textContent = Заголовок. Но почему-то появляется Заголовок,,.

class Modal {
  constructor() {}

  createModal(...args) {
    const modal = document.createElement('div');
    args.forEach((el, i) => {
      const item = document.createElement('div');
      item.classList = 'item';
      if (i === 3) {
        item.innerHTML = el;
      } else {
        item.textContent = el;
      }
      modal.appendChild(item);
    });
    document.body.appendChild(modal);
  }
}

class NewModalWindow extends Modal {
  constructor({
    title = 'Заголовок',
    description = '',
    content = ''
  }) {
    super();
    this.title = title;
    this.description = description;
    this.content = content;
  }

  a() {
    super.createModal(Object.values(this));
  }
}

const a = new NewModalWindow({}).a();

<body></body>

Answer 1

Object.values возвращает массив значений. В данном случае

['Заголовок', '', '']

Далее этот массив передается параметром в метод createModal. Так как данный метод объявлен как createModal(...args) { параметры переданные в него собираются в массив args.

В данном случае массив args будет содержать только один элемент. Значение которого будет преобразовано в текст в строке

item.textContent = el;

на первой же итерации.

Это равносильно

item.textContent = ['Заголовок', '', ''].toString();

Вызов .toString для массива равносилен вызову .join(','), следовательно все элементы объединяются в строку с разделителем ,. Так как два последних элемента - пустые строки, то в итоговой строке будут две запятые в конце, которые стоят перед первой постой строкой и перед второй.

Для исправления достаточно при вызове createModal добавить spread operator

super.createModal(...Object.values(this));

В этом случае массив args будет соответствовать массиву возвращаемому Object.values(this).

Однако, стоит учитывать, что в текущем примере в этом массиве всего три элемента, а значит максимальный индекс 2, следовательно условие if (i === 3) { всегда будет ложно.

А также это условие не гарантирует, что по указанному индексу будет именно поле, которое нужно вывести в виде разметки.

Для решения можно передавать не массив, а объект, и проверять поле по имени.

БЛОГ НА HUSL

Две лишние запятые

Ответы (1 шт):