JavaScript 循环中断研究与总结-用法篇

上篇我们讲了 break , continue , return 这三个常用的关键字, 本篇讲一下在具体循环或函数中的用法

结论

1. for , for...in , for...of : 当没有 label 标记时候, break 跳出本次循环并执行循环体后的代码, continue 结束本次循环执行下一次循环. 没有 return .
2. Array.forEach : 遍历整个数组, return false 或者 return true 都是结束本次循环执行下一次循环. 没有 break 或 continue . 我想你可能需要跳出 forEach
3. Array.map : map 和 forEach 类似, 有返回值, 返回结果是 return 值组成的数组.
4. jQuery.each : return false 跳出本次循环并执行循环体后的代码; return true 结束本次循环执行下一次循环. 没有 break 或 continue .

for

1. break :

var arr = [1, 2, 3]
var len = arr.length

// for break
for (var i = 0; i < len; i++) {
  for (var j = 0; j < 3; j++) {
    console.log(arr[i] + '-' + j)
    if (j === 1) {
      break
    }
    console.log(arr[i] + '-' + j)
  }
}

// 输出
// 1-0
// 1-0
// 1-1
// 2-0
// 2-0
// 2-1
// 3-0
// 3-0
// 3-1

如果不加 label 标记, break 跳出本次循环并执行循环体后的代码, 也就是本例的第二层循环.

2. continue :

var arr = [1, 2, 3]
var len = arr.length

// for continue
for (var i = 0; i < len; i++) {
  for (var j = 0; j < 3; j++) {
    console.log(arr[i] + '-' + j)
    if (j === 1) {
      continue
    }
    console.log(arr[i] + '-' + j)
  }
}

// 输出
// 1-0
// 1-0
// 1-1
// 1-2
// 1-2
// 2-0
// 2-0
// 2-1
// 2-2
// 2-2
// 3-0
// 3-0
// 3-1
// 3-2
// 3-2

如果不加 label 标记, continue 结束本次循环执行下一次循环(都是针对第二层)

tips: for 循环里不能有 return !

forEach

1. return false :

var arr = [1, 2, 3]

arr.forEach(function(value, index) {
  console.log(arr[index])
  if (index === 1) {
    return false
  }
  console.log(arr[index])
})

// 输出
// 1
// 1
// 2
// 3
// 3

结束本次循环执行下一次循环

2. return true :

var arr = [1, 2, 3]

arr.forEach(function(value, index) {
  console.log(arr[index])
  if (index === 1) {
    return true
  }
  console.log(arr[index] + 10)
})

// 输出
// 1
// 1
// 2
// 3
// 3

forEach return true

结束本次循环执行下一次循环

tips: forEach 循环里不能有 break 或 continue !

Array.map

map 和 forEach 差不多, 区别是 map 的返回值是一个数组

for...in

1. break

var arr = [1, 2, 3]

for (var i in arr) {
  console.log(typeof i)
  console.log(arr[i])
  if (i == 1) {
    break
  }
  console.log(arr[i])
}

// 输出
// string
// 11
// 11
// string
// 12

for...in 中 break 跳出本次循环并执行循环体后的代码, 和 for 一样

2. continue

var arr = [1, 2, 3]

for (var i in arr) {
  console.log(arr[i])
  if (i == 1) {
    continue
  }
  console.log(arr[i])
}

// 输出
// 1
// 1
// 2
// 3
// 3

for...in 中 continue 结束本次循环执行下一次循环, 和 for 一样

tips: 当有 return 时会报错

for...of

1. break

var arr = [1, 2, 3]

for (var i of arr) {
  console.log(typeof i)
  console.log(i)
  if (i === 2) {
    break
  }
  console.log(i)
}

// 输出
// number
// 1
// 1
// number
// 2

for...of 中 break 跳出本次循环并执行循环体后的代码, 和 for 一样

需要注意的是这里的 i 是 arr 的 value 而不是 index

2. continue

var arr = [1, 2, 3]

for (var i of arr) {
  console.log(i)
  if (i === 2) {
    continue
  }
  console.log(i)
}

// 输出
// 1
// 1
// 2
// 3
// 3

for...of 中 continue 结束本次循环执行下一次循环, 和 for 一样

tips: for...of 循环里不能有 return ! 第一个参数是数组的值不是索引

$.each

1. return false

var arr = [1, 2, 3]

$.each(arr, function(index, value) {
  console.log(value)
  if (index === 1) {
    return false
  }
  console.log(value)
})

// 输出
// 1
// 1
// 2
// [1,2,3]

跳出本次循环并执行循环体后的代码

2. return true

var arr = [1, 2, 3]

$.each(arr, function(index, value) {
  console.log(value)
  if (index === 1) {
    return true
  }
  console.log(value)
})

// 输出
// 1
// 1
// 2
// 3
// 3
// [1,2,3]

结束本次循环执行下一次循环

tips: $.each 循环里不能有 break 或 continue !