背景

今天，同事看到了我一段遍历读取对象key的代码后，居然嘲笑我技术菜（虽然我确实菜）

const person = {
  name: '员工1',
  age: 30,
  profession: 'Engineer'
  // ....
};

// 使用 for 循环读取对象的键
const keys = Object.keys(person);
for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  const value = person[key];
  console.log(key + ': ' + value);
}

我说，用for循环读取对象的key不对吗，他二话不说直接给我改代码

const person = {
  name: '员工1',
  age: 30,
  profession: 'Engineer'
};

Object.keys(person).forEach(key => {
  console.log(key + ': ' + person[key]);
});

然后很装的走了......钢铁直男啊！我很生气，我这个人比较较劲，我一定要把Object.keys吃透！

Object.keys的基础用法

语法

Object.keys 是 JavaScript 中的一个方法，用于获取对象自身的可枚举属性名称，并以数组形式返回。

Object.keys(obj)

• 参数：要返回其枚举自身属性的对象
• 返回值：一个表示给定对象的所有可枚举属性的字符串数组

---

不同入参的返回值

• 处理对象，返回可枚举的属性数组

let person = {name:"张三",age:25,address:"深圳",getName:function(){}}

Object.keys(person) 

// ["name", "age", "address","getName"]

• 处理数组，返回索引值数组

let arr = [1,2,3,4,5,6]
Object.keys(arr) 
// ["0", "1", "2", "3", "4", "5"]

• 处理字符串，返回索引值数组

let str = "saasd字符串"
Object.keys(str) 
// ["0", "1", "2", "3", "4", "5", "6", "7"]

Object.keys的常用技巧

Object.keys在处理对象属性、遍历对象和动态生成内容时非常有用。

遍历对象属性

当你需要遍历一个对象的属性时，Object.keys 可以将对象的所有属性名以数组形式返回，然后你可以使用 forEach 或 for...of 来遍历这些属性名。

示例：

const person = {
  name: '员工1',
  age: 30,
  profession: 'Engineer'
};

Object.keys(person).forEach(key => {
  console.log(key + ': ' + person[key]);
});

输出：

name: 员工1
age: 30
profession: Engineer

获取对象属性的数量

可以使用 Object.keys 获取对象的属性名数组，然后通过数组的 length 属性来确定对象中属性的数量。

示例：

const person = {
  name: '员工2',
  age: 30,
  profession: 'Engineer'
};

const numberOfProperties = Object.keys(person).length;
console.log(numberOfProperties); // 输出: 3

过滤对象属性

可以使用 Object.keys 来获取对象的属性名数组，然后使用数组的 filter 方法来筛选属性名，从而创建一个新的对象。

示例：

const person = {
  name: '员工3',
  age: 30,
  profession: '钢铁直男'
};

const filteredKeys = Object.keys(person).filter(key => key !== 'age');
const filteredPerson = {};

filteredKeys.forEach(key => {
  filteredPerson[key] = person[key];
});

console.log(filteredPerson); // 输出: { name: '员工3', profession: '钢铁直男' }

检查对象是否为空

可以通过检查 Object.keys 返回的数组长度来确定对象是否为空。

示例：

const emptyObject = {};
const nonEmptyObject = { name: '讨厌的人' };

function isEmpty(obj) {
  return Object.keys(obj).length === 0;
}

console.log(isEmpty(emptyObject));  // 输出: true
console.log(isEmpty(nonEmptyObject)); // 输出: false

深拷贝对象

虽然 Object.keys 本身并不能进行深拷贝，但它可以与其他方法结合使用来创建对象的深拷贝，特别是当对象的属性是另一层对象时。

示例：

const person = {
  name: '快乐就是哈哈哈',
  age: 18,
  profession: 'coder',
  address: {
    city: 'Wonderland',
    postalCode: '12345'
  }
};

function deepCopy(obj) {
  const copy = {};
  Object.keys(obj).forEach(key => {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      copy[key] = deepCopy(obj[key]);
    } else {
      copy[key] = obj[key];
    }
  });
  return copy;
}

const copiedPerson = deepCopy(person);
console.log(copiedPerson);

是小姐姐，不是小哥哥~