脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Object.keys()用法

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>

image

四、处理数组，返回索引值数组

<!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>

image

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

<!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>

image

六、实用技巧

<!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()用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论