如何检测访问带编号属性名，并用循环批量处理相关属性？

1. 动态属性访问的实现方法 #

JavaScript 访问对象属性有两种方式：点表示法（obj.key）和方括号表示法（obj['key']）。要动态拼接带编号的属性名，必须用方括号表示法，把拼接后的字符串作为属性名传入。

比如要访问strIngredient1，可以写成：

const ingredient = response.meals[0][`strIngredient${i}`];

这里用 ES6 模板字符串${i}拼接编号，也可以用传统字符串拼接：'strIngredient' + i。

2. 完整可运行代码 #

结合需求，我们可以过滤空值避免数组混入无效内容，同时优化循环终止逻辑（不用固定循环20次，遍历到空属性即停止）：

const meal = response.meals[0];
const ingredList = [];

for (let i = 1; ; i++) {
  // 动态获取当前编号的食材和用量
  const ingredient = meal[`strIngredient${i}`];
  const measure = meal[`strMeasure${i}`];
  
  // 食材为空时，说明已遍历完所有有效项，终止循环
  if (!ingredient) break;
  
  // 把用量和食材存入数组（用量为空时可选择跳过，这里按需处理）
  if (measure) ingredList.push(measure);
  ingredList.push(ingredient);
}

console.log(ingredList);

如果需要固定循环20次（比如API最多返回20项），也可以保留次数限制，同时过滤空值：

const meal = response.meals[0];
const ingredList = [];

for (let i = 1; i < 21; i++) {
  const ingredient = meal[`strIngredient${i}`];
  const measure = meal[`strMeasure${i}`];
  
  if (!ingredient) continue; // 跳过空食材项
  
  if (measure) ingredList.push(measure);
  ingredList.push(ingredient);
}

console.log(ingredList);

3. 相关搜索术语 #

你可以搜索以下关键词获取更多资料：

• JavaScript 动态对象属性访问
• JavaScript 对象方括号表示法
• JavaScript 遍历带编号的对象属性

4. 方案优化建议 #

• 避免固定循环次数：API返回的食材数量不固定，遍历到空属性终止更灵活
• 过滤空值：保证数组内只有有效数据，提升后续使用体验
• 可将食材和用量配对存储为对象数组，便于后续操作：

  const ingredList = [];
  // ...
  ingredList.push({ ingredient, measure });
  

内容的提问来源于stack exchange，提问作者Matthew Osborne