對于我當前的代碼呈現昏迷，我的串列項之間的引號，不確定是什么問題請幫忙。
我將代碼更改為更易于閱讀：三元運算子中的“null”有效并且更改它不會影響問題或結果。（currentCollection[indexOf item].Words 是一個單詞陣列，正則運算式 = /[az]/g）
for (let i = 0; i < currentCollection.length; i ) {
let words = currentCollection[i].Words.join(" ")
elementsString = `<div><h2>${currentCollection[i].name}</h2>
<ul>
${currentCollection[i].Words.map(word => regex.test(word) ? (`<li>${word}</li>`) : null
)}</ul></div>`
uj5u.com熱心網友回復：
看起來你正在嘗試做這樣的事情。我不確定那test是什么意思，所以我把它省略了。但我添加了一些 CSS 讓它看起來很漂亮。
const arr = [
{ id: 1, name: 'Alpaca', words:['a', 'b'] },
{ id: 2, name: 'Moose', words:['c', 'd'] },
{ id: 3, name: 'Tiger', words:['e', 'f'] },
{ id: 4, name: 'Sparrow', words:['g', 'h'] }
];
// `map` over the array of words to create a
// list of items
function getItems(words) {
return words.map(word => {
return `<li>${word}</li>`;
}).join('');
}
// `map` over the array to create a heading
// and a list of items in an unordered list element
const html = arr.map(obj => {
const { name, words } = obj;
return `
<div>
<h2>${name}<h2>
<ul>${getItems(words)}</ul>
</div>
`;
}).join('');
document.body.innerHTML = html;h2 { font-size: 1em; }
ul { font-weight: 400; list-style: none; margin-left: 0; padding-left: 0; }
li { padding: 0.2em; margin-left: 0.5em; text-transform: uppercase; }
li:hover { cursor: pointer; background-color: #ffff00; }附加檔案
- 解構賦值
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/489558.html
標籤：javascript html dom