如何使用for循环构造top与left值倍增的对象数组？

你需要生成一个对象数组，其中每个对象的top和left属性值分别以初始值3px、2px为基础，每次按2倍递增（3→6→12…、2→4→8…），以下是两种简便的实现方式：

方法一：使用for循环实现 #

通过维护当前的数值变量，循环生成并添加对象到数组中，逻辑直观易懂：

// 设定要生成的元素数量，示例中第三个情况对应count=3
const count = 3;
// 初始化基础数值（用数字存储，方便计算）
let currentTop = 3;
let currentLeft = 2;
const posi_val = [];

for (let i = 0; i < count; i++) {
  // 将数字转为带px单位的字符串，添加到数组
  posi_val.push({
    top: `${currentTop}px`,
    left: `${currentLeft}px`
  });
  // 更新数值为原来的2倍
  currentTop *= 2;
  currentLeft *= 2;
}

console.log(posi_val);
// 输出结果：[{top: '3px', left: '2px'}, {top: '6px', left: '4px'}, {top: '12px', left: '8px'}]

方法二：使用Array.from简化实现 #

如果想要更简洁的代码，可以用Array.from直接生成目标数组，无需显式循环：

const count = 3;
const posi_val = Array.from({ length: count }, (_, index) => {
  // 计算当前倍数：2的index次方（index从0开始）
  const top = 3 * Math.pow(2, index);
  const left = 2 * Math.pow(2, index);
  return {
    top: `${top}px`,
    left: `${left}px`
  };
});

console.log(posi_val);
// 输出结果与上述方法一致

这两种方式都避开了繁琐的字符串拼接和JSON解析操作，直接通过数值计算生成目标对象，逻辑清晰且易于维护。

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