中高级前端必备11个 JavaScript 对象方法解析每一个附带真实业务实战案例和注意事项。一、Object.assign() 浅拷贝合并对象作用合并多个对象、属性覆盖、简单浅拷贝。适用场景合并默认配置、弹窗配置、接口参数补全。实战业务场景弹窗默认配置 用户自定义配置合并// 默认弹窗配置 const defaultOption { width: 500, height: 300, title: 提示 }; // 用户自定义配置 const userOption { width: 600, title: 温馨提示 }; // 合并覆盖前面被后面覆盖 const modalOption Object.assign({}, defaultOption, userOption); console.log(modalOption); // {width: 600, height: 300, title: 温馨提示}注意事项纯浅拷贝嵌套对象无法深度复制属性后面覆盖前面顺序不可颠倒建议第一个参数永远写空对象防止污染原数据。二、Object.hasOwn() 判断自身是否存在属性作用安全判断对象自身是否包含某个属性无视原型链。适用场景校验接口必填字段、容错判断、防止原型链污染。实战业务场景判断接口是否返回指定字段做容错兜底const res { code: 200, data: null, msg: 请求成功 }; // 判断是否存在data字段 if(Object.hasOwn(res, data)){ const list res.data ?? []; console.log(业务数据,list); }注意事项替代老旧 hasOwnProperty语法更简洁、兼容性更好不会遍历原型链杜绝误判内置属性。三、Object.groupBy() 数组对象分组作用根据指定字段对对象数组一键分组归类。适用场景商品分类、订单状态分组、标签筛选、后台数据归类。实战业务场景商品列表根据品类 type 自动分组const goodsList [ { type: 1, name: 手机 }, { type: 2, name: 耳机 }, { type: 1, name: 平板 } ]; // 根据type分组 const groupGoods Object.groupBy(goodsList, item item.type); console.log(groupGoods); // {1: [手机,平板], 2: [耳机]}注意事项ES2024 最新语法 无需手写 reduce 分组一行代码搞定复杂归类。四、Object.getOwnPropertyNames() 获取全部自身属性作用获取对象自身全部属性包含不可遍历属性。适用场景底层源码调试、特殊内置属性解析、复杂对象深度遍历。实战业务场景查看原生内置不可遍历属性用于底层调试const testObj {}; // 获取包含不可遍历的所有属性 const allKeys Object.getOwnPropertyNames(testObj); console.log(allKeys);注意事项区别于 keyskeys 只拿可遍历该方法全部获取业务开发使用频率低源码、底层开发高频。五、Object.create() 创建继承式对象作用以指定对象为原型创建干净的空对象实现原型继承。适用场景封装公共方法、手写继承、底层工具类封装、面试手写题。实战案例业务场景抽取公共工具方法多个实例共享原型方法// 公共原型方法 const commonProto { formatTime(){ return new Date().toLocaleString(); } }; // 创建继承对象 const user Object.create(commonProto); user.name 张三; // 继承原型方法 console.log(user.formatTime());注意事项创建的对象自身为空属性全部挂载在原型上面试常考手写原生继承底层原理。六、Object.keys() 获取对象所有键名作用获取对象中可遍历的属性名返回纯字符串数组。适用场景批量遍历对象、统计参数个数、校验表单字段、循环渲染对象数据。实战业务场景后端返回用户信息对象批量遍历渲染标签列表// 后端返回用户数据 const userInfo { name: 李四, age: 28, gender: 男, address: 杭州市 }; // 获取所有 key const keys Object.keys(userInfo); // 批量渲染页面 keys.forEach(key { console.log(字段${key}值${userInfo[key]}); });注意事项只能获取自身可遍历属性无法获取不可遍历、原型链上的属性返回结果永远为字符串数组。七、Object.values() 获取对象所有属性值作用提取对象全部属性值返回纯数据数组。适用场景只需要数值、忽略字段名、数据统计、批量筛选状态值。实战业务场景统计订单所有金额求和计算总消费const orderMoney { one: 99, two: 199, three: 299 }; // 提取所有金额 const moneyList Object.values(orderMoney); // 金额求和 const total moneyList.reduce((sum, item) sum item, 0); console.log(总金额, total); // 597注意事项同样只识别自身可遍历属性不保留 key单纯提取数值。八、Object.entries() 对象转键值对数组作用将对象转换成[key, value]二维数组。适用场景表单重组、键值双向遍历、对象转 Map、筛选过滤指定字段。实战业务场景过滤表单空值剔除空参数优化接口传参const form { username: 张三, phone: , age: 25 }; // 对象转二维数组 const filterArr Object.entries(form).filter(([key, val]) val); // 还原纯净对象 const newForm Object.fromEntries(filterArr); console.log(newForm); // { username: 张三, age: 25 }注意事项配合filter、map是前端表单处理最优写法ES6 推荐优先使用 entries 遍历对象舍弃 for...in。九、Object.fromEntries() 数组转回对象作用entries 反向方法将二维数组、Map、URL参数转为对象。适用场景处理地址栏参数、拼接接口参数、清洗后端复杂数据。实战业务场景解析浏览器地址栏 URL 参数无需手写正则// 假设地址栏?name前端id10086 const searchParams new URLSearchParams(location.search); const params Object.fromEntries(searchParams); console.log(params); // { name: 前端, id: 10086 }注意事项ES2019 新增兼容所有现代项目可快速转换Map 结构实现数据格式化。十、Object.freeze() 冻结对象作用冻结对象禁止新增、删除、修改属性变为常量对象。适用场景项目枚举、状态码、字典常量、全局固定配置。实战业务场景后台状态码统一枚举管理禁止随意修改// 全局状态枚举 const STATUS_CODE Object.freeze({ SUCCESS: 200, ERROR: 500, TIMEOUT: 408, EMPTY: 101 }); // 无法修改、无法删除、无法新增属性 STATUS_CODE.SUCCESS 999; // 严格模式下直接报错注意事项仅为浅冻结嵌套对象依旧可修改生产项目枚举全部建议使用 freeze 固定。十一、Object.seal() 密封对象固定对象结构作用密封对象禁止新增、删除属性但允许修改原有属性。适用场景固定对象结构、防止误新增字段、业务配置固化、禁止删除原有key。实战业务场景固定用户表单结构禁止新增多余字段但是允许修改表单内容const userForm { username: , phone: , age: }; // 密封对象 Object.seal(userForm); userForm.age 26; // ✅ 允许修改原有属性 userForm.gender 男; // ❌ 无法新增字段 delete userForm.username; // ❌ 无法删除字段 console.log(userForm);注意事项seal VS freeze 核心区别面试常问seal可改、不可增删freeze不可改、不可增删。同样为浅密封嵌套对象不受限制适合需要固定对象结构、但允许修改值的业务配置。总结本文11个方法覆盖对象遍历、合并拷贝、属性校验、数据分组、常量管理、原型继承六大核心场景。全部为真实业务提炼无冷门鸡肋API。放弃老旧for循环、冗余if判断熟练使用原生API写出简洁、高可读的代码。「更多前端实战教程关注公众号web 前端技术分享」
中高级前端必会：11个 JavaScript 对象方法
发布时间：2026/5/21 7:18:21
中高级前端必备11个 JavaScript 对象方法解析每一个附带真实业务实战案例和注意事项。一、Object.assign() 浅拷贝合并对象作用合并多个对象、属性覆盖、简单浅拷贝。适用场景合并默认配置、弹窗配置、接口参数补全。实战业务场景弹窗默认配置 用户自定义配置合并// 默认弹窗配置 const defaultOption { width: 500, height: 300, title: 提示 }; // 用户自定义配置 const userOption { width: 600, title: 温馨提示 }; // 合并覆盖前面被后面覆盖 const modalOption Object.assign({}, defaultOption, userOption); console.log(modalOption); // {width: 600, height: 300, title: 温馨提示}注意事项纯浅拷贝嵌套对象无法深度复制属性后面覆盖前面顺序不可颠倒建议第一个参数永远写空对象防止污染原数据。二、Object.hasOwn() 判断自身是否存在属性作用安全判断对象自身是否包含某个属性无视原型链。适用场景校验接口必填字段、容错判断、防止原型链污染。实战业务场景判断接口是否返回指定字段做容错兜底const res { code: 200, data: null, msg: 请求成功 }; // 判断是否存在data字段 if(Object.hasOwn(res, data)){ const list res.data ?? []; console.log(业务数据,list); }注意事项替代老旧 hasOwnProperty语法更简洁、兼容性更好不会遍历原型链杜绝误判内置属性。三、Object.groupBy() 数组对象分组作用根据指定字段对对象数组一键分组归类。适用场景商品分类、订单状态分组、标签筛选、后台数据归类。实战业务场景商品列表根据品类 type 自动分组const goodsList [ { type: 1, name: 手机 }, { type: 2, name: 耳机 }, { type: 1, name: 平板 } ]; // 根据type分组 const groupGoods Object.groupBy(goodsList, item item.type); console.log(groupGoods); // {1: [手机,平板], 2: [耳机]}注意事项ES2024 最新语法 无需手写 reduce 分组一行代码搞定复杂归类。四、Object.getOwnPropertyNames() 获取全部自身属性作用获取对象自身全部属性包含不可遍历属性。适用场景底层源码调试、特殊内置属性解析、复杂对象深度遍历。实战业务场景查看原生内置不可遍历属性用于底层调试const testObj {}; // 获取包含不可遍历的所有属性 const allKeys Object.getOwnPropertyNames(testObj); console.log(allKeys);注意事项区别于 keyskeys 只拿可遍历该方法全部获取业务开发使用频率低源码、底层开发高频。五、Object.create() 创建继承式对象作用以指定对象为原型创建干净的空对象实现原型继承。适用场景封装公共方法、手写继承、底层工具类封装、面试手写题。实战案例业务场景抽取公共工具方法多个实例共享原型方法// 公共原型方法 const commonProto { formatTime(){ return new Date().toLocaleString(); } }; // 创建继承对象 const user Object.create(commonProto); user.name 张三; // 继承原型方法 console.log(user.formatTime());注意事项创建的对象自身为空属性全部挂载在原型上面试常考手写原生继承底层原理。六、Object.keys() 获取对象所有键名作用获取对象中可遍历的属性名返回纯字符串数组。适用场景批量遍历对象、统计参数个数、校验表单字段、循环渲染对象数据。实战业务场景后端返回用户信息对象批量遍历渲染标签列表// 后端返回用户数据 const userInfo { name: 李四, age: 28, gender: 男, address: 杭州市 }; // 获取所有 key const keys Object.keys(userInfo); // 批量渲染页面 keys.forEach(key { console.log(字段${key}值${userInfo[key]}); });注意事项只能获取自身可遍历属性无法获取不可遍历、原型链上的属性返回结果永远为字符串数组。七、Object.values() 获取对象所有属性值作用提取对象全部属性值返回纯数据数组。适用场景只需要数值、忽略字段名、数据统计、批量筛选状态值。实战业务场景统计订单所有金额求和计算总消费const orderMoney { one: 99, two: 199, three: 299 }; // 提取所有金额 const moneyList Object.values(orderMoney); // 金额求和 const total moneyList.reduce((sum, item) sum item, 0); console.log(总金额, total); // 597注意事项同样只识别自身可遍历属性不保留 key单纯提取数值。八、Object.entries() 对象转键值对数组作用将对象转换成[key, value]二维数组。适用场景表单重组、键值双向遍历、对象转 Map、筛选过滤指定字段。实战业务场景过滤表单空值剔除空参数优化接口传参const form { username: 张三, phone: , age: 25 }; // 对象转二维数组 const filterArr Object.entries(form).filter(([key, val]) val); // 还原纯净对象 const newForm Object.fromEntries(filterArr); console.log(newForm); // { username: 张三, age: 25 }注意事项配合filter、map是前端表单处理最优写法ES6 推荐优先使用 entries 遍历对象舍弃 for...in。九、Object.fromEntries() 数组转回对象作用entries 反向方法将二维数组、Map、URL参数转为对象。适用场景处理地址栏参数、拼接接口参数、清洗后端复杂数据。实战业务场景解析浏览器地址栏 URL 参数无需手写正则// 假设地址栏?name前端id10086 const searchParams new URLSearchParams(location.search); const params Object.fromEntries(searchParams); console.log(params); // { name: 前端, id: 10086 }注意事项ES2019 新增兼容所有现代项目可快速转换Map 结构实现数据格式化。十、Object.freeze() 冻结对象作用冻结对象禁止新增、删除、修改属性变为常量对象。适用场景项目枚举、状态码、字典常量、全局固定配置。实战业务场景后台状态码统一枚举管理禁止随意修改// 全局状态枚举 const STATUS_CODE Object.freeze({ SUCCESS: 200, ERROR: 500, TIMEOUT: 408, EMPTY: 101 }); // 无法修改、无法删除、无法新增属性 STATUS_CODE.SUCCESS 999; // 严格模式下直接报错注意事项仅为浅冻结嵌套对象依旧可修改生产项目枚举全部建议使用 freeze 固定。十一、Object.seal() 密封对象固定对象结构作用密封对象禁止新增、删除属性但允许修改原有属性。适用场景固定对象结构、防止误新增字段、业务配置固化、禁止删除原有key。实战业务场景固定用户表单结构禁止新增多余字段但是允许修改表单内容const userForm { username: , phone: , age: }; // 密封对象 Object.seal(userForm); userForm.age 26; // ✅ 允许修改原有属性 userForm.gender 男; // ❌ 无法新增字段 delete userForm.username; // ❌ 无法删除字段 console.log(userForm);注意事项seal VS freeze 核心区别面试常问seal可改、不可增删freeze不可改、不可增删。同样为浅密封嵌套对象不受限制适合需要固定对象结构、但允许修改值的业务配置。总结本文11个方法覆盖对象遍历、合并拷贝、属性校验、数据分组、常量管理、原型继承六大核心场景。全部为真实业务提炼无冷门鸡肋API。放弃老旧for循环、冗余if判断熟练使用原生API写出简洁、高可读的代码。「更多前端实战教程关注公众号web 前端技术分享」
