首頁(yè) 猿問(wèn) JavaScript循環(huán)：for&...

JavaScript循環(huán)：for…in與for

JavaScript 數(shù)學(xué)

慕沐林林 2019-10-11 10:34:13

我在JavaScript中遇到了奇怪的行為。我懂了“對(duì)象不支持此屬性或方法”removeAttribute以下代碼中的函數(shù)異常：var buttons = controlDiv.getElementsByTagName("button");for ( var button in buttons ) button.removeAttribute('disabled');當(dāng)我使用以下代碼更改代碼時(shí)，問(wèn)題消失了：var buttons = controlDiv.getElementsByTagName("button");for ( var i = 0; i < buttons.length; i++ ) buttons[i].removeAttribute('disabled');buttoninside的值是for...in多少？

查看完整描述

3 回答

蝴蝶刀刀

TA貢獻(xiàn)1801條經(jīng)驗(yàn) 獲得超8個(gè)贊

不要for..in用于數(shù)組迭代。

重要的是要理解，[]用于訪(fǎng)問(wèn)索引的Javascript數(shù)組的方括號(hào)語(yǔ)法（）實(shí)際上是從Object... 繼承的。

obj.prop === obj['prop'] // true

該for..in結(jié)構(gòu)不能像for..each/in其他語(yǔ)言（php，python等）中所看到的那樣更傳統(tǒng)。

Javascript for..in旨在迭代對(duì)象的屬性。產(chǎn)生每個(gè)屬性的密鑰。結(jié)合使用該鍵和Object的方括號(hào)語(yǔ)法，您可以輕松訪(fǎng)問(wèn)所需的值。

var obj = {

foo: "bar",

fizz: "buzz",

moo: "muck"

};

for ( var prop in obj ) {

console.log(prop); // foo / fizz / moo

console.log(obj[prop]); // bar / buzz / muck

}

并且由于數(shù)組只是具有順序數(shù)字屬性名稱(chēng)（索引）的對(duì)象，因此其for..in工作方式類(lèi)似，因此產(chǎn)生數(shù)字索引的方式與生成上面的屬性名稱(chēng)的方式相同。

該for..in結(jié)構(gòu)的一個(gè)重要特征是，它將繼續(xù)在原型鏈中尋找可枚舉的屬性。它還將迭代繼承的可枚舉屬性。您有責(zé)任驗(yàn)證當(dāng)前屬性是否直接存在于本地對(duì)象上，而不是它所附加的原型是否存在于本地對(duì)象上hasOwnProperty()。

for ( var prop in obj ) {

if ( obj.hasOwnProperty(prop) ) {

// prop is actually obj's property (not inherited)

}

（有關(guān)原型繼承的更多信息）

for..in在A(yíng)rray類(lèi)型上使用結(jié)構(gòu)的問(wèn)題在于，無(wú)法保證生成屬性的順序...而且通常來(lái)說(shuō)，這是處理數(shù)組時(shí)極為重要的功能。

另一個(gè)問(wèn)題是它通常比標(biāo)準(zhǔn)for實(shí)現(xiàn)慢。

底線(xiàn)

使用a for...in來(lái)迭代數(shù)組就像使用螺絲刀的but子釘釘子一樣...為什么不只使用錘子（for）？

反對(duì) 回復(fù) 2019-10-11

浮云間

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超4個(gè)贊

for...in當(dāng)您要遍歷對(duì)象的屬性時(shí)使用。但是它的作用與普通for循環(huán)相同：循環(huán)變量包含當(dāng)前的“索引”，表示對(duì)象的屬性而不是值。

要遍歷數(shù)組，應(yīng)使用常規(guī)for循環(huán)。buttons不是一個(gè)數(shù)組，而是一個(gè)NodeList（類(lèi)似數(shù)組的結(jié)構(gòu)）。

如果迭代buttons與for...in具有：

for(var i in a) {

console.log(i)

}

您將看到它輸出如下內(nèi)容：

1

2

...

length

item

因?yàn)閘ength和item是類(lèi)型的對(duì)象的兩個(gè)屬性NodeList。因此，如果您天真地使用for..in，您將嘗試訪(fǎng)問(wèn)buttons['length'].removeAttribute()，這將引發(fā)錯(cuò)誤，因?yàn)閎uttons['length']它是函數(shù)而不是DOM元素。

因此正確的方法是使用普通for循環(huán)。但是還有另一個(gè)問(wèn)題：

NodeLists處于活動(dòng)狀態(tài)，這意味著每當(dāng)您訪(fǎng)問(wèn)時(shí)length，列表便會(huì)更新（再次搜索元素）。因此，您應(yīng)該避免不必要的呼叫l(wèi)ength。

例：

for(var i = 0, l = buttons.length; i < l, i++)

反對(duì) 回復(fù) 2019-10-11

開(kāi)心每一天1111

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超13個(gè)贊

盡管for..in通常不應(yīng)用于數(shù)組，但是在ES5之前，有一種將其與稀疏數(shù)組一起使用的情況。

如其他答案所述，for..in和Arrays的主要問(wèn)題是：

屬性不一定按順序返回（即不是0、1、2等）。

返回所有可枚舉的屬性，包括非索引屬性和[[Prototype]]鏈上的那些屬性。這可能導(dǎo)致性能降低，因?yàn)榭赡苄枰猦asOwnProperty測(cè)試來(lái)避免繼承屬性。

在ES5之前使用..的原因之一是使用稀疏數(shù)組可以提高性能，前提是順序無(wú)關(guān)緊要。例如，在下面：

var a = [0];

a[1000] = 1;

遍歷一個(gè)使用for..in會(huì)比使用for循環(huán)，因?yàn)樗粌H可以訪(fǎng)問(wèn)兩個(gè)屬性，而一個(gè)for循環(huán)將嘗試1001快得多。

但是，ES5的forEach使得這種情況變得多余，它僅訪(fǎng)問(wèn)現(xiàn)有的成員，因此：

a.forEach();

還將僅依次迭代兩個(gè)屬性。

反對(duì) 回復(fù) 2019-10-11

3 回答
0 關(guān)注
622 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書(shū)簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

JavaScript循環(huán)：for…in與for

JavaScript循環(huán)：for…in與for

3 回答

添加回答