JavaScript Proxy 的隐藏魔法：自动补全对象属性

JavaScript Proxy 的隐藏魔法：自动补全对象属性

Proxy 是 JavaScript 中的一个强大特性，它允许你创建一个对象的代理，从而可以拦截并自定义该对象的基本操作。下面介绍一个有趣且实用的 Proxy 用法：自动补全对象属性。

实现代码

const createAutocompleteObject = (suggestions) => {
  return new Proxy({}, {
    get(target, prop) {
      if (prop in target) {
        return target[prop];
      }
      
      // 查找最接近的属性名
      const closest = Object.keys(target).find(key => 
        key.toLowerCase().includes(prop.toLowerCase())
      );
      
      if (closest) {
        console.warn(`属性 "${prop}" 不存在，您是不是想访问 "${closest}"?`);
        return target[closest];
      }
      
      // 如果开启了建议模式
      if (suggestions) {
        const similar = Object.keys(target).filter(key =>
          key.toLowerCase().startsWith(prop.toLowerCase())
        );
        
        if (similar.length > 0) {
          console.warn(`属性 "${prop}" 不存在。相似属性: ${similar.join(', ')}`);
        }
      }
      
      return undefined;
    }
  });
};

// 使用示例
const obj = createAutocompleteObject(true);
obj.userName = "张三";
obj.userAge = 30;
obj.accountBalance = 1000;

console.log(obj.username); 
// 控制台警告: 属性 "username" 不存在，您是不是想访问 "userName"?
// 输出: "张三"

console.log(obj.acc); 
// 控制台警告: 属性 "acc" 不存在。相似属性: accountBalance
// 输出: undefined