Louis's blog
GitHub
GitHub
  • 瀏覽器運作原理
  • 閉包
  • this
  • arguments 和 array-like
  • apply、call、bind
  • 函式程式設計
  • 物件和原型
  • 原型鏈和繼承
  • ES6 和 Class
  • ES6 中新增的數據類型
  • ES6 語法糖
  • var、let、const
  • ES7~ES12
  • Strict Mode
  • 補充
  • Proxy 和 Reflect
  • Promise
  • Iterator
  • 生成器
  • async、await
  • Event loop
  • 錯誤處理
  • 模塊化
  • 套件管理工具
  • JSON
  • WebStorage
  • IndexDB
  • Cookie
  • BOM
  • DOM
  • 防抖(debounce)和節流(throttle)
  • Deep copy
  • 事件總線

ES6 語法糖

語法糖(英語:Syntactic sugar)是由英國電腦科學家彼得·蘭丁發明的一個術語,指程式語言中添加的某種語法,這種語法對語言的功能沒有影響,但是更方便程式設計師使用。 語法糖讓程式更加簡潔,有更高的可讀性。

字面量增強寫法

通過某些簡化的寫法來創建物件。

屬性簡寫( property shorthand )

var name = 'Louis'
var age = 26

var obj = {
  // property shorthand(屬性簡寫)
  name,
  age
}

方法簡寫 ( method shorthand )

var obj = {
  // method shorthand(方法簡寫)
  foo() {}
}

計算屬性名( computed property name )

var name = 'Louis'
var age = 26

var key = name + age

var obj = {
  // computed property name(計算屬性名)
  [key]: 20
}

解構賦值

陣列解構

var array = ['acb', 'bca', 'abc']

var [item1, item2, item3] = array

可以只對後面的元素進行解構,只要在前面加上 , :

var array = ['acb', 'bca', 'abc']

var [, item2, item3] = array

解構出一個元素,後面的元素放入一個新陣列:

var array = ['acb', 'bca', 'abc']

var [item1, ...newArray] = array

給予默認值:

var [item1, item2, item3, item4 = 'aaa'] = array

物件解構

var obj = {
  name: 'Louis',
  age: 26,
  height: 1.75
}

var { name, age, height } = obj

改變 key 的名稱:

var obj = {
  name: 'Louis',
  age: 26,
  height: 1.75
}

var { name: newName } = obj

給予默認值:

var obj = {
  name: 'Louis',
  age: 26,
  height: 1.75
}

var { address = '新北市' } = obj

模板字符串

在 ES6 之前拼接字符串,需要使用 + 號 :

const name = 'Louis'

const age = 18

console.log('my name is ' + name + ', age is ' + age)

ES6 之後可以使用模板字符串:

const name = 'Louis'

const age = 18

console.log(`my name is ${name}, age is ${age}`)

可以在 ${} 內寫任意表達式:

const name = 'Louis'

const age = 18

console.log(`my name is ${name}, age is ${age * 2}`)

function doubleAge() {
  return age * 2
}

console.log(`my name is ${name}, age is ${doubleAge()}`)

標籤模板字符串

可以將模板字符串作為參數傳入函數中,第一個參數是模板字符串中整個字符串,只是會被 ${} 切成多塊,放到一個陣列中,接下來的參數都依序是 ${} 中的值:

function foo(m, n) {
  console.log(m, n)
}

const name = 'Louis'

foo`Hello${name}World`

輸出:

[ 'Hello', 'World' ] Louis

標籤模板字符串在一般中很少用到,不過如果在 React 中有使用到 styled-components 這個庫,就會大量用使用標籤模板字符串。

函數中參數的默認值

ES6 之後給函數中的參數默認值,非常方便:

function foo(m = '123') {
  console.log(m)
}

foo()

或是可以直接在參數做解構:

function printInfo({ name, age } = { name: 'Louis', age: 26 }) {
  console.log(name, age)
}

有默認值之後的參數都不放在 length 中:

function baz(x, y, z, m = 30, j) {}

// 3
console.log(baz.length)

函數的剩餘參數

ES6 中引用了 rest parameter,可以將不定量的參數放入陣列中:

function foo(m, n, ...args) {}

相較於 arguments , ES6 提供的 rest parameter 只包含沒有對應形參的實際參數,而 arguments 包含了所有傳遞給函數的實參。

箭頭函數

相對於普通函數:

  • 箭頭函數沒有 prototype 所以不作爲構造函數進行調用。
  • 沒有 this。
  • 沒有 arguments。
const foo = () => {}

ES6 中的展開語法

函數調用時:

const names = ['abc', 'vj', 'fjf']

function foo(x, y, z) {
  console.log(x, y, z)
}
foo(...names)

構造陣列時:

const names = ['abc', 'vj', 'fjf']

const newNames = [...names]

構造物件時:

const info = { name: 'Louis', age: 28 }

// ES2018
const newInfo = { ...info }

ES6 中的數值

在 ES6 中數值是可以用其他進制來進行表示的:

const num1 = 100 // 十進制
const num2 = 0b100 // 二進制
const num3 = 0o100 // 八進制
const num4 = 0x100 // 十六進制

console.log(num1, num2, num3, num4)

輸出:

100 4 64 256

Symbol

Symbol 是一個基本的數據類型,如果在物件要定義一屬性,而該屬性為了防止被覆蓋所以必須有一個唯一的 key ,就可以使用 Symbol 這個數據結構做為 key 。

使用字面量寫法:

const s1 = Symbol()
const newObj = {
  [s1]: 'Louis'
}

作為屬性新增:

const newObj = {}
const s1 = Symbol()
// 新增屬性
newObj[s2] = 'Louis'

使用 Object.defineProperty :

const s1 = Symbol()
Object.defineProperty({}, s1, {
  enumerable: true,
  configurable: true,
  writable: true,
  value: 'Louis'
})

如果要獲取物件中所有使用 Symbel 的 key 必須調用專門的方法 Object.getOwnPropertySymbols 。

透過 Symbol.for 可以定義一個相同的 key :

const sa = Symbol.for('aaa')
const ab = Symbol.for('aaa')

// 輸出為 true
console.log(sa === ab)

透過 Symbol.keyFor 可以獲取 key :

const sa = Symbol.for('aaa')

// 輸出為 aaa
console.log(Symbol.keyFor(sa))

在 ES2019 中 symbel 可以傳入一段描述(description):

const s1 = Symbol('aaa')
Edit this page
Last Updated:
Contributors: louis, louis61619
Prev
ES6 中新增的數據類型
Next
var、let、const