为什么 console.log() 只在刷新时显示更新的数组？答案

【问题标题】：Why does console.log() only show updated Array upon refresh?为什么 console.log() 只在刷新时显示更新的数组？
【发布时间】：2018-03-27 02:37:48
【问题描述】：

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;

}


function curveScore(original, curveAmount) {
  return original + curveAmount;
}

//Generate a random array
const testScores = Array.from({
  length: 20
}, () => getRandomIntInclusive(60, 100));
console.log(testScores);

// Updated testScores with curved scores
testScores.forEach((el, i, curvedScores) => {
  curvedScores[i] = curveScore(el, 10);
});
console.log(testScores);

所以，这里一切正常。本质上，会生成一个随机的“测试分数”数组，并记录这些分数，然后“弯曲”10 分，然后再次记录。

有趣的是，我第一次在浏览器中打开它时，并没有得到正确的结果。相同的 Array 显示 2x（不添加 10 个点）。

一旦我刷新浏览器，就会得到正确的输出。

为什么？我想console.log() 在forEach() 完成之前以某种方式发射了 2 次？这是否需要 Promise 或其他东西才能始终如一地显示正确的结果？

【问题讨论】：

在这里看到预期的结果，您使用的是什么环境？
如果我理解正确，您的代码将按预期工作。运行上面的 sn -p。两个数组将打印在日志中，第二个数组的每个元素增加 10。这就是你想要的。对吗？
您遇到了this problem。引用的是对象，而不是值，并且会实时更新。如果你想保留原始数组，我建议你打印一些字符串化的版本。
是的...除了，每次我在开发工具中使用此文件打开 index.html 时，第一次显示相同的数组（不增加 10） . 只有在刷新浏览器后，它才会第二次显示更新的数组！ @VicJordan
考虑使用map函数而不是forEach。

标签： javascript arrays ecmascript-6

【解决方案1】：

有趣的是，我第一次在浏览器，我没有得到正确的结果。显示相同的数组 2x（不加 10 分）。

一旦我刷新浏览器，就会得到正确的输出。

Chrome 日志，粗略地说，参考。

在控制台工具关闭的情况下（是否第一次打开页面都没有关系^[1]），chrome 不会实际记录数组，它只是它所做的记录。当您打开开发工具时，它会打印两次引用的当前版本。

另一方面，如果开发工具打开，日志记录实际上会在每次调用时发生，这就是为什么您会看到数组的两个版本。

要解决此问题，只需实际打印数组的内容即可。比如调用JSON.stringify：

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;

}


function curveScore(original, curveAmount) {
  return original + curveAmount;
}

//Generate a random array
const testScores = Array.from({
  length: 20
}, () => getRandomIntInclusive(60, 100));
console.log(JSON.stringify(testScores));

// Updated testScores with curved scores
testScores.forEach((el, i, curvedScores) => {
  curvedScores[i] = curveScore(el, 10);
});
console.log(JSON.stringify(testScores));

^{[1]：只需关闭开发工具，点击刷新并再次打开它，您会看到问题（打印两次相同的数组）仍然存在。}

【讨论】：

仪式。这很烦人 - 我将其视为“开发工具”错误而不是编码错误。但是，根据上面的评论，我将为我使用map() 教授的课程重新进行此操作。无论如何，这可能是更好的解决方案，并将看看这是否也解决了另一个“错误”。
是的，当然，请使用.map()，它会生成一个新数组，从而产生不同的引用，并且不会出现这个问题。我的回答更多的是试图解释这个问题（因为问题的核心是“为什么？），但.map 是一个很好的出路！

【解决方案2】：

有以下两种选择：

使用Jquery

$(document).ready(function() {
  // you code here
});

纯JavaScript

window.onload = function() {
 // Your code here
}

【讨论】：