JS 对象遍历的几种实现方法

// 基础对象
const user = {
  name: "掘金小册",
  age: 3,
  gender: "male",
  isVip: true,
  hobbies: ["coding", "writing"],
  // 方法
  sayHello: function() {
    console.log("Hello, Juejin!");
  }
};

// 原型链上的属性（用于后续演示区别）
Object.prototype.protoProp = "我是原型链上的属性";

// for...in 遍历对象
for (let key in user) {
  console.log("键：", key); // 输出对象的键
  console.log("值：", user[key]); // 输出对应的值
}

for (let key in user) {
  // 只遍历对象自身的属性，过滤原型链属性
  if (user.hasOwnProperty(key)) {
    console.log("键：", key, "值：", user[key]);
  }
}

// 1. 获取对象自身的所有可枚举键，返回数组
const keys = Object.keys(user);
console.log(keys); // 输出：['name', 'age', 'gender', 'isVip', 'hobbies', 'sayHello']

// 2. 搭配 forEach 遍历
Object.keys(user).forEach(key => {
  console.log("键：", key);
  console.log("值：", user[key]);
});

const boolProps = {};
Object.keys(user).forEach(key => {
  if (typeof user[key] === "boolean") {
    boolProps[key] = user[key];
  }
});
console.log(boolProps); // 输出：{ isVip: true }

// 获取对象自身的所有可枚举值，返回数组
const values = Object.values(user);
console.log(values); 
// 输出：['掘金小册', 3, 'male', true, ['coding', 'writing'], [Function: sayHello]]

// 搭配 forEach 遍历值
Object.values(user).forEach(value => {
  console.log("值：", value);
});

const sum = Object.values(user).reduce((total, value) => {
  // 只累加数值类型的值
  return typeof value === "number" ? total + value : total;
}, 0);
console.log(sum); // 输出：3

// 获取对象自身的所有可枚举键值对，返回二维数组
const entries = Object.entries(user);
console.log(entries);
// 输出：[
//   ['name', '掘金小册'],
//   ['age', 3],
//   ...
// ]

// 搭配 forEach 遍历键值对
Object.entries(user).forEach(([key, value]) => {
  // 解构赋值，直接获取 key 和 value，更简洁
  console.log(`键：${key}，值：${value}`);
});

// Object.entries() 可直接作为 Map 的构造参数
const userMap = new Map(Object.entries(user));
console.log(userMap.get("name")); // 输出：掘金小册

// 遍历 Map（补充）
userMap.forEach((value, key) => {
  console.log("键：", key, "值：", value);
});

// 定义一个包含 Symbol 键的对象
const obj = {
  [Symbol("id")]: 123,
  name: "测试"
};

// 遍历 Symbol 类型的键
Object.getOwnPropertySymbols(obj).forEach(symbolKey => {
  console.log("Symbol 键：", symbolKey);
  console.log("对应值：", obj[symbolKey]); // 输出：123
});

// 遍历自身所有属性（包括不可枚举）
const allOwnKeys = Object.getOwnPropertyNames(user);
console.log(allOwnKeys); // 包含 sayHello（函数也是属性）

// 遍历自身所有属性（包括不可枚举、Symbol）
const allKeys = Reflect.ownKeys(user);
console.log(allKeys);

const user = {
  name: "掘金小册",
  age: 3,
  gender: "male",
  isVip: true,
  sayHello: function() {
    console.log("Hello");
  }
};

// 1. 遍历对象，筛选非函数属性
const queryArr = Object.entries(user).filter(([key, value]) => {
  // 排除函数类型的属性
  return typeof value !== "function";
}).map(([key, value]) => {
  // 将键值对转换为 "key=value" 格式
  return `${key}=${encodeURIComponent(value)}`;
});

// 2. 拼接为查询字符串
const queryStr = queryArr.join("&");
console.log(queryStr);
// 输出：name=掘金小册&age=3&gender=male&isVip=true