关于Proxy 对象代理Array时 Array.prototype.splice() 与Array.prototype.length 清空数组时的表现差异

最新推荐文章于 2025-05-15 09:17:17 发布

YYCCMMKK

最新推荐文章于 2025-05-15 09:17:17 发布

阅读量5.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS冷知识文章标签： Proxy Rflect Array splice

本文链接：https://blog.youkuaiyun.com/sflf36995800/article/details/88867745

JS冷知识专栏收录该内容

1 篇文章

订阅专栏

本文探讨了使用Proxy代理数组时的问题及解决方法。当调用splice方法清空数组时，会导致元素变为undefined而length属性未更新。文章提供了一种通过直接设置length属性为0来避免这一问题的方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当使用Proxy 代理数组 setter 时代理对象调用 proxy.splice(0) 方法时，只会截获到代理对象length 属性的修改，但此时，原数组已被清空，值为undefined length 还在。

所以使用Proxy 代理数组，需要清空时，直接proxy.lenght=0 进行清空操作，

代码如下

let list=[0,1];
let componentList=[{selected:false},{selected:false}];
let proxy=new Proxy(list,{
  set:function(target:[], key:string, value,receiver:any){
    if(key==='length'){
      if(value===0){
        for(let v of list){
          componentList[v].selected=false;//#报错位置
        }
      }
    }else{
      if(list.includes(value)){
        list.splice(list.indexOf(value),1);
        componentList[value].selected=false;
      }else{
        componentList[value].selected=true;
      }
    }

    return  Reflect.set(target,key,value,receiver);

  }
});

proxy.splice(0);//会报错 因为代理不到删除操作 中会拦截到对length的修改此时数组内元素全为undefined
proxy.lenght=0;// length 清零，然后引擎删掉元素