如何用for循环将obj1/obj2等对象批量推入JavaScript数组？

你遇到的核心问题是：直接拼接字符串得到的是文本，而非对应的变量或对象引用。要解决这个问题，得用方括号属性访问语法——通过字符串形式的键名，直接获取对应的变量或对象属性。

场景1：处理全局变量（比如你举的obj1、obj2、obj3） #

如果这些变量是全局挂载的，可以通过window对象的方括号访问来获取：

// 假设已存在obj1、obj2、obj3三个对象
const arr = [];
for (let i = 1; i <= 3; i++) {
  // 用字符串拼接的键名获取全局变量
  const currentObj = window[`obj${i}`];
  // 可选：避免变量不存在导致报错
  if (currentObj) {
    arr.push(currentObj);
  }
}

场景2：处理API返回的对象（你的实际项目场景） #

这是更常见的情况，API返回的是一个包含strIngredients1、strIngredients2等属性的对象，直接通过对象的方括号语法提取即可：

// 模拟API返回的数据
const apiResponse = {
  strIngredients1: "高筋面粉",
  strIngredients2: "黄油",
  strIngredients3: "细砂糖",
  strIngredients4: "" // 可能存在空值
};

const ingredients = [];
// 假设API最多返回20个食材，或根据实际情况调整循环上限
const maxCount = 20;

for (let i = 1; i <= maxCount; i++) {
  const key = `strIngredients${i}`;
  const item = apiResponse[key];
  // 过滤空值、空白字符串，避免无效数据进入数组
  if (item && item.trim() !== "") {
    ingredients.push(item);
  } else {
    // 遇到空值就终止循环，减少不必要的遍历
    break;
  }
}

console.log(ingredients); // 输出 ["高筋面粉", "黄油", "细砂糖"]

额外提示 #

• 尽量避免使用全局变量，实际项目中优先处理API返回的对象，方括号访问属性是JS的标准用法
• 循环终止条件要灵活：如果不确定API返回的最大数量，可以循环到属性不存在时停止，或者先遍历对象的所有键筛选出符合命名规则的属性
• 也可以用Array.from、Object.keys等方法实现，但for循环在这种场景下更直观可控

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