跳至主要內容

对象遍历与操作

Kpsmart2025年3月7日大约 11 分钟

对象遍历与操作

JavaScript提供了多种遍历和操作对象的方法。本文将介绍如何使用for...in循环、Object.keys()、Object.entries()等方法遍历对象，以及如何使用解构赋值、扩展运算符等现代语法简化对象操作。

对象遍历方法

JavaScript提供了多种遍历对象属性的方法，每种方法都有其特定的用途和行为。

1. for...in 循环

for...in循环遍历对象的所有可枚举属性，包括继承的属性：

const person = {
  name: '张三',
  age: 30,
  occupation: '工程师'
};

// 使用for...in遍历对象
for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}
// 输出:
// name: 张三
// age: 30
// occupation: 工程师

注意事项：

  • for...in会遍历继承的可枚举属性
  • 不保证属性的遍历顺序
  • 通常需要使用hasOwnProperty()方法过滤掉继承的属性
// 过滤继承属性
for (const key in person) {
  if (Object.prototype.hasOwnProperty.call(person, key)) {
    console.log(`${key}: ${person[key]}`);
  }
}

2. Object.keys()

Object.keys()返回对象自身的所有可枚举属性名组成的数组：

const person = {
  name: '张三',
  age: 30,
  occupation: '工程师'
};

const keys = Object.keys(person);
console.log(keys); // 输出: ['name', 'age', 'occupation']

// 结合forEach遍历
Object.keys(person).forEach(key => {
  console.log(`${key}: ${person[key]}`);
});

特点：

  • 只返回对象自身的可枚举属性，不包括继承的属性
  • 返回的是数组，可以使用数组的方法进行操作
  • 属性顺序与for...in基本一致

3. Object.values()

Object.values()返回对象自身的所有可枚举属性值组成的数组：

const person = {
  name: '张三',
  age: 30,
  occupation: '工程师'
};

const values = Object.values(person);
console.log(values); // 输出: ['张三', 30, '工程师']

// 遍历所有值
Object.values(person).forEach(value => {
  console.log(value);
});

4. Object.entries()

Object.entries()返回对象自身的所有可枚举属性的键值对数组：

const person = {
  name: '张三',
  age: 30,
  occupation: '工程师'
};

const entries = Object.entries(person);
console.log(entries);
// 输出: [['name', '张三'], ['age', 30], ['occupation', '工程师']]

// 使用解构遍历
for (const [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`);
}

Object.entries()特别适合将对象转换为Map：

const personMap = new Map(Object.entries(person));
console.log(personMap.get('name')); // 输出: 张三

5. Object.getOwnPropertyNames()

Object.getOwnPropertyNames()返回对象自身的所有属性名（包括不可枚举属性）：

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']

6. Object.getOwnPropertySymbols()

Object.getOwnPropertySymbols()返回对象自身的所有Symbol属性：

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

const person = {
  [nameSymbol]: '张三',
  [ageSymbol]: 30,
  occupation: '工程师'
};

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

7. Reflect.ownKeys()

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

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

// 添加不可枚举属性和Symbol属性
Object.defineProperty(person, 'id', {
  value: '12345',
  enumerable: false
});
person[nameSymbol] = '李四';

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

对象操作方法

1. 解构赋值

解构赋值允许从对象中提取属性并赋值给变量：

const person = {
  name: '张三',
  age: 30,
  address: {
    city: '北京',
    district: '海淀'
  }
};

// 基本解构
const { name, age } = person;
console.log(name, age); // 输出: 张三 30

// 重命名
const { name: fullName, age: years } = person;
console.log(fullName, years); // 输出: 张三 30

// 设置默认值
const { occupation = '未知' } = person;
console.log(occupation); // 输出: 未知

// 嵌套解构
const { address: { city, district } } = person;
console.log(city, district); // 输出: 北京 海淀

// 剩余参数
const { name: personName, ...rest } = person;
console.log(personName); // 输出: 张三
console.log(rest); // 输出: { age: 30, address: { city: '北京', district: '海淀' } }

2. 扩展运算符

扩展运算符(...)可以用于合并对象或创建对象的浅拷贝：

// 对象浅拷贝
const person = { name: '张三', age: 30 };
const personCopy = { ...person };
console.log(personCopy); // 输出: { name: '张三', age: 30 }

// 合并对象
const personDetails = { occupation: '工程师', salary: 10000 };
const personComplete = { ...person, ...personDetails };
console.log(personComplete);
// 输出: { name: '张三', age: 30, occupation: '工程师', salary: 10000 }

// 覆盖属性
const personWithNewAge = { ...person, age: 31 };
console.log(personWithNewAge); // 输出: { name: '张三', age: 31 }

// 注意：扩展运算符只进行浅拷贝
const personWithAddress = {
  name: '张三',
  address: { city: '北京' }
};
const personCopy2 = { ...personWithAddress };
personCopy2.address.city = '上海';
console.log(personWithAddress.address.city); // 输出: 上海（原对象也被修改）

3. Object.assign()

Object.assign()方法用于将一个或多个源对象的属性复制到目标对象：

// 基本用法
const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };
const result = Object.assign(target, source);
console.log(target); // 输出: { a: 1, b: 3, c: 4 }
console.log(result === target); // 输出: true（result和target是同一个对象）

// 创建新对象而不修改原对象
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const newObj = Object.assign({}, obj1, obj2);
console.log(newObj); // 输出: { a: 1, b: 2 }

// 属性覆盖
const defaults = { color: 'red', size: 'medium' };
const userPrefs = { color: 'blue' };
const finalPrefs = Object.assign({}, defaults, userPrefs);
console.log(finalPrefs); // 输出: { color: 'blue', size: 'medium' }

注意事项：

  • Object.assign()执行的是浅拷贝
  • 如果源对象的属性值是对象，只复制引用
  • 不能复制继承属性和不可枚举属性

4. 对象深拷贝

实现对象的深拷贝有多种方法：

const original = {
  name: '张三',
  age: 30,
  address: {
    city: '北京',
    district: '海淀'
  },
  hobbies: ['读书', '旅游']
};

// 方法1：使用JSON（有局限性，不能处理函数、Symbol、循环引用等）
const deepCopy1 = JSON.parse(JSON.stringify(original));

// 方法2：递归实现深拷贝
function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  
  // 处理日期
  if (obj instanceof Date) {
    return new Date(obj.getTime());
  }
  
  // 处理数组
  if (Array.isArray(obj)) {
    return obj.map(item => deepClone(item));
  }
  
  // 处理对象
  const clonedObj = {};
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      clonedObj[key] = deepClone(obj[key]);
    }
  }
  
  return clonedObj;
}

const deepCopy2 = deepClone(original);
deepCopy2.address.city = '上海';
console.log(original.address.city); // 输出: 北京（原对象不受影响）

5. 对象属性的动态操作

动态添加、修改和删除属性：

const person = {
  name: '张三'
};

// 动态添加属性
person.age = 30;
person['occupation'] = '工程师';

// 使用变量作为属性名
const propertyName = 'salary';
person[propertyName] = 10000;

console.log(person);
// 输出: { name: '张三', age: 30, occupation: '工程师', salary: 10000 }

// 删除属性
delete person.age;
console.log(person);
// 输出: { name: '张三', occupation: '工程师', salary: 10000 }

// 检查属性是否存在
console.log('name' in person); // 输出: true
console.log(person.hasOwnProperty('name')); // 输出: true
console.log(person.hasOwnProperty('toString')); // 输出: false（继承属性）

6. 对象转换

对象与其他数据类型的转换：

// 对象转数组
const person = { name: '张三', age: 30, occupation: '工程师' };

const keys = Object.keys(person);
const values = Object.values(person);
const entries = Object.entries(person);

// 数组转对象
const properties = [
  ['name', '李四'],
  ['age', 25],
  ['occupation', '设计师']
];
const newPerson = Object.fromEntries(properties);
console.log(newPerson);
// 输出: { name: '李四', age: 25, occupation: '设计师' }

// Map转对象
const personMap = new Map([
  ['name', '王五'],
  ['age', 35],
  ['occupation', '教师']
]);
const personFromMap = Object.fromEntries(personMap);
console.log(personFromMap);
// 输出: { name: '王五', age: 35, occupation: '教师' }

实用技巧

1. 属性存在性检查

const person = {
  name: '张三',
  age: 30,
  address: null
};

// 检查属性是否存在
console.log('name' in person); // 输出: true
console.log('salary' in person); // 输出: false

// 区分属性不存在和值为undefined/null
console.log(person.name !== undefined); // 输出: true
console.log(person.address !== undefined); // 输出: true（属性存在但值为null）
console.log(person.salary !== undefined); // 输出: false（属性不存在）

// 使用可选链操作符（?.）
console.log(person?.name); // 输出: 张三
console.log(person?.salary); // 输出: undefined
console.log(person?.address?.city); // 输出: undefined（安全访问嵌套属性）

2. 对象合并策略

// 浅合并
function shallowMerge(...objects) {
  return Object.assign({}, ...objects);
}

// 深合并
function deepMerge(target, ...sources) {
  if (!sources.length) return target;
  const source = sources.shift();

  if (isObject(target) && isObject(source)) {
    for (const key in source) {
      if (isObject(source[key])) {
        if (!target[key]) Object.assign(target, { [key]: {} });
        deepMerge(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key] });
      }
    }
  }

  return deepMerge(target, ...sources);
}

function isObject(item) {
  return (item && typeof item === 'object' && !Array.isArray(item));
}

// 使用示例
const defaultSettings = {
  theme: {
    color: 'blue',
    mode: 'light'
  },
  notifications: {
    email: true,
    sms: false
  }
};

const userSettings = {
  theme: {
    color: 'red'
  },
  notifications: {
    push: true
  }
};

const mergedSettings = deepMerge({}, defaultSettings, userSettings);
console.log(mergedSettings);
// 输出:
// {
//   theme: { color: 'red', mode: 'light' },
//   notifications: { email: true, sms: false, push: true }
// }

3. 对象过滤

过滤对象的属性：

// 过滤对象属性
function filterObject(obj, predicate) {
  return Object.fromEntries(
    Object.entries(obj)
      .filter(([key, value]) => predicate(key, value))
  );
}

const person = {
  name: '张三',
  age: 30,
  salary: 10000,
  address: '北京市',
  phone: '12345678901'
};

// 过滤出值为字符串的属性
const stringProps = filterObject(person, (key, value) => typeof value === 'string');
console.log(stringProps);
// 输出: { name: '张三', address: '北京市', phone: '12345678901' }

// 过滤出特定键的属性
const personalInfo = filterObject(person, (key) => ['name', 'age', 'address'].includes(key));
console.log(personalInfo);
// 输出: { name: '张三', age: 30, address: '北京市' }

4. 对象映射

转换对象的属性值：

// 映射对象属性
function mapObject(obj, mapFn) {
  return Object.fromEntries(
    Object.entries(obj)
      .map(([key, value]) => [key, mapFn(value, key)])
  );
}

const prices = {
  apple: 5,
  banana: 3,
  orange: 4,
  grape: 8
};

// 将所有价格转换为美元（假设原价是人民币）
const pricesInUSD = mapObject(prices, price => (price / 7).toFixed(2) + ' USD');
console.log(pricesInUSD);
// 输出: { apple: '0.71 USD', banana: '0.43 USD', orange: '0.57 USD', grape: '1.14 USD' }

// 添加税费
const pricesWithTax = mapObject(prices, price => {
  const tax = price * 0.1;
  return { price, tax, total: price + tax };
});
console.log(pricesWithTax);
// 输出:
// {
//   apple: { price: 5, tax: 0.5, total: 5.5 },
//   banana: { price: 3, tax: 0.3, total: 3.3 },
//   ...
// }

5. 对象路径访问

安全地访问嵌套对象的属性：

// 根据路径获取对象属性
function getByPath(obj, path, defaultValue = undefined) {
  const keys = Array.isArray(path) ? path : path.split('.');
  let result = obj;
  
  for (const key of keys) {
    if (result === null || result === undefined) {
      return defaultValue;
    }
    result = result[key];
  }
  
  return result !== undefined ? result : defaultValue;
}

const user = {
  name: '张三',
  profile: {
    address: {
      city: '北京',
      district: '海淀'
    },
    contacts: [
      { type: 'email', value: 'zhangsan@example.com' },
      { type: 'phone', value: '12345678901' }
    ]
  }
};

console.log(getByPath(user, 'name')); // 输出: 张三
console.log(getByPath(user, 'profile.address.city')); // 输出: 北京
console.log(getByPath(user, 'profile.contacts.0.value')); // 输出: zhangsan@example.com
console.log(getByPath(user, 'profile.age', 25)); // 输出: 25（使用默认值）

6. 对象比较

比较两个对象是否相等：

// 浅比较
function shallowEqual(obj1, obj2) {
  if (obj1 === obj2) return true;
  if (!obj1 || !obj2) return false;
  
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  
  if (keys1.length !== keys2.length) return false;
  
  return keys1.every(key => obj1[key] === obj2[key]);
}

// 深比较
function deepEqual(obj1, obj2) {
  if (obj1 === obj2) return true;
  if (!obj1 || !obj2 || typeof obj1 !== 'object' || typeof obj2 !== 'object') return false;
  
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  
  if (keys1.length !== keys2.length) return false;
  
  return keys1.every(key => {
    const val1 = obj1[key];
    const val2 = obj2[key];
    
    if (typeof val1 === 'object' && typeof val2 === 'object') {
      return deepEqual(val1, val2);
    }
    
    return val1 === val2;
  });
}

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = { a: 1, b: { c: 3 } };

console.log(shallowEqual(obj1, obj2)); // 输出: false（嵌套对象是不同的引用）
console.log(deepEqual(obj1, obj2)); // 输出: true（内容相同）
console.log(deepEqual(obj1, obj3)); // 输出: false（内容不同）

性能考虑

在处理大型对象或频繁操作对象时，性能是一个重要考虑因素：

1. 遍历方法性能比较

// 创建一个包含大量属性的对象
const largeObject = {};
for (let i = 0; i < 10000; i++) {
  largeObject[`prop${i}`] = i;
}

// 性能测试
console.time('for...in');
for (const key in largeObject) {
  const value = largeObject[key];
}
console.timeEnd('for...in');

console.time('Object.keys');
Object.keys(largeObject).forEach(key => {
  const value = largeObject[key];
});
console.timeEnd('Object.keys');

console.time('Object.entries');
Object.entries(largeObject).forEach(([key, value]) => {
  // 直接获取键和值
});
console.timeEnd('Object.entries');

2. 对象操作优化

// 避免频繁修改对象
// 不推荐
function updateUserBad(user) {
  user.name = '张三';
  user.age = 30;
  user.occupation = '工程师';
  user.address = '北京市';
  user.salary = 10000;
  return user;
}

// 推荐：一次性更新
function updateUserGood(user) {
  return Object.assign({}, user, {
    name: '张三',
    age: 30,
    occupation: '工程师',
    address: '北京市',
    salary: 10000
  });
}

// 或使用扩展运算符
function updateUserBetter(user) {
  return {
    ...user,
    name: '张三',
    age: 30,
    occupation: '工程师',
    address: '北京市',
    salary: 10000
  };
}

常见问题与解决方案

1. 处理循环引用

// 处理循环引用的深拷贝
function deepCloneWithCircular(obj, hash = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  
  // 检查是否已经克隆过该对象
  if (hash.has(obj)) {
    return hash.get(obj);
  }
  
  let clone;
  
  // 处理日期
  if (obj instanceof Date) {
    clone = new Date(obj.getTime());
    hash.set(obj, clone);
    return clone;
  }
  
  // 处理数组
  if (Array.isArray(obj)) {
    clone = [];
    hash.set(obj, clone);
    obj.forEach((item, index) => {
      clone[index] = deepCloneWithCircular(item, hash);
    });
    return clone;
  }
  
  // 处理对象
  clone = {};
  hash.set(obj, clone);
  
  Object.keys(obj).forEach(key => {
    clone[key] = deepCloneWithCircular(obj[key], hash);
  });
  
  return clone;
}

// 测试循环引用
const circularObj = {
  name: '循环对象'
};
circularObj.self = circularObj; // 创建循环引用

const clonedObj = deepCloneWithCircular(circularObj);
console.log(clonedObj.name); // 输出: 循环对象
console.log(clonedObj.self === clonedObj); // 输出: true（保持了循环引用）

2. 处理对象中的特殊值

// 处理特殊值的对象序列化和反序列化
function safeStringify(obj) {
  const seen = new WeakSet();
  
  return JSON.stringify(obj, (key, value) => {
    // 处理函数
    if (typeof value === 'function') {
      return `__FUNCTION__${value.toString()}`;
    }
    
    // 处理undefined
    if (value === undefined) {
      return '__UNDEFINED__';
    }
    
    // 处理Symbol
    if (typeof value === 'symbol') {
      return `__SYMBOL__${value.description}`;
    }
    
    // 处理循环引用
    if (typeof value === 'object' && value !== null) {
      if (seen.has(value)) {
        return '__CIRCULAR__';
      }
      seen.add(value);
    }
    
    return value;
  });
}

function safeParse(str) {
  return JSON.parse(str, (key, value) => {
    // 还原函数
    if (typeof value === 'string' && value.startsWith('__FUNCTION__')) {
      const fnStr = value.slice(12);
      return new Function(`return ${fnStr}`)();
    }
    
    // 还原undefined
    if (value === '__UNDEFINED__') {
      return undefined;
    }
    
    // 还原Symbol
    if (typeof value === 'string' && value.startsWith('__SYMBOL__')) {
      return Symbol(value.slice(10));
    }
    
    return value;
  });
}

const complexObj = {
  name: '张三',
  age: 30,
  salary: undefined,
  id: Symbol('用户ID'),
  greet: function() { return `你好，${this.name}`; }
};

const str = safeStringify(complexObj);
console.log(str);

const restored = safeParse(str);
console.log(restored.name); // 输出: 张三
console.log(restored.salary); // 输出: undefined
console.log(typeof restored.id); // 输出: symbol
console.log(restored.greet()); // 输出: 你好，张三

总结

JavaScript提供了丰富的对象遍历和操作方法，掌握这些方法可以大大提高开发效率：

  1. 遍历方法：

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

  2. 操作方法：

    • 解构赋值：从对象中提取属性
    • 扩展运算符：合并对象或创建浅拷贝
    • Object.assign()：合并对象或创建浅拷贝
    • 深拷贝：创建对象的完整副本，包括嵌套对象
    • 动态属性操作：添加、修改和删除属性
    • 对象转换：对象与数组、Map等数据结构的相互转换

  3. 实用技巧：

    • 属性存在性检查：安全地访问对象属性
    • 对象合并策略：根据需求选择浅合并或深合并
    • 对象过滤和映射：选择性地处理对象属性
    • 对象路径访问：安全地访问嵌套对象的属性
    • 对象比较：判断两个对象是否相等

通过合理使用这些方法和技巧，可以编写更加简洁、高效和可维护的JavaScript代码。在处理复杂数据结构时，选择合适的对象操作方法尤为重要。