首頁 > web前端 > js教程 > javascript主要的循環有哪些

javascript主要的循環有哪些

醉折花枝作酒筹
發布: 2021-06-15 14:29:08
原創
3142 人瀏覽過

javascript主要的循環有:1、for循環;2、「for...in」循環;3、map方法;4、forEach循環;5、filter過濾循環;6、Object.keys遍歷對象的屬性。

javascript主要的循環有哪些

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

專案開發中,不管是建立在哪個框架基礎上,對資料的處理都是必須的,而處理資料離不開各種遍歷循環。 javascript中循環遍歷有很多種方式,記錄下幾種常見的js循環遍歷。

一、for迴圈

for迴圈應該是最普遍的,使用最多的一種迴圈遍歷方法了,所以也導致其可讀性和易維護性比較差,但是它可以及時break出循環。

let arr = [1,2,3,4,5,6,7]for(let i = 0;i<arr.length;i++){
  console.log(arr[i])
}// 1,2,3,4,5,6,7
登入後複製

二、for...in

for...in循環主要針對於物件的遍歷,當想要取得物件的對應鍵值時,使用for...in還是比較方便的

//针对对象来说  
//任何对象都继承了Object对象,或者其它对象,继承的类的属性是默认不可遍历的,
//for... in循环遍历的时候会跳过,但是这个属性是可以更改为可以遍历的,那么就会造成遍历到不属于自身的属性。
//结合使用hasOwnProperty方法,在循环内部判断一下,某个属性是否为对象自身的属性。否则就可以产生遍历失真的情况。
let obj = {name: &#39;xiaohua&#39;, sex: &#39;male&#39;, age: &#39;28&#39;}
for(let key in obj){
    if(obj.hasOwnProperty(key)){
        console.log(obj[key])
    }
}
登入後複製

三、map

map方法將陣列的所有成員依序傳入參數函數,然後把每一次的執行結果組成一個新陣列傳回。循環中途是無法停止的,總是會將所有成員遍歷完

let arr = [1,2,3,4,5]
let arr2 = arr.map((n)=>{
      return n+1
})
console.log(arr2) // [2,3,4,5,6]
console.log(arr) // [1,2,3,4,5]
登入後複製

map方法接受一個函數作為參數。當函數呼叫時,map方法向它傳入三個參數:當前成員、當前位置和陣列本身。

let arrObj = [{
    id: 1,
    name: &#39;xiaohua&#39;
},{
    id:2,
    name: &#39;xiaomin&#39;
},{
    id:3,
    name: &#39;xiaobai&#39;
}]
arrObj.map((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})
登入後複製

四、forEach

 forEach的使用方法和map使用方法差不多,只是forEach方法不回傳值,只用來操作數據,且循環中途是無法停止的,總是會將所有成員遍歷完

let arrObj = [{
    id: 1,
    name: &#39;xiaohua&#39;
},{
    id:2,
    name: &#39;xiaomin&#39;
},{
    id:3,
    name: &#39;xiaobai&#39;
}]
arrObj.forEach((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})
登入後複製

五、filter過濾循環

filter方法用於過濾數組成員,滿足條件的成員組成一個新數組返回。它的參數是一個函數,所有數組成員依次執行該函數,並傳回結果為true的成員組成一個新數組傳回。此方法不會改變原數組。

let arrObj = [{
    id: 1,
    name: &#39;xiaohua&#39;
},{
    id:2,
    name: &#39;xiaomin&#39;
},{
    id:3,
    name: &#39;xiaobai&#39;
}]
let arr2 = arrObj.filter((item,index,arr)=>{
    return (item.name === &#39;xiaohua&#39;)
})
console.log(arr2)  // [{id:1,name:&#39;xiaohua}]
登入後複製

 ECMAScirpt5 中 Array 類別中的 filter 方法使用目的是移除所有的 」false「 型別元素  (false, null, undefined, 0,#NaN (false, null, undefined, 0,#Nrr or Boolean 是一個函數,它會對遍歷數組中的元素,並根據元素的真假類型,對應返回true 或false.

六、Object.keys遍歷物件的屬性

Object .keys方法的參數是一個對象,傳回一個陣列。該數組的成員都是該物件本身的(而不是繼承的)所有屬性名,且只傳回可列舉的屬性。

let arr = [3, 4, 5, 2, 3, undefined, null, 0, ""];
let arrNew = arr.filter(Boolean);
console.log(arrNew)  //  [3, 4, 5, 2, 3]
登入後複製

判斷一個物件是否是空對象,可以用Object.keys(obj).length>0

【推薦學習:

javascript進階教學

以上是javascript主要的循環有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板