JS中let变量声明在while循环内外的运行结果差异疑问

1. 变量声明在循环外部的执行逻辑 #

对应代码执行顺序如下：

function table(n) {
  let i = 1;
  let tableValue = (n * i); // 代码进入函数后仅执行1次：此时i=1，计算得到tableValue = 9*1=9，后续全程没有更新过这个变量的值
  while (i <= 10) {
    console.log(tableValue); // 每次循环都只打印提前计算好的固定值9
    i++; // 仅对i做自增，不会改动已经完成计算的tableValue
  }
}
table(9);

所以最终会重复输出10次9，本质是只在初始化阶段计算了一次乘积，循环过程中没有刷新计算结果。

2. 变量声明在循环内部的执行逻辑 #

对应代码执行顺序如下：

function table(n) {
  let i = 1;
  while (i <= 10) {
    let tableValue = (n * i); // 每次进入循环都会重新执行这一行：用当前最新的i值计算乘积，赋值给当前循环块内的tableValue
    console.log(tableValue); // 打印的是本次循环刚生成的最新计算结果
    i++;
  }
}
table(9);

同时因为let属于块级作用域，每次循环的tableValue都是独立的新变量，不会互相干扰，所以会依次输出9、18、27……90的正常乘法表。

内容的提问来源于stack exchange，提问作者Samar