js中的循环与跳出

前言：

在日常工作中经常遇到需要跳出当前循环的场景，但是每次查询过后没多久就忘记了，循环时也是使用map一把梭，趁着休息，在这里总结一下js中的循环方法以及如何跳出当前循环。

本文略去了一些方法的传入参数以及返回参数，做了一些精简，如果需要详细了解方法的使用可以去MDN上详细查询。

for循环

• 基本结构：for(表达式一;表达式二;表达式三){}

• 表达式一 用来定义变量

• 表达式二 用来判断循环是否结束

• 表达式三 每次循环都要执行的表达式

• {} 代码块

常规用法

for(let i=1;i<5;i++){
   console.log(i)
}
​
输出：
1
2
3
4

省略表达式一

let i =1;
for(;i<5;i++){
console.log(i)
}
输出：
1
2
3
4

省略表达式二

for (let i = 1;; i++) {
  if (i == 3) {
    break;
  }
  console.log(i)
}
输出：
1
2

省略代码块

let i = 1;
for(;i<3;i++);
console.log(i);
输出：2

跳出循环

continue跳出本次循环

for(let i=1;i<5;i++){
  if(i===2){
    continue;
  }
   console.log(i)
}
输出
1
3
4

跳出所有：

return跳出所有循环

function test(){
  for(let i=1;i<5;i++){
    if(i===2){
      return
    }
     console.log(i)
  }
}
test()
​
输出：
1
return 必须出现在函数体内，否则会出现语法错误：Uncaught SyntaxError: Illegal return statement

break跳出所有循环

for(let i=1;i<5;i++){
  if(i===2){
    break;
  }
   console.log(i)
}
输出：
1

for in

一般用来遍历对象的属性，不建议用来遍历数组

let obj = {name:'小明',sex:'男',adress:'中国'};
function Parent(){
  this.age = 11;
}
Parent.prototype = obj;
let son = new Parent();
​
for(let key in son){
  console.log(key)
}
​
输出：
name
sex
adress
age

遍历对象时会连同继承来的属性一并循环出来，如果只需要遍历自身属性，则需要使用hasOwnProperty方法

let obj = {name:'小明',sex:'男',adress:'中国'};
function Parent(){
  this.age = 11;
}
Parent.prototype = obj;
let son = new Parent();
​
for(let key in son){
  if(son.hasOwnProperty(key)){
    console.log(key)
  }
}
​
输出
age

跳出循环：
我是变大的字

continue跳出本次循环

let obj = {name:'小明',sex:'男',adress:'中国'};
functiontest(){
 for(let key in obj){
   if(key == 'sex'){
     continue
   }
   console.log(key)
 }
}
test()
输出：
name
adress

break跳出所有循环

let obj = {name:'小明',sex:'男',adress:'中国'};
for(letkey in obj){
 if(key == 'sex'){
   break
 }
 console.log(key)
}
​
let obj = {name:'小明',sex:'男',adress:'中国'};
function test(){
 for(let key in obj){
   if(key == 'sex'){
     return
   }
   console.log(key)
 }
}
test()

return跳出所有循环

let obj = {name:'小明',sex:'男',adress:'中国'};
console.log("开始循环")
function test(){
  for (let key in obj) {
    console.log(key)
    return;
  }
}
test();
console.log("结束循环")
输出：
name
return 必须出现在函数体内，否则会出现语法错误：Uncaught SyntaxError: Illegal return statement

for of

一般用在可迭代对象上

let arr = ['a','b','c'];
for(let value of arr){
  console.log(value)
}
输出：
a
b
c

跳出循环

break跳出

let arr = ['a','b','c'];
console.log("开始循环")
for(let value of arr){
  console.log(value)
  break;
}
console.log("结束循环")
​
输出
开始循环
a
结束循环

return跳出

let arr = ['a', 'b', 'c'];
console.log("开始循环")
function test(){
  for (let value of arr) {
    console.log(value)
    return;
  }
}
test();
console.log("结束循环")
return 必须出现在函数体内，否则会出现语法错误：Uncaught SyntaxError: Illegal return statement

continue跳出本次循环

let arr = ['a','b','c']
functiontest(){
 for(let value of arr){
   if(value == 'b'){
     continue
   }
   console.log(value)
 }
}
test()
输出
a
c

forEach 循环

无返回值

forEach 第一次执行回调时就确定了数组的范围，循环时新增的值并不会被循环到

let arr = ['a','b','c','d'];
arr.forEach((item,index)=>{
 if(item == 'b'){
   arr.push('E')
 }
 console.log(item)
})
输出：
a
b
c
d

如果在循环中更改了已存在的值，则传递给回调的值是遍历到值的那刻的值

let arr = ['a','b','c','d'];
arr.forEach((item,index)=>{
 if(item == 'b'){
   arr[2] = 'C';
 }
 console.log(item)
})
输出：
a
b
C
d

如果循环中删除数组中的某项值，传递给forEach中的数组为删除数据后的数组

let arr = ['a','b','c','d'];
arr.forEach((item,index)=>{
 if(item == 'b'){
   arr.splice(3,1)
 }
 console.log(item,index)
})
输出：
a 0
b 1
c 2

forEach 只能通过抛出异常来结束循环，如果需要跳出循环建议使用for in、for of、 for、 every 、some 、 find等函数

map

返回值为return后组成的新数组

循环中删除元素后下次循环接收到的新数组为删除元素后的数组，当循环到第2个元素时删除掉第三个元素，循环第三个元素时数组为[20,30,40],index为2，所以输出40,2，循环完毕后输出[20,30,40]

let array = [10,20,30,40];
array.map((item,index,arr)=>{
 if(item==20){
   arr.splice(0,1);
 }
 console.log(item,index);
});
console.log(array);
输出：
10 0
20 1
40 2
[20,30,40]

every

当回调函数返回true时继续执行循环，当返回false时跳出循环

let arr = [10,20,30,40];
arr.every((item,index)=>{
 console.log(item)
 return true
})
输出：
10
20
30
40

当空数组调用时，总会返回true

console.log([].every(() => {
  return false
}))
输出：
true

跳出循环

let arr = [10,20,30,40];
arr.every((item,index)=>{
 console.log(item)
 if(item==20){
   return false
 }
 return true
})
输出：
10
20

some

当回调函数返回false时继续执行循环，当返回true时跳出循环

跳出循环

let arr = [10, 20, 30, 40];
arr.some((item, index) => {
  console.log(item)
  return false
})
​
输出：
10

当空数组调用时，总会返回false

console.log([].some(() => {
  return true
}))
输出：
false

filter

返回一个由通过的元素组成的数组

let arr = [1,2,3,4,5]
let newArr = arr.filter((item,index)=>{
  return item>2
})
console.log(newArr)
输出：
3
4
5

总结：

循环时需要跳出

for 、for in 、for of 、some 、every

返回新数组

map 、filter 、some 、every

如果想获取更多内容，可以扫描下方二维码，一起学习，一起进步。