擁抱ES6（三）

• • • 箭頭函數(shù)
    • 模板字符串
    • async,await
    • promise
    • Map
    • 簡(jiǎn)潔語(yǔ)法

箭頭函數(shù)

es6新增的箭頭函數(shù)是原生function的一種簡(jiǎn)化，可用來(lái)聲明函數(shù)。

與function的不同點(diǎn)

• 箭頭函數(shù)的沒有自己的this,它依賴外部環(huán)境的this,可用于改變this指向。
• 箭頭函數(shù)使用前必須先定義，且沒有arguments參數(shù),但可使用rest參數(shù)。
• 不能通過(guò)new關(guān)鍵字來(lái)調(diào)用
• 不能當(dāng)做Generator函數(shù),不能使用yield關(guān)鍵字

無(wú)參情況

//這種大家應(yīng)該不陌生，傳統(tǒng)寫法, var say=function(){console.log("你好") } say(); //你好 //箭頭函數(shù)形式 var say=()=>{console.log("你好")} say(); //你好

---

單參

var say=(name)=>{console.log(name)} say("冷月心");//冷月心

---

雙參

var say=(name,age)=>{console.log(name+","+age)} say("冷月心",18);//冷月心，18

---

rest

var say=(...rest)=>{console.log(rest[0],rest[1])} say("冷月心",18);//冷月心 18

---

返回值

• 這兩種寫法都可以

var add1=(a,b)=>{return a+b;} var add2=(a,b)=>a+b; console.log(add1(1,2));//3 console.log(add2(1,2));//3

---

模板字符串

這是一個(gè)超級(jí)好用的功能，可以簡(jiǎn)化字符串的拼接。當(dāng)需要拼接的字符串很多的時(shí)候，模板字符串優(yōu)勢(shì)明顯。

var str="姓名"; var name="高芊"; //oldconsole.log(str+":"+name)//姓名:高芊//new console.log(`${str}:${name}`)//姓名:高芊

async,await

async,await語(yǔ)法是解決異步問(wèn)題的終極方案，它在寫法上符合開發(fā)者的同步編程思維。值得注意的是，await和try catch異常捕獲需要寫在async標(biāo)識(shí)的函數(shù)內(nèi)部。

import axios from 'axios'async function getUserInfo(){try{var res=await axios.post(url);//注意這里 不是then語(yǔ)法了console.log(res.data);}catch(err){console.log(err)} }getUserInfo()

promise

在異步函數(shù)中，return是沒用的，只能用回調(diào)函數(shù)獲取異步運(yùn)行的結(jié)果。promise同樣是異步問(wèn)題的解決方案，可以優(yōu)雅的處理回調(diào)嵌套問(wèn)題。but,相比async await ，promise的鏈?zhǔn)秸{(diào)用太長(zhǎng)也會(huì)顯得不夠優(yōu)雅。

// 創(chuàng)建一個(gè)Promise var promise = new Promise((resolve, reject) => {// do something here ...if (success) {resolve(value); // 成功時(shí)候的處理邏輯} else {reject(error); // 失敗時(shí)候的處理邏輯} });// then調(diào)用接受成功和失敗兩個(gè)回調(diào)函數(shù)promise.then(value=> {// 成功的回調(diào)}, error=> {//失敗的回調(diào)}) })// 也可以統(tǒng)一用catch捕獲promise.then(value=> {// 成功的回調(diào)}).catch(err=>{//失敗的回調(diào)})

Map

ES6 引入了Map和Set集合，二者大體相似，但Set不存儲(chǔ)重復(fù)的值。還引入了WeekMap和WeekSet集合，屬于弱引用，無(wú)效引用會(huì)自動(dòng)被垃圾回收,這里主要介紹Map。

// Map結(jié)構(gòu) var map = new Map(); var x = { id: 1 },y = { id: 2 };// 設(shè)置map數(shù)據(jù) map.set(x,'bar'); map.set(y,'foo');// 獲取map數(shù)據(jù) console.log(map.get(x)); // bar console.log(map.get(y)); // foo// 獲取map結(jié)構(gòu)的長(zhǎng)度 console.log(map.size); // 2// 根據(jù)指定鍵刪除map數(shù)據(jù) map.delete(x);// 根據(jù)指定的鍵判斷是否存在于map結(jié)構(gòu)中 console.log(map.has(x)); // false// 遍歷map鍵 for(var key of map.keys()) {console.log(key); // {id:2} }// 遍歷map值 for(var value of map.values()) {console.log(value); // foo }// 遍歷map鍵值對(duì) for(var item of map.entries()) {console.log(item[0]); // yconsole.log(item[1]); // {id:2} }

簡(jiǎn)潔語(yǔ)法

屬性名簡(jiǎn)寫

//old var name='Tom' var obj={name:name }; console.log(obj.name)//Tom //new var name='Tom' var obj={name//注意這里 }; console.log(obj.name)//Tom

方法簡(jiǎn)寫

//old var obj={say:function(){console.log('hello')} }; obj.say();//hello//new var obj={say(){console.log('hello')} }; obj.say();//hello

計(jì)算屬性

//old var user={name:'Tom' }//new var key='name' var user={[key]:'Tom' }

總結(jié)

以上是生活随笔為你收集整理的拥抱ES6(三)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。