擁抱ES6（三）

• • • 箭頭函數
    • 模板字符串
    • async,await
    • promise
    • Map
    • 簡潔語法

箭頭函數

es6新增的箭頭函數是原生function的一種簡化，可用來聲明函數。

與function的不同點

• 箭頭函數的沒有自己的this,它依賴外部環境的this,可用于改變this指向。
• 箭頭函數使用前必須先定義，且沒有arguments參數,但可使用rest參數。
• 不能通過new關鍵字來調用
• 不能當做Generator函數,不能使用yield關鍵字

無參情況

//這種大家應該不陌生，傳統寫法, var say=function(){console.log("你好") } say(); //你好 //箭頭函數形式 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

---

模板字符串

這是一個超級好用的功能，可以簡化字符串的拼接。當需要拼接的字符串很多的時候，模板字符串優勢明顯。

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

async,await

async,await語法是解決異步問題的終極方案，它在寫法上符合開發者的同步編程思維。值得注意的是，await和try catch異常捕獲需要寫在async標識的函數內部。

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

promise

在異步函數中，return是沒用的，只能用回調函數獲取異步運行的結果。promise同樣是異步問題的解決方案，可以優雅的處理回調嵌套問題。but,相比async await ，promise的鏈式調用太長也會顯得不夠優雅。

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

Map

ES6 引入了Map和Set集合，二者大體相似，但Set不存儲重復的值。還引入了WeekMap和WeekSet集合，屬于弱引用，無效引用會自動被垃圾回收,這里主要介紹Map。

// Map結構 var map = new Map(); var x = { id: 1 },y = { id: 2 };// 設置map數據 map.set(x,'bar'); map.set(y,'foo');// 獲取map數據 console.log(map.get(x)); // bar console.log(map.get(y)); // foo// 獲取map結構的長度 console.log(map.size); // 2// 根據指定鍵刪除map數據 map.delete(x);// 根據指定的鍵判斷是否存在于map結構中 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鍵值對 for(var item of map.entries()) {console.log(item[0]); // yconsole.log(item[1]); // {id:2} }

簡潔語法

屬性名簡寫

//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

方法簡寫

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

計算屬性

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。