JavaScript 中怎么使用 Proxy 代理数组实现越界访问自动填充-js教程-PHP中文网

proxy 不能自动填充越界索引，但可通过拦截 get 和 set 实现：get 拦截越界读取时返回默认值（不修改数组），set 拦截越界写入时自动扩容并填充默认值，需同步更新 length 属性。

javascript 中怎么使用 proxy 代理数组实现越界访问自动填充

JavaScript 中 Proxy 本身不能直接“自动填充”越界索引，但可以通过拦截 get 和 set 操作，在访问或设置不存在的索引时动态扩展数组并填充默认值（如 undefined 或指定值）。

拦截 get 实现读取越界时返回默认值

当访问超出当前长度的索引（如 arr[10] 而数组长度为 3），Proxy 可捕获该操作，检查是否越界，然后返回预设值（不修改原数组）：

注意：仅读取时不改变数组长度，属于“安全访问”模式

java-enterprise

Java企业开发专家，专注于Spring Boot、微服务架构和JVM优化。适用于：Java语言掌握、

下载

判断 key 是否为有效非负整数字符串（如 "5"），且大于等于 array.length
满足条件则返回默认值（如 null、0 或 undefined）
否则调用 Reflect.get 正常获取

拦截 set 实现写入越界时自动扩容填充

当给越界索引赋值（如 arr[10] = 123），可让数组自动增长到该位置，并将中间空位填上默认值：

先验证 key 是合法数字索引，且 Number(key) >= target.length
用 Array.fill() 扩容并填充（例如填 undefined 或自定义值）
再执行原始赋值
⚠️ 注意：必须同步更新 length 属性，否则后续 push 等方法行为异常

完整示例：带默认值的可自动扩容数组

以下代码创建一个代理数组，越界读返回 0，越界写自动填充 0 并扩容：

function createAutoFillArray(defaultValue = 0) {
  const arr = [];
  return new Proxy(arr, {
    get(target, key) {
      if (key === 'length') return target.length;
      const index = Number(key);
      if (Number.isInteger(index) && index >= 0 && index >= target.length) {
        return defaultValue;
      }
      return Reflect.get(target, key);
    },
    set(target, key, value) {
      const index = Number(key);
      if (Number.isInteger(index) && index >= 0) {
        if (index >= target.length) {
          // 填充至 index + 1 长度，中间用 defaultValue
          target.length = index + 1;
          for (let i = target.length - 1; i >= target.length - (index + 1 - target.length); i--) {
            if (i // 使用
const arr = createAutoFillArray(0);
arr[0] = 1;
arr[5] = 9; // 自动将 arr[0..4] 填为 0，arr[5] 设为 9
console.log(arr); // [1, 0, 0, 0, 0, 9]
console.log(arr[10]); // 0（越界读）