JavaScript的object的使用和监控打印日志

一、准备一个"普通对象"

const user = {
  name: '张三',
  age: 18,
  city: '北京'
}

---

二、例子 1️⃣：Object.keys() ------ 获取所有键名

const keys = Object.keys(user)
console.log(keys)

输出：

["name", "age", "city"]

👉 用途：

• 遍历对象

• 动态处理字段（你之前的 watch 就在用这个）

---

三、例子 2️⃣：Object.values() ------ 获取所有值

const values = Object.values(user)
console.log(values)

输出：

["张三", 18, "北京"]

---

四、例子 3️⃣：Object.entries() ------ 键值对数组（很常用）

const entries = Object.entries(user)
console.log(entries)

输出：

[
  ["name", "张三"],
  ["age", 18],
  ["city", "北京"]
]

👉 非常适合 forEach / map

---

五、例子 4️⃣：遍历对象（你现在正在用的模式）

Object.keys(user).forEach(key => {
  console.log('字段名：', key)
  console.log('字段值：', user[key])
})

输出：

字段名： name
字段值： 张三
字段名： age
字段值： 18
字段名： city
字段值： 北京

---

六、例子 5️⃣：Object.assign() ------ 合并对象

const extraInfo = {
  job: '程序员',
  age: 20
}

const newUser = Object.assign({}, user, extraInfo)

console.log(newUser)

输出：

{
  name: '张三',
  age: 20,
  city: '北京',
  job: '程序员'
}

📌 后面的会覆盖前面的同名字段

---

七、例子 6️⃣：Object.defineProperty()（进阶，和你现在学的有关）

const obj = {
  price: 100
}

Object.defineProperty(obj, 'price', {
  set(val) {
    console.log('价格被修改为：', val)
  },
  get() {
    return 100
  }
})

obj.price = 200   // 👉 自动触发 set

输出：

价格被修改为： 200

👉 这正是你 setWatcher 的底层原理

---

八、例子 7️⃣：判断对象里有没有某个属性

console.log(user.hasOwnProperty('name'))   // true
console.log(user.hasOwnProperty('phone'))  // false

---

九、一个和你"监听器"高度相关的小例子 ⭐

const watch = {
  total: (val) => console.log('total 变了', val),
  count: (val) => console.log('count 变了', val)
}

Object.keys(watch).forEach(key => {
  console.log('正在处理字段：', key)
})

输出：

正在处理字段： total
正在处理字段： count

JavaScript代码如下：

const user = {
    name: '张三',
    age: 18,
    city: '北京'
}
const keys = Object.keys(user)
console.log("user",user['name'])

const values = Object.values(user)
console.log(values)

const entries = Object.entries(user)
console.log("entries",entries)

Object.keys(user).forEach(key => {
    console.log('字段名：', key)
    console.log('字段值：', user[key])
})

const extraInfo = {
    job: '程序员',
    age: 20
}

const newUser = Object.assign({}, user, extraInfo)
console.log("newUser",newUser)

const obj = {
    price: 100
}



Object.defineProperty(obj, 'price', {
    set(val) {
        console.log('价格被修改为：', val)
    },
    get() {
        return 100
    }
})
obj.price=213

console.log(user.hasOwnProperty('name'))   // true
console.log(user.hasOwnProperty('phone'))  // false

const watch = {
    total: (val) => console.log('total 变了', val),
    count: (val) => console.log('count 变了', val)
}

Object.keys(watch).forEach(key => {
    console.log('正在处理字段：', key)
})

watch.total(121)
watch.total(12)

效果图如下：