注册
web

因为不知道Object.keys,被嫌弃了

关联精彩文章:# 改进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 可以将对象的所有属性名以数组形式返回,然后你可以使用 forEachfor...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);

是小姐姐,不是小哥哥~


作者:快乐就是哈哈哈
来源:juejin.cn/post/7392115478549069861

0 个评论

要回复文章请先登录注册