ES6學習總結 四

2021-09-22 18:22:33 字數 4581 閱讀 7289

與大多數物件導向語言不同,js建立之初不支援類,在es1-es5很多庫建立了一些工具來讓js顯得好像支援類 ,直到es6正式引入類。

es6類的宣告是以class關鍵字開始後面緊跟類名,類宣告中有constructor方法可以直接定義乙個構造器。

class

personclass

}

類和之前的函式構造器有著很多的區別

1、類宣告不會被提公升,其行為和let類似,因此在程式執行到達宣告處前,類會存在於暫時性死區內。

2、類宣告中的所有**會自動執行在嚴格模式下,並且無法退出嚴格模式。

3、類中的所有方法都是不可列舉的,函式構造器中必須使用object.defineproperty()才能將方法變為不可列舉。

4、類的所有方法沒有[[constructor]],因此不能使用new來呼叫他們。

5、呼叫類構造器時必須使用new。

6、試圖在類方法內部重寫類名會報錯。

類中的生成器方法

類中只需要在方法名稱前附加乙個"*"號就能定義乙個生成器

class

myclass

}let instance =

newmyclass()

;let iterator = instance.

createiterator()

;

靜態成員

//在es5及更早版本中,是直接在構造器上新增額外方法來模擬靜態成員

function

persontype

(name)

persontype.

create

=function

(name)

//像persontype.create()會被認定為乙個靜態方法,它的資料不依賴persontype任何例項

//es6中靜態方法的表示

class

persontype

static

create

(name)

}

繼承

在出現類之前,繼承的實現很繁複,類中提供了extends關鍵字來指定當前類所需要繼承的函式,還能呼叫super()方法訪問基類構造器。

// es5以及之前構造器間的繼承實現

function

personclass

(name)

personclass.prototype.

getname

=function()

function

person

(name)

person.prototype = object.

create

(personclass.prototype,})

// es6中繼承的實現方法

class

personclass

getname()

}class

person

extends

personclass

}var digua =

newperson

('digua');

console.

log(digua.getname)

// digua

迭代器

es6中加入了迭代器,它是對高效處理集合資料一種補充,所有的迭代器都含有next()方法,它返回兩個值,第乙個值時集合中的下一項(value),第二項是是否還有更多的值供使用(done)。迭代器中可以選擇實現乙個throw()方法來丟擲錯誤,es6中新增了for-of來和迭代器協同工作,擴充套件運算子(…)也使用了它,同時它對非同步操作也有一定意義。

生成器

生成器是能返回乙個迭代器的函式,它的表達方法是function後加乙個(*),同時使用yield來表明每一步結果。

例子

function

*create()

let obj =

create()

console.

log(obj.

next()

)//

console.

log(obj.

next()

)//

console.

log(obj.

next()

)//

console.

log(obj.

next()

)//

// next 中可以傳值,當第乙個引數被傳遞給next方法時,它會成為生成器內部yield語句的值,注意第一次呼叫時任意引數會被忽略。

function

*create2()

let sum =

create()

;console.

log(sum.

next()

)//

console.

log(sum.

next(4

))// console.

log(sum.

throw

(new

error

("err"))

);// 從生成器中丟擲了錯,後續done值為true

內建的迭代器

es6中包含陣列、map、set三種集合物件型別,這三種型別都擁有三種迭代器。

1、entries():返回乙個包含鍵值對的迭代器

2、values():返回乙個包含集合中的值的迭代器

3、keys():返回乙個包含集合中鍵的迭代器

上面提到了for-of和迭代器是協同工作的,在使用for-of時values()方法是陣列和set的預設迭代器,entries()方法是map的預設迭代器

例子:

let colors =

['red'

,'green'

,'blue'];

let track =

newset([

'123'

,'224'

,'412'])

let data =

newmap()

data.

set(

"name"

,"digua"

)data.

set(

"age",12

)for

(let value of colors.

entries()

)//[ 0, "red"] [1, "green"] [2, "blue"]

// 預設情況下為values()

for(

let value of colors)

// "red" "green" "blue"

for(

let value of track.

entries()

)// ["123", "123"] ["234", "234"] ["412", "412"]

// 預設情況下為values()

for(

let value of track)

// "123" "234" "412"

for(

let value of data.

entries()

)//["name": "digua"] ["age", 12]

// 預設情況下為entries()

for(

let value of data)

//["name": "digua"] ["age", 12]

擴充套件運算子與可迭代物件

之前提到擴充套件運算子中運用了迭代器,它會使用預設迭代器來判斷需要使用哪些值,將所有值從迭代器取出插入陣列。

例子

// set

letset

=new

set([1

,2,2

,3,4

])let arr =

[...

set]

console.

log(arr)

// [1, 2, 3, 4]

// map

let map =

newmap([

"name"

,"digua"],

["age",20

])let arr1 =

[...map]

console.

log(arr1)

// [["name", "digua"], [["age", 20]]

非同步任務

迭代器對非同步任務的意義在於,我們可以通過乙個看似同步的**來實現非同步操作。下面寫一段偽**來說明迭代器實現的乙個非同步操作

function

*getname()

例子中dosomething的操作是在等read操作執行之後,那麼這時就實現乙個非同步操作。

es6學習總結

一 let和const 1.let宣告的變數只在它所在的 塊有效。2.let宣告的變數僅在塊級作用域內有效。3.不存在變數提公升。4.每個let宣告的變數都有各自的作用域。它所宣告的變數一定要在宣告後使用,否則報錯 5.暫時性死區 只要塊級作用域內存在let命令,它所宣告的變數就 繫結 bindin...

ES6學習總結

1.建立 let x newset 2.特性 對基本資料型別,會自動去重 3.方法 x.add 新增 x.delete 刪除 x.has 刪除是否存在,返回布林 x.clear 清空 x.keys 返回鍵名的遍歷器 x.values 返回鍵值的遍歷器 x.foreach function 遍歷 ar...

ES6學習總結 六

在運用react vue等流行框架到時候,我們發現每個 塊都是分離的,每個js檔案中定義的內容都只在本區域有作用。這就是es6引入的模組化的概念,在此之前,乙個應用的每個js檔案所定義的所有內容都由全域性作用域共享。模組與指令碼的不同 模組的載入方式是與js原先指令碼載入方式有所區別的 1 模組 自...