JavaScript >> Javascript 文檔 >  >> JavaScript

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 關鍵字,它允許塊範圍的變量不能被提升或重新聲明。

ES5
var x = 0
ES6
let x = 0
  • MDN 參考:讓

常量聲明

ES6 引入了 const 關鍵字,不能重新聲明或重新分配,但不是不可變的。

ES6
const CONST_IDENTIFIER = 0 // constants are uppercase by convention
  • MDN 參考:const

箭頭函數

箭頭函數表達式語法是創建函數表達式的一種更短的方法。箭頭函數沒有自己的 this ,沒有原型,不能用於構造函數,也不應該用作對象方法。

ES5
function func(a, b, c) {} // function declaration
var func = function (a, b, c) {} // function expression
ES6
let func = (a) => {} // parentheses optional with one parameter
let func = (a, b, c) => {} // parentheses required with multiple parameters
  • MDN 參考:箭頭函數

模板字面量

連接/字符串插值

表達式可以嵌入到模板文字字符串中。

ES5
var str = 'Release date: ' + date
ES6
let str = `Release Date: ${date}`
  • MDN 參考:表達式插值

多行字符串

使用模板文字語法,一個 JavaScript 字符串可以跨越多行而不需要連接。

ES5
var str = 'This text ' + 'is on ' + 'multiple lines'
ES6
let str = `This text
            is on
            multiple lines`

注意: 空格保留在多行模板文字中。請參閱刪除 ES6 模板字符串中的前導空格。

  • MDN 參考:多行字符串

隱式返回

return 關鍵字是隱含的,如果使用沒有塊體的箭頭函數,可以省略。

ES5
function func(a, b, c) {
  return a + b + c
}
ES6
let func = (a, b, c) => a + b + c // curly brackets must be omitted
  • MDN 參考:函數體

鍵/屬性簡寫

ES6 引入了一種較短的表示法,用於將屬性分配給同名的變量。

ES5
var obj = {
  a: a,
  b: b,
}
ES6
let obj = {
  a,
  b,
}
  • MDN 參考:屬性定義

方法定義簡寫

function 在對像上分配方法時可以省略關鍵字。

ES5
var obj = {
  a: function (c, d) {},
  b: function (e, f) {},
}
ES6
let obj = {
  a(c, d) {},
  b(e, f) {},
}
obj.a() // call method a
  • MDN 參考:方法定義

解構(對象匹配)

使用大括號將對象的屬性分配給它們自己的變量。

var obj = {a: 1, b: 2, c: 3}
ES5
var a = obj.a
var b = obj.b
var c = obj.c
ES6
let {a, b, c} = obj
  • MDN 參考:對像初始化器

數組迭代(循環)

為遍歷數組和其他可迭代對象引入了更簡潔的語法。

var arr = ['a', 'b', 'c']
ES5
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i])
}
ES6
for (let i of arr) {
  console.log(i)
}
  • MDN 參考:for...of

默認參數

函數可以使用默認參數進行初始化,只有在沒有通過函數調用參數時才會使用。

ES5
var func = function (a, b) {
  b = b === undefined ? 2 : b
  return a + b
}
ES6
let func = (a, b = 2) => {
  return a + b
}
func(10) // returns 12
func(10, 5) // returns 15
  • MDN 參考:默認參數

擴展語法

擴展語法可用於擴展數組。

ES6
let arr1 = [1, 2, 3]
let arr2 = ['a', 'b', 'c']
let arr3 = [...arr1, ...arr2]

console.log(arr3) // [1, 2, 3, "a", "b", "c"]

擴展語法可用於函數參數。

ES6
let arr1 = [1, 2, 3]
let func = (a, b, c) => a + b + c

console.log(func(...arr1)) // 6
  • MDN 參考:傳播語法

類/構造函數

ES6 引入了 class 基於原型的構造函數之上的語法。

ES5
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)
ES6
class 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 關鍵字創建一個子類。

ES5
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)
ES6
class 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.js
import {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)。

ES5 回調
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 上查看

Tutorial JavaScript 教程
  1. 構建 Chrome 擴展:腳本之間的通信

  2. 使用 Express Generator 在幾分鐘內創建新的 Express.js 應用程序

  3. Xoid,一個小型且可擴展的 React 狀態管理器簡介

  4. 很棒的 jQuery Space Mouse DOM 射手

  5. 如何使用 fetch() 在下拉字段中呈現 API 數據

  6. 5 年後 Typescript 會比 Javascript 更常用嗎?

  7. 快速選擇。類固醇快速排序 + 解決 Facebook 面試問題。

  1. 手寫生成器:我製作了一個文字轉手寫工具來為我寫大學作業🤓

  2. 如何測試 Angular 原理圖?

  3. 使用 Node 和 11ty 請求 YouTube API 端點

  4. 使用 react-responsive 創建響應式 React 應用程序

  5. 讓我們改進文本區域!

  6. 你不再需要 JWT

  7. VueBlogger:Vue 的博客網站生成器

  1. React (TanStack) 初學者查詢教程

  2. 讓我的應用在國際學生競賽中獲得第三名的三件事

  3. 使用 Node.js 和 MongoDB 創建 GraphQL 服務器

  4. 使用 Google Apps 腳本構建 URL 縮短服務