【前端】Object.keys()的使用方法及数组遍历，Object.keys(object).forEach(e =＞ {您的代码})

桃扇骨 2022-11-29 05:56 122阅读 0赞

**本文目录**

Object.keys()的使用方法及数组遍历

方法一：forEach()

方法二：for()方法

--------------------

# Object.keys()的使用方法及数组遍历 #

**Object.keys()**用于获得由对象属性名组成的数组，可与数组遍历相结合使用，非常好用。和**for...in**方法功能类似，但有使用区别！

数组遍历可以用**for()**或**forEach()**来实现，**forEach()**方法是**ECMAScript5**定义的遍历数组的一个新方法，按照索引的顺序挨个传递给定义的函数；

接下来就**Object.keys()**分别结合**for()**和**forEach()**使用进行运用，用**console.info()**输出到控制台，代码如下：

## 方法一：forEach() ##

// 创建对象
    var person = {
        name: 'hjm',
        age: 18,
        school:"SKD University",
        home: 'China'
    }
    
    // 用forEach()进行遍历
    var keys = Object.keys(person).forEach(function (e) {
        console.log("person ", e, ": ", person[e]);
    });

运行的结果如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5OTAyNw_size_16_color_FFFFFF_t_70][]

## 方法二：for()方法 ##

// 创建一个对象
    var person = {
        name: 'hjm',
        age: 18,
        school:"SKD University",
        home: 'China'
    }
    
    // 获得对象属性名组成的数组
    var keys = Object.keys(person);
    
    // 用于存储匹配的属性值
    var value = [];
    
    // 用for进行遍历
    for (var i = 0,len = keys.length; i < len; i++) {
        var key = keys[i];
        value[i] = person[key];
        console.log("person ", key, ": ", value[i]);
    }

运行的结果如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5OTAyNw_size_16_color_FFFFFF_t_70 1][]

两种方法的结果是一样的，至于使用哪种方法，就智者见智，仁者见仁了。

**for()**：用起来比较容易上手，但太罗嗦；

**forEach()**：和相关的遍历方法结合，使得数组拥有简单而强大的函数式编程风格，更加强大。

**Tips：for...in会遍历整个原型链，这可能不是你所期望的结果，然后从性能角度上看Object.keys会更优。在一些eslint的规则中也默认禁用了forin循环。**

**拓展： **JS几种数组遍历方式总结（包括各自遍历的性能分析）：[https://blog.csdn.net/function\_\_/article/details/79555301][https_blog.csdn.net_function_article_details_79555301]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5OTAyNw_size_16_color_FFFFFF_t_70]: /images/20221124/c0e387dc26494e80bf1d6628f1ab6dcf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5OTAyNw_size_16_color_FFFFFF_t_70 1]: /images/20221124/ba930389fd774e1b8e3c339780b26753.png
[https_blog.csdn.net_function_article_details_79555301]: https://blog.csdn.net/function__/article/details/79555301