javascript数组如何实现观察者模式

class ObservableArray {     constructor(initialArray = []) {         this._array = initialArray;         this._subscribers = [];     }      subscribe(callback) {         this._subscribers.push(callback);         // 返回一个取消订阅的函数，方便管理         return () => this.unsubscribe(callback);     }      unsubscribe(callback) {         this._subscribers = this._subscribers.filter(sub => sub !== callback);     }      _notify(changeType, payload) {         this._subscribers.forEach(callback => callback(changeType, payload));     }      // 拦截 push     push(...items) {         const oldLength = this._array.length;         const result = this._array.push(...items);         this._notify('push', { items, newLength: this._array.length, oldLength });         return result;     }      // 拦截 pop     pop() {         const item = this._array.pop();         this._notify('pop', { item, newLength: this._array.length });         return item;     }      // 拦截 splice     splice(start, deleteCount, ...items) {         const removed = this._array.splice(start, deleteCount, ...items);         this._notify('splice', { start, deleteCount, items, removed, newLength: this._array.length });         return removed;     }      // 访问器，确保外部不能直接修改 _array     get array() {         return [...this._array]; // 返回副本，防止直接修改     }      // 尝试处理直接索引赋值，但这很复杂，通常需要Proxy     set(index, value) {         if (index >= 0 && index < this._array.length) {             const oldValue = this._array[index];             this._array[index] = value;             this._notify('set', { index, oldValue, newValue: value });             return true;         } else if (index === this._array.length) { // 类似push             this._array[index] = value;             this._notify('push', { items: [value], newLength: this._array.length, oldLength: this._array.length - 1 });             return true;         }         return false;     } }  // 实际使用 // const myObservableArray = new ObservableArray([1, 2, 3]); // myObservableArray.subscribe((type, payload) => { //     console.log(`Array changed: ${type}`, payload, 'Current array:', myObservableArray.array); // }); // myObservableArray.push(4); // 会触发通知 // myObservableArray.set(0, 100); // 会触发通知

myArray[0] = 'newValue'

Object.defineProperty

$set

Vue.set

[{id: 1, name: 'A'}]

[{id: 1, name: 'B'}]

function createObservableArray(initialArray = []) {     const subscribers = [];     const array = initialArray;      const notify = (changeType, payload) => {         subscribers.forEach(callback => callback(changeType, payload));     };      const handler = {         set(target, property, value, receiver) {             const oldValue = target[property];             const result = Reflect.set(target, property, value, receiver); // 执行原始赋值              // 仅在实际值发生变化时通知，或处理新元素添加             if (property !== 'length' && oldValue !== value) {                 notify('set', { index: property, oldValue, newValue: value });             } else if (property === 'length' && oldValue !== value) {                 // 长度变化可能意味着元素被移除或添加                 if (value < oldValue) { // 长度变短，可能是pop或splice导致                     notify('remove', { oldLength: oldValue, newLength: value });                 } else { // 长度变长                     notify('add', { oldLength: oldValue, newLength: value });                 }             }             return result;         },          get(target, property, receiver) {             // 拦截数组的修改方法             if (['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].includes(property)) {                 return function(...args) {                     const oldArray = [...target]; // 记录修改前的状态                     const result = Reflect.apply(target[property], target, args); // 调用原始方法                     const newArray = target; // 修改后的数组                      // 根据不同的方法类型发送通知                     switch (property) {                         case 'push':                             notify('push', { added: args, newArray, oldArray });                             break;                         case 'pop':                             notify('pop', { removed: result, newArray, oldArray });                             break;                         case 'shift':                             notify('shift', { removed: result, newArray, oldArray });                             break;                         case 'unshift':                             notify('unshift', { added: args, newArray, oldArray });                             break;                         case 'splice':                             notify('splice', { args, removed: result, newArray, oldArray });                             break;                         case 'sort':                         case 'reverse':                             notify(property, { newArray, oldArray }); // 排序或反转                             break;                     }                     return result;                 };             }             // 对于其他属性（如length，或普通元素访问），直接返回             return Reflect.get(target, property, receiver);         }     };      const proxy = new Proxy(array, handler);      // 暴露订阅和取消订阅的方法     proxy.subscribe = (callback) => {         subscribers.push(callback);         return () => proxy.unsubscribe(callback);     };     proxy.unsubscribe = (callback) => {         subscribers.splice(subscribers.indexOf(callback), 1);     };      return proxy; }  // 实际使用 // const myProxyArray = createObservableArray([10, 20, 30]); // myProxyArray.subscribe((type, payload) => { //     console.log(`Proxy Array changed: ${type}`, payload, 'Current array:', myProxyArray); // }); // myProxyArray.push(40); // 触发 push 通知 // myProxyArray[0] = 100; // 触发 set 通知 // myProxyArray.pop(); // 触发 pop 通知 // myProxyArray.splice(0, 1); // 触发 splice 通知 // console.log(myProxyArray[0]); // 不会触发通知，只是读取