javascript - 如果babel把let和const转成var,有什么区别?

标签 javascript ecmascript-6 babeljs javascript-objects ecmascript-5

我试过了 the babel transpiler , 并将所有的 let、const 和 var 转换为 var,所以总的来说,我们的代码使用有什么不同?
我已经阅读了文档并且我知道 let、const 和 var 之间有什么区别,但是如果它们最终都转换为 var,那么有什么区别强>?这意味着在性能甚至范围上不应该有任何有意义的差异!

更新(02.14.2019):根据答案,我了解到范围确实很重要,即使它们被转换为 var,babel 仍保留范围的含义。我的问题仍然是性能,是否有任何有意义的性能差异?

我附上了转译器的输入和输出,以及一个更复杂的场景
输入:

let a = 1;

for (let a = 0; a !== 0;) {
  for (let a = 0; a !== 0;) {}
}

输出

"use strict";

var a = 1;

for (var _a = 0; _a !== 0;) {
  for (var _a2 = 0; _a2 !== 0;) {}
}

最佳答案

Babel 将 ES6 语法转换为 ES5 语法(或您正在处理的 JS 的任何源版本和目标版本)。

这通常会丢失代码中的一些细微差别,但您正在查看一个非常简单的示例。

考虑一下:

let x = 1;

{
  // Inside a block, this is a different x
  let x = 2; 
  console.log(x);
}

console.log(x);

Babel 会将其转换为:

"use strict";

var x = 1;
{
  // Inside a block, this is a different x
  var _x = 2;
  console.log(_x);
}
console.log(x);

看看它是如何重命名内部 x 的,这样它就不会覆盖外部的?

它在 ES5 中尽可能地表达了 ES6 的效果,即使结果很丑(因为 ES6 的优雅特性不可用)。

关于javascript - 如果babel把let和const转成var,有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54694217/

相关文章:

javascript - JS中如何返回所有具有相同值的重复对象?

javascript - 如何在对象字符串中插入单个反斜杠?

node.js - 错误 : Couldn't find preset "react" when installed using npm install --global babel-preset-react but works without global flag

javascript - Graphql,react-apollo 如何在加载组件状态时将变量传递给查询

java - 不区分大小写的自动完成搜索(使用 java、javascript、jquery)

javascript - 单击按钮更改网站链接颜色

javascript - 了解弱 map

javascript - @babel/preset-env 版本 7 未转换 null-coalescing 运算符

javascript - 如何通过 ES6 导入包含 Foundation 6 JS 文件?

javascript - 将页面加载到 DIV 中