lhajh

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

2018/03/10

上篇我们讲了 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！

Search

    Post Directory