JavaScript数组循环生成多数组，需改为单数组且每项用大括号包裹

Hey there! Let's sort out this JavaScript loop issue where you're getting multiple arrays instead of one single array filled with objects (each wrapped in curly braces). Here's how to fix it step by step:

Common Mistake Example #

First, let's look at what might be causing the multiple arrays—you're probably creating a new array in each loop iteration instead of adding to a single container:

const sourceData = [10, 20, 30];
// ❌ 错误：每次循环创建新数组并输出
for (const num of sourceData) {
  const tempArray = [{ id: num, label: `Number ${num}` }];
  console.log(tempArray); // 会打印3个独立的小数组
}

Correct Solution: Use a Single Container Array #

The fix is simple: initialize one empty array first, then push each generated object into it during the loop:

const sourceData = [10, 20, 30];
const targetArray = []; // 初始化单个目标数组

// ✅ 正确：往同一个数组里push对象
for (const num of sourceData) {
  targetArray.push({
    id: num,
    label: `Number ${num}`
  });
}

console.log(targetArray);
// 输出：[{id:10, label:"Number 10"}, {id:20, label:"Number 20"}, {id:30, label:"Number 30"}]

More Concise Option: Use Array.map() #

If you prefer a more functional approach, Array.map() is perfect here—it transforms each element into an object and returns a single array automatically:

const sourceData = [10, 20, 30];
const targetArray = sourceData.map(num => ({
  id: num,
  label: `Number ${num}`
}));

console.log(targetArray); // 得到完全相同的目标数组

Key Explanation #

The core issue was that you were creating a new array inside each loop iteration. By using a single container array initialized outside the loop, you collect all your object entries in one place—each wrapped in curly braces as you wanted!

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