接著上一篇的說。

arrow functions 箭頭函數

?=> 更便捷的函數聲明

document.getElementById("click_1").onclick = function(){ console.log("say Hi!"); }document.getElementById("click_2").onclick = () => { let a = 1; let b = 2; console.log(a + b); }

之前的 function 聲明可以被 => 代替，書寫起來更便捷。

箭頭函數還有個更炫酷也是最使用的用法。

先看個常見的例子：

class people{constructor(){ this.age = 18; }say(){ setTimeout(function(){ console.log("I'm " + this.age + " year old."); },2000) }}let children = new people();children.say(); // I'm undefined year old.

這里的this指向內層function對象，所以出現undefined，這就是比較蛋疼的bug。為了方便理解上個截圖說明

傳統解決方案：

class people{constructor(){ this.age = 18; }say(){ var self = this;setTimeout(function(){ console.log("I'm " + self.age + " year old."); },2000) }}let children = new people();children.say(); // I'm 18 year old.

將this在函數內傳遞給一個變量再使用。或者

class people{constructor(){ this.age = 18; }say(){ setTimeout(function(){ console.log("I'm " + this.age + " year old."); }.bind(this),2000) }}let children = new people();children.say(); // I'm 18 year old.

用 bind(this) 指明this的對象

再來看看用 => 的做法

class people{constructor(){ this.age = 18; }say(){ setTimeout( ()=>{ console.log("I'm " + this.age + " year old."); },2000) }}let children = new people();children.say(); // I'm 18 year old.

簡單省事兒閱讀清晰。

?

template string

這玩兒超好用，一旦用上你會愛不釋手，下面來看一段案例：

class people{constructor(name,age,comeFrom){this.name = name;this.age = age;this.comeFrom = comeFrom;}}// 實例化對象let XiaoM = new people("小明",18,"中國");// 傳統寫法console.log("我叫"+XiaoM.name+"，今年"+XiaoM.age+"歲，我來自"+XiaoM.comeFrom+"。");// template string寫法document.write(`我叫<font color="red">${XiaoM.name}</font>，今年<b>${XiaoM.age}</b>歲，我來自${XiaoM.comeFrom}。`);console.log(`我叫${XiaoM.name}，今年${XiaoM.age}歲，我來自${XiaoM.comeFrom}。`);

template string有點類似C#中的string.format，不過個人感覺template string比string.format更直觀。

用反引號（`）來標識起始，用${}來引用變量，而且所有的空格和縮進都會被保留在輸出之中，是不是非常爽？！

說明下 反引號在大鍵盤數字鍵1的前面一個就是~下面的那個（很慚愧我找反引號找了一會才找到，我開始誤以為是單引號）

React Router從第1.0.3版開始也使用ES6語法了，例：

<Link to={`/taco/${taco.name}`}>{taco.name}</Link>

?

destructuring

更簡介易懂的解構。先來看下數組解構

arr_animal = ["cat","dog","mouse"];// 傳統寫法var c = arr_animal[0];var d = arr_animal[1];var m = arr_animal[2];// destructuring解構var [c,d,m] = arr_animal;

解構也可以跳過數組中的一些元素，如：

arr_animal = ["cat","dog","mouse"];var [,d,] = arr_animal;

還可以取除開頭元素外的剩余元素，如：

arr_num = [1,2,3,4,5,6,7,8,9,0];var [no1,no2, ...noX] = arr_num;console.log(noX); // [3,4,5,6,7,8,9,0]

注：...noX只能放在最后，否則報錯。

?看下對象解構

var objA = { name: "A",age: 12 };var objB = { name: "B",age: 18 };var { name: nameA,age: ageA } = objA;var { name: nameB,age: ageB } = objB;console.log(nameA,ageA); // A 12console.log(nameB,ageB); // B 18

通常用以下寫法更簡明

var { name , age } = { name:"XiaoM", age:18 }console.log(name,age); // XiaoM 18

注：這種寫法僅限 解構變量名 與 屬性名 相同，否則解構變量為undefined。

看一個嵌套的例子：

var complicatedObj = {arrayProp: ["Zapp",{ second: "Brannigan" }]};var { arrayProp: [first, { second }] } = complicatedObj;console.log(first); // "Zapp"console.log(second); // "Brannigan"

　注：這里只能解構?first 和?second ?，不能解構?arrayProp ， 因為這里 相對于被解構的?first 和?second 來說?arrayProp 是一個數組。

若需要解構?arrayProp?

var complicatedObj = {arrayProp: ["Zapp",{ second: "Brannigan" }]};var { arrayProp } = complicatedObj;console.log(arrayProp); // ["Zapp", Object]

請注意：當解構對象并賦值給變量時，如果你已經聲明或不打算聲明這些變量（亦即賦值語句前沒有let、const或var關鍵字），你應該注意這樣一個潛在的語法錯誤：

{ blowUp } = { blowUp: 10 };// Syntax error 語法錯誤

為什么會出錯？這是因為JavaScript語法通知解析引擎將任何以{開始的語句解析為一個塊語句（例如，{console}是一個合法塊語句）。解決方案是將整個表達式用一對小括號包裹：

({ safe } = {});

解構值不是對象、數組或迭代器

當嘗試解構null或undefined時，你會得到一個類型錯誤：

var {blowUp} = null;// TypeError: null has no properties（null沒有屬性）

然而，可以解構其它原始類型，例如：布爾值、數值、字符串，但是你將得到undefined：

var {wtf} = NaN;console.log(wtf);// undefined

這里可能對此感到意外，但經過進一步審查你就會發現，原因其實非常簡單。當使用對象賦值模式時，被解構的值需要被強制轉換為對象。大多數類型都可以被轉換為對象，但null和undefined卻無法進行轉換。當使用數組賦值模式時，被解構的值一定要包含一個迭代器。

當你要解構的屬性未定義時你可以提供一個默認值

var [missing = true] = [];console.log(missing);// truevar { message: msg = "Something went wrong" } = {};console.log(msg);// "Something went wrong"var { x = 3 } = {};console.log(x);// 3

解構的實際應用場景

多重返回值

返回一個數組，然后解構

function returnMultipleValues() {return [1, 2];}var [foo, bar] = returnMultipleValues();

返回值封裝為一個對象并命名屬性，然后解構

function returnMultipleValues() {return {foo: 1,bar: 2};}var { foo, bar } = returnMultipleValues();

函數參數定義

作為開發者，我們需要實現設計良好的API，通常的做法是為函數為函數設計一個對象作為參數，然后將不同的實際參數作為對象屬性，以避免讓API使用者記住 多個參數的使用順序。我們可以使用解構特性來避免這種問題，當我們想要引用它的其中一個屬性時，大可不必反復使用這種單一參數對象。

function removeBreakpoint({ url, line, column }) { // ... }

這種函數設計在開發中非常受歡迎。

關于destructuring解構的參考資料

?

?

ES6學習筆記目錄

ES6學習筆記<一> let const class extends super

ES6學習筆記<二>arrow functions 箭頭函數、template string、destructuring

ES6學習筆記<三> 生成器函數與yield

ES6學習筆記<四> default、rest、Multi-line Strings

ES6學習筆記<五> Module的操作——import、export、as

轉載于:https://www.cnblogs.com/MirageFox/p/7570032.html

總結

以上是生活随笔為你收集整理的ES6学习笔记二arrow functions 箭头函数、template string、destructuring的全部內容，希望文章能夠幫你解決所遇到的問題。

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