Node開發(三)ES6擴充套件

2021-10-09 19:24:44 字數 3195 閱讀 7535

1.模板字串,允許通過使用反引號來定義字串 ``

模板字串的特性:

1)支援換行

2)內部支援js表示式 在${}中,可以支援js表示式

//使用es6編輯頁面

//將後台資料展示到頁面的ul中

var oul = document.

queryselector

('ul');

let= obj;

//解構

data.

foreach

(function

(item)

$ `;}

);

2.新增了一些方法

includes() 判斷字串中是否包含字元, true/false

startswith() 判斷字串是否以指定字串開頭 true/false

endswith() 判斷字串是否以指定字元結尾 true/false

padstart() 在頭部補全字串到指定長度

padend() 在尾部補全字串到指定的長度

let num=

'1';

num=num.

padstart(2

,'0');

//補充字串到長度為2,使用0來補

console.

log(num)

;

陣列中新增了兩個方法需要掌握

1.includes 判斷陣列中是否包含指定資料 true/false

2.array.from() 將其他型別轉換為陣列型別

let obj =

;// //將上面的物件轉換為陣列

let arr = array.

from

(obj)

; console.

log(arr)

;

1.物件屬性名簡寫

//若物件的屬性名與屬性值對應的變數名稱一致,則可以簡寫為如下:

let obj =

;console.

log(obj)

;

2.物件屬性表示式

es5中為物件新增屬性:

obj.屬性名

obj[『屬性名』]

es6中,新增屬性表示式

obj[『表示式』]

let str =

'no'

;let obj =

;// obj['a' + 'b' + 5] = 1000;

console.

log(obj)

;

示例2:構建城市列表資料

let obj=

;for

(let i=

0;i<

26;i++

) console.

log(obj)

;

3.物件方法的簡寫

物件中的方法可以去掉function關鍵字宣告,直接使用函式名(),形式即可:

let obj=

,walk()

};

四、函式擴充套件

1.引數預設值

在es6中,允許給形參新增預設值

//es6中

//形參可以新增預設值

function

fn(a =

0, b =0)

回顧:在es6中,有哪些預設值?

1)解構預設值

2)函式的形參預設值

解構預設值+形參 —>解決引數的順序

解構預設值+形參預設值—>解決引數順序問題,又能解決引數預設值問題

//解構+形參預設值

function

ajax(=

) xhr.

open

(method, url)

; xhr.

onreadystatechange

=function()

;if(method ==

"post"

&& params != undefined)

else

}

2.箭頭函式(重點)

在es6中,允許通過箭頭來定義函式 =>

1)引數的個數

a.若引數個數是乙個,則省略()

b.若無參或有兩個以上的引數,()不能省略

2)返回值

a.若函式體只有一句**,且是返回語句,則可以省略{}和return關鍵字

b.其它情況,return和{}都不能省略

特殊情況:

若返回值為物件,則不能省略return和{}(有歧義,會把{}理解為函式體)

letfn=

function

(a, b)

;}

3)箭頭函式中this

在普通函式和箭頭函式中this的指向不一樣。

普通函式中:

this指向呼叫者

箭頭函式中:

this指向定義時的作用域(當前是誰的作用域,this就指向誰)

普通函式與箭頭的區別:箭頭函式不適用的場景:

1)建構函式

2)物件的方法

3)事件函式

3.rest引數

由於es6中的箭頭函式中不能使用arguments屬性,rest引數一定程度上類似arguments。

…變數名

rest引數其實是乙個陣列

rest引數能夠接收任意多的資料

rest引數只能是引數列表中的最後乙個引數

… 擴充套件運算子

運算規則:擴充套件運算子是rest引數的逆運算

rest引數:將離散資料轉換為陣列 (聚合)

擴充套件運算子:將集合轉換為離散資料 (打散)

…究竟是擴充套件運算子還是rest引數?

區分:在函式的引數位置(括號)就是rest引數

其它都是擴充套件運算子

ES6擴充套件

模板字串和標籤模板 const getcourselist function const getcourselist function foo val if status let ul document.createelement ul ul.innerhtml arr.join else pads...

es6擴充套件

擴充套件 1.字串擴充套件 var str hello world substring 1,4 從第1個到第 4 1 個 substr 1,4 從第乙個往後面數四個 重要事項 與 slice 和 substr 方法不同的是,substring 不接受負的引數。indexof searchvalue,...

ES6 函式擴充套件

函式在js裡是相當重要的一部分了,es6裡也新增了一些函式方法,來看一下 test hello hello world test hello kill hello kill es6增加了函式引數預設值,可以直接在宣告引數的同時賦預設值,但是也可以後面重新賦值 test2 kill 括號內有引數x時,...