带有.includes方法的JavaScript for..of循环-初学者遇到麻烦

问题描述

我才刚刚开始学习JavaScript，所以这对我来说可能是一个简单的错误，但是在我遇到麻烦的地方，我应该为每个数组中的每个字符串以及当我向控制台打印不同的指令到控制台时运行我现在所拥有的，它每次都重复相同的元素，并在每次迭代时向它们添加下一个字符串，而不是为新数组中的每个单独的字符串提供指令。

这是我的代码：

const coffees = [ 
    "light colombian roast","hawaiian dark roast","guatemalan blend medium roast","madagascar espresso roast","jamaican dark blue","jamaican medium roast","salvador robusto light","bali espresso roast"]

let lightRoast = []
let medRoast = []
let darkOrEspresso = []

for (const roast of coffees) 
{
    if (roast.includes("light") )
    {
        lightRoast.push(roast)
        console.log(`I'll have the ${lightRoast} and drink it black`)
    }
    else if (roast.includes("medium"))
    {
        medRoast.push(roast)
        console.log(`I'll have the ${medRoast} and add cream only`)
    }
    else if (roast.includes("dark") || roast.includes("espresso"))
    {
        darkOrEspresso.push(roast)
        console.log(`I'll have the ${darkOrEspresso} and add cream and sugar`)
    }
}

我正在尝试让控制台为新数组中的每个单独的字符串打印这些说明，具体取决于它是在亮，中还是暗数组中

"I'll have the xxx and drink it black" 
"I'll have the xxx and add cream only"
"I'll have the xxx and add cream and sugar"

但是，相反，我得到的结果是这样的，其中字符串位于正确的数组中，但是被添加到彼此的顶部，而不是每个字符串都有自己的行：

I'll have the light colombian roast,salvador robusto light and drink it black
I'll have the guatemalan blend medium roast,jamaican medium roast and add cream only
I'll have the hawaiian dark roast,madagascar espresso roast,jamaican dark blue,bali espresso roast and add cream and sugar

有人会介意看看我在做什么错吗？希望我的指示有意义。

解决方法

尝试仅打印烧烤，而不打印整个数组：

const coffees = [ 
    "light colombian roast","hawaiian dark roast","guatemalan blend medium roast","madagascar espresso roast","jamaican dark blue","jamaican medium roast","salvador robusto light","bali espresso roast"]

let lightRoast = []
let medRoast = []
let darkOrEspresso = []

for (const roast of coffees) 
{
    if (roast.includes("light") )
    {
        lightRoast.push(roast)
        console.log(`I'll have the ${roast} and drink it black`)
    }
    else if (roast.includes("medium"))
    {
        medRoast.push(roast)
        console.log(`I'll have the ${roast} and add cream only`)
    }
    else if (roast.includes("dark") || roast.includes("espresso"))
    {
        darkOrEspresso.push(roast)
        console.log(`I'll have the ${roast} and add cream and sugar`)
    }
}
console.log(lightRoast,medRoast,darkOrEspresso);

,

精确的变量名有助于防止错误。在这里，您的lightRoast变量是到目前为止已被识别为淡色的咖啡名称的数组。考虑重命名为lightRoastNames（复数），然后将roast重命名为roastName（单数）。然后，问题应该很明显-您正在使用

console.log(`I'll have the ${lightRoastNames} and drink it black`)

何时应该使用

console.log(`I'll have the ${roastName} and drink it black`)

const coffees = [
  "light colombian roast","bali espresso roast"
]

const lightRoastNames = [];
const medRoastNames = [];
const darkOrExpressoRoastNames = [];

for (const roastName of coffees) {
  if (roastName.includes("light")) {
    lightRoastNames.push(roastName)
    console.log(`I'll have the ${roastName} and drink it black`)
  } else if (roastName.includes("medium")) {
    medRoastNames.push(roastName)
    console.log(`I'll have the ${roastName} and add cream only`)
  } else if (roastName.includes("dark") || roastName.includes("espresso")) {
    darkOrExpressoRoastNames.push(roastName)
    console.log(`I'll have the ${roastName} and add cream and sugar`)
  }
}

但是，由于您似乎没有在任何地方使用数组，因此可以完全删除它们并使代码更简单：

const coffees = [
  "light colombian roast","bali espresso roast"
]

for (const roastName of coffees) {
  if (roastName.includes("light")) {
    console.log(`I'll have the ${roastName} and drink it black`)
  } else if (roastName.includes("medium")) {
    console.log(`I'll have the ${roastName} and add cream only`)
  } else if (roastName.includes("dark") || roastName.includes("espresso")) {
    console.log(`I'll have the ${roastName} and add cream and sugar`)
  }
}