亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

面向對象編程——for in循環遍歷和for循環的區別

標簽:
JavaScript

今天在看面向对象编程,看了半天也是一知半解,不得不说难度对于新手来说确实有点高。
看到for in可以遍历某个对象的所有属性这一块,更是摸不着头脑。JS中用来遍历的方法不是已经有for循环了吗?为什么又多出一个for in来呢?
还是用示例来看下这两者到底有什么区别吧。

<ul id="ul">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>

用两种方法给这个无序列表做一个循环。

var ul=document.getElementById('ul');
var list=ul.getElementsByTagName('li');
for(var i=0;i<list.length;i++){
    console.log(list[i].innerHTML);
}

首先我们用常用的for循环来做遍历,我们可以看到控制台输出的结果如下:
图片描述

这个正是我们需要的结果,没毛病。
再看下用for in遍历的结果:

for(i in list){
    console.log(list[i].innerHTML)
}

图片描述

上面的结果没有什么区别,但是下面这三个undefined是什么情况?不管我怎么调试,都没有找到这三个undefined指的是什么。
但是当我试着在for in循环里 console.log(i)的时候,控制台上输出的结果变成了下面这个:
图片描述

原来所谓的三个undefined值是指length,item,namedItem。
我查了资料才知道for in循环是会遍历对象的所有可枚举属性,并且原型上的属性也会被访问到,只要这个属性是存在并且可枚举的,他就会给你全部打印出来。
接下来我们再来定义一个数组,如下:

var languages=new Array();
languages[1]='JS'
languages[3]='C#'
languages[5]='JAVA'
for(i in languages){
    console.log(languages[i])
}

我们先用for in来遍历,结果如下:
图片描述

这个…好像没啥毛病,再用for循环来遍历一次:
图片描述

这个时候喜闻乐见的undefined又跑出来了,不过其实这个结果才是我们所需要的,因为我们在定义数组的时候,可不只是定义了三个值,

languages[1]='JS'
languages[3]='C#'
languages[5]='JAVA'

实际上还有0,2,4三个值是没有定义的,所以for循环输出的结果才是正确的,他会强制性的通过i++的操作去获得所以0~5的值并输出;
而for in因为会遍历可枚举属性这个特点,只会输出我们给定的值,而undefined是不存在的,所以并没有给出来。
所以说对于遍历数组,最好是用for循环。但是这样的话,问题又来了,for in循环还有什么用处?
其实正如我们前面说的,for in是用来遍历对象的,而且是非数组对象(因为数组本身也是对象),而且常用于遍历JSON数据。
以上是我的一点学习心得,如果有错误的地方请大家指正~

點擊查看更多內容
8人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消