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);
}
魔法操作不建议使用，可以作为技术探索来研究
https://www.jianshu.com/p/ed9e16f98b41