ES6中修复的5个JavaScript“不良”部分

阅读量：2521 次

发布时间：2019-05-11

本文共 7418 字，大约阅读时间需要 24 分钟。

by rajaraodv

通过rajaraodv

ES6中修复的5个JavaScript“不良”部分 (5 JavaScript “Bad” Parts That Are Fixed In ES6)

ECMAScript 6 (ES6) features can be divided into features that are pure syntactic sugar (like: class), features that enhance JavaScript (like import) and features that fix some of JavaScript’s “bad” parts (like the let keyword). Most blogs and articles combine all three types, and can overwhelm newcomers. So I’m writing this post that focuses on just the key ES6 features that fix “bad” parts.

ECMAScript 6(ES6)功能可以分为纯语法糖的功能(如class )，增强JavaScript的功能(如import )和修复JavaScript的某些“不良”部分的功能(如let关键字)。大多数博客和文章结合了这三种类型，并且可能使新手不知所措。因此，我写这篇文章的重点仅在于解决“不良”部分的关键ES6功能。

I hope that by the end of this blog you’ll realize that by using just a couple ES6 features like let and the fat-arrow, you’ll get massive returns.

我希望到本博客结束时，您将认识到，仅使用let和粗箭头之类的ES6几个功能，您将获得丰厚的回报。

OK, Let’s get started.

好的，让我们开始吧。

1.范围 (1. Block Scope)

ES5 only had “function-level scope” (i.e. you wrap code in functions to create scope) and caused a lot of issues. ES6 provides “block”-level scoping(i.e curly-braces to scope) when we use “let” or “const” instead of “var”.

ES5仅具有“函数级作用域”(即，将代码包装在函数中以创建作用域)，并导致了很多问题。当我们使用“ let ”或“ const ”而不是“ var ”时，ES6提供了“块”级作用域(即，将花括号括起来)。

防止变量吊装超出范围 (Prevent Variable Hoisting Outside of Scope)

Below picture shows that the variable “bonus” is not hoisted outside of the “if” block making work as most programming languages.

下图显示变量“ bonus”没有悬挂在“ if”块之外，这使得大多数编程语言都可以使用。

Note: You can click on the pictures to zoom and read

注意：您可以点击图片放大和阅读

防止重复变量声明 (Prevent Duplicate Variable Declaration)

ES6 doesn’t allow duplicate declaration of variables when we declare them using “let” or “const” in the same scope. This is very helpful in avoiding duplicate function expressions coming from different libraries (like the “add” function expression below).

当我们在同一范围内使用“ let”或“ const”声明变量时，ES6不允许重复声明变量。这对于避免来自不同库的重复函数表达式(例如下面的“ add”函数表达式)非常有帮助。

消除了对IIFE的需求 (Eliminates The Need For IIFE)

In ES5, in cases like below, we had to use Immediately Invoked Function Expression (IIFE) to ensure we don’t not pollute or overwrite the global scope. In ES6, we can just use curly braces ({}) and use const or let to get the same effect.

在ES5中，在以下情况下，我们必须使用立即调用函数表达式(IIFE)以确保我们不会污染或覆盖全局范围。在ES6中，我们可以只使用花括号({})并使用const或let来获得相同的效果。

babel —将ES6转换为ES5的工具 (babel — A Tool to convert ES6 to ES5)

We need to ultimately run ES6 in a regular browser. is the most popular tool used to convert ES6 to ES5. It has various interfaces like a CLI, Node-module and also an online converter. I use the node module for my apps and use the to quickly see the differences.

我们最终需要在常规浏览器中运行ES6。是用于将ES6转换为ES5的最受欢迎的工具。它具有各种接口，例如CLI，节点模块以及在线转换器。我将节点模块用于我的应用程序，并使用快速查看差异。

Below picture shows how Babel renames the variables to simulate “let” and “const”!

下图显示了Babel如何重命名变量以模拟“ let”和“ const”！

在循环中使用函数很简单 (Makes It Trivial To Use Functions In Loops)

In ES5, if you had a function inside a loop (like for(var i = 0; i < 3; i++) {…}), and if that function tried to access the looping variable “i”, we’d be in trouble because of hoisting. In ES6, if you use “let”, you can use functions without any issue.

在ES5中，如果您在循环内有一个函数(例如for(var i = 0; i <3; i ++){…})，并且如果该函数尝试访问循环变量“ i”，那么我们将处于因吊装而造成麻烦。在ES6中，如果您“让”，您可以毫无问题地使用函数。

Note: You can’t use const because it is constant unless you are using the new for..of loop.

注意：不能使用const，因为它是常量，除非您使用新的for..of循环。

2.词法“ this”(通过箭头函数) (2. Lexical “this” (via Arrow Functions))

In ES5, “this” can vary based on “where” it is called and even “how” it is called and has caused all sorts of pains for JS developers. ES6 eliminates this major issue by “lexical” this.

在ES5中，“ this”可能因调用的“位置”甚至“如何”而有所不同，这给JS开发人员带来了种种麻烦。 ES6通过“词汇化”消除了这个主要问题。

Lexical “this” a feature that forces the variable “this” to always point to the object where it is physically located within.

词法“ this”的一项功能，可强制变量“ this”始终指向其实际所在的对象。

ES5中的问题和两个解决方法： (The problem and two workarounds in ES5:)

In the below picture, we are trying to print a user’s firstName and salary. But we are getting the salary from the server (simulated). Notice that when the response comes back, “this” is “window” instead of the “person” object.

在下面的图片中，我们试图打印用户的名字和薪水。但是我们从服务器(模拟)那里获得薪水。请注意，当响应返回时，“ this”是“ window”而不是“ person”对象。

ES6中的解决方案 (The Solution in ES6)

Simply use the fat-arrow function => and you get the lexical “this” automatically.

只需使用fat-arrow函数=>，即可自动获得词法“ this” 。

The below picture shows how Babel converts fat-arrow function into regular ES5 function w/ workaround so that it works in current browsers.

下图显示了Babel如何通过解决方法将fat-arrow函数转换为常规ES5函数，从而使其在当前的浏览器中工作。

3.处理“争论” (3. Dealing With “arguments”)

In ES5, “arguments” acts like an Array (i.e. we can loop over it), but is not an Array. So, all the Array functions like sort, slice and so on are not available.

在ES5中，“参数”的行为就像一个数组(即，我们可以对其进行循环)，但它不是一个数组。因此，所有的Array函数(例如sort，slice等)都不可用。

In ES6, we can use a new feature called “Rest” parameters. It’s represented with 3 dots and a name like …args. Rest parameters is an Array and so we can use all the Array functions.

在ES6中，我们可以使用称为“ Rest”参数的新功能。它由3个点表示，并带有诸如…args之类的名称。 Rest参数是一个Array，因此我们可以使用所有Array函数。

4.班级 (4. Classes)

Conceptually, there is no such thing as a “Class”(i.e. blueprint) in JS like it is in other OO languages like Java. But people for a long time have treated the “function” (aka “function constructors”) that creates Objects when we use the “new” keyword as Classes.

从概念上讲，在JS中没有像其他OO语言(如Java)那样的“类”(即蓝图)。但是，很长一段时间以来，当我们使用“ new”关键字作为Classs时，人们就将创建对象的“函数”(也称为“函数构造函数”)视为对象。

And since JS doesn’t support the “Classes” and just simulates it via “prototypes”, it’s syntax has been very confusing for both existing JS developers and new comers who wants to use it in a traditional OO fashion. This is especially true for things like: creating subclasses, calling functions in parent class and so on.

而且由于JS不支持“类”，而是仅通过“原型”对其进行仿真，因此，对于希望以传统的OO方式使用它的现有JS开发人员和新手来说，它的语法都非常令人困惑。对于 诸如创建子类，在父类中调用函数之类的事情 尤其如此 。

ES6 brings a new syntax that’s common in various programming languages and makes the whole thing simple. Below picture shows a side-by-side comparison of ES5 and ES6 classes.

ES6带来了在各种编程语言中通用的新语法，并使整个过程变得简单。下图显示了ES5和ES6类的并排比较。

Note: You can click on the picture to zoom and read

注意：您可以点击图片放大并阅读

UPDATE: Be sure to read: (after this)

更新：请务必阅读： (在这之后)

5.严格模式 (5. Strict Mode)

(“use strict”) helps identify common issues (or “bad” parts) and also helps with . In ES5, the Strict Mode is optional but in ES6, it’s needed for many . So most people and tools like babel automatically add “use strict” at the top of the file putting the whole JS code in strict mode and forcing us to write better JavaScript.

(“严格使用”)有助于识别常见问题(或“不良”部分)，还有助于。在ES5中，严格模式是可选的，但在ES6中，许多需要它。因此，大多数人和工具(如babel)都会在文件顶部自动添加“ use strict”，从而将整个JS代码置于严格模式下，并迫使我们编写更好JavaScript。

That’s it! ?

而已！？