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 语句中使用函数 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)});

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

您正在cereal数组上寻找scale和breakFastFood属性，而不是在 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

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

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

Answer 6

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

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

像对象.map（）一样的JavaScript数组

7 个答案: