在项目开发过程中,有的时候我们可能需要跳出我们的循环。本人就趟坑经历总结一下趟坑心得。
我们常用到的遍历主要有以下几种
1.for循环
const testArray = [1, 2, '3', 'test', 5]
for (let i = 0; testArray[i]; i++) {
if (+testArray[i] === 2) {
break
}
console.log(i)
}
结果为:0 1 说明跳出了循环
缺点:这种写法比较麻烦
2.forEach
testArray.forEach(item => {
if (+item === 2) {
break
}
console.log(item)
})
结果直接报错, 因为js里没有break关键字。但是有的人说将break改为return false就可以,然并卵……,它只是用来终止本次执行,而不是终止循环。所以我们可以得出结论forEach无法在所有元素在传递给调用函数之前终止遍历。
3.for in
for (let idx in testArray) { // 可以跳出
if (+testArray[idx] === 2) {
break
}
console.log(testArray[idx])
}
结果为:1,说明跳出了循环,但是for in更多的用来遍历对象。
难道我们拿forEach没有办法了吗?探索ing
发现我们可以将forEach()放在一个try块中,并能抛出一个异常。如果forEach()调用的函数抛出foreach.break异常,循环会提前终止:
try {
testArray.forEach(item => {
if (+item === 2) {
throw new Error('找到目标')
}
console.log(item)
})
} catch(e) {
if (e.message != '找到目标') throw e
}
结果是1,说明跳出forEach循环。
4.for of
for…of是ES6新增的遍历方式,它提供了统一的遍历机制。所有实现了[Symbol.iterator]接口的对象都可以被遍历。for...of
循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、Generator 对象,以及字符串
优点:
- 有着同
for...in
一样的简洁语法,但是没有for...in
那些缺点 - 不同用于
forEach
方法,它可以与break
、continue
和return
配合使用 - 提供了遍历所有数据结构的统一操作接口
下面是一个使用break语句,跳出for...of
循环的例子
|
|
上面的例子,会输出斐波纳契数列小于等于1000的项。如果当前项大于1000,就会使用break
语句跳出for...of
循环。
for...of获取索引
entries()
返回一个遍历器对象,用来遍历[键名, 键值]
组成的数组。对于数组,键名就是索引值;对于 Set,键名与键值相同。Map 结构的 Iterator 接口,默认就是调用entries
方法。keys()
返回一个遍历器对象,用来遍历所有的键名。values()
返回一个遍历器对象,用来遍历所有的键值。
|
|
类似数组的对象
类似数组的对象包括好几类。下面是for...of
循环用于字符串、DOM NodeList 对象、arguments对象的例子。
|
|
并不是所有类似数组的对象都具有 Iterator 接口,一个简便的解决方法,就是使用Array.from方法将其转为数组。
|
|
普通的对象
对于普通的对象,for...of
结构不能直接使用,会报错,必须部署了 Iterator 接口后才能使用。
|
|
解决方法是,使用Object.keys
方法将对象的键名生成一个数组,然后遍历这个数组。
for (var key of Object.keys(someObject)) {
console.log(key + ': ' + someObject[key]);
}