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

Posted 2023-02-14

【中文标题】类似对象 .map() 的 JavaScript 数组

【英文标题】：JavaScript Array like object .map()

【发布时间】：2019-07-28 21:36:43

【问题描述】：

您好，我想使用 .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));

【问题讨论】：

你是什么意思如何将谷物与排名倒序匹配？

【参考方案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));

【参考方案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;

【参考方案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));

【参考方案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));

【讨论】：

完美。谢谢

@binarie 很高兴我能帮上忙！

帮派，我搞错了。我如何将谷物与排名相匹配。例如，不是船长紧缩，而是下一行 yuk。我想说“糟糕（下一行）Crunch 船长。我为我的错误感到抱歉。我很难过。

【参考方案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
);

【参考方案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));

【参考方案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]);

【讨论】：

感谢大家的帮助！这确实产生了巨大的变化。我真的很感激。

帮派，我搞错了。我如何将谷物与排名相匹配。例如，而不是船长紧缩，下一行 yuk。我希望它说“糟糕（下一行）Crunch 船长。我为我的错误感到抱歉。