javascript的循环｜8月更文挑战

这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

一. 介绍javascript的循环方式的特点

1. for循环

• 使用break中断循环
• 使用continue跳过本次，继续下一次迭代

let arry = Array.from ({length:10},(v,i)=>i+1);
for (let i = 0; i < arry.length; i++) {
  console.log(arry[i])
}

2. forEach循环

• 无法中断或跳过循环

let arry = Array.from ({length:10},(v,i)=>i+1);
arry.forEach((item, index) => {
  console.log(item)
})

3. for...in循环

• 遍历对象
• 使用break或者continue中断或跳过

let obj={name:"aaa",age:"18"}
for (let key in obj) {
  console.log(key)
  console.log(obj[key])
}

4. for...of循环

• 遍历数组, 字符串, 函数参数, Map, Set
• 返回的key
• 使用break或者continue中断或跳过

let str = "abcdfrg"
for (const value of str) { 
  console.log(value);
}

5. ES6数组新增迭代方法

• map、filter、reduce、every、some

5.1 every() 遍历所有项

如果数组有一个不符合条件，则整个表达式返回为false，且剩余元素不会再去检测

• 默认是return false，return false 是 break效果，return true 是 continue效果
• 不会识别空数组[]
• 不会改变原始数组

let arry = Array.from ({length:10},(v,i)=>i+1);
let newArr = arry.every((item,index)=>{
  return item == 1 
})
console.log(newArr) // false

5.2 some() 遍历符合条件出来选项

如果数组有一个满足条件，则表达式返回true，且剩余元素不会再去检测

• 不会识别空数组[]
• 不会改变原始数组

let arry = Array.from ({length:10},(v,i)=>i+1);
let newArr = arry.some((item,index)=>{
  return item == 1 
})
console.log(newArr) // true

5.3 filter() 遍历过滤想要的选项

返回的是符合条件的项组成的数组集合

• 不会识别空数组[]
• 不会改变原始数组

let arry = Array.from ({length:10},(v,i)=>i+1);
let newArr = arry.filter((item,index)=>{
  return item > 5 
})
console.log(newArr) // [6, 7, 8, 9, 10]

5.4 map() 遍历生成想要的数组结构

• 不会识别空数组[]
• 不会改变原始数组

let arry = Array.from ({length:10},(v,i)=>i+1);
let newArr = arry.map((item,index)=>{
    return {
       v:item
    } 
})
console.log(newArr)

二。 总结

如果想对循环做退出中断处理，那么不应该使用forEach, 灵活使用数组新增的ES6方法还有常用find和findIndex