教你學會常用的ES6語法

教你學會常用的es6語法，不常用的遇到再手冊，當然有時間還是整體看一遍官方文件。

let命令

不存在變數提公升

console.log(ss); //
undefined
console.log(xx); //
報錯var ss = 'a';
let xx = 'b';

var存在變數提公升，實際執行

var
ss;console.log(ss); 
//undefined
console.log(xx); //
報錯 ss = 'a';
let xx = 'b';

暫時性死區

es6明確規定，如果區塊中存在let和const命令，這個區塊對這些命令宣告的變數，從一開始就形成了封閉作用域。

凡是在宣告之前就使用這些變數，就會報錯。

不允許重複宣告

let不允許在相同作用域內，重複宣告同乙個變數。無論是使用var 或者 let

塊級作用域與函式宣告

es6引入了塊級作用域，明確允許在塊級作用域之中宣告函式。

並且es6規定，塊級作用域之中，函式宣告語句的行為類似於let，在塊級作用域之外不可引用。

const命令

依然存在以下屬性

新屬性頂層物件的屬性

es6為了改變這一點，一方面規定，為了保持相容性，var命令和function命令宣告的全域性變數，依舊是頂層物件的屬性；另一方面規定，let命令、const命令、class命令宣告的全域性變數，不屬於頂層物件的屬性。也就是說，從es6開始，全域性變數將逐步與頂層物件的屬性脫鉤。

var a = 1;

// 如果在node的repl環境，可以寫成global.a

// 或者採用通用方法，寫成this.a

window.a // 1

let b = 1;

window.b // undefined

es6允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構（destructuring）。

（個人理解就是物件、字串、陣列的取值和賦值），有需要看參考資料

class animal 
says(say)} 
let animal = new
animal()
animal.says('hello') //
animal says hello
class cat extends animal 
}

let cat = new cat()

cat.says('hello') //cat says hello

**解讀：

es6的繼承機制，實質是先創造父類的例項物件this（所以必須先呼叫super方法），然後再用子類的建構函式修改this。

function
(x, y) 
(x, y) =>

es5與es6對比

es5： function name(引數)

es6： (引數) =>

箭頭函式解決this指向問題

class animal 
says(say), 1000)
}}var animal = new
animal()
animal.says('hi') //
animal says hi

當我們使用箭頭函式時，函式體內的this物件，就是定義時所在的物件，而不是使用時所在的物件。並不是因為箭頭函式內部有繫結this的機制，實際原因是箭頭函式根本沒有自己的this，它的this是繼承外面的，因此內部的this就是外層**塊的this。

這個東西也是非常有用，當我們要插入大段的html內容到文件中時，傳統的寫法非常麻煩，所以之前我們通常會引用一些模板工具庫，比如mustache等等。

# es5

"there are" + basket.count + "" +

"items in your basket, " +

"" + basket.onsale +

" are on sale!");

我們要用一堆的'+'號來連線文字與變數，而使用es6的新特性模板字串``後，我們可以直接這麼來寫：

# es6

there are$items

in your basket, $

are on sale!`);

用反引號（``）來標識起始，用 $來引用變數，而且所有的空格和縮排都會被保留在輸出之中.

default很簡單，意思就是預設值。大家可以看下面的例子，呼叫animal()方法時忘了傳引數，傳統的做法就是加上這一句type = type || 'cat' 來指定預設值。

function animal(type = 'cat')

animal()

最後乙個rest語法也很簡單，直接看例子：

function animals(...types)

animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]

es6的module模組功能主要由兩個命令構成：export 和 import。export命令用於規定模組的對外介面，import命令用於輸入其他模組提供的功能。

在es6之前為解決上面提到的問題，我們得利用第三方提供的一些方案，主要有兩種commonjs(伺服器端)和amd（瀏覽器端，如require.js）。

es6模組的設計思想，是盡量的靜態化，使得編譯時就能確定模組的依賴關係，以及輸入和輸出的變數。commonjs和amd模組，都只能在執行時確定這些東西。

對比commonjs 、amd和es6

假設我們有兩個js檔案: index.js 和 content.js,現在我們想要在index.js中使用content.js返回的結果，我們要怎麼做呢？

amd寫法

content.js
define('content.js', function
())index.js
require(['./content.js'], function
(animal))

commonjs寫法

content.js
module.exports = 'a cat'index.js
var animal = require('./content.js')

es6寫法

content.js
export 
default 'a cat'index.js
import animal from './content'

export

乙個模組就是乙個獨立的檔案。該檔案內部的所有變數，外部無法獲取。如果你希望外部能夠讀取模組內部的某個變數，就必須使用 export 關鍵字輸出該變數。下面是乙個js檔案，裡面使用export命令輸出變數。

// profile.js

var firstname = 'michael';

var lastname = 'jackson';

var year = 1958;

# 使用 as關鍵字可以重新命名對外介面export ;

注意export命令規定的是對外的介面，必須與模組內部的變數建立一一對應關係。

import

import命令具有提公升效果，會提公升到整個模組的頭部，首先執行。

fu();

import from 'my_module';

注意export命令規定的是對外的介面，import介面需要與export對外介面對應。

export default命令

import $ from 'jquery'; #寫法是不是很常見？

使用 import 命令的時候，使用者需要知道所要載入的變數名或函式名，否則無法載入。但是，使用者肯定希望快速上手，未必願意閱讀文件，去了解模組有哪些屬性和方法。

為了給使用者提供方便，讓他們不用閱讀文件就能載入模組，就要用到export default命令，為模組指定預設輸出。

// 輸出 content.js

function foo()

export default foo;

// 輸入

import aa form 'content.js';

注意export default預設輸出只有乙個，對應import檔案不用使用{}，由於預設輸出只有乙個，所以export default 只能使用一次

module的整體載入

除了指定載入某個輸出值，還可以使用整體載入，即用星號（*）指定乙個物件，所有輸出值都載入在這個物件上面。

# 輸出 test.js

function a ()

function b ()

export ;

# 輸入

import * as obj from 'test.js'

obj.a();

obj.b();

eslint是乙個語法規則和**風格的檢查工具，可以用來保證寫出語法正確、風格統一的**。

$ npm install -g eslint

$ npm install -g eslint-conifg-airbnb

$ eslint index.js

教你學會常用的ES6語法

常用es6語法總結

ES6常用語法

ES6常用語法

教你學會常用的ES6語法

常用es6語法總結

ES6常用語法

ES6常用語法

相關推薦