devbox
代码探险家
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【JavaScript】对象 ⑤ ( 遍历对象 | for…in 循环 遍历对象 | Object.keys() 遍历对象 的 属性名称 | Object.entries() 遍历对象属性键值对 )_js 循环对象

作者：代码探险家 | 2024-08-12 16:09:58

赞

踩

js 循环对象

文章目录





一、遍历对象引入



1、对象遍历需求


使用 字面量 或者 new 操作符 + 构造函数 的方式创建了对象后 ,

  • 使用字面量创建对象 :
var person = {  
    name: "Tom",  
    age: 18,  
    hello: function() {  
        return this.name+ " is " + this.age + " years old";  
    }  
};

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • new 操作符 + 构造函数 创建对象 :
        // 1. 定义构造函数  
        function Person(name, age) {
            // 2. 在构造函数内部定义属性和方法  
            this.name = name;
            this.age = age;

            this.hello = function() {
                console.log(this.uname + " is " + this.age + " years old");
            };
        }

        // 3. 使用 new 关键字调用构造函数，创建对象
        var person = new Person('Tom', 18);

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

对象中有若干属性 , 我们访问对象中的属性的时候 , 需要 使用 . 操作符 加上 属性名称 , 才能访问 , 如 person.name ;

如果对象中有 几十上百 个属性 , 如果想要打印出所有的属性命令 , 就需要遍历操作了 ;


2、遍历对象的常用方法


对象的遍历 可以使用如下几种方法 :

  • 使用 for…in 循环 遍历对象
  • 使用 Object.keys() 遍历对象 的 属性名称
  • 使用 Object.values() 遍历对象 的 属性值
  • 使用 Object.entries() 遍历对象 的 属性名称 + 属性值 键值对组合 ;




二、遍历对象



1、使用 for…in 循环 遍历对象


for…in 循环 既可以用于遍历数组 , 又可以用于遍历对象的可枚举属性 ;


代码示例 :


        var person = {
            name: "Tom",
            age: 18,
            hello: function() {
                return this.name + " is " + this.age + " years old";
            }
        };

        // 使用 for…in 循环 遍历对象
        for (let key in person) {
            if (person.hasOwnProperty(key)) {
                console.log(`Key: ${key}, Value: ${person[key]}`);
            }
        }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

在 for…in 循环中 , 获取的是 对象的 属性名称 , 其类型是个字符串 ;

在这里插入图片描述
调用 person.hasOwnProperty(key) 函数 , 可以 验证 对象中是否存在 属性名 为 key 的对象属性 ;

获取对象属性 , 可以 直接通过 person[key] 方式进行访问 ;


完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 遍历对象

        var person = {
            name: "Tom",
            age: 18,
            hello: function() {
                return this.name + " is " + this.age + " years old";
            }
        };

        // 使用 for…in 循环 遍历对象
        for (let key in person) {
            if (person.hasOwnProperty(key)) {
                console.log(`Key: ${key}, Value: ${person[key]}`);
            }
        }
    </script>
</head>

<body>
</body>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

执行结果 :

在这里插入图片描述


2、使用 Object.keys() 遍历对象 的 属性名称


调用 Object.keys() 方法 可以返回一个表示 给定对象的所有 可枚举属性 的 字符串数组 , 然后 使用 forEach 数组的遍历方法 来遍历这些属性 ;


代码示例 :

        // 遍历对象

        var person = {
            name: "Tom",
            age: 18,
            hello: function() {
                return this.name + " is " + this.age + " years old";
            }
        };

        // 使用 Object.keys() 遍历对象
        const keys = Object.keys(person);
        keys.forEach(key => {
            console.log(`Key: ${key}, Value: ${person[key]}`);
        });

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

调用 Object.keys(person) 方法 , 可以返回一个对象的所有 属性名 的字符串数组 , 传入的参数是 要遍历的对象 ;

在这里插入图片描述
得到 属性名 字符串数组后 , 可以使用 遍历数组的方法 , 如 forEach 方法 , 遍历该数组 , 打印出每个对象值 ;


完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 遍历对象

        var person = {
            name: "Tom",
            age: 18,
            hello: function() {
                return this.name + " is " + this.age + " years old";
            }
        };

        // 使用 Object.keys() 遍历对象
        const keys = Object.keys(person);
        keys.forEach(key => {
            console.log(`Key: ${key}, Value: ${person[key]}`);
        });
    </script>
</head>

<body>
</body>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

执行结果 :

在这里插入图片描述


3、使用 Object.values() 遍历对象 的 属性值


在 JavaScript 中 , 调用 Object.values() 方法返回一个数组 , 数组元素是在给定对象上找到的可枚举属性值 , 然后使用数组的遍历方法来遍历这些值 ;


代码示例 :

        // 遍历对象

        var person = {
            name: "Tom",
            age: 18,
            hello: function() {
                return this.name + " is " + this.age + " years old";
            }
        };

        // 使用 Object.values() 遍历对象
        const values = Object.values(person);
        values.forEach(value => {
            console.log(`Value: ${value}`);
        });

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

遍历的 属性值的类型 是根据 person 对象的 属性值类型确定的 , 此处得到的属性值类型可能是 string 类型 , 也可能是 number 类型 ;

在这里插入图片描述


完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 遍历对象

        var person = {
            name: "Tom",
            age: 18,
            hello: function() {
                return this.name + " is " + this.age + " years old";
            }
        };

        // 使用 Object.values() 遍历对象
        const values = Object.values(person);
        values.forEach(value => {
            console.log(`Value: ${value}`);
        });
    </script>
</head>

<body>
</body>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

执行结果 :

在这里插入图片描述


4、使用 Object.entries() 遍历对象 的 属性名称 + 属性值 键值对组合


在 JavaScript 中 , 调用 Object.entries() 方法 可以返回 给定对象 自身可枚举属性的 键值对数组 ;


代码示例 :

        // 遍历对象

        var person = {
            name: "Tom",
            age: 18,
            hello: function() {
                return this.name + " is " + this.age + " years old";
            }
        };

        // 使用 Object.entries() 遍历对象 的 属性名称 + 属性值 键值对组合
        const entries = Object.entries(person);
        entries.forEach(([key, value]) => {
            console.log(`Key: ${key}, Value: ${value}`);
        });

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

上述遍历出来的键值对组合中 , 键的类型是 string 类型 , 值的类型是属性值的类型 , 可能是 string / number / (()=>string) 函数类型 中的一个 , 最后一个是函数类型 ;

在这里插入图片描述

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 遍历对象

        var person = {
            name: "Tom",
            age: 18,
            hello: function() {
                return this.name + " is " + this.age + " years old";
            }
        };

        // 使用 Object.entries() 遍历对象 的 属性名称 + 属性值 键值对组合
        const entries = Object.entries(person);
        entries.forEach(([key, value]) => {
            console.log(`Key: ${key}, Value: ${value}`);
        });
    </script>
</head>

<body>
</body>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

执行结果 :

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/970521
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号