js object 有序类库实现示例

js object有序类库实现示例

当然可以创建一个库,它提供类似对象(Object​)的点符号操作接口,但内部使用 Map​ 来保证键值对的插入顺序。这可以通过 JavaScript 的类和 Proxy 对象来实现。下面是一个简单的实现示例:

class OrderedObject {
    constructor(initialData = {}) {
        this._map = new Map();
        for (let [key, value] of Object.entries(initialData)) {
            this._map.set(key, value);
        }
    }

    // Getter to allow obj.key syntax
    get(key) {
        return this._map.get(key);
    }

    // Setter to allow obj.key = value syntax
    set(key, value) {
        this._map.set(key, value);
    }

    // Convert to plain object
    toObject() {
        return Object.fromEntries(this._map);
    }

    // Other methods you might want...
    has(key) {
        return this._map.has(key);
    }

    delete(key) {
        return this._map.delete(key);
    }

    clear() {
        this._map.clear();
    }

    entries() {
        return this._map.entries();
    }

    keys() {
        return this._map.keys();
    }

    values() {
        return this._map.values();
    }

    size() {
        return this._map.size;
    }

    // Support iteration over the object like a map
    [Symbol.iterator]() {
        return this._map[Symbol.iterator]();
    }
}

// Using Proxy to enable dot notation
function createOrderedObjectProxy(initialData = {}) {
    let orderedObj = new OrderedObject(initialData);

    return new Proxy(orderedObj, {
        get: function (target, prop) {
            if (prop in target) {
                return target[prop];
            } else {
                return target.get(prop);
            }
        },
        set: function (target, prop, value) {
            target.set(prop, value);
            return true;
        }
    });
}

// 使用示例
let obj = createOrderedObjectProxy({ first: '1st', second: '2nd' });
obj.third = '3rd';
console.log(obj.second);  // 输出: 2nd
console.log([...obj]);    // 按照插入顺序输出键值对数组

这个 createOrderedObjectProxy​ 函数返回了一个代理对象,该对象允许你使用点符号语法进行属性的获取和设置,同时内部维护了一个 Map​ 来确保键值对的顺序。

请注意,尽管此代码片段实现了基本功能,但在实际生产环境中使用时,可能还需要添加更多的错误处理、性能优化和其他特性以满足特定需求。此外,对于非字符串键或者包含特殊字符的键名,这种简单的方式可能无法正常工作,因此需要额外的考虑和处理。

image.png

留下你的脚步
推荐阅读