for循环还能这么写!

15,835 阅读2分钟

前言

最近在阅读《JavaScript设计模式与开发实践》收获颇多☺,其中有一个让我很感兴趣的写法来分享一下。

正文

各位掘友们是怎么写一个for循环的?
大多数是不是都会这么写。

let arr = [1, 2, 3]
for (let i = 0, len = arr.length; i < len; i++) {
  // ...
}

接下来秀一波操作

let arr = [1, 2, 3]
for (let i = 0, val; val = arr[i++]; ) {
  // ...
}

第一眼见到她充满了好奇,为什么她可以正常循环,而且可以正常终止呢?

带着疑问去查询了for循环的运行机制

for (语句 1; 语句 2; 语句 3) {
  // 被执行的代码块
}

可以看到正常的for循环有3个语句,先来解释一下
语句1(可选):用于初始化变量
语句2(可选):条件判断,如果为true继续,如果为false退出循环
语句3(可选):改变初始变量的值,用于条件判断

看完了这几个语句的作用就可以明白为什么上面的循环可以正常操作了吧,val = arr[i++]是一个判断条件语句(同时起到了赋值i++的作用),从arr[i++]中拿出来的值如判断为true则可以继续循环,若判断为false,就终止循环。

扩展

啰嗦 😂
那这一段会输出什么值呢?

let arr = [1, 2, 0, 3]
for (let i = 0, val; val = arr[i++]; ) {
  // ...
}

答案:只会输出12
原因:当i=2的时候取出来的值是0,ta是会被判定为false的,所以就退出循环。
如何解决这种情况呢,自己手写判断条件。

let arr = [1, 2, 0, 3]
for (let i = 0, val; ; ) {
  val = arr[i++]
  if (val === undefined) {
    break
  } else {
    // ...
  }
}

总结

for循环的运行机制,嗯挺香的。

对数组里的数据不自信的千万不要这么写
对数组里的数据不自信的千万不要这么写
对数组里的数据不自信的千万不要这么写

仰望《JavaScript设计模式与开发实践》这本书的作者,满页的for循环骚操作(逼格挺高),还是很敬佩作者可以写出这么好的文章,感谢作者为社区做出的贡献。

书中使用这种for循环的时候,数组中的数据基本上都是回调函数,所以不存在数据值的判断条件会为false情况

喜欢的大佬们动动手指点个赞关注一下☺