成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

復(fù)習(xí)Javascript專題（五）：js中的循環(huán)遍歷

mrli2016 / 2550人閱讀

摘要：循環(huán)這個(gè)是最常用，也是最簡(jiǎn)單的循環(huán)了。常用于數(shù)組或者類數(shù)組的遍歷。異步任務(wù)定時(shí)器，事件，回調(diào)函數(shù)等。循環(huán)它主要用來遍歷對(duì)象，也可用來遍歷數(shù)組。遍歷對(duì)象時(shí)是屬性名，而遍歷數(shù)組是字符串格式的下標(biāo)值。

for循環(huán) 
這個(gè)是最常用，也是最簡(jiǎn)單的循環(huán)了。常用于數(shù)組或者類數(shù)組的遍歷。
 for(let i=0;i<5;i++){
     console.log(`${i} is ${arr[i]}`);
 }

拓展：面試中經(jīng)常愛考這樣一道代碼題：

    for(var i=0;i<5;i++){
        setTimeout(function(){
            console.log(i);
        },1000)
    }

問：最后分別打印出i的值是多少？

要注意，這里特意用了var聲明，是因?yàn)閘et會(huì)有塊級(jí)作用域，用let的話這段代碼就很正常的打印出0,1,2,3了。

正常來說答案是5次5。
Ps:為什么說正常呢，我發(fā)現(xiàn)點(diǎn)CSDN的博客正文進(jìn)去的控制臺(tái)一直是打印5個(gè)1，我也不曉得為啥[/捂臉哭/]

這一道題就涉及了js的單線程和異步，閉包，作用域幾個(gè)方面。

單線程的意思是同一時(shí)間不能分心，只能專心做一件事，而異步任務(wù)會(huì)先被插入到異步隊(duì)列中，

只有當(dāng)所有同步任務(wù)執(zhí)行完畢后，棧被清空，才會(huì)讀取任務(wù)隊(duì)列里的任務(wù)并執(zhí)行。

異步任務(wù)定時(shí)器，事件，回調(diào)函數(shù)等。
    
關(guān)于js線程這里有詳細(xì)介紹：JS 演變、單線程、異步任務(wù)

說說作用域方面：其實(shí)上面的for循環(huán)等同于下面的寫法：

var i=0;    
for(;i<5;i++){
    console.log(i)
}

由此可見，i是全局變量，所以在運(yùn)行完后也沒有銷毀，而是一次次值被覆蓋，直到最后一次。
因此，當(dāng)執(zhí)行定時(shí)器里面的函數(shù)時(shí)，同步任務(wù)已經(jīng)執(zhí)行完，但還是當(dāng)拿到這個(gè)全局變量。

而這個(gè)問題有兩個(gè)解決辦法：作用域和閉包
作用域：把var改成let即可，因?yàn)閘et有塊級(jí)作用域。
閉包：閉包的特性就是函數(shù)嵌套函數(shù)。

for(var i=0;i<5;i++){
    (function(i){
        setTimeout(function(){
            console.log(i);
        },1000)
    }(i))
}

每次for循環(huán)時(shí)都將i的值傳入匿名函數(shù)，每次都創(chuàng)建了一個(gè)新的擁有私有變量i的匿名函數(shù)。

for in循環(huán)

它主要用來遍歷對(duì)象，也可用來遍歷數(shù)組。遍歷對(duì)象時(shí)key是屬性名，而遍歷數(shù)組是字符串格式的下標(biāo)值。

缺點(diǎn)：它不能保證遍歷順序；不僅遍歷自身屬性，還會(huì)訪問prototype上的屬性。(可用hasOwnProperty加一層判斷)

    let arr=["red","blue","green","grey"];
    for(let key in arr){
        console.log(`${key} is ${arr[key]}`);
    }
for of循環(huán)（ES6新增——遍歷數(shù)組）

它可用來替代for in和forEach，它可以遍歷 Arrays（數(shù)組/類數(shù)組）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代(Iterable data)的數(shù)據(jù)結(jié)構(gòu),注意它的兼容性。
與for in區(qū)別：

a.它的key值代表的是value值。
b.它不能多帶帶遍歷對(duì)象，因?yàn)楂@取不到對(duì)象的key值。
總的來說，對(duì)象用for in，數(shù)組用for of比較合適。

用法同for in就不重復(fù)了。

forEach循環(huán)（遍歷數(shù)組）

它主要用來遍歷數(shù)組，沒有返回值。
用法：arr.forEach(()=>(item,index,arr))

let arr=["red","blue","green","grey"];
arr.forEach(function(item,index,arr){
    console.log(`${index} is ${item}`);
    })

確實(shí)和ES6的map方法比較像。

map方法（ES6新增——遍歷數(shù)組）

它返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。我在React里用的話，經(jīng)常是返回一個(gè)DOM結(jié)構(gòu)。

let arr=["red","blue","green","grey"];
let result=arr.map((item,index,arr)=>{
        console.log(`${index} is ${item}`)
        return item;
    })
filter方法（數(shù)組內(nèi)置方法）

看名字也知道是一個(gè)過濾功能，不過它不會(huì)改變?cè)瓟?shù)組，只返回過濾后的元素，非常實(shí)用的一個(gè)方法，墻裂推薦。
參數(shù)和map一樣。

   let arr=[3,53,43,65,32,5,52,64,2,64];
   let result=arr.filter((item)=>{return item%3=2;});
while 和 do while

講真，while我用得很少，就是在算法里用過了。

while(條件為真){
    執(zhí)行代碼...
    循環(huán)條件變更
}
let n=1;
while(n<6){
    console.log("看進(jìn)幾次"); // 5次啦
    n++;
}

do while和while不同的是，它不管條件是否成立，反正都要走一次。
let n2=3;
do{
    console.log("至少走一次")            
    n++;
}while(n<3); // 這時(shí)候其實(shí)條件為假，但還是會(huì)進(jìn)do的語(yǔ)句

平時(shí)工作就用到這些會(huì)比較多，日后有常用的再補(bǔ)充。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99356.html

相關(guān)文章

  • 復(fù)習(xí)Javascript專題（一）：基本概念部分

    摘要：一數(shù)據(jù)類型基本類型引用類型類型判斷返回結(jié)果未定義布爾值字符串?dāng)?shù)值對(duì)象或者函數(shù)拓展堆棧兩種數(shù)據(jù)結(jié)構(gòu)堆隊(duì)列優(yōu)先，先進(jìn)先出由操作系統(tǒng)自動(dòng)分配釋放，存放函數(shù)的參數(shù)值，局部變量的值等。 一、數(shù)據(jù)類型 基本類型：`Null Boolean String Undefined Number(NB SUN)` 引用類型：`Array Function Object` 類型判斷：typeof 返回結(jié)果...

    LiangJ 評(píng)論0 收藏0

  • 復(fù)習(xí)Javascript專題（四）：js中的深淺拷貝

    摘要：基本數(shù)據(jù)類型的復(fù)制很簡(jiǎn)單，就是賦值操作，所以深淺拷貝也是針對(duì)，這類引用類型數(shù)據(jù)。它會(huì)拋棄對(duì)象的。另外，查資料過程中還看到這么一個(gè)詞結(jié)構(gòu)化克隆算法還有這一篇資料也有參考，也寫得比較詳細(xì)了的深淺拷貝 基本數(shù)據(jù)類型的復(fù)制很簡(jiǎn)單，就是賦值操作，所以深淺拷貝也是針對(duì)Object，Array這類引用類型數(shù)據(jù)。 淺拷貝對(duì)于字符串來說，是值的復(fù)制，而對(duì)于對(duì)象來說則是對(duì)對(duì)象地址的復(fù)制；而深拷貝的話，它不...

    MobService 評(píng)論0 收藏0

  • 復(fù)習(xí)Javascript專題（二）：閉包，內(nèi)存，以及垃圾回收機(jī)制

    摘要：一個(gè)閉包就是當(dāng)一個(gè)函數(shù)返回時(shí)，一個(gè)沒有釋放資源的棧區(qū)所以參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收。使用不當(dāng)會(huì)很容易造成內(nèi)存泄露。最后，垃圾回收器完成內(nèi)存清除工作，銷毀那些帶標(biāo)記的值并回收它們所占用的內(nèi)存空間。 1.什么是閉包？閉包有啥特性以及存在什么問題？ 概念：閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)。下面的outer就形成了一個(gè)閉包： function outer(){ co...

    hankkin 評(píng)論0 收藏0

  • JavaScript專題之jQuery通用遍歷方法each的實(shí)現(xiàn)

    摘要：語(yǔ)法為回調(diào)函數(shù)擁有兩個(gè)參數(shù)第一個(gè)為對(duì)象的成員或數(shù)組的索引，第二個(gè)為對(duì)應(yīng)變量或內(nèi)容。但是對(duì)于的函數(shù)，如果需要退出循環(huán)可使回調(diào)函數(shù)返回，其它返回值將被忽略。 JavaScript 專題系列第十一篇，講解 jQuery 通用遍歷方法 each 的實(shí)現(xiàn) each介紹 jQuery 的 each 方法，作為一個(gè)通用遍歷方法，可用于遍歷對(duì)象和數(shù)組。 語(yǔ)法為： jQuery.each(object,...

    blankyao 評(píng)論0 收藏0

  • JS專題之?dāng)?shù)組去重

    摘要：將元素作為對(duì)象的鍵，默認(rèn)鍵對(duì)應(yīng)的值為如果對(duì)象中沒有這個(gè)鍵，則將這個(gè)元素放入結(jié)果數(shù)組中去。 前言 數(shù)組去重在日常開發(fā)中的使用頻率還是較高的，也是網(wǎng)上隨便一抓一大把的話題，所以，我寫這篇文章目的在于歸納和總結(jié)，既然很多人都在提的數(shù)組去重，自己到底了解多少呢。又或者是如果自己在開發(fā)中遇到了去重的需求，自己能想到更好的解決方案嗎。 這次我們來理一理怎么做數(shù)組去重才能做得最合適，既要考慮兼容性，...

    only_do 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<