为啥此代码中的 console.log 返回 undefined？

Posted 2023-05-09

【中文标题】为啥此代码中的 console.log 返回 undefined？

【英文标题】：Why console.log in this code return undefined?为什么此代码中的 console.log 返回 undefined？

【发布时间】：2013-03-10 18:29:40

【问题描述】：

var el = $('.container');
var anchors = new Array('jobs', 'portfolio', 'docs', 'interier', 'price');
for (var i = 0; i < anchors.length; i++) 
    el.on('click', 'a[href$="#'+anchors[i]+'"]', function (e) 
        e.preventDefault();
        console.log(anchors[i]);
        $.scrollTo('a[name="'+anchors[i]+'"]');
    );
;

【问题讨论】：

有点离题：初始化像 var anchors=['a','b','c'] 这样的数组应该更快

javascript closure inside loops - simple practical example的可能重复

范围错误，我没有在那里定义。

【参考方案1】：

当您单击该元素时，i 将增加到 anchors.length 的值。

您的点击处理程序引用了i。

JavaScript 中未解析的属性查找返回 undefined。

使用this 作为元素的引用会容易得多。否则，想办法通过值传递i 的值，而不是直接引用它。

【参考方案2】：

你得到未定义的原因是因为i 实际上等于5。看看这个：

for ( var i = 0; i < 5; i++ ) 
    console.log( i );

现在，在该循环完成后，您会认为 i 在此时未定义，因为它应该是 for 循环的本地。不幸的是，这种情况并非如此。一个简单的测试方法：

for ( var i = 0; i < 5; i++ ) 
    console.log( i );


console.log( i ) // Logs out 5;

简单地说，for 循环的i++ 在真值测试部分，i < 5 位之后执行。因此，当i 等于4 时，循环运行，然后它增加i++，这将i 的值设置为5，这反过来又无法通过真值测试。

既然您知道i 等于5，那么当您在anchors 数组中进行查找时，anchors[5] 是未定义的。

这很重要的原因是，每次点击事件触发时，它都会执行i 的缓存值，即 5，反过来，您将始终记录 undefined

为了解决这个问题，我们可以像这样为i 的值创建一个别名

var el = $('.container');
var anchors = new Array('jobs', 'portfolio', 'docs', 'interier', 'price');

for (var i = 0; i < anchors.length; i++) 

    // By passing the value to this self executing function,
    // it creates a new instance of the variable
    ( function ( index ) 
        el.on('click', 'a[href$="#'+anchors[index]+'"]', function (e) 
        e.preventDefault();
            console.log(anchors[index]);
            $.scrollTo('a[name="'+anchors[index]+'"]');
        );
    )( i );

;

【参考方案3】：

变量i得到了最后一个循环的值。如果你想访问锚点，你可以使用这个：

 console.log($(this).attr('href').substr(1));