规律一览
| 方法 | 返回值 | continue | break | return | 中止条件 |
|---|---|---|---|---|---|
| for 循环 | 跳过本次循环 | 结束循环 | ❌ | break |
|
| for...in | 跳过本次循环 | 结束循环 | ❌ | break |
|
| for...of | 跳过本次循环 | 结束循环 | ❌ | break |
|
| forEach | undefined | ❌ | ❌ | 跳过本次循环 | ❌ |
| map | Array | ❌ | ❌ | 跳过本次循环 | ❌ |
| filter | Array | ❌ | ❌ | 跳过本次循环 | ❌ |
| some | Boolean | ❌ | ❌ |
true 终止循环;false 结束本次循环 |
Truthy真值 |
| every | Boolean | ❌ | ❌ |
false终止循环; true 结束本次循环 |
Falsy 假值 |
注：
return是函数的结束方式，所以不能用在普通for循环中。
// 声明数组用于遍历
let arr = ['You', "are", "a", "lucky", "dog"];
1. 基础 for 循环
功能：遍历数组，通过下标访问数组元素
可以使用 continue break 不能使用 return
/**
* @desc 基本for循环
* 可以使用 continue 跳过当前循环
* 可以使用 break 跳出循环
* 不可以使用 return [return只能在函数中使用]
*/
for (let index = 0; index < arr.length; index++) {
// if (index === 2) continue;
if (index === 2) break;
console.log(arr[index])
}
2. for…in
功能：通过下标访问元素
注意：索引是 string类型
可以使用 continue break 不能使用 return
不建议使用for…in循环遍历数组。for…in是为遍历对象而产生的，会到原型链上寻找，遍历其中新增加的属性的key值
/**
* @desc for...in循环
* 可以使用 continue 跳过当前循环
* 可以使用 break 跳出循环
* 不可以使用 return [return只能在函数中使用]
*/
for (let index in arr) {
// if (index === '3') continue;
if (index === '3') break;
console.log(arr[index])
}
3. for…of
访问的是元素，不能获得 index
可以使用 continue break 不能使用 return
/**
* @desc for...of循环
* 可以使用continue, break
* 不可以使用 return [return只能在函数中使用]
* 对值遍历,不能获得index
*/
for (let item of arr) {
if (item === 'a') continue;
// if (item === 'a') break;
console.log(item)
}
4. forEach()
forEach((item, index, array)=> undefined)
不能使用 continue break return 可以跳过本次循环 (类似于 continue)
/**
* @desc forEach
* @return undefined
* 不可以使用 continue ,break
* 可以使用 return 跳过本次循环
*/
arr.forEach((item, index, _arr) => {
if (index === 3) return;
console.log(arr[index])
});
5. map()
map((item, index, array)=>Array)
不能使用 continue break return 可以跳过本次循环 (类似于 continue)
/**
* @desc map
* @return Array
* 不可以使用 continue ,break
* 可以使用 return 跳过本次循环
*/
arr.map((item, index, _arr) => {
if (index === 3) return;
console.log(arr[index])
return item
});
6. filter()
filter((item, index, array)=>Array)
不能使用 continue break return 可以跳过本次循环 (类似于 continue)
/**
* @desc filter
* @return Array
* 不可以使用 continue ,break
* 可以使用 return 跳过本次循环
*/
arr.filter((item, index, _arr) => {
if (index === 3) return;
console.log(arr[index])
return item
});
7. some()
直到返回结果为 真值 时才中止循环
return false结束本次循环，类似continue
return true终止循环，类似break
// 找到真值之前
arr.some((item, index) => {
// return false 相当于执行到这里就直接跳过本次的循环
if (index === 3) return false;
console.log(arr[index])
// 这里为了完整遍历, 始终返回假值
return false
});
8. every()
直到返回结果为 假值 时才中止循环
return true结束本次循环，类似continue
return false终止循环，类似break
// 找到假值之前
arr.every((item, index) => {
// 同理, return true 相当于执行到这里就直接跳过本次的循环
if (index === 3) return true;
console.log(arr[index])
// 这里为了完整遍历, 始终返回真值
return true
});
Iterator 与 for…of 循环
keys()values()entries()都会返回一个迭代器 (Iterator)
-
keys()返回index迭代器 -
values()返回value迭代器 -
entries()返回包含index,value迭代器
然后结合 for...of 循环进行遍历
for (let index of arr.keys()) {
console.log(index)
}
for (let item of arr.values()) {
console.log(item)
}
for (let [index, item] of arr.entries()) {
console.log(index, item)
}
魔法骚操作
可以利用
trycatch的抛出异常行为来巧妙的停止forEachmap等遍历
// 成功案例 必须用 try catch 整个包住forEach Map才能停止
try {
[1,2,3,4,5,6].forEach(function(item, index){
console.log(item);
if(item === 3){
throw new Error('阻止');
}
});
} catch (error) {
console.log('error_阻止成功', error);
}
魔法操作不建议使用，可以作为技术探索来研究
