跳到主要内容

JavaScript 对象遍历

在JavaScript编程中，对象是最常用的数据结构之一。当我们处理对象时，经常需要访问其所有属性和值。本文将详细介绍JavaScript中遍历对象的各种方法，帮助你选择最适合特定场景的技术。

为什么需要遍历对象？​

在实际开发中，我们经常需要:

  • 读取对象的所有属性值
  • 对对象的属性进行筛选和处理
  • 将对象转换为其他格式
  • 验证对象的属性是否符合要求

基本对象遍历方法​

使用for...in循环​

for...in循环是遍历对象属性最基本的方式。它会遍历对象的所有可枚举属性，包括继承的属性。

javascript
const person = {
  name: "张三",
  age: 30,
  job: "程序员"
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}

输出:

name: 张三
age: 30
job: 程序员
警告

for...in会遍历对象的原型链上的可枚举属性，如果你只想遍历对象自身的属性，需要使用hasOwnProperty方法进行过滤。

javascript
for (let key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key + ": " + person[key]);
  }
}

Object.keys()方法​

Object.keys()返回一个包含对象自身所有可枚举属性名称的数组。

javascript
const person = {
  name: "张三",
  age: 30,
  job: "程序员"
};

const keys = Object.keys(person);
console.log(keys); // ['name', 'age', 'job']

// 结合forEach使用
Object.keys(person).forEach(key => {
  console.log(key + ": " + person[key]);
});

Object.values()方法​

ES2017引入的Object.values()方法返回一个包含对象自身所有可枚举属性值的数组。

javascript
const person = {
  name: "张三",
  age: 30,
  job: "程序员"
};

const values = Object.values(person);
console.log(values); // ['张三', 30, '程序员']

Object.entries()方法​

ES2017还引入了Object.entries()方法，它返回一个包含对象自身所有可枚举属性的[key, value]对数组。

javascript
const person = {
  name: "张三",
  age: 30,
  job: "程序员"
};

const entries = Object.entries(person);
console.log(entries);
// [['name', '张三'], ['age', 30], ['job', '程序员']]

// 使用解构赋值遍历
Object.entries(person).forEach(([key, value]) => {
  console.log(key + ": " + value);
});

高级对象遍历技巧​

使用Object.getOwnPropertyNames()​

Object.getOwnPropertyNames()方法返回对象自身的所有属性名称，包括不可枚举的属性。

javascript
const person = {
  name: "张三",
  age: 30
};

// 添加一个不可枚举的属性
Object.defineProperty(person, 'id', {
  value: '12345',
  enumerable: false
});

console.log(Object.keys(person)); // ['name', 'age']
console.log(Object.getOwnPropertyNames(person)); // ['name', 'age', 'id']

使用Object.getOwnPropertySymbols()​

ES6引入了Symbol类型，Object.getOwnPropertySymbols()方法用于获取对象自身的所有Symbol属性。

javascript
const nameSymbol = Symbol('name');
const ageSymbol = Symbol('age');

const person = {
  [nameSymbol]: "张三",
  [ageSymbol]: 30,
  job: "程序员"
};

console.log(Object.getOwnPropertySymbols(person)); // [Symbol(name), Symbol(age)]
console.log(person[nameSymbol]); // 张三

使用Reflect.ownKeys()​

Reflect.ownKeys()方法返回对象自身的所有属性键，包括不可枚举属性和Symbol属性。

javascript
const nameSymbol = Symbol('name');
const person = {
  name: "张三",
  age: 30
};

Object.defineProperty(person, 'id', {
  value: '12345',
  enumerable: false
});

person[nameSymbol] = "李四";

console.log(Reflect.ownKeys(person)); // ['name', 'age', 'id', Symbol(name)]

实际应用案例​

案例1: 过滤对象属性​

创建一个函数，过滤对象中满足特定条件的属性：

javascript
function filterObject(obj, predicate) {
  return Object.keys(obj)
    .filter(key => predicate(obj[key], key))
    .reduce((result, key) => {
      result[key] = obj[key];
      return result;
    }, {});
}

const person = {
  name: "张三",
  age: 30,
  score: 85,
  height: 175,
  weight: 70
};

// 过滤出所有数值类型的属性
const numericProps = filterObject(person, (value) => typeof value === 'number');
console.log(numericProps);
// { age: 30, score: 85, height: 175, weight: 70 }

案例2: 对象深拷贝​

使用对象遍历实现简单的深拷贝：

javascript
function deepCopy(obj) {
  // 处理非对象类型
  if (obj === null || typeof obj !== 'object') return obj;
  
  // 处理数组
  if (Array.isArray(obj)) {
    return obj.map(item => deepCopy(item));
  }
  
  // 处理对象
  const copy = {};
  Object.keys(obj).forEach(key => {
    copy[key] = deepCopy(obj[key]);
  });
  
  return copy;
}

const original = {
  name: "张三",
  age: 30,
  address: {
    city: "北京",
    district: "朝阳区"
  },
  hobbies: ["编程", "阅读"]
};

const copied = deepCopy(original);
copied.address.city = "上海";
copied.hobbies[0] = "游泳";

console.log(original.address.city); // 北京 (未被修改)
console.log(original.hobbies[0]); // 编程 (未被修改)
备注

上面的深拷贝函数是简化版，实际应用中可能需要处理更多边缘情况，如循环引用、特殊对象类型等。

案例3: 对象序列化​

将JavaScript对象转换为查询字符串格式：

javascript
function objectToQueryString(obj) {
  return Object.entries(obj)
    .map(([key, value]) => {
      // 处理数组类型的值
      if (Array.isArray(value)) {
        return value
          .map(item => `${encodeURIComponent(key)}=${encodeURIComponent(item)}`)
          .join('&');
      }
      return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
    })
    .join('&');
}

const searchParams = {
  q: "JavaScript教程",
  category: "编程",
  tags: ["js", "web开发"]
};

console.log(objectToQueryString(searchParams));
// q=JavaScript%E6%95%99%E7%A8%8B&category=%E7%BC%96%E7%A8%8B&tags=js&tags=web%E5%BC%80%E5%8F%91

性能考虑​

在处理大型对象时，不同的遍历方法可能会有性能差异。一般来说：

  1. for...in循环性能较低，特别是当对象有大量继承属性时
  2. Object.keys()、Object.values()和Object.entries()性能相对较好，适合大多数场景
  3. 直接访问已知属性名总是比遍历整个对象更快
提示

在处理大量对象或性能关键场景时，建议进行基准测试以选择最合适的遍历方法。

对象遍历方法比较​

下面是各种对象遍历方法的功能对比：

总结​

JavaScript提供了多种遍历对象的方法，每种方法都有其适用场景：

  1. for...in：遍历所有可枚举属性，包括继承的属性
  2. Object.keys()：获取对象自身的可枚举属性名数组
  3. Object.values()：获取对象自身的可枚举属性值数组
  4. Object.entries()：获取对象自身的可枚举属性键值对数组
  5. Object.getOwnPropertyNames()：获取对象自身的所有属性名，包括不可枚举的属性
  6. Object.getOwnPropertySymbols()：获取对象自身的所有Symbol属性
  7. Reflect.ownKeys()：获取对象自身的所有属性键，包括不可枚举属性和Symbol属性

根据你的具体需求选择合适的方法，能够让你的代码更加高效和简洁。

练习​

  1. 编写一个函数，统计对象中每种值类型的数量（如number、string等）。
  2. 实现一个函数，合并两个对象，但如果有重复的键，后一个对象的值会添加到第一个对象相应值的数组中。
  3. 创建一个函数，根据对象值对对象属性进行排序，返回排序后的属性名数组。
  4. 实现一个函数，删除对象中所有值为null或undefined的属性。

延伸阅读​