Загрузка...

Помогите с темой Шаблонные строки на примере

Тема в разделе Node.js создана пользователем gezhaf 19 ноя 2023. (поднята 19 ноя 2023) 182 просмотра

Сортировать
  1. gezhaf
    gezhaf Автор темы 19 ноя 2023 2 18 июн 2022
    1. const result = {
    2. success: ["max-length", "no-amd", "prefer-arrow-functions"],
    3. failure: ["no-var", "var-on-top", "linebreak"],
    4. skipped: ["no-extra-semi", "no-dup-keys"]
    5. };
    6. function makeList(arr) {
    7. "use strict";
    8. // change code below this line
    9. const failureItems = arr.map(item => `<li class="text-warning">${item}</li>`);
    10. // change code above this line
    11. return failureItems;
    12. }
    13. const failuresList = makeList(result.failure);

      Я не понимаю 9 строку с методом map, насколько понял он используется для того что бы создать новый массив из того что принимает в параметрах, но функция в параметрах метода меня запутывает.
     
    19 ноя 2023
  2. ChatGPT
    ChatGPT 19 ноя 2023 2250 14 мар 2023
    gezhaf, да, вы правильно поняли. Метод `map()` используется для создания нового массива путем применения функции к каждому элементу исходного массива. В данном случае, функция, переданная в `map()`, принимает один параметр `item`, который представляет каждый элемент массива `arr`.

    В данном коде, функция переданная в `map()` использует стрелочную функцию для создания нового массива `failureItems`. Каждый элемент нового массива представляет собой строку `<li class="text-warning">${item}</li>`, где `${item}` является значением элемента из исходного массива `arr`. Таким образом, `failureItems` будет содержать массив строк, каждая из которых будет представлять элементы исходного массива `arr` в виде HTML-элемента списка.

    Надеюсь, это помогло вам разобраться с 9-й строкой кода. Если у вас есть еще вопросы, не стесняйтесь задавать.
     
    19 ноя 2023
    1. gezhaf Автор темы
      19 ноя 2023
    2. ChatGPT
      gezhaf, конечно, я готов помочь! Чем я могу быть полезен?
      19 ноя 2023
  3. h00k_fl4me0ut
    h00k_fl4me0ut 19 ноя 2023 Заблокирован(а) 9 16 июл 2022
    Эта строка создает новый массив failureItems, пройдя по каждому элементу массива arr и применяя стрелочную функцию к каждому элементу.
    Стрелочная функция (item => <li class="text-warning">${item}</li>) - это сокращенная форма для функции. В данном случае, она принимает один параметр item и возвращает строку, представляющую элемент в виде HTML-тега <li> с классом "text-warning". Таким образом, каждый элемент массива arr будет преобразован в соответствующий HTML-тег.
    Например, если arr содержит элемент "no-var", то failureItems будет содержать элемент <li class="text-warning">no-var</li>.
    Это полезный способ создания нового массива, преобразуя каждый элемент с использованием определенной логики.
     
    19 ноя 2023
    1. gezhaf Автор темы
      19 ноя 2023
  4. Toil
    Toil 19 ноя 2023 ������� ������ :coder: 3543 18 ноя 2018
    а что она запутывает? Это обычная функция, только анонимная, которая оборачивает текст в хтмл тег
     
    19 ноя 2023
    1. Посмотреть предыдущие комментарии (1)
    2. gezhaf Автор темы
      Toil, спасибо за ответ
      19 ноя 2023
    3. Toil
      gezhaf,

      здесь ты сразу обращаешься по ключу объекта т.к. у тебя есть один объект и ты можешь себе спокойно это позволить
      А здесь, ты обращаешься уже по элементу массива, в данном случае это "no-var", "var-on-top" и "linebreak" , аналогичный код ты можешь сделать с помощью ручного пуша в новый массив, но тебе бы пришлось дублировать кучу кода
      Код
      new_array = [];
      

      
new_array.push(`<li...>${arr[0]}</li>`)
      
new_array.push(`<li...>${arr[1]}</li>`)
      
new_array.push(`<li...>${arr[2]}</li>`)
      или можешь сделать тоже самое в цикле forof и тогда никаких различий не будет, кроме того, что для цикла нужно будет задать пустой массив заранее и он будет немного медленнее
      Код
      new_array = [];
      

      
for (const item of arr) {
      
    new_array.push(`<li...>${item}</li>`)
      
}
      19 ноя 2023
    4. gezhaf Автор темы
      Toil, ОГРОМНАЯ благодарность, за то что так понятно объяснил. Держи утку :duck_like:
      19 ноя 2023
Загрузка...
Top