Javascriptconst在chromedev控制台中出现未定义且未定义

我认为这是transilation所做的副作用const,因为在转换后,JS运行时实际上必须跟踪2个不同的变量.

React Native使用Babel进行转换(源,指向0.45.1中的行,它允许块作用域).

你可以在不同的块中多次定义一个具有相同名称的常量,在ES2015中可以正常,因为常量是块作用域的,但是这个概念在ES5中不存在,所以这些常量被转换为具有不同名称的变量.

例如,请考虑以下ES2015代码段:

const i = Date.now() % 2;
switch(i) {
    case 0: {
        const x = "zero";
        console.log("x", x);
    }
    case 1: {
        const x = "one";
        console.log("x", x);
    }
    default: {
        const x = "wat";
        console.log("x", x);
    }
}

使用Babel,它会被转化为(←见它在行动中):

"use strict";

var i = Date.now() % 2;
switch (i) {
    case 0:
        {
            var x = "zero";
            console.log("x", x);
        }
    case 1:
        {
            var _x = "one";
            console.log("x", _x);
        }
    default:
        {
            var _x2 = "wat";
            console.log("x", _x2);
        }
}

所以在这个例子中,JS运行时实际上有3个不同的变量来表示x.

因此,您可能正在查看foo您的浏览器通过源地图显示的行,但在"现实"中浏览器正在查看的内容_foo2,因此取决于很多事情(转换设置,源地图生成,Chrome版本)的代码,你的准确调用堆栈...)的其余部分,Chrome浏览器开发工具可能有麻烦追踪这一点,并决定哪些foo或_foo或_foo2当你看它应该选择foo.

ES2015的示例已转换为ES5和源映射:

(行为略有不同,因为它取决于很多参数,但它显示了具有相同名称的常量转换的问题 - 在另一个测试中,使用不同的转换+源映射参数,我设法得到类似于您的情况)

建议

(我希望以下内容对OP来说非常明显,但留下答案可能会有用)

使用const语义,您有2个不同的常量,具有相同的名称,在2个不同的块中.在我看来,使用块作用域定义一个常量(或使用let而不是变量var)是有用的,以避免带有var作用域的惊喜(作用于最近的父函数),但是在2个相邻块中定义具有相同名称的变量或常量呼吁混淆(转化与否).

判断这两个符号是否代表相同的事物(由你决定)会更有意义,然后:

如果是这样,用于let将它们定义为父范围的单个变量.

如果没有,请将它们保留为const2个不同的名称.代码将更清晰,在转换后,开发工具显示的调试信息应该更有用.