如何在for循环中访问box0、box1等按序列命名的对象成员

问题原因 #

你代码中的`box${i}`生成的是字符串类型的值，而非你声明的box0、box1等实际对象，自然无法访问到current属性。另外你原代码中getBoundingClientRect是DOM方法，需要加()调用才能拿到坐标返回值，否则存入数组的会是方法本身。

最优实现方案（推荐） #

提前把所有box对象按顺序存入一个数组，直接遍历数组访问对应元素即可，这种方式兼容性最好、类型安全也便于后续维护：

// 提前把所有box对象按顺序存入数组
const boxes = [box0, box1, box2, box3, box4, box5];
const boxCoordinates: Array<Coordinate> = [];

for(let i=0; i<5; i++) {
    boxCoordinates.push(boxes[i].current.getBoundingClientRect());
}

如果你的box是React等框架生成的Ref对象，也可以在生成Ref的时候就直接存入数组，避免后续手动拼接的麻烦。

特殊场景替代方案 #

如果你的box变量是声明在浏览器全局作用域下的，也可以通过window对象动态取值，但这种方式不推荐，会有类型安全和全局污染的问题：

for(let i=0; i<5; i++) {
    // 这里的类型断言需要和你实际的box对象类型匹配
    const currentBox = window[`box${i}`] as { current: HTMLElement };
    boxCoordinates.push(currentBox.current.getBoundingClientRect());
}

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