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. Babel 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 online version to quickly see the differences.

我们最终需要在常规浏览器中运行ES6。 Babel是用于将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: Is “Class” In ES6 The New “Bad” Part? (after this)

更新：请务必阅读： ES6中的“类”是新的“不良”部分吗？ (在这之后)

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

Strict Mode(“use strict”) helps identify common issues (or “bad” parts) and also helps with “securing” JavaScript. In ES5, the Strict Mode is optional but in ES6, it’s needed for many ES6 features. 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.

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

That’s it! ?

而已！ ？

如果这有用，请单击拍手？ 请点击以下几次以显示您的支持！ ???? (If this was useful, please click the clap ? button down below a few times to show your support! ⬇⬇⬇ ??)

我的其他帖子 (My Other Posts)

https://medium.com/@rajaraodv/latest

https://medium.com/@rajaraodv/latest

ECMAScript 2015+ (ECMAScript 2015+)

1. Check out these useful ECMAScript 2015 (ES6) tips and tricks

   查看这些有用的ECMAScript 2015(ES6)提示和技巧

2. 5 JavaScript “Bad” Parts That Are Fixed In ES6

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

3. Is “Class” In ES6 The New “Bad” Part?

   ES6中的“类”是新的“不良”部分吗？

终端改进 (Terminal Improvements)

1. How to Jazz Up Your Terminal — A Step By Step Guide With Pictures

   如何使您的终端更加爵士乐-带有图片的分步指南

2. Jazz Up Your “ZSH” Terminal In Seven Steps — A Visual Guide

   通过七个步骤使您的“ ZSH”终端变得爵士乐—视觉指南

万维网 (WWW)

1. A Fascinating And Messy History Of The Web And JavaScript

   Web和JavaScript的迷人历史

虚拟DOM (Virtual DOM)

1. Inner Workings Of The Virtual DOM

   虚拟DOM的内部运作

React表现 (React Performance)

1. Two Quick Ways To Reduce React App’s Size In Production

   两种减少React App生产规模的快速方法

2. Using Preact Instead Of React

   使用Preact代替React

功能编程 (Functional Programming)

1. JavaScript Is Turing Complete — Explained

   JavaScript正在完善–解释

2. Functional Programming In JS — With Practical Examples (Part 1)

   JS中的函数式编程—结合实际示例(第1部分)

3. Functional Programming In JS — With Practical Examples (Part 2)

   JS中的函数式编程—结合实际示例(第2部分)

4. Why Redux Need Reducers To Be “Pure Functions”

   为什么Redux需要Reducer成为“纯功能”

Web包装 (WebPack)

1. Webpack — The Confusing Parts

   Webpack —令人困惑的部分

2. Webpack & Hot Module Replacement [HMR] (under-the-hood)

   Webpack和热模块更换[HMR] ( 后台 )

3. Webpack’s HMR And React-Hot-Loader — The Missing Manual

   Webpack的HMR和React-Hot-Loader —缺少的手册

Draft.js (Draft.js)

1. Why Draft.js And Why You Should Contribute

   为什么选择Draft.js，为什么要贡献力量

2. How Draft.js Represents Rich Text Data

   Draft.js如何表示富文本数据

React And Redux： (React And Redux :)

1. Step by Step Guide To Building React Redux Apps

   构建React Redux应用程序的逐步指南

2. A Guide For Building A React Redux CRUD App (3-page app)

   构建React Redux CRUD应用程序指南 (3页应用程序)

3. Using Middlewares In React Redux Apps

   在React Redux应用程序中使用中间件

4. Adding A Robust Form Validation To React Redux Apps

   向React Redux应用添加强大的表单验证

5. Securing React Redux Apps With JWT Tokens

   使用JWT令牌保护React Redux应用程序

6. Handling Transactional Emails In React Redux Apps

   在React Redux应用程序中处理交易电子邮件

7. The Anatomy Of A React Redux App

   React Redux应用程序剖析

8. Why Redux Need Reducers To Be “Pure Functions”

   为什么Redux需要Reducer成为“纯功能”

9. Two Quick Ways To Reduce React App’s Size In Production

   两种减少React App生产规模的快速方法

如果这有用，请单击拍手？ 几次点击下面的按钮表示您的支持！ ???? (If this was useful, please click the clap ? button below a few times to show your support! ⬇⬇⬇ ??)

翻译自: https://www.freecodecamp.org/news/5-javascript-bad-parts-that-are-fixed-in-es6-c7c45d44fd81/