在使用 Babel 对 JavaScript 代码进行编译的时候，有时会遇到一些 undefined 的问题。这种问题通常是由于 Babel 编译后的代码中存在 ES6 或 ES7 新特性，而当前的运行环境不支持这些特性所导致的。在本文中，我们将探讨一些常见的 undefined 问题以及如何解决它们。
问题一：使用箭头函数导致 undefined
ES6 引入了箭头函数，它可以让我们更加简洁地编写函数。但是在某些情况下，使用箭头函数会导致代码中出现 undefined。例如：
const add = (a, b) => {
return a + b;
}
const result = add(2); // undefined
console.log(result);这个问题的根本原因是使用箭头函数时，函数内部的 this 指针不再指向函数本身，而是指向了外层的作用域。所以在上面的例子中，执行 add 函数时，需要传递两个参数，但是实际上只传递了一个参数，导致 result 变量为 undefined。
针对这个问题，我们可以使用普通的函数来替代箭头函数，或者使用 bind 方法将 this 绑定到正确的上下文：
-- -------------------- ---- ------- ----- --- - ----------- -- - ------ - - -- - -- -- ----- --- - --- -- -- - ------ - - -- ------------- ----- ------ - ------ --- -- - --------------------
问题二：使用 async/await 导致 undefined
async/await 是 ES7 中新增的异步编程语法，它可以让我们更加方便地编写异步代码。但是在某些情况下，使用 async/await 会导致代码中出现 undefined。例如：
async function fetchData() {
const response = await fetch('https://api.github.com/users/feiyuyitiao');
const data = await response.json();
return data;
}
const result = fetchData();
console.log(result.name); // undefined在上面的例子中，fetchData 函数返回的是一个 Promise 对象，因为 async 函数默认返回的就是 Promise 对象。这就导致 result 变量为 Promise 对象，而不是数据对象。所以当我们尝试访问 result.name 属性时，会得到 undefined 。
解决这个问题的方法也很简单，只需要在 fetchData 前面加上 await 关键字，就可以得到正确的结果：
-- -------------------- ---- ------- ----- -------- ----------- - ----- -------- - ----- -------------------------------------------------- ----- ---- - ----- ---------------- ------ ----- - ----- -------- ------ - ----- ------ - ----- ------------ ------------------------- -- ------------- - -------
结论
以上两个问题是使用 Babel 编译时出现 undefined 的两个主要问题，它们都与新的 JavaScript 特性有关。解决这个问题的方法是：确保当前的运行环境支持需要的 JavaScript 特性，或者使用正确的语法。同时，我们也可以通过学习 Babel 相关的知识，查看其文档，来更好地解决这个问题。
参考文献：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671edb502e7021665efa24e4