关于 js 数组 setter

Question

需求：object.array[index] = value 时调用 setter

Answer 1

利用Proxy:

var arr = []
var proxyArr = new Proxy(arr, {    
    set: function(target, key, value) {    
        // do something    
        console.log(`key=${key}, value=${value}`);
        target[key] = value; 
    }
});


proxyArr[0] = 12;

Answer 2

给你提供个思路。如果你用过vue就会知道，vue2里面因为要兼容ie9+，数组get和set拦截用的是重写数组原型方法的方式，对索引的操作用的是Vue.set( target, index, value )，底层实现是数组的splice操作。vue3数组直接用proxy就可以实现数据的get，set拦截，只是兼容性不好吧了。 看兼容性，你选择那种吧。

Answer 3

var _value = undefined;
Object.definedPropery(object.array, index, {
    set(value) {
        _value = value;
        // do something
    },
    get() {
        return _value;
    }
})