将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>

​

Answer 2

您不能从forEach执行return a value，但您可以在迭代时构建html字符串，或者使用map。

​

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();

        theseCheckBoxes +=`
<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 3

我想添加另一个解决方案，那就是使用reduce将数组缩减为如下所示的字符串：

​

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 str = theServices.reduce(function(str, element) {
  let formName = element;
  formName = formName.replace(/[^A-Za-z0-9]/g, '_').toLowerCase();

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

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

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

​