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
