在JavaScript中，Object.keys()方法是一个功能强大的工具，它允许开发者获取对象的所有可枚举属性名，并以数组的形式返回。这一特性使得Object.keys()在处理对象属性、字符串字符索引以及数组元素索引等方面具有广泛的应用。无论你是前端开发者，还是后端开发者，掌握Object.keys()的用法都将极大地提升你的编码效率和代码可读性。本文将通过详细的示例和解释，带你深入理解Object.keys()的用法，以及它在不同数据类型上的表现。
Object.keys()的用法
Object.keys()的用法
作用：遍历对象
返回结果：返回对象中每一项key的数组
例子1：
// 1. 定义一个对象
var obj = { 0:'熊大',1:'熊二',2:'光头强' }
// 2. 使用Object.keys()方法
var keyValue = Object.keys(obj)
// 3. 打印结果
console.log(keyValue) // 得到是：["0","1","2"]例子2：
var obj2 = {'name':'a','list':{'a':'value1','b':'value2'},'num':13}
var keyValue2 = Object.keys(obj2)
console.log(keyValue2) // 得到是：["name","list","num"]也可以结合forEach来使用Object.keys(要遍历的对象).forEach((v,i) => {})例子3：
Object.keys(obj2).forEach(function(key){
console.log(key, obj2[key]);
})
// 得到的是：name---a
// list---{a:"value",b:"value"}
// num----13Object.keys()方法详解
一、官方解释
Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举，那么将返回由键组成的数组。
二、语法
Object.keys(obj)参数：要返回其枚举自身属性的对象返回值：一个表示给定对象的所有可枚举属性的字符串数组
三、处理对象，返回可枚举的属性数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object.keys()处理对象，返回可枚举的属性数组</title>
</head>
<body>
<script type="text/javascript">
let person={
name:'一只流浪的kk',
age:20,
eat:function(){}
}
console.log(Object.keys(person));// ['name','age','eat']
</script>
</body>
</html>
四、处理数组，返回索引值数组
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Object.keys()处理数组，返回索引值数组</title> </head> <body> <script type="text/javascript"> let arr=[1,2,3,4,5]; console.log(Object.keys(arr));//['0','1','2','3','4','5'] </script> </body> </html>
五、处理字符串，返回索引值数组
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Object.keys()处理字符串，返回索引值数组</title> </head> <body> <script type="text/javascript"> let str='hello'; console.log(Object.keys(str));//['0','1','2','3','4'] </script> </body> </html>
六、实用技巧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let person={
name:'一只流浪的kk',
age:18,
eat:function(){
}
}
Object.keys(person).map((key)=>{
person[key];//获得属性对应的值，可以进行其它处理
})
</script>
</body>
</html>七、Object.values()和Object.keys()是相反的操作，把一个对象的值转换为数组
注意：在ES5里，如果此方法的参数不是对象（而是一个原始值），那么它会抛出 TypeError。在ES2015中，非对象的参数将被强制转换为一个对象
Object.keys("foo");
// TypeError: "foo" is not an object (ES5 code)
Object.keys("foo");
// ["0", "1", "2"] (ES2015 code)总结
通过对Object.keys()方法的深入学习和实践，我们可以看到，它在处理对象、字符串和数组时都展现出了极大的灵活性和实用性。无论是获取对象的所有可枚举属性名，还是获取字符串的字符索引数组，亦或是获取数组的索引数组，Object.keys()都能轻松应对。此外，我们还了解了Object.keys()与Object.values()和Object.entries()等方法的区别与联系，这些方法共同构成了JavaScript中操作对象属性的强大工具集。掌握这些方法，将帮助你在开发中更加高效地处理对象数据，提升代码的可读性和可维护性。总之，Object.keys()是JavaScript中一个非常实用且强大的方法，值得每一位开发者深入学习和掌握。
本文来源于#史上最菜开发，由@蜜芽 整理发布。如若内容造成侵权/违法违规/事实不符，请联系本站客服处理!
该文章观点仅代表作者本人，不代表本站立场。本站不承担相关法律责任。
如若转载，请注明出处：https://www.zhanid.com/biancheng/2861.html
