8.es6小結 · Javascript

[TOC] # 1.變量聲明const和let 在ES6之前，我們都是用var關鍵字聲明變量。無論聲明在何處，都會被視為聲明在函數的最頂部(不在函數內即在全局作用域的最頂部)。這就是函數變量提升例如: ``` function a() { if(bool) { var str // 變量提升 str = 'frontend' } else { //此處訪問str 值為undefined console.log(str) } } ``` 所以不用關心bool是否為true or false。實際上，無論如何str都會被創建聲明。而es6之后，我們通常用let和const來聲明。let表示變量、const表示常量，let和const都是塊級作用域。如何理解這個塊級作用域？ * 在一個函數內部 * 在一個代碼塊內部 > 通常來說{}大括號內的代碼塊即為let 和 const的作用域。 ``` function a() { if(bool) { let str = 'frontend } else { //str 在此處訪問不到 console.log(str) } } ``` let 的作用域是在它所在當前代碼塊，但不會被提升到當前函數的最頂部。 const 聲明的變量都會被認為是常量，表示它的值被設置完成后就不能再修改了。 ``` const role = 'frontend' role = 'backend' //再次賦值此時會報錯 ``` 如果const的是一個對象，對象所包含的值是可以被修改的。就是對象所指向的地址沒有變就行。 ``` const student = { name: 'cc' } // 不報錯 student.name = 'yy' // 如果這樣子就會報錯了 student = { name: 'yy' } ``` ## 常見面試題中： ``` var funcs = [] for (var i = 0; i < 10; i++) { funcs.push(function() { console.log(i) }) } funcs.forEach(function(func) { func() }) ``` 這樣的面試題是大家常見，很多同學一看就知道輸出 10 十次但是如果我們想依次輸出0到9呢？有兩種解決方法。直接看一下代碼。 ``` // ES5利用閉包解決這個問題 var funcs = [] for (var i = 0; i < 10; i++) { funcs.push((function(value) { return function() { console.log(value) } })(i)) } funcs.forEach(function(func) { func() }) ``` ``` // es6解決 const funcs = [] for (let i = 0; i < 10; i++) { funcs.push(function() { console.log(i) }) } funcs.forEach(func => func()) ``` es6解決方案更加簡潔方便。 # 2.模板字符串 es6模板字符簡直是開發者的福音，解決了es5在字符串功能上的痛點。第一個用途，基本的字符串格式化。將表達式嵌入字符串中進行拼接。用${}來界定。 ``` //ES5 var name = 'frontend' console.log('hello' + name) ``` ``` //es6 const name = 'frontend' console.log(`hello ${name}`) ``` 第二個用途，在ES5時我們通過反斜杠()來做多行字符串或者字符串一行行拼接。ES6反引號(``)直接搞定。 ``` // ES5 var msg = "Hi \ man! " ``` ``` // ES6 const template = `<div> <span>hello world</span> </div>` ``` 對于字符串ES6當然也提供了很多厲害也很有意思的方法。 ## 1.includes ``` //判斷是否包含然后直接返回布爾值 const str = 'hahay' console.log(str.includes('y')) //true ``` ## 2.repeat: 獲取字符串重復n次 ``` const str = 'he' console.log(str.repeat(3)) // 'hehehe' //如果你帶入小數, Math.floor(num) 來處理 // s.repeat(3.1) 或者 s.repeat(3.9) //都當做成 s.repeat(3) 來處理 ``` ## 3. startsWith 和 endsWith ``` //判斷是否以給定文本開始或者結束 const str = 'hello world!' console.log(str.startsWith('hello')) //true console.log(str.endsWith('!'))//true ``` # 3.函數 ## 函數默認參數在ES5我們給函數定義參數默認值是怎么樣？ ``` function action(num) { num = num || 200 //當傳入num時，num為傳入的值 //當沒傳入參數時，num即有了默認值200 return num } ``` 發現num傳入為0的時候就是false，但是我們實際的需求就是要拿到num = 0，此時num = 200 明顯與我們的實際想要的效果明顯不一樣。 ES6為參數提供了默認值。在定義函數時便初始化了這個參數，以便在參數沒有被傳遞進去時使用。 ``` function action(num = 200) { console.log(num) } action(0) // 0 action() //200 action(300) //300 ``` ## 箭頭函數 ES6很有意思的一部分就是函數的快捷寫法。也就是箭頭函數。箭頭函數最直觀的三個特點。 * 不需要 function 關鍵字來創建函數 * 省略 return 關鍵字 * 繼承當前上下文的 this 關鍵字 ``` //例如： [1,2,3].map(x => x + 1) //等同于： [1,2,3].map((function(x){ return x + 1 }).bind(this)) ``` 小細節：當你的函數有且僅有一個參數的時候，是可以省略掉括號的。當你函數返回有且僅有一個表達式的時候可以省略{} 和 return；例如: ``` var people = name => 'hello' + name //參數name就沒有括號 ``` 作為參考 ``` var people = (name, age) => { const fullName = 'hello' + name return fullName } //如果缺少()或者{}就會報錯 ``` ### 筆試題： ``` // 請使用ES6重構以下代碼 var calculate = function(x, y, z) { if (typeof x != 'number') { x = 0 } if (typeof y != 'number') { y = 6 } var dwt = x % y var result if (dwt == z){ result = true } if (dwt != z) { result = false } return result } ``` ``` const calculate = (x, y, z) => { x = typeof x !== 'number' ? 0 : x y = typeof y !== 'number' ? 6 : y return x % y === z } ``` # 4.拓展的對象功能對象初始化簡寫 ES5我們對于對象都是以鍵值對的形式書寫，是有可能出現鍵值對重名的。例如： ``` function people(name, age) { return {name: name, age: age }; } ``` 鍵值對重名，ES6可以簡寫如下： ``` function people(name, age) { return { name, age }; } ``` ES6 同樣改進了為對象字面量方法賦值的語法。ES5為對象添加方法： ``` const people = { name: 'sa', getName: function() { console.log(this.name) } } ``` ES6通過省略冒號與 function 關鍵字，將這個語法變得更簡潔 ``` const people = { name: 'sa', getName () { console.log(this.name) } } ``` ES6 對象提供了 Object.assign() 這個方法來實現淺復制。 Object.assign() 可以把任意多個源對象自身可枚舉的屬性拷貝給目標對象，然后返回目標對象。第一參數即為目標對象。在實際項目中，我們為了不改變源對象。一般會把目標對象傳為{} ``` const objA = { name: 'cc', age: 18 } const objB = { address: 'beijing' } const objC = {} // 這個為目標對象 const obj = Object.assign(objC, objA, objB) // 我們將 objA objB objC obj 分別輸出看看 console.log(objA) // { name: 'cc', age: 18 } console.log(objB) // { address: 'beijing' } console.log(objC) //{name:'cc',age:18,address:'beijing'} console.log(obj) //{name:'cc',age: 18,address:'beijing'} // 是的，目標對象ObjC的值被改變了。 // so，如果objC也是你的一個源對象的話。 //請在objC前面填在一個目標對象{} object.assign({}, objC, objA, objB) ``` # 5.更方便的數據訪問--解構數組和對象是JS中最常用也是最重要表示形式。為了簡化提取信息，ES6新增了解構，這是將一個數據結構分解為更小的部分的過程 ES5我們提取對象中的信息形式如下： ``` const people = {name: 'lux',age: 20} const name = people.name const age = people.age console.log(name + ' --- ' + age) ``` 是不是覺得很熟悉，沒錯，在ES6之前我們就是這樣獲取對象信息的，一個一個獲取。現在，解構能讓我們從對象或者數組里取出數據存為變量，例如 ``` //對象 const people = { name: 'sa', age: 20 } const { name, age } = people console.log(`${name} --- ${age}`) ``` ``` //數組 const color = ['red', 'blue'] const [first, second] = color console.log(first) //'red' console.log(second) //'blue' ``` ## 面試題： // 請使用 ES6 重構一下代碼 // 第一題 ``` var jsonParse = require('body-parser').jsonParse ``` // 第二題 ``` var body = request.body var username = body.username var password = body.password ``` ``` // 1. import { jsonParse } from 'body-parser' ``` ``` // 2. const { body, body: { username, password } } = request ``` # 6.Spread Operator 展開運算符 ES6中另外一個好玩的特性就是Spread Operator 也是三個點兒...接下來就展示一下它的用途。組裝對象或者數組 ``` //數組 const color = ['red', 'yellow'] const colorful = [...color, 'green', 'pink'] console.log(colorful) //[red, yellow, green, pink] ``` ``` //對象 const alp = { fist: 'a', second: 'b'} const alphabets = { ...alp, third: 'c' } console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c" } ``` 有時候我們想獲取數組或者對象除了前幾項或者除了某幾項的其他項 ``` //數組 const number = [1,2,3,4,5] const [first, ...rest] = numberconsole.log(rest) //2,3,4,5 ``` ``` //對象 const user = { username: 'lux', gender: 'female', age: 19, address: 'peking'} const { username, ...rest } = user console.log(rest) //{"address": "peking", "age": 19, "gender": "female" } ``` 對于 Object 而言，還可以用于組合成新的 Object 。(ES2017 stage-2 proposal) 當然如果有重復的屬性名，右邊覆蓋左邊 ``` const first = { a: 1, b: 2, c: 6, } const second = { c: 3, d: 4 } const total = { ...first, ...second } console.log(total) // { a: 1, b: 2, c: 3, d: 4 } ``` # 7.import 和 export import導入模塊、export導出模塊 ``` //全部導入 import people from './example' ``` ``` //有一種特殊情況，即允許你將整個模塊當作單一對象進行導入 //該模塊的所有導出都會作為對象的屬性存在 import * as example from "./example.js" console.log(example.name) console.log(example.age) console.log(example.getName()) ``` //導入部分 import {name, age} from './example' // 導出默認, 有且只有一個默認 export default App // 部分導出 export class App extend Component {}; 導入的時候有沒有大括號的區別是什么。下面是總結： ## 1.當用export default people導出時，就用 import people 導入（不帶大括號） ## 2.一個文件里，有且只能有一個export default。但可以有多個export。 ## 3.當用export name 時，就用 import { name }導入（記得帶上大括號） ## 4.當一個文件里，既有一個 export default people, 又有多個export name 或者 export age時，導入就用 import people, { name, age } ## 5.當一個文件里出現n多個 export 導出很多模塊，導入時除了一個一個導入，也可以用 import * as example # 8. Promise 在promise之前代碼過多的回調或者嵌套，可讀性差、耦合度高、擴展性低。通過Promise機制，扁平化的代碼機構，大大提高了代碼可讀性；用同步編程的方式來編寫異步代碼，保存線性的代碼邏輯，極大的降低了代碼耦合性而提高了程序的可擴展性。說白了就是用同步的方式去寫異步代碼。發起異步請求： ``` fetch('/api/todos') .then(res => res.json()) .then(data => ({ data })) .catch(err => ({ err })); ``` ## 面試題： ``` setTimeout(function() { console.log(1) }, 0); new Promise(function executor(resolve) { console.log(2); for( var i=0 ; i<10000 ; i++ ) { i == 9999 && resolve(); } console.log(3); }).then(function() { console.log(4); }); console.log(5); ``` # 9.Generators 生成器（ generator）是能返回一個迭代器的函數。生成器函數也是一種函數，最直觀的表現就是比普通的function多了個星號*，在其函數體內可以使用yield關鍵字,有意思的是函數會在每個yield后暫停。這里生活中有一個比較形象的例子。咱們到銀行辦理業務時候都得向大廳的機器取一張排隊號。你拿到你的排隊號，機器并不會自動為你再出下一張票。也就是說取票機“暫停”住了，直到下一個人再次喚起才會繼續吐票。 OK。說說迭代器。當你調用一個generator時，它將返回一個迭代器對象。這個迭代器對象擁有一個叫做next的方法來幫助你重啟generator函數并得到下一個值。next方法不僅返回值，它返回的對象具有兩個屬性：done和value。value是你獲得的值，done用來表明你的generator是否已經停止提供值。繼續用剛剛取票的例子，每張排隊號就是這里的value，打印票的紙是否用完就這是這里的done。 ``` // 生成器function *createIterator() { yield 1; yield 2; yield 3; } // 生成器能像正規函數那樣被調用， //但會返回一個迭代器 ``` ``` let iterator = createIterator(); console.log(iterator.next().value); // 1 console.log(iterator.next().value); // 2 console.log(iterator.next().value); // 3 ``` 那生成器和迭代器又有什么用處呢？圍繞著生成器的許多興奮點都與異步編程直接相關。異步調用對于我們來說是很困難的事，我們的函數并不會等待異步調用完再執行，你可能會想到用回調函數，（當然還有其他方案比如Promise比如Async/await）。生成器可以讓我們的代碼進行等待。就不用嵌套的回調函數。使用generator可以確保當異步調用在我們的generator函數運行一下行代碼之前完成時暫停函數的執行。那么問題來了，咱們也不能手動一直調用next()方法，你需要一個能夠調用生成器并啟動迭代器的方法。就像這樣子的 ``` function run(taskDef) { //taskDef即一個生成器函數 //創建迭代器，讓它在別處可用 let task = taskDef(); // 啟動任務 let result = task.next(); // 遞歸使用函數來保持對 next() 的調用 function step() { // 如果還有更多要做的 if (!result.done) { result = task.next(); step(); } } // 開始處理過程 step(); } ``` 生成器與迭代器最有趣、最令人激動的方面，或許就是可創建外觀清晰的異步操作代碼。你不必到處使用回調函數，而是可以建立貌似同步的代碼，但實際上卻使用 yield 來等待異步操作結束。 # 10.async 函數 es6引入了 async 函數，使得異步操作變得更加方便。 async 函數是什么？一句話，它就是 Generator 函數的語法糖。 ``` function timeout(ms) { return new Promise((resolve) => { setTimeout(resolve, ms); }); }async function asyncPrint(value, ms) { await timeout(ms); console.log(value); } asyncPrint('hello world', 50); ``` 一比較就會發現，async函數就是將 Generator 函數的星號（*）替換成async，將yield替換成await，僅此而已。 async函數對 Generator 函數的改進，體現在以下四點。內置執行器更好的語義更廣的適用性返回值是 Promise # 11.Class基本語法 JavaScript 語言中，生成實例對象的傳統方法是通過構造函數 ``` function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')'; }; var p = new Point(1, 2); ``` es6 提供了更接近傳統語言的寫法，引入了 Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。基本上，es6 的%(red)[class]可以看作只是一個語法糖，它的絕大部分功能，es5 都可以做到，新的%(red)[class]寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。上面的代碼用 es6 的%(red)[class]改寫，就是下面這樣。 ``` //定義類 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } ``` 上面代碼定義了一個“類”，可以看到里面有一個constructor方法，這就是構造方法，而this關鍵字則代表實例對象。也就是說，es5 的構造函數Point，對應 es6 的Point類的構造方法。 Point類除了構造方法，還定義了一個toString方法。注意，定義“類”的方法的時候，前面不需要加上function這個關鍵字，直接把函數定義放進去了就可以了。另外，方法之間不需要逗號分隔，加了會報錯。 es6 的類，完全可以看作構造函數的另一種寫法。