熟悉Python、Ruby或Perl的同学,可能习惯了数组的负索引,它使得你可以使用负索引来逆向检索数组元素,代码如下所示:
但是我们知道 JS 中并不存在负索引这种用法,今天我们就来模拟一下负索引的实现。
function createNegativeArrayProxy(array){
// 如果传入的参数不是数组,则抛出异常
if(!Array.isArray(array)){
throw new TypeError('Expected an array');
}
//返回新的代理,新代理用传入的数组为代理目标。
return new Proxy(array, {
get: (target, index)=>{
index= +index;
return target[index<0?target.length+index:index];
},
set: (target, index, val)=>{
index = + index;
return target[index<0?target.length+index:index]=val;
}
})
}
const arr = ['aa', 'bb', 'cc'];
const proxyArr = createNegativeArrayProxy(arr);
console.log(arr[-2]);//undefinded
console.log(proxyArr[-2]);//bb
到这里,我们就实现了数组的负索引。但是需要注意的是,在Chrome浏览器,代理数组的执行时间大约为正常数组的50倍,在Firefox浏览器大约为20倍。因此,要谨慎使用代理,尽管使用代理可以创造性地控制对象的访问,但是大量的控制操作将带来性能问题。