关于JavaScript事件监听器中变量作用域引发的变量更新/重复问题咨询

嘿，我完全懂你遇到的这个困惑！这其实就是变量作用域在背后起作用啦，给你掰扯清楚两种情况的区别：

• 把n和inx放在事件监听函数内部时：
  每次点击按钮，这个匿名函数都会完整执行一遍。let n = 0和let inx = []会在函数启动的瞬间重新创建这两个变量，初始值分别是0和空数组。相当于每次点击都从头开始统计换行符的位置，自然不会有重复累积的问题，每次输出的都是最新的正确结果。

• 把变量放在事件监听函数外部时：
  这两个变量属于外层作用域（比如全局作用域），只会在页面加载时初始化一次。第一次点击按钮时它们会正常赋值，但第二次点击时，n还是上次结束后的数值，inx数组里也留着上次的结果，新找到的换行符位置会继续往数组里追加，所以就出现了重复数据的情况。

要是你确实需要把变量放在外部（比如某些场景需要保留状态），那记得每次点击按钮前手动重置变量的值，比如：

let Para = document.querySelector('p');
let n = 0;
let inx = [];

let btn = document.querySelector('button').addEventListener("click", function (){
    // 每次点击前重置变量，避免累积重复
    n = 0;
    inx = [];
    
    // 统计换行符位置的逻辑不变
    for(X in Para.textContent){
        Para.textContent[X] == '\n' ? inx[n] = X : "";
        if( Para.textContent[X] == '\n') n++;
    }
    console.log('所有换行符的位置：', inx);
});

另外顺便提个小细节：遍历字符串的时候，用for...of或者普通的for循环会比for...in更稳妥哦，for...in本来是用来遍历对象属性的，用来遍历字符串偶尔会出现意料之外的问题～

备注：内容来源于stack exchange，提问作者Sung-99