类似对象 .map() 的 JavaScript 数组

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

Answer 1

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

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

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;}

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

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

您的代码可以进一步简化为使用箭头函数=> 和destructuring assignment：

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

Answer 5

您的代码中有错误。 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
});

Answer 6

您应该使用
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)});

Answer 7

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

bFood => bFood.cereal 和

是一回事

function(bFood) {
  return bFood.cereal;
}

而rating => console.log(rating)和

是一回事

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

这些被称为箭头函数。您可以通过here了解更多信息。

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]);
}