Object.keys()的用法示例详解
更新时间：2023年07月26日 10:07:15 作者：史上最菜开发
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----13 Object.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()用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了Next.js脚手架完整搭建封装的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
下面小编就为大家带来一篇js控制li的隐藏和显示实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
Bootstrap每天必学之栅格系统，小编对Bootstrap栅格系统（布局）也很陌生，特分享整理这篇文章，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了js prototype和__proto__的关系是什么，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
js倒计时代码，可以精确到天和精确到秒2013-11-11
typescript中 declare global 关键字用法示例小结
在TypeScript中,declare global 用于在模块内部扩展全局作用域,本文重点介绍typescript中 declare global 关键字用法示例小结,感兴趣的朋友跟随小编一起看看吧2024-04-04
这篇文章主要介绍了JavaScript事件(区分静态注册和动态注册)的相关资料，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下2021-02-02
本文主要通过几个实例对js中作用域进行详细解析，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
下面小编就为大家带来一篇浅谈JS 数字和字符串之间相互转化的纠纷。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
为了满足用户体验度，使用SweetAlert插件实现响应式提示框效果非常好，下面通过这篇文章给大家介绍jquery SweetAlert插件实现响应式提示框，需要的朋友可以参考下2015-08-08
最新评论