创建一个函数。例如，
我有两个'for'代码块，它们非常相似，除了Object.values(feelings(和Object.value(feelings2(part。我正试图创建一个新的"const-allFeelings"，其中包含以下代码，以便实现DRY(不要重复自己(：
tbody += '<tr>'; tbody += `<td class="menuItem">${menuItem}</td>`; tbody += `<div class="hide description">${description}</div>`; tbody += `<td>${value}</td>`; tbody += '</tr>';
请不要把它误认为是concat，因为我不想连接这些数组。他们将保持分离。
let tbody = '<tbody>';
for (const { menuItem, description, value } of Object.values(feelings)) {
tbody += '<tr>';
tbody += `<td class="menuItem">${menuItem}</td>`;
tbody += `<div class="hide description">${description}</div>`;
tbody += `<td>${value}</td>`;
tbody += '</tr>';
}
for (const { menuItem, description, value } of Object.values(feelings2)) {
tbody += '<tr>';
tbody += `<td class="menuItem">${menuItem}</td>`;
tbody += `<div class="hide description">${description}</div>`;
tbody += `<td>${value}</td>`;
tbody += '</tr>';
}
tbody += '</tbody>';
document.getElementById('tableData').innerHTML = tbody;
concat不会改变现有数组，而是创建一个新数组。仅仅为了渲染而创建这样一个组合数组，然后不使用它似乎是可行的。您的feelings和feelings2将保持分离。
将所有内容嵌入到模板文字中也会很好。
const tbody = `
<tbody>
${Object.values(feelings).concat(Object.values(feelings2)).map(({ menuItem, description, value }) => `
<tr>
<td class="menuItem">${menuItem}</td>
<div class="hide description">${description}</div>
<td>${value}</td>
</tr>
`)}
</tbody>
`;
let tbody = '<tbody>';
function addToTableBody(feeling) {
let returnVal = "";
for (const {
menuItem,
description,
value
} of Object.values(feeling)) {
returnVal += `
<tr>
<td class="menuItem">${menuItem}</td>
<div class="hide description">${description}</div>
<td>${value}</td>
</tr>
`
}
return returnVal;
}
tbody += addToTableBody(feelings)
tbody += addToTableBody(feelings2);
tbody += '</tbody>';
document.getElementById('tableData').innerHTML = tbody;