Object.keys() 方法详解与实战应用

作者:木棉时间:2026-10-30 22:06:52浏览:164

本文详细解析 JavaScript 中 Object.keys() 方法的用法。该方法用于获取对象自身可枚举属性的键名数组,返回顺序与 for...in 一致。文章涵盖对象、数组及字符串的处理示例,介绍结合 forEach 的遍历技巧,并重点说明 ES5 与 ES2015 在非对象参数处理上的差异,帮助开发者正确使用此核心 API。

Object.keys() 方法详解

Object.keys() 主要用于遍历对象,其功能是返回一个包含对象所有自身可枚举属性键名的数组。

示例 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() 返回的键名数组进行遍历,语法为 Object.keys(目标对象).forEach((value, index) => {})。示例 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) 参数: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>

Object.keys() 方法详解

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

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

Object.keys() 方法详解

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

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

Object.keys() 方法详解

六、实用技巧

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

作者最新文章