ES6 for humans
1.0.0
？完整的指南现已在亚马逊上找到
let ， const和块范围let您创建绑定到任何块的声明，称为块范围。代替使用提供函数范围的var ，建议在ES6中使用块示波器变量（ let或const ）。
var a = 2 ;
{
let a = 3 ;
console . log ( a ) ; // 3
let a = 5 ; // TypeError: Identifier 'a' has already been declared
}
console . log ( a ) ; // 2块宣言的另一种形式是const ，它创建常数。在ES6中，A const代表对值的恒定引用。换句话说， Object和Array的内容可能会发生变化，只能防止变量的重新分配。这是一个简单的例子：
{
const b = 5 ;
b = 10 ; // TypeError: Assignment to constant variable
const arr = [ 5 , 6 ] ;
arr . push ( 7 ) ;
console . log ( arr ) ; // [5,6,7]
arr = 10 ; // TypeError: Assignment to constant variable
arr [ 0 ] = 3 ; // value is mutable
console . log ( arr ) ; // [3,6,7]
}要记住的一些事情：
let和const的提升与变量和功能的传统提升不同。两者let const ，但在声明之前无法访问，因为时间死亡区let和const范围范围为最近的封闭块。const PI = 3.14 ）const 。const Over let ，除非您计划重新分配变量。箭头函数是在ES6中编写功能的简短符号。箭头函数定义由参数列表( ... )组成，然后是=>标记和功能主体。对于单题函数，可以省略括号。
// Classical Function Expression
function addition ( a , b ) {
return a + b ;
} ;
// Implementation with arrow function
const addition = ( a , b ) => a + b ;
// With single argument, no parentheses required
const add5 = a => 5 + a ;请注意，在上面的示例中，使用“简洁的主体”实现了addition箭头功能，该功能不需要明确的返回语句。注意=>之后省略的{ } 。
这是通常的“块体”的例子。包括卷曲括号包装纸。
const arr = [ 'apple' , 'banana' , 'orange' ] ;
const breakfast = arr . map ( fruit => {
return fruit + 's' ;
} ) ;
console . log ( breakfast ) ; // ['apples', 'bananas', 'oranges']看！还有更多...
箭头功能不仅使代码缩短。它们与this结合行为密切相关。
使用this关键字的箭头功能行为与正常函数的函数行为不同。 JavaScript中的每个函数都定义了自己的this上下文，但是箭头函数捕获了最近封闭上下文的this 。查看以下代码：
function Person ( ) {
// The Person() constructor defines `this` as an instance of itself.
this . age = 0 ;
setInterval ( function growUp ( ) {
// In non-strict mode, the growUp() function defines `this`
// as the global object, which is different from the `this`
// defined by the Person() constructor.
this . age ++ ;
} , 1000 ) ;
}
var p = new Person ( ) ;在Ecmascript 3/5中，通过将this分配给可以关闭的变量来解决此问题。
function Person ( ) {
const self = this ;
self . age = 0 ;
setInterval ( function growUp ( ) {
// The callback refers to the `self` variable of which
// the value is the expected object.
self . age ++ ;
} , 1000 ) ;
}如上所述，箭头功能捕获了最近的封闭上下文的此值，因此即使使用嵌套箭头功能，以下代码也可以按预期工作。
function Person ( ) {
this . age = 0 ;
setInterval ( ( ) => {
setTimeout ( ( ) => {
this . age ++ ; // `this` properly refers to the person object
} , 1000 ) ;
} , 1000 ) ;
}
let p = new Person ( ) ;在此处阅读有关箭头功能中有关“词汇”的更多信息
ES6允许您在功能定义中设置默认参数。这是一个简单的例证。
const getFinalPrice = ( price , tax = 0.7 ) => price + price * tax ;
getFinalPrice ( 500 ) ; // 850...根据使用方式和何处，操作员被称为传播或休息操作员。
当与任何可触觉一起使用时，它的作用是将其“扩展”到各个要素中：
const makeToast = ( breadType , topping1 , topping2 ) => {
return `I had ${ breadType } toast with ${ topping1 } and ${ topping2 } ` ;
} ; const ingredients = [ 'wheat' , 'butter' , 'jam' ] ;
makeToast ( ... ingredients ) ;
// "I had wheat toast with butter and jam"
makeToast ( ... [ 'sourdough' , 'avocado' , 'kale' ] ) ;
// "I had sourdough toast with avocado and kale"传播也非常适合从其他对象形成一个新对象：
const defaults = { avatar : 'placeholder.jpg' , active : false }
const userData = { username : 'foo' , avatar : 'bar.jpg' }
console . log ( { created : '2017-12-31' , ... defaults , ... userData } )
// {created: "2017-12-31", avatar: "bar.jpg", active: false, username: "foo"}新阵列也可以表达形状：
const arr1 = [ 1 , 2 , 3 ] ;
const arr2 = [ 7 , 8 , 9 ] ;
console . log ( [ ... arr1 , 4 , 5 , 6 , ... arr2 ] ) // [1, 2, 3, 4, 5, 6, 7, 8, 9] ...的另一个常见用法是将所有论点聚集在一起。这被称为“ REST”操作员。
function foo ( ... args ) {
console . log ( args ) ;
}
foo ( 1 , 2 , 3 , 4 , 5 ) ; // [1, 2, 3, 4, 5]ES6允许通过提供速记语法来声明对象文字，以初始化变量和定义函数方法的属性。它还使能够在对象文字定义中计算属性密钥。
function getCar ( make , model , value ) {
return {
// with property value shorthand
// syntax, you can omit the property
// value if key matches variable
// name
make , // same as make: make
model , // same as model: model
value , // same as value: value
// computed values now work with
// object literals
[ 'make' + make ] : true ,
// Method definition shorthand syntax
// omits `function` keyword & colon
depreciate ( ) {
this . value -= 2500 ;
}
} ;
}
let car = getCar ( 'Kia' , 'Sorento' , 40000 ) ;
console . log ( car ) ;
// {
// make: 'Kia',
// model:'Sorento',
// value: 40000,
// makeKia: true,
// depreciate: function()
// }ES6对八元和二元文字有新的支持。以0o或0O数字进行预处理会将其转换为八十个值。看看以下代码：
let oValue = 0o10 ;
console . log ( oValue ) ; // 8
let bValue = 0b10 ; // 0b or 0B for binary
console . log ( bValue ) ; // 2破坏有助于避免在处理对象和数组时需要临时变量。
function foo ( ) {
return [ 1 , 2 , 3 ] ;
}
let arr = foo ( ) ; // [1,2,3]
let [ a , b , c ] = foo ( ) ;
console . log ( a , b , c ) ; // 1 2 3 function getCar ( ) {
return {
make : 'Tesla' ,
model : 'g95' ,
metadata : {
vin : '123abc' ,
miles : '12000'
}
} ;
}
const { make , model } = getCar ( ) ;
console . log ( make , model ) ; // Tesla g95
const { make , metadata : { miles } } = getCar ( ) ;
console . log ( make , miles ) ; // Tesla 12000
ES6允许使用原型（无类）对象中的super方法。以下是一个简单的例子：
const parent = {
foo ( ) {
console . log ( "Hello from the Parent" ) ;
}
}
const child = {
foo ( ) {
super . foo ( ) ;
console . log ( "Hello from the Child" ) ;
}
}
Object . setPrototypeOf ( child , parent ) ;
child . foo ( ) ; // Hello from the Parent
// Hello from the ChildES6引入了一种更简单的方法来添加自动评估的插值。
`${ ... }`用于呈现变量。`回压用作定界符。 let user = 'Kevin' ;
console . log ( `Hi ${ user } !` ) ; // Hi Kevin!for...of迭代对象，例如数组。 const nicknames = [ 'di' , 'boo' , 'punkeye' ] ;
nicknames . size = 3 ;
for ( let nickname of nicknames ) {
console . log ( nickname ) ;
}
// di
// boo
// punkeyefor...in对象的所有枚举属性上进行迭代。 const nicknames = [ 'di' , 'boo' , 'punkeye' ] ;
nicknames . size = 3 ;
for ( let nickname in nicknames ) {
console . log ( nickname ) ;
}
// 0
// 1
// 2
// sizeES6介绍了称为Map和WeakMap的新的数据结构集。现在，我们实际上一直在JavaScript中使用地图。实际上，每个对象都可以视为Map 。
一个对象是由键（始终字符串）和值制成的，而在Map中，任何值（对象和原始值）都可以用作键或值。看看这条代码：
const myMap = new Map ( ) ;
const keyString = "a string" ,
keyObj = { } ,
keyFunc = ( ) => { } ;
// setting the values
myMap . set ( keyString , "value associated with 'a string'" ) ;
myMap . set ( keyObj , "value associated with keyObj" ) ;
myMap . set ( keyFunc , "value associated with keyFunc" ) ;
myMap . size ; // 3
// getting the values
myMap . get ( keyString ) ; // "value associated with 'a string'"
myMap . get ( keyObj ) ; // "value associated with keyObj"
myMap . get ( keyFunc ) ; // "value associated with keyFunc"弱图
WeakMap是键弱引用键的地图，并不能阻止其钥匙被垃圾收集。这意味着您不必担心内存泄漏。
在此处要注意的另一件事 - 在WeakMap中而不是Map每个键都必须是一个对象。
WeakMap仅具有四个方法delete(key) ， has(key) ， get(key)和set(key, value) 。
const w = new WeakMap ( ) ;
w . set ( 'a' , 'b' ) ;
// Uncaught TypeError: Invalid value used as weak map key
const o1 = { } ,
o2 = ( ) => { } ,
o3 = window ;
w . set ( o1 , 37 ) ;
w . set ( o2 , "azerty" ) ;
w . set ( o3 , undefined ) ;
w . get ( o3 ) ; // undefined, because that is the set value
w . has ( o1 ) ; // true
w . delete ( o1 ) ;
w . has ( o1 ) ; // false设定对象是唯一值的集合。重复值将被忽略，因为该集合必须具有所有唯一的值。这些值可以是原始类型或对象引用。
const mySet = new Set ( [ 1 , 1 , 2 , 2 , 3 , 3 ] ) ;
mySet . size ; // 3
mySet . has ( 1 ) ; // true
mySet . add ( 'strings' ) ;
mySet . add ( { a : 1 , b : 2 } ) ;您可以使用forEach方法或for...of loop在插入顺序上迭代一组。
mySet . forEach ( ( item ) => {
console . log ( item ) ;
// 1
// 2
// 3
// 'strings'
// Object { a: 1, b: 2 }
} ) ;
for ( let value of mySet ) {
console . log ( value ) ;
// 1
// 2
// 3
// 'strings'
// Object { a: 1, b: 2 }
}集合还具有delete()和clear()方法。
弱点
与WeakMap类似， WeakSet对象使您可以将弱保存的对象存储在集合中。 WeakSet中的一个物体仅发生一次。它在弱点的集合中是独一无二的。
const ws = new WeakSet ( ) ;
const obj = { } ;
const foo = { } ;
ws . add ( window ) ;
ws . add ( obj ) ;
ws . has ( window ) ; // true
ws . has ( foo ) ; // false, foo has not been added to the set
ws . delete ( window ) ; // removes window from the set
ws . has ( window ) ; // false, window has been removedES6引入了新的类语法。这里要注意的一件事是，ES6类不是面向对象的继承模型。它们只是在JavaScript现有基于原型的继承上充当句法糖。
查看ES6中的类的一种方法只是一种新的语法，可以使用我们在ES5中使用的原型和构造函数。
使用static关键字实现静态/类函数定义的函数。
class Task {
constructor ( ) {
console . log ( "task instantiated!" ) ;
}
showId ( ) {
console . log ( 23 ) ;
}
static loadAll ( ) {
console . log ( "Loading all tasks.." ) ;
}
}
console . log ( typeof Task ) ; // function
const task = new Task ( ) ; // "task instantiated!"
task . showId ( ) ; // 23
Task . loadAll ( ) ; // "Loading all tasks.."延伸和超级上课
考虑以下代码：
class Car {
constructor ( ) {
console . log ( "Creating a new car" ) ;
}
}
class Porsche extends Car {
constructor ( ) {
super ( ) ;
console . log ( "Creating Porsche" ) ;
}
}
let c = new Porsche ( ) ;
// Creating a new car
// Creating Porsche extends允许子类从ES6中的父类继承。重要的是要注意，派生的构造函数必须调用super() 。
另外，您可以使用super.parentMethodName()在子类方法中调用父类方法
在此处阅读有关课程的更多信息
要记住的一些事情：
function关键字。Symbol是ES6中引入的独特且不可变的数据类型。符号的目的是生成唯一的标识符，但您永远无法访问该标识符。
这是创建一个符号的方式：
const sym = Symbol ( "some optional description" ) ;
console . log ( typeof sym ) ; // symbol请注意，您不能将new Symbol(…)一起使用。
如果将符号用作对象的属性/键，则以特殊的方式存储该属性，该属性不会在对象属性的正常枚举中显示。
const o = {
val : 10 ,
[ Symbol ( "random" ) ] : "I'm a symbol" ,
} ;
console . log ( Object . getOwnPropertyNames ( o ) ) ; // val要检索对象的符号属性，请使用Object.getOwnPropertySymbols(o)
迭代器一次从集合中访问项目，同时跟踪其在该序列中的当前位置。它提供了next()方法，该方法返回序列中的下一个项目。此方法返回具有两个属性的对象：已完成和值。
ES6具有Symbol.iterator为对象指定默认迭代器。每当需要迭代对象（例如在for loop的开头）时，它的@@ interator方法被没有参数调用，并且返回的迭代器被用来获取要迭代的值。
让我们看一个阵列，这是一个迭代的阵列，它可以产生的迭代器以消耗其值：
const arr = [ 11 , 12 , 13 ] ;
const itr = arr [ Symbol . iterator ] ( ) ;
itr . next ( ) ; // { value: 11, done: false }
itr . next ( ) ; // { value: 12, done: false }
itr . next ( ) ; // { value: 13, done: false }
itr . next ( ) ; // { value: undefined, done: true }请注意，您可以通过对象定义定义obj[Symbol.iterator]() 。
发电机函数是ES6中的一个新功能，它允许函数通过返回一个可以迭代的对象来生成许多值，以一次迭代以一次值从函数一个值中提取值。
发电机函数在调用时返回一个估计的对象。它是使用新的*语法以及ES6中引入的新yield关键字编写的。
function * infiniteNumbers ( ) {
let n = 1 ;
while ( true ) {
yield n ++ ;
}
}
const numbers = infiniteNumbers ( ) ; // returns an iterable object
numbers . next ( ) ; // { value: 1, done: false }
numbers . next ( ) ; // { value: 2, done: false }
numbers . next ( ) ; // { value: 3, done: false }每次调用收益率，屈服值成为序列中的下一个值。
另外，请注意，发电机按需计算其屈服值，这使它们能够有效地表示昂贵的计算甚至无限序列的序列。
ES6对承诺有本地支持。承诺是一个正在等待异步操作完成的对象，当该操作完成后，承诺要么实现（已解决）或拒绝。
创建承诺的标准方法是使用new Promise()构造函数，该构造器接受处理程序，该处理程序被赋予两个函数作为参数。第一个处理程序（通常命名为resolve ）是在准备就绪时使用未来值调用的函数；第二个处理程序（通常命名为reject ）是呼吁拒绝承诺的函数，如果该承诺无法解决未来值。
const p = new Promise ( ( resolve , reject ) => {
if ( /* condition */ ) {
resolve ( /* value */ ) ; // fulfilled successfully
} else {
reject ( /* reason */ ) ; // error, rejected
}
} ) ;每个诺言都有一个命名的方法， then采用一对回调。如果解决了承诺，则第一个回调将调用，而如果承诺被拒绝，则将调用第二个回调。
p . then ( ( val ) => console . log ( "Promise Resolved" , val ) ,
( err ) => console . log ( "Promise Rejected" , err ) ) ; then返回值的回调将将值传递给下一个then其回回回电。
const hello = new Promise ( ( resolve , reject ) => { resolve ( "Hello" ) } ) ;
hello . then ( ( str ) => ` ${ str } World` )
. then ( ( str ) => ` ${ str } !` )
. then ( ( str ) => console . log ( str ) ) // Hello World!在返回诺言时，诺言的解决价值将传递给下一个回调，以有效地将它们链接在一起。这是避免“回调地狱”的简单技术。
const p = new Promise ( ( resolve , reject ) => { resolve ( 1 ) } ) ;
const eventuallyAdd1 = ( val ) => new Promise ( ( resolve , reject ) => { resolve ( val + 1 ) } ) ;
p . then ( eventuallyAdd1 )
. then ( eventuallyAdd1 )
. then ( ( val ) => console . log ( val ) ) ; // 3
