JavaScript-对象的枚举

心已赠人 2022-05-27 01:40 215阅读 0赞

我们先来看一个比较实际的问题，假如我们使用到了一个对象，但是不知道这个对象有多少个属性和方法，我们要遍历这个对象的所有方法和属性，怎么办？

我们先来铺垫一个简单的问题:

我们都知道对象.属性||方法就是访问它，但是在计算机底层中还需要一步转化。

var obj= {
                name:'cyl',
                age:19,
                school:'wust',
                sex:'male',
                food:function () {
                    console.log("I like eating fish");
                }
            }

![70][]我们用这俩种遍历方法都是可以的，而且计算机底层使用的是第二种咯，这里需要注意我'name变成了字符串'name'，因为\[\]里面需要放的是属性名是string类型的。

下面介绍一下for in循环

这个循环是专门来遍历对象的

看一下如下代码

var obj= {
                name:'cyl',
                age:19,
                school:'wust',
                sex:'male',
                food:function () {
                    console.log("I like eating fish");
                }
            }
            for (var key in obj) {
                console.log(key+"       "+typeof(key));
            }

for in循环就是这个结构了，第一个参数随便写吧，第二写对象，然后循环就把每一个属性和方法的方法名都找出来。

![70 1][]我还打出来他们的类型是字符串string类型

然后就利用刚刚上面那个知识点来访问对象的属性和方法

for ( var key in obj) \{

**console** . **log**( obj\[ key\]) ;

我们注意到这里key没有加''那是因为它本身就是string类型的。

![70 2][]

这里还有一点问题，我们看如下代码:

var obj= {
                name:'cyl',
                age:19,
                school:'wust',
                sex:'male',
                food:function () {
                    console.log("I like eating fish");
                },
                __porto__: {
                    drink:'牛奶'
                }
            }
            for (var key in obj) {
                console.log(obj[key]);
            }

我们发现居然打印了drink属性。

![70 3][]

我们改一下代码:我们加上Object.prototype.abc=123;

![70 4][]果然不老实，沿着原始链找它的原型，把原型也输出了,但是对于系统自带的一下属性toString什么的一些，并不会管。

事实也是如此。

如何解决了？

这里就需要利用hasOwnProperty()函数了

该函数可以判断属性和方法是否直接属于这个对象，不是原型继承下来的。

这样就完美了。

![70 5][]

[70]: /images/20220527/64c112a101a7423f93fef0554f31c1b8.png
[70 1]: /images/20220527/dcec9f868b44464bb44971ffa06245fc.png
[70 2]: /images/20220527/cc265c6b3b244cecb48bcb235aaeb509.png
[70 3]: /images/20220527/f34ea29e8f334d2da4db765709b973a5.png
[70 4]: /images/20220527/b99010ad97a741eeaa139d84ed4769f7.png
[70 5]: /images/20220527/14b29fb0c2b7421a9bdbfcf60380a0a9.png