Javascript 如何使用DRY概念获取这些数据？

我正在使用一个API，它返回每个项目的成分列表。它不在数组中包含这些成分，而是在它们自己的key:value对中列出它们，如下所示：

{ingredient1: "item", ingredient2: "item2"}

我的第一个想法是使用For循环，但我不确定如何执行它。在我的脑海中，它会是这样的（这实际上不起作用）：

for（让i=1；i<16；i++）{console.log（data.component+i）}

当然，这被视为一种数学运算，而不是串联运算。我该如何正确地处理这个问题

谢谢。

for（让i=1；i<16；i++）{console.log（data[`component${i}`]）的
for(let i = 1; i < 16; i++) {console.log(data[`ingredient${i}`])}

for（让i=1；i<16；i++）{console.log（data[`component${i}`]）的
它取决于对象的结构。如果是这样的话：

var recipe = {
    name: "Item name",
    ingredients: {ingredient1: "item", ingredient2: "item2"}
}

然后你可以做：
Object.values（recipe.components）

如果是这样的话：

var recipe = {
    name: "Item name",
    ingredient1: "item",
    ingredient2: "item2"
}

然后你可以做：

Object.keys(recipe).filter(k => k.startsWith('ingredient')).map(v => recipe[v])


var配方={
名称：“项目名称”，
Ingredit1:“项目”，
ingredient2：“项目2”
}
log（Object.keys（recipe）.filter（k=>k.startsWith（'component'））.map（v=>recipe[v]））
配方={
名称：“项目名称”，
成分：{ingredient1:“项目”，ingredient2:“项目2”}
}
console.log（Object.values（recipe.components））
它取决于对象的结构。如果是这样的话：

var recipe = {
    name: "Item name",
    ingredients: {ingredient1: "item", ingredient2: "item2"}
}

然后你可以做：
Object.values（recipe.components）

如果是这样的话：

var recipe = {
    name: "Item name",
    ingredient1: "item",
    ingredient2: "item2"
}

然后你可以做：

Object.keys(recipe).filter(k => k.startsWith('ingredient')).map(v => recipe[v])


var配方={
名称：“项目名称”，
Ingredit1:“项目”，
ingredient2：“项目2”
}
log（Object.keys（recipe）.filter（k=>k.startsWith（'component'））.map（v=>recipe[v]））
配方={
名称：“项目名称”，
成分：{ingredient1:“项目”，ingredient2:“项目2”}
}
console.log（Object.values（recipe.components））
因为我知道，像您尝试的那样，使用变量无法访问对象的属性

因此有两种方法：

1） 使用此方法映射对象的步骤

在您的案例中，数据是您的对象

2） 用你的方法映射对象（这不是我能做到的好做法）
（说）

for（设i=1；i<16；i++）{
让瓦尔；
开关（一）{
案例1:val=data.ingredient1；中断；
案例2:val=data.ingredient2；中断；
...
}
}
我知道，像您尝试的那样，使用变量无法访问对象的属性

因此有两种方法：

1） 使用此方法映射对象的步骤

在您的案例中，数据是您的对象

2） 用你的方法映射对象（这不是我能做到的好做法）
（说）

for（设i=1；i<16；i++）{
让瓦尔；
开关（一）{
案例1:val=data.ingredient1；中断；
案例2:val=data.ingredient2；中断；
...
}
}
如果要在对象键上迭代

ES6：

for（Object.entries（obj））的常量[key，value]{}

或

for（Object.values的常量值（obj））{}

尝试：

var obj = {ingredient1: "item", ingredient2: "item2"};
for (const [key, value] of Object.entries(obj)) { console.log(value)}

//Output:
//item
//item2

如果要在对象键上迭代

ES6：

for（Object.entries（obj））的常量[key，value]{}

或

for（Object.values的常量值（obj））{}

尝试：

var obj = {ingredient1: "item", ingredient2: "item2"};
for (const [key, value] of Object.entries(obj)) { console.log(value)}

//Output:
//item
//item2

这远没有其他答案看起来那么复杂…

有一个循环语法专门用于此。它被称为

MDN

for…in
语句迭代对象的所有非符号、可枚举属性


for（数据中的常量项）{
console.log（数据[项]）；
}

在其中，
项
持有键，您可以反过来使用该键索引到
数据
这远没有其他答案所显示的那么复杂…

有一个循环语法专门用于此。它被称为

MDN

for…in
语句迭代对象的所有非符号、可枚举属性


for（数据中的常量项）{
console.log（数据[项]）；
}

在其中，
项
持有键，您可以反过来使用该键索引到
数据
，我会将它们规范化为数组，然后对其进行操作：

const getIngredients = (ingredients) =>
  Object.entries(ingredients).reduce((acc, [k,v]) =>
    (k.startsWith("ingredient") && acc.push(v), acc), []);

此时，您可以将包含成分的对象传递给函数，您将拥有一个可以像往常一样迭代的数组

例如：

let recipe = {foo: "bar", ingredient1: "item", ingredient2: "item2"};

let ingredients = getIngredients(recipe));
// if the ingredients are in a property, you can just pass it, e.g.
//
// getIngredients(recipe.ingredients));

console.log(ingredients); // ["item", "item2"]

这种方法使用和数组的方法。
无论如何，我都会将它们规范化为数组，然后对其进行操作：

const getIngredients = (ingredients) =>
  Object.entries(ingredients).reduce((acc, [k,v]) =>
    (k.startsWith("ingredient") && acc.push(v), acc), []);

此时，您可以将包含成分的对象传递给函数，您将拥有一个可以像往常一样迭代的数组

例如：

let recipe = {foo: "bar", ingredient1: "item", ingredient2: "item2"};

let ingredients = getIngredients(recipe));
// if the ingredients are in a property, you can just pass it, e.g.
//
// getIngredients(recipe.ingredients));

console.log(ingredients); // ["item", "item2"]

此方法使用和数组的方法。
作为尝试构造属性名称的替代方法，您可以通过对象的键进行循环。例如，
数据['component'+i]
，但这是一种非常丑陋的做事方式。为什么不循环key->value of object然后做些什么呢？你的目标状态是什么，你想实现什么，你也同意你的解决方案只支持现代浏览器吗？我会循环key:value对，但数据不仅仅是成分。我可能应该提到这一点。作为尝试构造属性名的替代方法，您可以通过对象的键进行循环。例如，
数据['component'+i]
，但这是一种非常丑陋的做事方式。为什么不循环key->value of object然后做些什么呢？你的目标状态是什么，你想实现什么，你也同意你的解决方案只支持现代浏览器吗？我会循环key:value对，但数据不仅仅是成分。我应该提到这一点。