JavaScript getOwnPropertyNames遍历对象

JavaScript getOwnPropertyNames遍历对象教程

在 JavaScript 中，遍历一个对象的属性可以使用 getOwnPropertyNames() 方法，Object.getOwnPropertyNames() 方法会返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括 Symbol 值作为名称的属性）组成的数组。

JavaScript Object.getOwnPropertyNames遍历对象详解

语法

Object.getOwnPropertyNames(obj);

参数

参数	描述
obj	需要遍历的对象，其自身的可枚举和不可枚举属性的名称被返回。

返回值

在给定对象上找到的自身属性对应的字符串数组。

说明

Object.getOwnPropertyNames() 返回一个数组，该数组对元素是 obj 自身拥有的枚举或不可枚举属性名称字符串。

数组中枚举属性的顺序与通过 for…in 循环（或 Object.keys）迭代该对象属性时一致。数组中不可枚举属性的顺序未定义。

案例

Object.getOwnPropertyNames遍历对象属性

使用 Object.getOwnPropertyNames 遍历对象属性

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Object.getOwnPropertyNames遍历对象属性</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            function createPerson(name, age, sex){
                var person = new Object();
                person.name = name;
                person.age = age;
                person.sex = sex;
                person.sayHi = function(){
                    console.log("I am", this.name, "i am", this.age, "years old", "and my sex is", this.sex);
                }
                return person;
            }
            var person = createPerson("HaiCoder", 109, "F");
            var keys = Object.getOwnPropertyNames(person);
            console.log("Keys =", keys);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

18_JavaScript Object getOwnPropertyNames遍历对象属性.png

我们使用 Object.getOwnPropertyNames 方法获取了对象的所有的属性的键组成的数组。

Object.getOwnPropertyNames遍历对象属性

使用 Object.getOwnPropertyNames遍历对象属性

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Object.getOwnPropertyNames遍历对象属性</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            function createPerson(name, age, sex){
                var person = new Object();
                person.name = name;
                person.age = age;
                person.sex = sex;
                person.sayHi = function(){
                    console.log("I am", this.name, "i am", this.age, "years old", "and my sex is", this.sex);
                }
                return person;
            }
            var person = createPerson("HaiCoder", 109, "F");
            var keys = Object.getOwnPropertyNames(person);
            for(var key of keys){
                console.log("Person Key =", key, "Value =", person[key]);
            }
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

19_JavaScript Object getOwnPropertyNames遍历对象属性.png

我们使用 Object.getOwnPropertyNames 方法获取了对象的所有的属性的键组成的数组，接着，使用数组的 for of 方法，遍历了数组的所有的值，从而遍历了对象的所有属性。

Object.getOwnPropertyNames遍历对象属性

使用 Object.getOwnPropertyNames 遍历对象属性

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Object.getOwnPropertyNames遍历对象属性</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            function createPerson(name, age, sex){
                var person = new Object();
                person.name = name;
                person.age = age;
                person.sex = sex;
                person.sayHi = function(){
                    console.log("I am", this.name, "i am", this.age, "years old", "and my sex is", this.sex);
                }
                return person;
            }
            var person = createPerson("HaiCoder", 109, "F");
            Object.getOwnPropertyNames(person).map((key) => {
                console.log("Person Key =", key, "Value =", person[key]);
            })
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

20_JavaScript Object getOwnPropertyNames遍历对象属性.png

我们使用 Object.getOwnPropertyNames 方法获取了对象的所有的属性的键组成的数组，接着，使用数组的 map 函数，根据数组的 key 遍历了数组的所有属性和属性的值。

JavaScript getOwnPropertyNames遍历对象属性总结

Object.getOwnPropertyNames() 方法会返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。