ES6 語法和功能概述
ECMAScript 2015,也稱為 ES6,對 JavaScript 進行了許多更改。以下是一些最常見的特性和語法差異的概述,並在適用的情況下與 ES5 進行了比較。
- 在 GitHub 上查看
圖例
我不是 foo
的粉絲 bar
baz
.這是整個參考中使用的大多數標識符名稱的鍵。
- 變量:
x
- 對象:
obj
- 數組:
arr
- 功能:
func
- 參數、方法:
a
,b
,c
- 字符串:
str
目錄
- 變量聲明
- 常量聲明
- 箭頭函數語法
- 模板字面量
- 隱式返回
- 鍵/屬性簡寫
- 方法定義簡寫
- 解構(對象匹配)
- 數組迭代(循環)
- 默認參數
- 擴展語法
- 類/構造函數
- 繼承
- 模塊 - 導出/導入
- 承諾/回調
變量和常數特徵比較
我解釋了範圍的概念以及 let
之間的區別 , var
, 和 const
在 DigitalOcean 上的了解 JavaScript 資源中的變量、範圍和提升。此表提供了簡要概述。
關鍵字 | 範圍 | 吊裝 | 可以重新分配 | 可以重新聲明 |
---|---|---|---|---|
var | 功能範圍 | 是的 | 是的 | 是的 |
let | 塊範圍 | 沒有 | 是的 | 沒有 |
const | 塊範圍 | 沒有 | 沒有 | 沒有 |
變量聲明
ES6 引入了 let
關鍵字,它允許塊範圍的變量不能被提升或重新聲明。
var x = 0
ES6let x = 0
- MDN 參考:讓
常量聲明
ES6 引入了 const
關鍵字,不能重新聲明或重新分配,但不是不可變的。
const CONST_IDENTIFIER = 0 // constants are uppercase by convention
- MDN 參考:const
箭頭函數
箭頭函數表達式語法是創建函數表達式的一種更短的方法。箭頭函數沒有自己的 this
,沒有原型,不能用於構造函數,也不應該用作對象方法。
function func(a, b, c) {} // function declaration
var func = function (a, b, c) {} // function expression
ES6let func = (a) => {} // parentheses optional with one parameter
let func = (a, b, c) => {} // parentheses required with multiple parameters
- MDN 參考:箭頭函數
模板字面量
連接/字符串插值
表達式可以嵌入到模板文字字符串中。
ES5var str = 'Release date: ' + date
ES6let str = `Release Date: ${date}`
- MDN 參考:表達式插值
多行字符串
使用模板文字語法,一個 JavaScript 字符串可以跨越多行而不需要連接。
ES5var str = 'This text ' + 'is on ' + 'multiple lines'
ES6let str = `This text
is on
multiple lines`
注意: 空格保留在多行模板文字中。請參閱刪除 ES6 模板字符串中的前導空格。
- MDN 參考:多行字符串
隱式返回
return
關鍵字是隱含的,如果使用沒有塊體的箭頭函數,可以省略。
function func(a, b, c) {
return a + b + c
}
ES6let func = (a, b, c) => a + b + c // curly brackets must be omitted
- MDN 參考:函數體
鍵/屬性簡寫
ES6 引入了一種較短的表示法,用於將屬性分配給同名的變量。
ES5var obj = {
a: a,
b: b,
}
ES6let obj = {
a,
b,
}
- MDN 參考:屬性定義
方法定義簡寫
function
在對像上分配方法時可以省略關鍵字。
var obj = {
a: function (c, d) {},
b: function (e, f) {},
}
ES6let obj = {
a(c, d) {},
b(e, f) {},
}
obj.a() // call method a
- MDN 參考:方法定義
解構(對象匹配)
使用大括號將對象的屬性分配給它們自己的變量。
var obj = {a: 1, b: 2, c: 3}
ES5var a = obj.a
var b = obj.b
var c = obj.c
ES6let {a, b, c} = obj
- MDN 參考:對像初始化器
數組迭代(循環)
為遍歷數組和其他可迭代對象引入了更簡潔的語法。
var arr = ['a', 'b', 'c']
ES5for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
}
ES6for (let i of arr) {
console.log(i)
}
- MDN 參考:for...of
默認參數
函數可以使用默認參數進行初始化,只有在沒有通過函數調用參數時才會使用。
ES5var func = function (a, b) {
b = b === undefined ? 2 : b
return a + b
}
ES6let func = (a, b = 2) => {
return a + b
}
func(10) // returns 12
func(10, 5) // returns 15
- MDN 參考:默認參數
擴展語法
擴展語法可用於擴展數組。
ES6let arr1 = [1, 2, 3]
let arr2 = ['a', 'b', 'c']
let arr3 = [...arr1, ...arr2]
console.log(arr3) // [1, 2, 3, "a", "b", "c"]
擴展語法可用於函數參數。
ES6let arr1 = [1, 2, 3]
let func = (a, b, c) => a + b + c
console.log(func(...arr1)) // 6
- MDN 參考:傳播語法
類/構造函數
ES6 引入了 class
基於原型的構造函數之上的語法。
function Func(a, b) {
this.a = a
this.b = b
}
Func.prototype.getSum = function () {
return this.a + this.b
}
var x = new Func(3, 4)
ES6class Func {
constructor(a, b) {
this.a = a
this.b = b
}
getSum() {
return this.a + this.b
}
}
let x = new Func(3, 4)
x.getSum() // returns 7
- MDN 參考:類
繼承
extends
關鍵字創建一個子類。
function Inheritance(a, b, c) {
Func.call(this, a, b)
this.c = c
}
Inheritance.prototype = Object.create(Func.prototype)
Inheritance.prototype.getProduct = function () {
return this.a * this.b * this.c
}
var y = new Inheritance(3, 4, 5)
ES6class Inheritance extends Func {
constructor(a, b, c) {
super(a, b)
this.c = c
}
getProduct() {
return this.a * this.b * this.c
}
}
let y = new Inheritance(3, 4, 5)
y.getProduct() // 60
- MDN 參考:使用 extends 進行子類化
模塊 - 導出/導入
可以創建模塊來在文件之間導出和導入代碼。
index.html<script src="export.js"></script>
<script type="module" src="import.js"></script>
導出.js
let func = (a) => a + a
let obj = {}
let x = 0
export {func, obj, x}
import.jsimport {func, obj, x} from './export.js'
console.log(func(3), obj, x)
- MDN 參考:導出
- MDN 參考:導入
承諾/回調
Promise 代表異步函數的完成。它們可以用作鏈接函數的替代方案。
ES5 回調function doSecond() {
console.log('Do second.')
}
function doFirst(callback) {
setTimeout(function () {
console.log('Do first.')
callback()
}, 500)
}
doFirst(doSecond)
ES6 承諾let doSecond = () => {
console.log('Do second.')
}
let doFirst = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('Do first.')
resolve()
}, 500)
})
doFirst.then(doSecond)
下面是一個使用 XMLHttpRequest
的例子 , 僅用於演示目的(Fetch API 將是適合使用的現代 API)。
function makeRequest(method, url, callback) {
var request = new XMLHttpRequest()
request.open(method, url)
request.onload = function () {
callback(null, request.response)
}
request.onerror = function () {
callback(request.response)
}
request.send()
}
makeRequest('GET', 'https://url.json', function (err, data) {
if (err) {
throw new Error(err)
} else {
console.log(data)
}
})
ES6 承諾function makeRequest(method, url) {
return new Promise((resolve, reject) => {
let request = new XMLHttpRequest()
request.open(method, url)
request.onload = resolve
request.onerror = reject
request.send()
})
}
makeRequest('GET', 'https://url.json')
.then((event) => {
console.log(event.target.response)
})
.catch((err) => {
throw new Error(err)
})
- MDN 參考
如果您覺得本文有用,請分享!
- 在 GitHub 上查看