将 forEach 循环输出到innerHTML

Question

愚蠢的问题，习惯使用 ES6 / Vanilla JS。

这是与 console.log 完美配合的循环......

const theServices = 
      ["Accounting", "Big Data", "Business", "Category", "Concept", "Consultant", "Consumer", "Corporate", "Cost", "Customer", "Development", "Digital", "Distribution", "Due Diligence", "Financial", "Global Sourcing", "Go-to-market", "Growth", "Improvement", "Information", "Technology", "Innovation", "Lean", "Management", "Manufacturing", "Marketing", "Merchandising", "Mergers & Acquisitions", "Operations", "Organization / Organizational", "Performance", "Portfolio", "Post-merger", "Pricing", "Procurement", "Product", "Profitability", "Purchasing", "Restructuring", "Retail", "Revenue", "Sales", "Strategy", "Supply Chain", "Sustainable", "Technology", "Transformation", "Turnaround", "Zero-based", "Budgeting"];


theServices.forEach(function(element) {
    let formName = element;
    formName = formName.replace(/[^A-Za-z0-9]/g, '_').toLowerCase();

console.log( `
<div><input type="checkbox" id="${formName}" name="cpg_services" value="${formName}" />
<label for="${formName}">${element}
</label>
</div>
`)
});

<div id="place-here"></div>

现在尝试使用innerHTML 插入到DOM 中会返回未定义。输出这样的循环的适当方法是什么？

const theServices = 
      ["Accounting", "Big Data", "Business", "Category", "Concept", "Consultant", "Consumer", "Corporate", "Cost", "Customer", "Development", "Digital", "Distribution", "Due Diligence", "Financial", "Global Sourcing", "Go-to-market", "Growth", "Improvement", "Information", "Technology", "Innovation", "Lean", "Management", "Manufacturing", "Marketing", "Merchandising", "Mergers & Acquisitions", "Operations", "Organization / Organizational", "Performance", "Portfolio", "Post-merger", "Pricing", "Procurement", "Product", "Profitability", "Purchasing", "Restructuring", "Retail", "Revenue", "Sales", "Strategy", "Supply Chain", "Sustainable", "Technology", "Transformation", "Turnaround", "Zero-based", "Budgeting"];


let theseCheckBoxes =
    theServices.forEach(function(element) {
        let formName = element;
        formName = formName.replace(/[^A-Za-z0-9]/g, '_').toLowerCase();

        return `
<div><input type="checkbox" id="${formName}" name="cpg_services" value="${formName}" />
<label for="${formName}">${element}
</label>
</div>
`
    });
;

document.querySelector('#place_here').innerHTML = theseCheckBoxes;

<div id="place_here"></div>

Answer 1

ForEach不返回任何内容。所以theseCheckBoxes将是未定义的。尝试将其更改为map()和join()结果。

const theServices = 
      ["Accounting", "Big Data", "Business", "Category", "Concept", "Consultant", "Consumer", "Corporate", "Cost", "Customer", "Development", "Digital", "Distribution", "Due Diligence", "Financial", "Global Sourcing", "Go-to-market", "Growth", "Improvement", "Information", "Technology", "Innovation", "Lean", "Management", "Manufacturing", "Marketing", "Merchandising", "Mergers & Acquisitions", "Operations", "Organization / Organizational", "Performance", "Portfolio", "Post-merger", "Pricing", "Procurement", "Product", "Profitability", "Purchasing", "Restructuring", "Retail", "Revenue", "Sales", "Strategy", "Supply Chain", "Sustainable", "Technology", "Transformation", "Turnaround", "Zero-based", "Budgeting"];


let theseCheckBoxes =
    theServices.map(function(element) {   // <-- map instead of forEach
        let formName = element;
        formName = formName.replace(/[^A-Za-z0-9]/g, '_').toLowerCase();

        return `
<div><input type="checkbox" id="${formName}" name="cpg_services" value="${formName}" />
<label for="${formName}">${element}
</label>
</div>
`
    });
;

document.querySelector('#place_here').innerHTML = theseCheckBoxes.join('\n');

<div id="place_here"></div>