原文地址: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一书