您好,登錄后才能下訂單哦!
這篇文章主要介紹“JavaScript 中哪一種循環(huán)最快”,在日常操作中,相信很多人在JavaScript 中哪一種循環(huán)最快問題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”JavaScript 中哪一種循環(huán)最快”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
答案其實(shí)是:for(倒序)
最讓我感到驚訝的事情是,當(dāng)我在本地計(jì)算機(jī)上進(jìn)行測(cè)試之后,我不得不接受 for(倒序)是所有 for 循環(huán)中最快的這一事實(shí)。下面我會(huì)舉個(gè)對(duì)一個(gè)包含超過一百萬項(xiàng)元素的數(shù)組執(zhí)行一次循環(huán)遍歷的例子。
聲明:console.time() 結(jié)果的準(zhǔn)確度在很大程度上取決于我們運(yùn)行測(cè)試的系統(tǒng)配置。你可以在此處對(duì)準(zhǔn)確度作進(jìn)一步了解。
const million = 1000000; const arr = Array(million); console.time('?'); for (let i = arr.length; i > 0; i--) {} // for(倒序) :- 1.5ms for (let i = 0; i < arr.length; i++) {} // for :- 1.6ms arr.forEach(v => v) // foreach :- 2.1ms for (const v of arr) {} // for...of :- 11.7ms console.timeEnd('?');
造成這樣結(jié)果的原因很簡(jiǎn)單,在代碼中,正序和倒序的 for 循環(huán)幾乎花費(fèi)一樣的時(shí)間,僅僅相差了 0.1 毫秒。原因是,for(倒序)只需要計(jì)算一次起始變量 let i = arr.length,而在正序的 for 循環(huán)中,它在每次變量增加后都會(huì)檢查條件 i
而 forEach 是 Array 原型的一個(gè)方法,與普通的 for 循環(huán)相比,forEach 和 for…of 需要花費(fèi)更多的時(shí)間進(jìn)行數(shù)組迭代。(譯者注:但值得注意的是,for…of 和 forEach 都從對(duì)象中獲取了數(shù)據(jù),而原型并沒有,因此沒有可比性。)
我想,也許大家都應(yīng)該對(duì)這個(gè)基礎(chǔ)循環(huán)非常熟悉了。我們可以在任何我們需要的地方使用 for 循環(huán),按照核定的次數(shù)運(yùn)行一段代碼。最基礎(chǔ)的 for 循環(huán)運(yùn)行最迅速的,那我們每一次都應(yīng)該使用它,對(duì)嗎?并不然,性能不僅僅只是唯一尺度,代碼可讀性往往更加重要,就讓我們選擇適合我們應(yīng)用程序的變形即可。
這個(gè)方法需要接受一個(gè)回調(diào)函數(shù)作為輸入?yún)?shù),遍歷數(shù)組的每一個(gè)元素,并執(zhí)行我們的回調(diào)函數(shù)(以元素本身和它的索引(可選參數(shù))作為參數(shù)賦予給回調(diào)函數(shù))。forEach 還允許在回調(diào)函數(shù)中使用一個(gè)可選參數(shù) this。
const things = ['have', 'fun', 'coding']; const callbackFun = (item, idex) => { console.log(`${item} - ${index}`); } things.foreach(callbackFun); /* 輸出 have - 0 fun - 1 coding - 2 */
for…of 是在 ES6(ECMAScript 6)中實(shí)現(xiàn)標(biāo)準(zhǔn)化的。它會(huì)對(duì)一個(gè)可迭代的對(duì)象(例如 array、map、set、string 等)創(chuàng)建一個(gè)循環(huán),并且有一個(gè)突出的優(yōu)點(diǎn),即優(yōu)秀的可讀性。
const arr = [3, 5, 7]; const str = 'hello'; for (let i of arr) { console.log(i); // 輸出 3, 5, 7 } for (let i of str) { console.log(i); // 輸出 'h', 'e', 'l', 'l', 'o' }
需要注意的是,請(qǐng)不要在生成器中使用 for……of,即便 for……of 循環(huán)提前終止。在退出循環(huán)后,生成器被關(guān)閉,并嘗試再次迭代,不會(huì)產(chǎn)生任何進(jìn)一步的結(jié)果。
for…in 會(huì)在對(duì)象的所有可枚舉屬性上迭代指定的變量。對(duì)于每個(gè)不同的屬性,for…in 語句除返回?cái)?shù)字索引外,還將返回用戶定義的屬性的名稱。因此,在遍歷數(shù)組時(shí)最好使用帶有數(shù)字索引的傳統(tǒng) for 循環(huán)。因?yàn)?for…in 語句還會(huì)迭代除數(shù)組元素之外的用戶定義屬性,就算我們修改了數(shù)組對(duì)象(例如添加自定義屬性或方法),依然如此。
const details = {firstName: 'john', lastName: 'Doe'}; let fullName = ''; for (let i in details) { fullName += details[i] + ' '; // fullName: john doe }
for…of 和 for…in
for…of 和 for…in 之間的主要區(qū)別是它們迭代的內(nèi)容。for…in 循環(huán)遍歷對(duì)象的屬性,而 for…of 循環(huán)遍歷可迭代對(duì)象的值。
let arr= [4, 5, 6]; for (let i in arr) { console.log(i); // '0', '1', '2' } for (let i of arr) { console.log(i); // '4', '5', '6' }
for 最快,但可讀性比較差
foreach 比較快,能夠控制內(nèi)容
for...of 比較慢,但香
for...in 比較慢,沒那么方便
到此,關(guān)于“JavaScript 中哪一種循環(huán)最快”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。