将“var”声明移动到函数顶部 - Javascript 错误答案

【问题标题】：Move 'var' declarations to the top of the function - Javascript error将“var”声明移动到函数顶部 - Javascript 错误
【发布时间】：2019-05-08 21:24:00
【问题描述】：

我正在关注如何在表单中创建动态更新的 cmets 的教程。我正在关注的指南不断出现错误，而我最近发现的指南不允许我修复它。它告诉我我需要将“var”声明移动到函数的顶部。也没有'$'的定义

感谢任何帮助！

这是我的 JavaSript

var comment = [
    {"name": "name1", "date": "00-00-0000", "body": "comment here1"},
    {"name": "name2", "date": "00-00-0000", "body": "comment here2"},
    {"name": "name3", "date": "00-00-0000", "body": "comment here3"}
];

for (var i=0;i<comment.length;i++){
    var html = "<div class='commentBox'><div class='leftPanelImg'><img src='images/Reviews/Comment%20pic.jpg'></div><div class='rightPanel'><span>"+comment[i].name+"</span><div class='date'>"+comment[i].date+"</div><p>"+comment[i].body+"</p></div><div class='clear'></div></div>"
    $('#container').append(html);
}

这是我的 HTML

<!DOCTYPE html>
<html>
    <head>
        <title> Reviews</title>
        <link href="css/Review.css" rel="stylesheet" type="text/css">
    </head>
<body>
    
    
    <div class='form'>
        <h3>Please write a review about your stay</h3>
    Name: <input type="text" id="name"/> <br> <br>
    Date: <input type="date" id="date"/> <br> <br>
    Comment: <textarea rows="7" col="30" id="bodyText"></textarea><br>
    <input type="button" id="addComment" value="Submit">  
    
    </div>

    <h2>Comments</h2>

    
    <div id='container'>
    
    
    </div>
    <a href="{{ url_for('Index.html', id='content') }}">Go to Homepage</a>
    
    <script src="https://ajax.googleapis.com/ajax/libs/d3js/5.7.0/d3.min.js"></script>
    <script src="Review.jquery.js" type="text/javascript"></script>
</body>
</html>

【问题讨论】：

"我需要将 'var' 声明移到函数顶部"。这是可疑的建议。用 var 声明的变量在执行开始之前被处理，移动声明没有区别（但是，初始化可能）。

标签： javascript jquery html css jslint

【解决方案1】：

linter 告诉您，您应该在 解释器 看到变量被声明的同一点声明 i 和 comment，这将在最内层函数的顶部，或者如果您已经在顶层，则在顶层的最顶层。例如，对于您的代码：

var i;
var comment;
var html;
comment = [
    {"name": "name1", "date": "00-00-0000", "body": "comment here1"},
    {"name": "name2", "date": "00-00-0000", "body": "comment here2"},
    {"name": "name3", "date": "00-00-0000", "body": "comment here3"}
];

for (i=0;i<comment.length;i++){
    html = "<div class='commentBox'><div class='leftPanelImg'><img src='images/Reviews/Comment%20pic.jpg'></div><div class='rightPanel'><span>"+comment[i].name+"</span><div class='date'>"+comment[i].date+"</div><p>"+comment[i].body+"</p></div><div class='clear'></div></div>"
    $('#container').append(html);
}

如果您不这样做，您可能会因为var 的不直观提升问题而感到困惑——这就是 linting 规则的用途。（这不是 Javascript 解释器错误，它只是您的 linter 抛出的错误。）

也就是说，您可以考虑改用现代语法，使用const 和let，它们没有提升，您可以使用数组方法而不是for 循环以获得更多功能和简洁的代码，如果你愿意的话：

const comment = [
  {"name": "name1", "date": "00-00-0000", "body": "comment here1"},
  {"name": "name2", "date": "00-00-0000", "body": "comment here2"},
  {"name": "name3", "date": "00-00-0000", "body": "comment here3"}
];
comment.forEach(({ name, date, body }) => {
  const html = "<div class='commentBox'><div class='leftPanelImg'><img src='images/Reviews/Comment%20pic.jpg'></div><div class='rightPanel'><span>"+name+"</span><div class='date'>"+.date+"</div><p>"+body+"</p></div><div class='clear'></div></div>"
  $('#container').append(html);
});

您也可以考虑使用现代 linter，例如 ESLint。 JSLint 已经很老了，对现代 JS 允许我们使用的语法糖并没有太多了解。

【讨论】：

我不同意，尤其是在 for 循环方面。在循环中声明变量是非常常见的，将声明移到别处意味着你必须去寻找它。并且在初始化之前立即声明 comment 是没有意义的。
根据您的情况，我会避免将“i”放在顶部。它只是一个迭代器变量，最好将其包含在循环中
只使用let 对他们来说会更好吗？
很好，编辑看起来确实像我要走的路。它将避免任何奇怪的提升错误。
@RobG @roland 是的，这是非常常见的，但是 linter OP 使用 requires var 变量在它们被提升到的同一个地方声明。