关联精彩文章：# 改进tabs组件切换效果，丝滑的动画获得一致好评~

背景

今天，同事看到了我一段遍历读取对象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);

是小姐姐，不是小哥哥~