ES6模板字串,解構,箭頭函式

2021-10-04 12:16:54 字數 2451 閱讀 9945

模板字串使用反引號 (``) 來代替普通字串中的用雙引號和單引號。模板字串可以包含特定語法($)的佔位符。佔位符中的表示式和周圍的文字會一起傳遞給乙個 預設函式,該函式負責將所有的部分連線起來,如果乙個模板字串由表示式開頭,則該字串被稱為帶標籤的模板字串,該表示式通常是乙個函式,它會在模板字串處理後被 呼叫,在輸出最終結果前,你都可以通過該函式來對模板字串進行操作處理。在模版字串內使用反引號(#)時,需要在它前面加轉義符(\)。

\#=== 「#」 // 結果為true

//它和傳統的字串有什麼區別:

//傳統字串

//傳統的字串拼接不能正常換行

//傳統的字串拼接不能友好的插入變數

//傳統的字串拼接不能友好的處理單引號、雙引號互相巢狀的問題。

//*** hello vue ***

var s1 =

'***'

+'hello vue'

+'***'

;//模板字串

//支援變數的巢狀

var s1 =

`hello vue`

;`***

$***`

//*** hello vue ***

//{}裡面可以插入任何js表示式,可以是乙個物件、陣列,甚至是乙個函式。

//物件或陣列會呼叫它們的tostring()方法

//物件

var obj =

;`0 $1`

//0 [object object] 1

//陣列

var arr =[1

,2,3

];`0 $

1`//0 1,2,3 1

//函式分兩種情況:

//函式本身,同樣會呼叫它的tostring()方法

//直接呼叫函式,則輸出函式的返回值

varfn1

=function()

varfn2

=function()

`$`//function fn()`$

`//underfind`$

`//hello

解構賦值是一種表示式,允許您使用陣列或物件,將可迭代物件的值或屬性分配給變數。解構賦值能讓我們用更簡短的語法進行多個變數的賦值,大大的減少了**量。

//如何將乙個陣列的值,賦值給多個變數?

//在之前我們可以這樣賦值

var arr =[1

,2,3

];var a = arr[0]

;var b = arr[1]

;var c = arr[2]

;//在認識解構之後可以這樣

let arr=[1

,2,3

];let a, b, c;

[a, b, c]

= arr;

//[a, b, c]就是解構表示式。在陣列解構語句的左側就是需要進行賦值的多個變數,等號右側則是我們需要分配的值

//忽略陣列中某些值如果只有兩個變數,我們陣列內容有三項,我們想跳過陣列中的第二項,我們如何使用陣列解構賦值呢?

let[a,

, b]=[

1,2,

3];//還可以設定預設的值 let [a,b,c = 3] = [1,2]; 巢狀陣列 let [a,b,[c,d]] = [1,2,[3,4]];

//物件

//正常

var object =

;var name = object.name;

var age = object.age;

//解構

let object =

;let name, age;

(= object)

;//注:物件解構賦值的左側為解構賦值表示式,右側為對應要分配賦值的物件。解構語句的兩邊千萬不要遺漏左右括號(),否則會報錯。還有一點需要格外注意,解構對 象變數的名稱一定要和右邊物件的屬性名稱保持一致,否則會提示變數的值為undefined

//解構的使用場景:我們經常與後端api介面做資料互動,我們需要處理返回的json物件,使用解構方式大大簡化了我們的**

let json =

;let

= json;

console.

log(name,age, number)

;

箭頭函式顧名思義是使用箭頭(=>)定義的函式,屬於匿名函式一類。

如果乙個箭頭函式無引數傳入,則需要用一對空的括號來表示空的引數列表 var fn = ()=>『hello』

箭頭函式和傳統函式的區別

箭頭函式作為匿名函式,是不能作為建構函式的,不能使用new

箭頭函式this指向具備穿透特性,會捕獲其所在上下文的this值

箭頭函式不繫結arguments

箭頭函式沒有原型屬性

箭頭函式對上下文的繫結是強制的,無法通過call或aplly進行改變

ES6箭頭函式和模板字串

es6 本章內容 箭頭函式 箭頭函式中this的指向 陣列的新方法 模板字串 三點運算子 結構賦值 具體內容 箭頭函式的宣告 es6允許使用箭頭函式 定義 宣告乙個物件 function person name,age let v new person wyh 30 p.say function p...

ES6新增字串模板和解構賦值

當我們需要拼接字串時,往往會遇到一些不便,比如變數太多,用的太多導致自己都看不清哪些內容,長還不清晰,換行需要加轉義字元等等。舊語法 var name 張三 var year 1995 var month 6 console.log name 是 year 年 month 月份 n出生的 es6的字...

ES6模板字串

es6提供了模板字串使字串的拼接以及模板的編寫變得特別簡單,組合字串的時候不在需要加號單引號這些,直接使用一對反引號即可,而且字串中需要變數的時候直接 的這種方式,大括號裡面可以是任何的js表示式,變數,物件的屬性,還可以是乙個函式,模板字串還可以進行巢狀。const person lili con...