话说各位刚入行的前端er，有没有在刷面试题时看到"Object相关操作"就要抓狂？明明每天都在用对象，为啥处理复杂数据时总使不上劲？今天咱们就把那些白底黑字的文档翻译成人话，再配上你一看就懂的代码案例！

（顺手抄起键盘）比如你现在被产品经理塞了个需求：要把这个用户数据加工处理：

javascript复制
const animal = {
  type: '狗',
  name: '旺财',
  age: 3,
  vaccines: ['狂犬疫苗', '犬瘟热疫苗']
}

别小看这个案例，掌握下文的5个方法，你就能像捏橡皮泥一样玩转对象！

一、拆包裹式搞对象：keys/values/entries

① Object.keys：偷看快递单号

"我咋知道包裹里都有啥？"这时候就得用??钥匙大法??：

javascript复制
const keyList = Object.keys(animal)
console.log(keyList) // ['type', 'name', 'age', 'vaccines']

实际应用场景：需要动态生成表单字段名的时候，闭着眼睛都能操作：

javascript复制
keyList.forEach(key => {
  document.write(`${key}`)
})

② Object.values：拆快递现场

当你不关心包装盒上写的啥，就想要里头的东西：

javascript复制
const valueList = Object.values(animal)
console.log(valueList) // ['狗', '旺财',3,['狂犬疫苗','犬瘟热疫苗']]

真实项目里的妙用——计算信息总长度：

javascript复制
const totalChar = valueList.join('').length
console.log(totalChar) // 16（狗旺财3狂犬疫苗犬瘟热疫苗）

③ Object.entries：开箱博主直播

要同时看到包装和内容物？这个组合拳比老板的双倍拿铁还带劲：

javascript复制
console.log(Object.entries(animal))
// [
//   ['type', '狗'],
//   ['name', '旺财'],
//   ['age', 3],
//   ['vaccines', Array(2)]
// ]

场景实战：把数据转成接口需要的格式

javascript复制
const apiParams = Object.entries(animal).map(([k,v]) => `${k}=${v}`).join('&')
// type=狗&name=旺财&age=3&vaccines=狂犬疫苗,犬瘟热疫苗

方法对比表：

二、对象克隆术：assign的十八般武艺

"怎么合并两个对象"这个经典问题，新手容易掉进深坑里。来看正确示范：

javascript复制
const newAnimal = Object.assign({}, animal, {age:4})
console.log(newAnimal.age) // 4

但这里隐藏个大雷！看代码：

javascript复制
animal.vaccines.push('细小病毒疫苗')
console.log(newAnimal.vaccines) // 竟然也被修改了！

为啥？因为??Object.assign是浅拷贝??！嵌套对象还是会保持引用关系。解决方案要配合展开运算符或深拷贝工具，不过那是另一个故事了。

三、隐身魔法：defineProperty的障眼法

虽然现在流行Proxy，但这个老方法依然是面试常客。来看怎么给对象加隐藏属性：

javascript复制
Object.defineProperty(animal, 'secretID', {
  value: 'A123',
  enumerable: false // 关键！！！
})

console.log(Object.keys(animal)) // 还是原来的key
console.log(animal.secretID) // 能正常访问！

这个特性让Vue2必须用$set方法添加响应式属性，知道为什么吗？因为直接添加的字段缺少getter/setter监听！

小编踩过的坑

干了三年开发，见过的Object翻车现场能出本笑话集。最经典的要数上次需求：

有个小哥用了Object.keys().forEach处理2000条数据，页面直接卡成PPT。为啥？用错场景了！这种时候应该直接上for循环或者数组方法。记着：

1. ??数据量过500??就别全套用这些方法
2. ??嵌套层级深??的对象得先解构
3. 原型链上挂载的属性能不用就不用（容易引发灵异事件）

有次我忘写enumerable配置项，排查了仨小时Bug——现在的头发就是这么没的！所以各位新手啊，基础方法就像筷子，用得好能夹菜，用不好...可能扎嘴。现在马上把文章里的案例都实操一遍，保准面试官问Object相关问题时你笑开花！