如何将for...of循环转换为普通for循环以解决ESLint报错

需要在不修改ESLint配置的前提下，改写for...of循环解决规则报错，触发的报错原文及翻译如下：

iterators/generators require regenerator-runtime, which is too heavyweight for this guide to allow them. Separately, loops should be avoided in favor of array iterations
迭代器/生成器依赖的regenerator-runtime体积过大，不符合当前规范要求；同时规范要求尽量避免使用循环，优先采用数组迭代方法实现逻辑。

原有可正常运行的for...of实现代码：

let str = '';
const arr = [];
for (const person of featuredObject) {
  str = `        
    <div class="portfolio"><img src=${person.image} alt="#"></div>
    <div class="card-one">
        <h3 class="name">${person.Name}</h3>
        <p class="myTitle">${person.title}</p>
        <p class="myDescription">${person.description}</p>
    </div>
</div>`;
  arr.push(str);
}

之前写的普通for循环无法运行，核心错误有两处：

• 循环外额外定义了值为空字符串的常量person，循环全程没有通过索引获取featuredObject中的实际遍历项
• 模板字符串中一直引用这个空值person，访问image、Name等属性时全部返回undefined，最终生成的内容不符合预期

错误改写代码如下：

let str = '';
const person = ''; // 冗余错误定义
const arr = [];
for (let i = 0; i < featuredObject.length; i += 1) {
  // 缺失获取当前遍历元素的逻辑
  str= `
    <div class="portfolio"><img src=${person.image} alt="#"></div>
    <div class="card-one">
        <h3 class="name">${person.Name}</h3>
        <p class="myTitle">${person.title}</p>
        <p class="myDescription">${person.description}</p>
    </div>
</div>`;
  arr.push(str);
}

写法1：修正后的普通for循环 #

只需要在循环内部通过索引i拿到当前遍历的元素即可，不需要在循环外提前定义person变量：

const arr = [];
for (let i = 0; i < featuredObject.length; i += 1) {
  const person = featuredObject[i];
  const str = `
    <div class="portfolio"><img src=${person.image} alt="#"></div>
    <div class="card-one">
        <h3 class="name">${person.Name}</h3>
        <p class="myTitle">${person.title}</p>
        <p class="myDescription">${person.description}</p>
    </div>
</div>`;
  arr.push(str);
}

写法2：符合ESLint推荐规范的数组迭代实现 #

报错明确建议优先使用数组迭代代替循环，直接用Array.prototype.map即可，代码更简洁，完全不会触发规则：

const arr = featuredObject.map(person => `
  <div class="portfolio"><img src=${person.image} alt="#"></div>
  <div class="card-one">
      <h3 class="name">${person.Name}</h3>
      <p class="myTitle">${person.title}</p>
      <p class="myDescription">${person.description}</p>
  </div>
</div>`);

该写法不需要提前声明空数组arr和临时变量str，map会遍历所有元素后直接返回组装完成的结果数组。

内容的提问来源于stack exchange，提问作者Beans