在项目开发中,我们在处理数据的时候不免需要对数据进行处理,这时候我们就需要使用不同的循环便利来争对各种不同的需求。
一、for循环
for循环应该是我们js中最常见的一种循环,他的可读性和易维护性也是最差的,但也是可以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主要用于对象的遍历,可以直接获得对象所对应的键值。
let obj = {name: 'xiaohua', sex: 'male', age: '28'}
for(let key in obj){
if(obj.hasOwnProperty(key)){
console.log(key);
console.log(obj[key])
// name xiaohua sex male age 28
}
}
三、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]
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
与map基本相同。只是foreach用来处理数组,而不返回一个新数组。
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过滤循环
filter循环过滤数组成员,将满足需求的成员选择出来形成一个新的数组,不会改变原本数组。
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}]
六、Object.keys遍历对象的属性
Object.keys方法的参数是一个对象,返回一个数组,且只返回可枚举的属性。
let obj = {name: 'xiaohua', sex: 'male', age: '28'}
console.log(Object.keys(obj))
// ["name", "sex", "age"]