【问题标题】:If babel converts let and const to var, what's the difference?如果 babel 将 let 和 const 转换为 var,有什么区别?
【发布时间】:2019-07-08 16:55:15
【问题描述】:

我试过the babel transpiler,它把All 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;) {}
}

【问题讨论】:

  • 有区别,在块{}中声明let,尝试在块外访问。对 var 做同样的事情,重复。它可能会将所有内容转换为 var,但对于 let 和 const,我很确定适用特殊规则。这个问题没有问任何有意义的问题,如果你说你知道它们之间的区别,那么这个问题根本没有必要。
  • 不是所有的 Babel 配置都将“const”和“let”变成“var”。但这个问题仍然有效。
  • @squeekyDave 我更新了我的问题,以便它反映 cmets 中所说的内容,但我关于 性能 的问题仍然存在。 babel 还是将它们全部转换为 var,只是用了一些规则来保持作用域的含义。如果都是var,那么性能有什么区别吗?
  • @rml 抱歉,我不知道,在哪些配置中它不会转换它们?

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


【解决方案1】:

Babel 对每个变量进行检查,如果违反某些程序规则,则会抛出错误。例如,如果定义了 const,并且稍后更改了值,这将违反类型的规则。另一种情况是,如果变量在它已经存在的范围内重新定义(这可能是同名的函数)。在某些情况下,Babel 只是简单地重命名事物以防止冲突。

【讨论】:

  • 我认为它也会检查输出目标,let。但是我可能是错的。
  • 所以它只用于类型目的而不是任何性能优化?
  • 我怀疑不是。它主要是关于代码质量和便利性。不过,这是一个单独的问题。
【解决方案2】:

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 的优雅特性不可用)。

【讨论】:

  • 谢谢,只是一个简单的问题,有任何性能差异吗?
  • 介于什么之间?在什么JS引擎中?当心premature optimisation
  • 在所有 JS 引擎中的 ES6 应用程序中使用 var 和 let 之间。因为最终它们被转换为 var,但对此存在疑问,有些人说使用 let 和 const 确实会有所作为。关于过早优化的非常好的文章,非常感谢
猜你喜欢
  • 2022-07-21
  • 2010-10-20
  • 2019-06-25
相关资源
最近更新 更多