[译]ES6提示和技巧，使您的代码更清晰，更短，更容易阅读

原文地址:ES6 tips and tricks to make your code cleaner, shorter, and easier to read!

模板字面量(Template literals)

模板字面量比以前更容易处理字符串。以'开头，并且可以使用${variable}插入变量。比较这两行代码：

这使得事情变得更简单，代码更容易阅读。你可以在花括号内放置任何东西：变量、方程式或函数调用。我将在本文的示例中使用这些。

块作用域语法(Syntax Block scoping)

JavaScript一直是函数作用域，这就是为什么将整个JavaScript文件包装在一个空的立即调用函数表达式（IIFE）中变得很普遍的原因。这样做是为了隔离文件中的所有变量，因此没有可变冲突。

现在，我们有块作用域和两个绑定到块的新变量声明。

Let声明

这类似于var但有一些明显的差异。因为它是块作用域，所以可以声明具有相同名称的新变量而不影响外部变量。

因为它受限于一个块作用域，它解决了这个经典的面试问题： “输出是什么，你将如何让它像你期望的那样工作？”

在这种情况下，它输出 5 5 5 5 5，因为变量 i在每次迭代时都会发生变化。

如果您将var换为let那么一切都会改变。现在，每个循环创建一个新的块作用域，其中i的值绑定到该循环。

var和 let之间的另一个区别是 let不会提升而 var会。

由于其更严格的范围和更可预测的行为，有些人会说应该使用 let而不是 var，除非特别需要提升或更宽松的 var声明范围。

const

如果你想在之前在JavaScript中声明一个常量变量，那么通常会在块上方命名变量。但是，这不会保护变量-它只是让其他开发人员知道它是一个常量不应该被更改。

现在有const声明。

const不会使变量成为不可变的，只是锁定其赋值。如果您具有复杂的赋值（对象或数组），则仍可以修改该值。

块作用域函数的问题

现在指定函数声明绑定到块作用域。

当您在 if语句中声明一个函数时会出现问题。

考虑一下：

在ES6之前，两个函数声明都会被提升，无论 something是什么结果都是 'I didn\'t pass'。 现在我们得到了 'ReferenceError'，因为 baz它始终受块范围的约束。

Spread

ES6引入了 ...运算符，称为“扩展运算符”。它有两个主要用途：将数组或对象扩展到新数组或对象，以及将多个参数连接到数组中。

第一个用例是你可能最常遇到的用例，所以我们先看一下。

这对于将一组变量传递给数组中的函数非常有用。

还可以扩展对象，将每个键值对输入到新对象中。（对象spread实际上在提案的第4阶段，将在ES2018正式发布。它仅在Chrome 60或更高版本，Firefox 55或更高版本以及Node 6.4.0或更高版本支持）

扩展运算符的另一个特性是创建一个新的数组或对象。下面的示例为其创建了一个新数组b，但c只引用了相同的数组。

第二个用例是将变量收集到一个数组中。当您不知道有多少参数传递给函数时，这非常有用。

默认参数(Default Parameters)

现在可以使用默认参数定义函数。使用默认值初始化缺失值或未定义值。请注意 - 因为null和false值被强制为0。

默认值可以不仅仅是值 - 它们也可以是表达式或函数。

解构(Destructuring)

解构是将等号的左侧的数组或对象拆开的过程。数组或对象可以来自变量、函数或方程式。

使用对象解构，可以在花括号内列出对象的键以提取该键值对。

有时，您希望提取值，将它们分配给新变量。这是使用等号左侧的 'key：variable'匹配完成的。

对象解构还可以做得是允许为多个变量赋值。

对象字面量和简明参数

当您从变量创建对象字面量时，ES6允许您省略key（如果它与变量名称相同）。

这也可以与解构结合使用，使您的代码更简单，更清晰。

它还可以用于解构传递给函数的对象。方法1和方法2是在ES6之前完成它的方法，方法3使用解构和简明参数。

使用ES6，我们可以提取 age,name,company无需额外的变量声明。

动态属性名称

ES6增加了使用动态分配的键创建或添加属性的功能。

箭头函数

箭头函数有两个主要方面：结构和this绑定。

它们具有比传统函数更简单的结构，因为它们不需要function关键字，并且它们自动返回箭头之后的任何内容。

如果函数需要的不仅仅是简单的计算，那么可以使用花括号，函数返回从块作用域返回的任何内容。

箭头函数最有用的地方之一是数组函数，如 .map 、.forEach或 .sort。

除了具有更短的语法之外，它还修复了 this绑定行为引起的问题。具有预ES6功能的修复程序是存储 this引用，通常作为 self变量。

必须这样做，因为 this绑定是动态的。这意味着事件监听器里的 this和 doSomething内部的 this不会引用相同的东西。

在箭头函数内部，this绑定是词法，不是动态的。这是箭头函数的主要设计特征。

虽然词法this绑定可能很棒，但有时候这并不是想要的。

当我们执行 a.oneThing(6)时， this.otherThing( b )引用失败，因为 this没有指向对象 a，而是指向箭头函数块作用域。如果您使用ES6语法重写之前的代码，请注意这一点。

for … of 循环

ES6添加了一种迭代数组中每个值的方法。这与for ... in循环键/索引的现有循环不同。

使用 for … of循环可以省去每个循环内部添加 let val = a[idx]。

Arrays, strings, generators and collections都可以在标准JavaScript中迭代，普通对象通常无法迭代除非为它定义了迭代器。

数字字面量

ES5代码很好地处理了十进制和十六进制数字格式，但未指定八进制格式。事实上，它在严格模式下被主动禁止。

ES6添加了一种新格式，o在初始化后添加一个0声明数字为八进制的数字。还添加了二进制格式。

更多…

本文只是一个简单的引导，更多详细内容请阅读请阅读Kyle Simpson 关于ES6 你所不知道的JavaScript一书