今天的 javascript-being-dumb 体验

Question

人们可能会认为将 3 个字符的缩写转换为数字表示形式是一项简单的任务。 JavaScript 说“不!”。

$(selector).each(function() {
    // convert month abbreviation to numerical representation
    var monthStr = $(this).text().match(/[^\/]*/)[0];
    var months = {
        JAN: 1,
        FEB: 2,
        MAR: 3,
        APR: 4,
        MAY: 5,
        JUN: 6,
        JUL: 7,
        AUG: 8,
        SEP: 9,
        OCT: 10,
        NOV: 11,
        DEC: 12
    };
    var month = months[monthStr].toString();
    var date = $(this).text().replace(monthStr, month);
    $(this).text(date);
});

即使代码有效并且可以工作，我的控制台仍然出现以下错误:

Uncaught TypeError: Cannot call method 'toString' of undefined

这绝对没有意义，因为选择器的文本被正确替换(至少根据眼睛)。

当我声明“monthStr”变量时，问题似乎就开始了。如果我将其设置为静态“MAR”作为示例，并从“month”变量定义中删除“.toString()”，则错误不再发生。

此外，唯一保存代码的是已经提到的月份变量的“.toString()”转换。如果它不存在，我最终会得到一个“未定义”值。

只是想分享我今天的 JavaScript 愚蠢经历，并希望有人能够详细说明为什么会抛出此错误，即使代码运行完美。

Answer 1

问题很可能与:

$(selector).each(function() { ... });

什么是选择器，有多少个 DOM 对象被选择？可能选择的 DOM 对象没有日期文本。

以下是重现错误的示例:http://jsfiddle.net/m3Kza/1/ (参见控制台)

控制台:“未捕获类型错误:无法调用未定义的方法“toString””

<p>MAR/26/2013</p>
<p>Hello world!</p>

$('p').each(function() {
    var month = $(this).text().match(/[^\/]*/)[0];

    var months = {
        MAR: 3
    };

    alert(months[month].toString());
});

这样做的原因是因为我们选择了两个 <p>元素，并且只有一个具有文本形式的日期。

如果我们将代码限制为将日期作为文本的 DOM 对象，则它可以正常工作: http://jsfiddle.net/m3Kza/

<p>MAR/26/2013</p>

var month = $('p').text().match(/[^\/]*/)[0];

var months = {
    MAR: 3
};

alert(months[month].toString());   

您应该对将日期作为文本的元素使用 CSS 类，并且仅对这些元素使用，这样您就知道您要选择什么。