JavaScript-对象遍历-CFANZ编程社区

JavaScript-对象遍历

在 JavaScript 中对象和数组一样是可以遍历的

什么是对象的遍历

对象的遍历就是依次取出对象中所有的属性和方法。

如何遍历一个对象

在 JS 中可以通过 高级 for 循环来遍历对象，如下有一段示例代码，以下代码的含义：将指定对象中所有的属性和方法的名称取出来了依次的赋值给 key 这个变量：

for(let key in obj){}

添加如下 JS 代码然后利用高级 for 来进行遍历通过 ES6 定义的类创建出来的对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        class Person {
            constructor(myName, myAge) {
                this.name = myName;
                this.age = myAge;
            }
            
            say() {
                console.log(this.name, this.age);
            }
        }

        let p = new Person("BNTang", 34);

        for (let key in p) {
            console.log(p[key]);
        }
    </script>
</head>
<body>

</body>
</html>

运行结果如下所示：

JavaScript-对象遍历_赋值

通过运行的结果发现，我们定义的 say 方法是没有取出来的这是为什么呢，原因就在于 ES6 定义类的格式, 会将方法默认放到原型对象中，我们把它改造为通过 ES5 的方式进行定义在来查看效果代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        function Person(myName, myAge) {
            this.name = myName;
            this.age = myAge;
            this.say = function () {
                console.log(this.name, this.age);
            }
        }

        let p = new Person("BNTang", 34);

        for (let key in p) {
            console.log(p[key]);
        }
    </script>
</head>
<body>

</body>
</html>

运行结果如下图所示：

JavaScript-对象遍历_赋值_02

再次通过运行结果发现它将 say 函数直接打印出来了，那么如果我们想如果是函数的话不对其进行操作该怎么办呢，进行改造一下通过高级 for 遍历的代码，改造之后的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        function Person(myName, myAge) {
            this.name = myName;
            this.age = myAge;
            this.say = function () {
                console.log(this.name, this.age);
            }
        }

        let p = new Person("BNTang", 34);

        for (let key in p) {
            if (p[key] instanceof Function) {
                continue;
            }
            // console.log(key); // name / age / say
            // 注意点: 以下代码的含义取出p对象中名称叫做当前遍历到的名称的属性或者方法的取值
            // p["name"] / p["age"] / p["say"]
            console.log(p[key]);
            // 注意点: 以下代码的含义取出p对象中名称叫做key的属性的取值
            // console.log(p.key); // undefined
        }
    </script>
</head>
<body>

</body>
</html>

运行结果如下：

JavaScript-对象遍历_取值_03

JavaScript-对象遍历_html_04

0 条评论