JavaScript中数组遍历方式与中止

规律一览

方法	返回值	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])
}

for 循环

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])
 }

for...in循环

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)
 }

for...of

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])
});

forEach

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
});

map

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
});

filter

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
});

some

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
});

every

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)
}

魔法骚操作

可以利用 try catch 的抛出异常行为来巧妙的停止forEach map 等遍历

   // 成功案例 必须用 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);
    }

魔法操作不建议使用，可以作为技术探索来研究