javascript主要的循環(huán)是什么

這篇文章主要為大家展示了“javascript主要的循環(huán)是什么”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“javascript主要的循環(huán)是什么”這篇文章吧。

javascript主要的循環(huán)有：1、for循環(huán)；2、“for...in”循環(huán)；3、map方法；4、forEach循環(huán)；5、filter過濾循環(huán)；6、Object.keys遍歷對(duì)象的屬性。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

項(xiàng)目開發(fā)中，不管是建立在哪個(gè)框架基礎(chǔ)上，對(duì)數(shù)據(jù)的處理都是必須的，而處理數(shù)據(jù)離不開各種遍歷循環(huán)。javascript中循環(huán)遍歷有很多種方式，記錄下幾種常見的js循環(huán)遍歷。

一、for循環(huán)

for循環(huán)應(yīng)該是最普遍的，使用最多的一種循環(huán)遍歷方法了，所以也導(dǎo)致其可讀性和易維護(hù)性比較差，但是它可以及時(shí)break出循環(huán)。

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循環(huán)主要針對(duì)于對(duì)象的遍歷，當(dāng)想要獲取對(duì)象的對(duì)應(yīng)鍵值時(shí)，使用for...in還是比較方便的

//針對(duì)對(duì)象來說  
//任何對(duì)象都繼承了Object對(duì)象，或者其它對(duì)象，繼承的類的屬性是默認(rèn)不可遍歷的，
//for... in循環(huán)遍歷的時(shí)候會(huì)跳過，但是這個(gè)屬性是可以更改為可以遍歷的，那么就會(huì)造成遍歷到不屬于自身的屬性。
//結(jié)合使用hasOwnProperty方法，在循環(huán)內(nèi)部判斷一下，某個(gè)屬性是否為對(duì)象自身的屬性。否則就可以產(chǎn)生遍歷失真的情況。
let obj = {name: 'xiaohua', sex: 'male', age: '28'}
for(let key in obj){
    if(obj.hasOwnProperty(key)){
        console.log(obj[key])
    }
}

三、map

map方法將數(shù)組的所有成員依次傳入?yún)?shù)函數(shù)，然后把每一次的執(zhí)行結(jié)果組成一個(gè)新數(shù)組返回。循環(huán)中途是無法停止的，總是會(huì)將所有成員遍歷完

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方法接受一個(gè)函數(shù)作為參數(shù)。該函數(shù)調(diào)用時(shí)，map方法向它傳入三個(gè)參數(shù)：當(dāng)前成員、當(dāng)前位置和數(shù)組本身。

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
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方法不返回值，只用來操作數(shù)據(jù)，且循環(huán)中途是無法停止的，總是會(huì)將所有成員遍歷完

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
arrObj.forEach((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

五、filter過濾循環(huán)

filter方法用于過濾數(shù)組成員，滿足條件的成員組成一個(gè)新數(shù)組返回。它的參數(shù)是一個(gè)函數(shù)，所有數(shù)組成員依次執(zhí)行該函數(shù)，返回結(jié)果為true的成員組成一個(gè)新數(shù)組返回。該方法不會(huì)改變?cè)瓟?shù)組。

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
let arr2 = arrObj.filter((item,index,arr)=>{
    return (item.name === 'xiaohua')
})
console.log(arr2)  // [{id:1,name:'xiaohua}]

ECMAScirpt5 中 Array 類中的 filter 方法使用目的是移除所有的 ”false“ 類型元素  (false, null, undefined, 0, NaN or an empty string)：

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

Boolean 是一個(gè)函數(shù)，它會(huì)對(duì)遍歷數(shù)組中的元素，并根據(jù)元素的真假類型，對(duì)應(yīng)返回 true 或 false.

六、Object.keys遍歷對(duì)象的屬性

Object.keys方法的參數(shù)是一個(gè)對(duì)象，返回一個(gè)數(shù)組。該數(shù)組的成員都是該對(duì)象自身的（而不是繼承的）所有屬性名，且只返回可枚舉的屬性。

let obj = {name: 'xiaohua', sex: 'male', age: '28'}
console.log(Object.keys(obj))
// ["name", "sex", "age"]

判斷一個(gè)對(duì)象是否是空對(duì)象，可以用Object.keys(obj).length>0

以上是“javascript主要的循環(huán)是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！