用 Proxy 实现隐式数据校验与实时转换

摆脱传统的 if-else 校验模式，利用 Proxy 的 get/set 陷阱自动对数据赋值进行类型转换和规则校验，同时保持代码极简。 · 难度：入门 · +10XP

用 Proxy 实现隐式数据校验与实时转换

传统表单或状态对象需要手动调用校验函数，而 JavaScript 的 Proxy 可以拦截对象属性的读取与写入。本教程将展示如何利用 set 陷阱自动将传入值转换为指定类型（如数字、日期），并在校验失败时抛出清晰错误。同时通过 get 陷阱生成计算属性，实现类似 Vue 响应式的底层机制，但完全脱离框架。

const validator = { set(target, key, value) { if (key === 'age') { if (typeof value !== 'number' || value < 0) throw new Error('年龄必须是正数'); target[key] = Math.floor(value); return true; } target[key] = value; return true; }, get(target, key) { if (key === 'birthYear') return new Date().getFullYear() - target.age; return target[key]; } };
const user = new Proxy({}, validator); user.age = 25.7; console.log(user.age); // 25 (自动取整) console.log(user.birthYear); // 1999