JavaScript循环看这篇就够了【建议收藏】

Axjy
2,210 阅读3分钟

当重复同样的任务时，它会变得麻烦和难以维护。这个时候我们就需要用到循环，以下将从【基本用法】、【注意事项】、【优化方案】等全方面来总结JavaScript的循环。

数组循环

普通for循环

关键词

  • 常用、简单
  • 可中断
  • 性能还可以

image.png

for...of 遍历

注

  • 支持break、continue和return语句
  • 性能：for...in < for...of < 普通for
  • Es6新增语句，用来替代forEach
  • 可以遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代(Iterable data)的数据结构
  • 注意兼容性
var arr = [1, 2, 3]
for(var item of arr) { // item代表数组里面的元素
    console.log(item); // 1, 2, 3
};　

forEach

注

  • 无法使用return、break等终止循环
  • 没有返回值，只用来操作数据
  • 不需要知道数组长度
  • 不能遍历对象
arr.forEach(function(currentValue, index, arr){},thisValue)

终止循环办法：使用try catch 语句，在要强制退出的时候，抛出一个 error 给 catch 捕捉到，然后在 catch 里面 return【示例在最后】。

map()

返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值,不会改变原始数组。

关键词

  • 返回新数组
  • 无法终止循环
  • 效率<forEach
  • 不能遍历对象
array.map(function(currentValue,index,arr){},thisValue)

拓展

map()循环还可以接受第二个参数，用来绑定回调函数内部的this变量；

将回调函数内部的this对象，指向第二个参数，间接操作这个参数（一般是数组）。

image.png

注意

  • map循环不会跳过undefined和null
  • map循环会跳过空位

image.png

while 循环

While语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。

关键词

  • 先判断，后执行（和for相同）

image.png

do……while循环

关键词

  • 先执行，后判断
  • 至少执行一次，即使初始条件不成立 do...while循环与while循环类似，唯一的区别就是先运行一次循环体，然后判断循环条件。

image.png

数组循环 + 筛选

some()

主要用检测数据是否满足一些条件；会依次执行数组每个元素；

有一个元素满足条件，返回true，停止执行；没有元素满足条件，返回false；

关键词

  • 遍历数组
  • 返回布尔值
  • 满足一个即可
arr.some((currentValue, index, arr) => {})

every()

检测数组所有元素是否满足指定条件；

有一个元素不满足，返回false，停止执行；所有元素满足，返回true

关键词

  • 遍历数组
  • 返回布尔值
  • 需要满足所有
arr.every((item, index, arr) => {})

filter()

创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

关键词

  • 遍历数组
  • 返回新数组
  • 无法终止循环
var arr = [1, 2, 3];
arr.filter(item => { 
    return item > 1; // [2, 3]
})

对象循环

for...in...

key：遍历对象代表对象key值，遍历数组则代表数组下标。

注

  • 不建议用于遍历数组，效率低
for(var key in arr) {}

for-in 循环，遍历时不仅能读取对象自身上面的成员属性，也能延续原型链遍历出对象的原型属性。
所以，可以使用hasOwnProperty判断一个属性是不是对象自身上的属性。obj.hasOwnProperty(keys)==true 表示这个属性是对象的成员属性，而不是原先属性

Object,keys遍历对象的属性

Object.keys方法

  • 参数是一个对象
  • 返回一个数组。

该数组的成员都是该对象自身的（而不是继承的）所有属性名，且只返回可枚举的属性。

image.png

拓展

计算对象的属性个数

image.png

跳出/终止循环

  • break：跳出本层循环，继续执行循环后面的语句。如果循环有多层，则break只能跳出一层。

  • continue：跳过本次循环剩余的代码，继续执行下一次循环。

1)、对与for循环，continue之后执行的语句，是循环变量更新语句i++；
2)、对于while、do-while循环，continue之后执行的语句，是循环条件判断；
因此，使用这两个循环时，必须将continue放到i++之后使用，否则，continue将跳过i++进入死循环。

普通for循环跳出循环

利用break

image.png

forEach跳出循环

利用try...catch

let arr=[1,2,3,4,5,6]
try {
 arr.forEach(function (item, index) {
 //跳出条件
 if (item === 3) {
  throw new Error("LoopTerminates");
 }
 //do something
  console.log('forEach循环',item);
 });
} catch (e) {
if (e.message !== "LoopTerminates") throw e;
};

image.png

🌸 小可爱看完点个赞再走吧！🌸

avatar
文章
阅读
粉丝