关键词：proxy set 拦截器

1. 可以拦截数组变化
   • Proxy可以有效地拦截数组的变化。当对数组进行各种操作，如修改元素、添加或删除元素等，Proxy都能够捕获这些操作并进行拦截。
2. 拦截数组的读取和设置操作

   • 对于数组元素的读取和设置操作，可以通过get和set拦截器来实现。

   • get拦截器示例：

     • 假设我们要拦截对数组元素的读取操作，以记录哪些元素被访问了。

     复制 1let array = [1, 2, 3];
      2let proxyArray = new Proxy(array, {
      3  get(target, property, receiver) {
      4    console.log(`正在读取数组元素${property}`);
      5    return target[property];
      6  },
      7});
      8let element = proxyArray[1];

     • 在这个例子中，当通过proxyArray[1]读取数组元素时，get拦截器会被触发。它会先打印出正在读取数组元素1，然后返回数组中索引为1的元素（即2）。

   • set拦截器示例：

     • 假如我们想要拦截对数组元素的设置操作，比如限制数组元素的取值范围。

     复制 1let array = [1, 2, 3];
      2let proxyArray = new Proxy(array, {
      3  set(target, property, value, receiver) {
      4    if (value < 0) {
      5      throw new Error("数组元素不能小于0");
      6    }
      7    target[property] = value;
      8    return true;
      9  },
     10});
     11proxyArray[0] = -1;

     • 这里，当尝试将proxyArray[0]设置为-1时，set拦截器会被触发。由于-1小于0，会抛出一个错误数组元素不能小于0。
3. 拦截数组的方法调用

   • 数组有许多方法，如push、pop、shift、unshift、splice等。可以通过Proxy的apply拦截器来拦截这些方法的调用。

   • apply拦截器示例：

     • 假设我们要记录数组的push方法的调用情况。

     复制 1let array = [1, 2, 3];
      2let proxyArray = new Proxy(array, {
      3  apply(target, thisArg, argumentsList) {
      4    if (target.push === argumentsList[0]) {
      5      console.log("正在调用数组的push方法");
      6    }
      7    return target.apply(thisArg, argumentsList);
      8  },
      9});
     10proxyArray.push(4);

     • 在这个例子中，当调用proxyArray.push(4)时，apply拦截器会被触发。它会先打印出正在调用数组的push方法，然后执行正常的push操作，将4添加到数组中。