JavaScript类数组对象.map()

Question

你好，我想使用.map方法将我的数组中的排名和谷物交换位置，但是我得到了一个未定义的console.log。根据反馈，我已经使一切正常工作，但我仍然有点困惑。我不确定如何匹配反向排列的谷物与排名？我完全被难住了。

var breakFastFood =[
  {
     cereal: "Captain Crunch",
     scale: "Yuck!"

  },
  {
    cereal: "Grape Nuts",
    scale: "Yum!"

 },
 {
  cereal: "Fruity Pebbles",
  scale: "Yuck!"

},
{
  cereal: "Oatmeal",
  scale: "Yum!"

}
];
var cereals = breakFastFood.map(function(bFood){
 return breakFastFood.cereal
});

var rank = breakFastFood.map(function(standing){
 return breakFastFood.scale
});

rank.forEach(function(rating){console.log(rating)});
cereals.forEach(function(food){console.log(food)});

- binarie

---

“如何将谷物与排名按相反顺序匹配”是什么意思？ - Mamun

Answer 1

你在 return 语句中没有使用函数的 parameter 参数：

最初的回答：

var breakFastFood =[
  {
     cereal: "Captain Crunch",
     scale: "Yuck!"

  },
  {
    cereal: "Grape Nuts",
    scale: "Yum!"

 },
 {
  cereal: "Fruity Pebbles",
  scale: "Yuck!"

},
{
  cereal: "Oatmeal",
  scale: "Yum!"

}
];
var cereals = breakFastFood.map(function(bFood){
 return bFood.cereal
});

var rank = breakFastFood.map(function(standing){
 return standing.scale
});

rank.forEach(function(rating){console.log(rating)});
cereals.forEach(function(food){console.log(food)});

你可以使用简写属性：

最初的回答：您还可以使用简写属性：

var breakFastFood =[
  {
     cereal: "Captain Crunch",
     scale: "Yuck!"

  },
  {
    cereal: "Grape Nuts",
    scale: "Yum!"

 },
 {
  cereal: "Fruity Pebbles",
  scale: "Yuck!"

},
{
  cereal: "Oatmeal",
  scale: "Yum!"

}
];
var cereals = breakFastFood.map(({cereal}) => cereal);

var rank = breakFastFood.map(({scale}) => scale);

rank.forEach(function(rating){console.log(rating)});
cereals.forEach(function(food){console.log(food)});

- Mamun

Answer 2

您没有使用Array.map()回调函数的参数：

var breakFastFood =[
  {cereal: "Captain Crunch", scale: "Yuck!"},
  {cereal: "Grape Nuts", scale: "Yum!"},
  {cereal: "Fruity Pebbles", scale: "Yuck!"},
  {cereal: "Oatmeal", scale: "Yum!"}
];

var cereals = breakFastFood.map(function(bFood)
{
    return bFood.cereal;
});

var rank = breakFastFood.map(function(standing)
{
    return standing.scale;
});

rank.forEach(function(rating){console.log(rating)});
cereals.forEach(function(food){console.log(food)});

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

注意，你也可以在对象数组上只迭代一次来获得相同的结果：

var breakFastFood = [
  {cereal: "Captain Crunch", scale: "Yuck!"},
  {cereal: "Grape Nuts", scale: "Yum!"},
  {cereal: "Fruity Pebbles", scale: "Yuck!"},
  {cereal: "Oatmeal", scale: "Yum!"}
];

var cereals = [], rank = [];

breakFastFood.forEach(
    ({cereal, scale}) => (cereals.push(cereal), rank.push(scale))
);

rank.forEach((rating) => console.log(rating));
cereals.forEach((food) => console.log(food));

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

- Shidersz

Answer 3

你正在错误地访问参数

var breakFastFood =[{cereal: "Captain Crunch",scale: "Yuck!"},{cereal: "Grape Nuts",scale: "Yum!"},{cereal: "Fruity Pebbles",scale: "Yuck!"},{cereal: "Oatmeal",scale: "Yum!"}];

var cereals = breakFastFood.map(function(bFood){
 return bFood.cereal
});

var rank = breakFastFood.map(function(standing){
 return standing.scale
});

rank.forEach(function(rating){console.log(rating)});
cereals.forEach(function(food){console.log(food)});

- Code Maniac

Answer 4

你正在寻找 breakFastFood 数组上的 cereal 和 scale 属性，而不是在 Array.map 回调中传递的各个对象上。

var breakFastFood = [{"cereal":"Captain Crunch","scale":"Yuck!"},{"cereal":"Grape Nuts","scale":"Yum!"},{"cereal":"Fruity Pebbles","scale":"Yuck!"},{"cereal":"Oatmeal","scale":"Yum!"}];
var cereals = breakFastFood.map(function(bFood) { return bFood.cereal; });

var rank = breakFastFood.map(function(standing) { return standing.scale;});

rank.forEach(rating => console.log(rating));
cereals.forEach(food => console.log(food));

你的代码可以进一步简化，使用箭头函数=>和解构赋值：

const breakFastFood = [{"cereal":"Captain Crunch","scale":"Yuck!"},{"cereal":"Grape Nuts","scale":"Yum!"},{"cereal":"Fruity Pebbles","scale":"Yuck!"},{"cereal":"Oatmeal","scale":"Yum!"}];
const cereals = breakFastFood.map(({cereal}) => cereal);

const rank = breakFastFood.map(({scale}) => scale);

rank.forEach(rating => console.log(rating));
cereals.forEach(food => console.log(food));

- Fullstack Guy

---

完美。谢谢。 - binarie

@binarie 很高兴我能帮到你！ - Fullstack Guy

伙计，我犯了个错误。我该如何将谷物与排名匹配起来呢？例如，下一行不是Captain Crunch而是Yuk。我希望它能显示为“Yuck（下一行）Captain Crunch”。对于我的错误，我感到很抱歉。我被难住了。 - binarie

Answer 5

你应该使用
return bFood.cereal 而不是 return breakFastFood .cereal，以及 return standing.scale 而不是 breakFastFood.scale

var breakFastFood =[
  {
     cereal: "Captain Crunch",
     scale: "Yuck!"

  },
  {
    cereal: "Grape Nuts",
    scale: "Yum!"

 },
 {
  cereal: "Fruity Pebbles",
  scale: "Yuck!"

},
{
  cereal: "Oatmeal",
  scale: "Yum!"

}
];
var cereals = breakFastFood.map(function(bFood){
 return bFood.cereal
   });


var rank = breakFastFood.map(function(standing){
 return standing.scale
});

rank.forEach(function(rating){console.log(rating)});
cereals.forEach(function(food){console.log(food)});

- Akhil Aravind

Answer 6

你正确地访问了参数。此外（对于其他所有答案的扩展），您可以使用简写符号进一步简化此代码。

bFood => bFood.cereal与以下内容相同：

function(bFood) {
  return bFood.cereal;
}

rating => console.log(rating) 和

是一样的东西

function(rating) {
  console.log(rating);
}

这些被称为箭头函数。你可以在这里了解更多信息。

var breakFastFood = [{
    cereal: "Captain Crunch",
    scale: "Yuck!"

  },
  {
    cereal: "Grape Nuts",
    scale: "Yum!"

  },
  {
    cereal: "Fruity Pebbles",
    scale: "Yuck!"

  },
  {
    cereal: "Oatmeal",
    scale: "Yum!"

  }
];

var cereals = breakFastFood.map(bFood => bFood.cereal);

var rank = breakFastFood.map(standing => standing.scale);

for (let i = 0; i < cereals.length; i++) {
  console.log(rank[i]);
  console.log(cereals[i]);
}

- Aniket G

---

感谢大家的帮助！这真的产生了巨大的影响。我非常感激。 - binarie

伙计们，我犯了个错误。我该如何将谷物与排名匹配起来呢？例如，下一行不是Captain Crunch而是Yuk。我希望它能显示为“Yuck（下一行）Captain Crunch”。对于我的错误，我感到非常抱歉。 - binarie

Answer 7

你的代码有错误。map函数接受当前值作为参数，所以你需要像这样重写你的代码：

var cereals = breakFastFood.map(function(bFood){
 return bFood.cereal
});
var rank = breakFastFood.map(function(standing){
 return standing.scale
});

这意味着bFool是映射数组中的当前项，您可以在函数体中获取它的属性。 但我认为最好的方法是使用良好的参数名称，就像这样

var rank = breakFastFood.map(function(breakFastFoodItem){
 return breakFastFoodItem.scale
});

或者这个

var rank = breakFastFood.map(function(item){
 return item.scale
});

- Oleg Agafonov