Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

越来越不懂 for 语句了

  一开始学编程的时候各种循环语句搞得头昏眼花,其实我们平时用到最多的也只有 for 而已。以前 ES5 中只有函数作用域 for 语句内的三块表达式只是单纯的表达式而已,很容易理解。如今加上 let 之类的块作用域概念,for 这个最常用的玩意儿也会让我们变得陌生。
  首先,我们可以观察 for 语句相关的几个表达式位置,大概是这样:
for (A; B; D) C;   算上 for 后面可以接的语句,一共有 4 个表达式区域。它们的执行顺序就和上面字母顺序一样,先是 A 初始化、然后 B 条件检测、如果条件成立就执行 C 部分的语句、然后 D 处理循环变量,最后再回到 B 继续检测条件,直到条件不成立。
  如果只有 var 这种函数作用域的东西,那么只要理解上面这个执行顺序就可以理解整个 for 的工作原理。可是掺入块作用域完全不同了,这 4 个表达式区域到底有几个块作用域?从哪里开始?从哪里结束?于是我写了一坨这样的测试:
<script> 'use strict'; for ( let i = 0, j = 0, devNull = setTimeout(() => document.write(j)); j++, i < 2; j++, i++ ) { j++; } </script>   目前这个代码在 Chrome 上的执行结果是 0,在 Firefox 上的执行结果是 2。
  这个代码的原型是「for (let i = 0; i < 2; i++);」为了检测后续阶段是否会影响在 A 阶段定义的变量,我们又在 A 阶段中定义了 j,并且在后续的 B、C、D 阶段中对 j 做一个递增操作。最后为了查看结果,在 A 中异步获取并输出 j 的值。
  Chrome 的结果为 0,表示这个 j 的作用域仅仅是 A 阶段,或者说 A 阶段自己就是一个块作用域的结束。但是 Firefox 不这么认为,在 Firefox 中的结果为 2 说明 B 和 C 阶段的递增都生效了,但是 D 阶段没有生效。也就是说 Firefox 认为块作用域的结束在 C 阶段,D 阶段是新一轮块作用域的开始。
  再多做一些测试后可以发现,Chrome 和 Firefox 认为的块作用域分别是这样的:
Chrome: { A; { D; // 从第二轮开始才有这个 D B; C; } } Firefox: { A || D; // 第一轮是 A,后续是 D B; C; }
网名:
34.203.245.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^