如何在JavaScript中让对象支持下标访问？附Python实现对比

当然可以做到！你在Python里靠实现__getitem__让对象支持下标访问的操作，在JavaScript里也有对应的方案，不用每次都显式调用getitem方法~

先看看你当前的实现：

class Room {
    constructor(furniture) {
        this.furniture = furniture
    }
    getitem(index) {
        return this.furniture[index]
    }
}
let furniture = ['chair', 'TV', 'bed']
let room = new Room(furniture)
console.log(room.getitem(1)) // 输出 TV

下面给你两种可行的优化方案：

方案一：使用Proxy拦截下标访问（推荐） #

Proxy是ES6引入的特性，可以帮我们拦截对象的各种操作，包括下标读取。用它来模拟__getitem__的逻辑非常灵活：

class Room {
    constructor(furniture) {
        this.furniture = furniture;
        // 返回Proxy实例，拦截下标访问行为
        return new Proxy(this, {
            get(target, prop) {
                // 尝试把访问的属性名转为数字，判断是否是下标
                const index = Number(prop);
                if (!isNaN(index)) {
                    return target.furniture[index];
                }
                // 非下标访问的情况，正常返回原对象的属性/方法
                return target[prop];
            }
        });
    }
}

let furniture = ['chair', 'TV', 'bed'];
let room = new Room(furniture);
console.log(room[1]); // 直接用下标访问，输出 TV
console.log(room.furniture); // 依然能正常访问原属性

这种方案的好处是可以精确控制下标访问的逻辑，同时完全保留原对象的其他属性和方法，不会引入额外的冗余特性。

方案二：继承Array类（简单直接） #

如果你的Room类本身需要具备数组的所有特性（比如length属性、push/pop方法等），可以直接让它继承Array：

class Room extends Array {
    constructor(furniture) {
        // 用扩展运算符把数组元素传给父类构造函数
        super(...furniture);
    }
}

let room = new Room(['chair', 'TV', 'bed']);
console.log(room[1]); // 输出 TV
console.log(room.length); // 输出 3（继承了Array的length属性）

不过这种方式会让Room类拥有Array的所有内置方法，如果你只需要简单的下标访问，可能有点“过重”了。

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