用 ES6 编写并编译为 ES5 对最终用户有什么好处？答案

【问题标题】：How does writing in ES6 and compiling to ES5 benefit the end user?用 ES6 编写并编译为 ES5 对最终用户有什么好处？
【发布时间】：2016-08-18 20:23:36
【问题描述】：

很多 JS 社区已经完全接受了用 ES6 编写的做法，并使用编译器（例如 Babel）来输出对浏览器更友好的 ES5。

我的问题是，如果在浏览器中运行的是完全或绝大多数是 ES5，那么用户以什么方式从所有这些额外的 JS 中受益？ Babel 添加的额外代码使编译后的 app.js 更重，并且性能可能更低。

所以我想我的问题是 - 这一切有什么意义？

您会注意到我的问题做了一些假设。随意纠正那些:)

【问题讨论】：

这就像在问“当你可以使用 C 时为什么还要使用 Java”？这是因为语法糖。您可以减少错误的程序，并且可以更快地开发。
@4castle 我怀疑可能是这种情况，这就是为什么我提出我的问题来专门解决最终用户（而不是作者）如何/是否从中受益的问题。
它对用户没有任何好处。转译器为您提供的任何功能，您都可以自己为您的用户实现。转译器是为了让开发者你受益。您编写更简洁、更具表现力的代码，更易于阅读和维护。
用户只是间接受益。如果您使用的工具可以让您的编程更简洁、更易于维护，那么您的用户将受益于没有错误以及您快速推送更新/错误修复的能力。
换句话说，它可以帮助你帮助他们。

标签： javascript ecmascript-6 babeljs

【解决方案1】：

有很多好处可以帮助抵消使用转译器的成本。对我来说最大的一个是你的代码可以有更少的错误。

let 是一个有助于您的代码更稳定的 ES6 功能示例。在 ES5 及之前的版本中，由于变量提升，使用var 创建变量一直受到错误的困扰。 Var Hoisting 是您的代码执行与您编写的内容不同的地方。这通常不是问题，但可能是问题，尤其是对于 if 语句中的 for 循环和变量。然而，现在有了let，我们得到了实际的块作用域变量。这意味着这些错误消失了，因为let 范围是当前块范围的变量。它非常强大，但在某种程度上，JS 花了这么长时间才得到它。

另一个例子是arrow functions。虽然所有 JS 开发人员都知道什么是匿名函数，但箭头函数几乎相同，但有两个主要区别。首先，箭头函数没有原型，这意味着它们在内存中占用的空间更小。第二个是this 使用箭头函数绑定到外部作用域，其中匿名函数失去了外部作用域this 的所有价值和概念。使用匿名函数，你最终会遇到很多错误，因为你引用了this 上的变量，但this 是未定义的。所以要修复它，人们最终会做一些愚蠢的事情，比如var me = this;，然后他们在匿名函数回调中引用me。拥有箭头函数将使您的代码更少错误并且更易于维护。

因此，由于 let 和 arrow functions 以及许多其他原因，您在 ES6 中编写的代码比 ES5 代码更有可能在语义上更正确，这应该会产生更稳定的代码。

也许我最喜欢的功能是类。使用类来组合丰富的模型比使用 ES5 更低的版本要容易得多。

【讨论】：

【解决方案2】：

一个好处是您可以在 ES6 中编写非常清晰、简洁的代码，而这在 ES5 中会占用很多行。举个例子：

ES6：

const PI = 3.141593
PI > 3.0

ES5：

Object.defineProperty(typeof global === "object" ? global : window, "PI", {
    value:        3.141593,
    enumerable:   true,
    writable:     false,
    configurable: false
})
PI > 3.0;

如您所见，它们都完成了同样的事情，但不同之处在于大量节省时间和更简洁的代码。您更喜欢编码/维护哪个？这种做法几乎只针对开发人员，而不是最终用户。

致谢：http://es6-features.org/#Constants

【讨论】：

另外，您想编写高效且人类可读的代码，es6 和 es7 规范大大改进了这些代码。因此，即使没有多少 js 引擎可以“读取”这些规范，但总有一天它们会，并且您无需更新代码
const 变量不会成为全局属性。
这就是Babel在转换中所做的吗？我以为它会替换 var，如果它看到重新分配，就会对你大喊大叫。
I just checked。这正是它的作用。它只使用var。如有必要，它还会重命名变量以使其保持在块范围内。