为何函数外的console.log无法输出更新后的数组内容？

你的代码如下： #

HTML代码：

<input type="text" id="input-el" />
<button id="input-btn">SAVE INPUT</button>
<script src="index.js"></script>

JavaScript代码：

let myleads = [];
const inputEl = document.getElementById("input-el");

let inputBtn = document.getElementById("input-btn");
inputBtn.addEventListener("click", function () {
  myleads.push("www.awsomelead.com");
    console.log(myleads);//giving the output
  
});
console.log(myleads);//not giving the output

原因解析： #

这完全是代码执行顺序导致的：

• 页面加载时，JS代码会从上到下依次执行：

  1. 先初始化myleads为空数组
  2. 获取页面上的输入框和按钮元素
  3. 给按钮绑定点击事件（但此时点击事件的回调函数并不会立刻执行）
  4. 执行外部的console.log(myleads)——这时候数组还没被添加任何元素，所以控制台会输出[]，并非“没输出”，只是不是你期望的添加后的数组内容

• 按钮点击事件的回调函数是异步触发的：
  只有当你手动点击按钮时，这个函数才会被调用，此时才会把字符串推入数组，然后打印出有内容的数组，所以你能看到预期的输出。

如果想在外部观察到更新后的数组，不能在页面初始化阶段直接打印，因为那时候点击操作还没发生。可以在修改数组后，通过渲染到页面等方式来查看最新状态。

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