Это правильный способ создать список из массива с объектами?
Я недавно изучал ES6. Я следую за курсом Уэса Боса «ES6 для всех» и хотел сам написать сценарии, чтобы проверить, насколько я усвоил ценную информацию.
В этом коде я пытаюсь создать список HTML из заданной переменной, которая представляет собой массив с объектами внутри. Итак, в конце концов я заставил этот код работать, но я не уверен, правильный ли это способ сделать это, не могли бы вы взглянуть на него и сказать мне, что можно исправить и изменить для лучшего решения? Спасибо
const list = document.createElement('ul');
const students = [{
name: 'Tom',
gpa: 4.2,
course: 'MKDf-16/1',
gender: 'male'
},
{
name: 'Artiom',
gpa: 2.2,
course: 'MKDf-16/1',
gender: 'male'
},
{
name: 'Alison',
gpa: 4.8,
course: 'MKDf-16/2',
gender: 'female'
},
{
name: 'John',
gpa: 4.1,
course: 'MKDf-16/5',
gender: 'male'
}
];
const output = students.map(student => {
return `
${student.name}'s GPA is ${student.gpa}
`
});
output.forEach((x, index) => {
console.info(output[index]);
let listItem = document.createElement('li');
listItem.innerHTML = output[index];
list.appendChild(listItem);
});
document.body.appendChild(list);Код мне нравится, возможно, вы сможете объединить map и forEach
не обязательно ошибаться с этим кодом - однако CodeReview лучше публиковать, чем SO tbh ...
Для функции стрелки вы можете удалить фигурные скобки и оператор возврата: () => `${student.name}'s ....`
Спасибо вам, ребята! Я очистил свой код после этих предложений: codepen.io/anon/pen/LrRerY
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
const students = [{
name: 'Tom',
gpa: 4.2,
course: 'MKDf-16/1',
gender: 'male'
},
{
name: 'Artiom',
gpa: 2.2,
course: 'MKDf-16/1',
gender: 'male'
},
{
name: 'Alison',
gpa: 4.8,
course: 'MKDf-16/2',
gender: 'female'
},
{
name: 'John',
gpa: 4.1,
course: 'MKDf-16/5',
gender: 'male'
}
];
const list = document.createElement('ul');
list.innerHTML = students.map(ob => `<li>${ob.name}'s GPA is ${ob.gpa}</li>`).join("");
document.body.appendChild(list);Да! Я так и искал. Помню, где-то видел лайнер, но не нашел. Большое спасибо, Роко
А как насчет студента по имени <script>location = "http://thatpornsite.com";</script>? :-)
Ха-ха, да, я знаю о XSS, конечно, я смотрю, - объясняет Уэс о дезинфекции входных данных.
@ 6502 такой студент должен быть экранирован в вашей базе данных, а не тогда, когда такие данные возвращаются в представление.
@ RokoC.Buljan: сбежал в базе данных? База данных - это данные, и ее даже не должно волновать, что вы собираетесь использовать HTML. Вы атакуете проблему не с той стороны ...
@ 6502, значит, вы говорите, что мы должны хранить необработанные строки в базе данных? Я буду записывать. В любом случае createElement или парсер - всегда лучшее решение, но вам не следует бояться использования innerHTML (или .html() в jQuery), когда вы знаете, что делаете :)
@ RokoC.Buljan: Я думаю, что база данных должна содержать реальные данные (что, если вам нужно написать какую-то программу для их извлечения и создания, например, стороны сервера PDF?). Кроме того, с искаженными данными даже запросы становятся проблематичными, поскольку вам также необходимо искажать их, иначе неискаженный текст в запросе не будет соответствовать. На мой взгляд, даже веб-сервис должен возвращать данные JSON с неискаженным содержимым базы данных ... презентация - это проблема клиента, которая просто должна нам использовать правильные инструменты (и это не просто взять содержимое JSON - предположительно текст - и проанализировать его как HTML).
«Правильный» способ - это, вероятно, не использовать innerHTML для анализа содержимого, которое включает внешние данные. Гораздо лучше создать элементы <li> и вместо них установить их textContent, избегая безумной очистки и цитирования.
К сожалению, базовый синтаксис Javascript для создания элементов и установки их содержимого довольно уродлив и многословен. В моем коде обычно я получить функцию полезности для этого и такой код:
el("ul", {},
...(content.map(x =>
el("li", {textContent: `${x.name} GPA is ${x.gpa}`}))));
может создать узел ul, содержащий по одному узлу li для каждого элемента в массиве content.
Никакого анализа HTML, цитирования или очистки не требуется.
Лучше использовать
const, а неlet, если вы не собираетесь переназначать рассматриваемую переменную. Лучше назначитьtextContentэлемента, чем егоinnerHTML, если вы вставляете текст. Используйте аргумент первый функцииforEachдля ссылки на элемент в массиве - не используйтеindex, если вам не нужно.