1. 程式人生 > >ES8新特性

ES8新特性

函數 UNC react mozilla 至少 lob dev 新的 引用

Object.values/Object.entries

  Object.valuesObject.entries是在ES2017規格中,它和Object.keys類似,返回數組類型,其序號和Object.keys序號對應。類似python中的dict.iteritems()。

Object.values,Object.entriesObject.keys各自項返回是數組,相對應包括key,value或者可枚舉特定對象property/attribute

在ES8 /ES2017之前,Javascript開發者需要叠代一個對象的自身屬性時候不得不用Object.keys,通過叠代且使用obj[key]

獲取value值返回一個數組,很挫的:

let obj = {a: 1, b: 2, c: 3}
Object.keys(obj).forEach((key, index)=>{
  console.log(key, obj[key])
})

而使用ES6/ES2015 中for/of稍微好點:

let obj = {a: 1, b: 2, c: 3}
for (let key of Object.keys(obj)) {
  console.log(key, obj[key])
}

Object.values返回對象自身可以叠代屬性值(values)為數組類型。我們最好使用Array.prototype.forEach

叠代它,結合ES6的箭頭函數隱形返回值:

let obj = {a: 1, b: 2, c: 3}
Object.values(obj).forEach(value=>console.log(value)) // 1, 2, 3

或者實用for/of:

let obj = {a: 1, b: 2, c: 3}
for (let value of Object.values(obj)) {
  console.log(value)
}
// 1, 2, 3

·Object.entries·,在另一方面,將會返回對象自身可叠代屬性key-value對數組(作為一個數組),他們(key-value)分別以數組存放數組中:

let obj = {a: 1, b: 2, c: 3}
JSON.stringify(Object.entries(obj))
"[["a",1],["b",2],["c",3]]"

可以使用ES6/ES2015解構,從這嵌套數組中分別聲明key和value

let obj = {a: 1, b: 2, c: 3}
Object.entries(obj).forEach(([key, value]) => {
 console.log(`${key} is ${value}`)
})
// a is 1, b is 2, c is 3

同樣使用ES6for/of(畢竟全部都是數組)遍歷Object.entries返回來的結果值:

let obj = {a: 1, b: 2, c: 3}
for (let [key, value] of Object.entries(obj)) {
  console.log(`${key} is ${value}`)
}
// a is 1, b is 2, c is 3

現在從對象中提取values和key-value pairs 變得非常容易了。Object.valuesObject.entries這種方式不想之前 Object.keys(自身屬性key+順序相同)結合for/of(ES6)一起,我們不僅僅可以提取他們還可以叠代他們。

String padding(字符串填充)

String.prototype.padStartString.prototype.padEnd在javascript字符操作是一個不錯的體驗,幫助避免依賴而外的庫。
padStart()在開始部位填充,返回一個給出長度的字符串,填充物給定字符串,把字符串填充到期望的長度。從字符串的左邊開始(至少大部分西方語言),一個經典例子是使用空格創建列:
console.log(‘react‘.padStart(10).length)         // "       react" is 10
console.log(‘backbone‘.padStart(10).length)         // "  backbone" is 10

它對於財務方面非常有用:

console.log(‘0.00‘.padStart(20))            
console.log(‘10,000.00‘.padStart(20))    
console.log(‘250,000.00‘.padStart(20))

如果是為會計做賬之類的,這個很實用,帳做的很整齊??

         0.00
    10,000.00
   250,000.00

第二個參數,讓我們放一些其他的填充字符替代空字符串,一個字符串填充:

console.log(‘react‘.padStart(10, ‘_‘))         // "_____react"
console.log(‘backbone‘.padStart(10, ‘*‘))         // "**backbone"

padEnd顧名思義就是從字符串的尾端右邊開始填充。第二個參數,你能實際上用一個任何長度的字符串。例如:

console.log(‘react‘.padEnd(10, ‘:-)‘))         // "react:-):-" is 10
console.log(‘backbone‘.padEnd(10, ‘*‘))         // "backbone**" is 10

再賞幾個例子作為總結:

// String.prototype.padStart(targetLength [, padString])
‘hello‘.padStart(10); // ‘     hello‘
‘hello‘.padStart(10, ‘0‘); // ‘00000hello‘
‘hello‘.padStart(); // ‘hello‘
‘hello‘.padStart(6, ‘123‘); // ‘1hello‘
‘hello‘.padStart(3); // ‘hello‘
‘hello‘.padStart(3, ‘123‘); // ‘hello‘;

// String.prototype.padEnd(targetLength [, padString])
‘hello‘.padEnd(10); // ‘hello     ‘
‘hello‘.padEnd(10, ‘0‘); // ‘hello00000‘
‘hello‘.padEnd(); // ‘hello‘
‘hello‘.padEnd(6, ‘123‘); // ‘hello1‘
‘hello‘.padEnd(3); // ‘hello‘
‘hello‘.padEnd(3, ‘123‘); // ‘hello‘;

Object.getOwnPropertyDescriptors

  這新的 Object.getOwnPropertyDescriptors返回對象obj所有自身屬性描述。這是一個多參數版本的Object.getOwnPropertyDescriptors(obj,propName)將會返回obj中propName屬性的一個單獨描述。
在我們日常不可變編程(immutable programming)時代中,有了這個方法很方便(記住,Javascript中對象是引用傳遞)在ES5中,開發者要使用Object.assign()來拷貝對象, Object.assign()分配屬性只有copy和定義新的屬性。當我們使用更加復雜對象和類原型,這可能會出問題。
Object.getOwnPropertyDescriptors允許創建真實的對象淺副本並創建子類,它通過給開發者描述符來做到這一點.在Object.create(prototype, object)放入描述符後,返回一個真正的淺拷貝。
Object.create(
  Object.getPrototypeOf(obj),
  Object.getOwnPropertyDescriptors(obj)
)

或者可以合並兩個對象targetsource如下:

Object.defineProperties(
  target,
  Object.getOwnPropertyDescriptors(source)
)

以上是Object.getOwnPropertyDesciptors用法。但是什麽是描述符(descriptor)呢?就是一個對象的描述。

這裏有兩種描述符號類型:
1.數據描述符(Data descriptor)
2.存取器描述符(Accessor descriptor)
存取描述符有必須屬性:get 或者set或者get和set兩個就是如你所想的getter和setter函數,然後存取描述符還有可選屬性configurableenumerable
let azatsBooks = {  
  books: [‘React Quickly‘],
  get latest () {
    let numberOfBooks = this.books.length
    if (numberOfBooks == 0) return undefined
    return this.books[numberOfBooks - 1]
  }
}

這個例子數據描述符booksObject.getOwnPropertyDescriptor(azatsBooks, ‘books‘)產生結果如下:

Object
    configurable: true
    enumerable: true
    value: Array[1]
    writable: true
    __proto__: Object

同樣的,Object.getOwnPropertyDescriptor(azatsBooks, ‘latest‘)將會展現latest的描述符,這個latest(get)存取器描述符展現如下:

Object
    configurable: truee
    numerable: true
    get: latest()
    set: undefined
    __proto__: Object

現在我們調用新方法獲取所有的描述符:

console.log(Object.getOwnPropertyDescriptors(azatsBooks))

它會給出這個對象兩個描述符books和latest:

Object
  books: Object
    configurable: true
    enumerable: true
    value: Array[1]
    writable: true
    __proto__: Object
  latest: Object
    configurable: true
    enumerable: true
    get: latest()
    set: undefined
    __proto__: Object
  __proto__: Object

函數參數列表和調用中的尾逗號(Trailing commas)

尾逗號在函數定義中只是一個純粹語法變化,在ES5中,將會非法語法,在函數參數後面應該是沒有逗號的:

var f = function(a,
  b,
  c,
  d) { // NO COMMA!
  // ...
  console.log(d)
}
f(1,2,3,‘this‘)

在ES8中,這種尾逗號是沒有問題的:

var f = function(a,
  b,
  c,
  d,
) { // COMMA? OK!
  // ...
  console.log(d)
}
f(1,2,3,‘this‘)

.

var arr = [1,  // Length == 3
  2,
  3,
]  // <--- ok
let obj = {a: 1,  // Only 3 properties
  b: 2,
  c: 3,
}  // <--- ok

尾逗號主要有用在使用多行參數風格(典型的是那些很長的參數名),開發者終於可以忘記逗號放在第一位這種奇怪的寫法。自從逗號bugs主要原因就是使用他們。而現在你可以到處使用逗號,甚至最後參數都可以。

異步函數(Async Functions)

  異步函數(或者async/await)特性操作是Promise最重要的功能。這種想法是為了在寫異步代碼中簡化它,因為人類大腦最討厭這種平行非序號思維了。它只是不會演變這種方式。本來以為Promise的到來已經是擺脫node異步的福音了,在ES8,異步函數是那麽給力。開發者定義一個asyc函數裏面不包含或者包含await 基於Promise異步操作。在這引擎之下一個異步函數返回一個Promise,無論無何你在任何地方不會看到這樣的一個詞Promise。 例如,在ES6中我們可以使用Promise,Axios庫向GraphQL服務器發送一個請求:
axios.get(`/q?query=${query}`)
  .then(response => response.data)
  .then(data => {
    this.props.processfetchedData(data) // Defined somewhere else
  })
  .catch(error => console.log(error))

任何一個Promise庫都能兼容新的異步函數,我們可以使用同步try/catch做錯誤處理

async fetchData(url) => {
  try {
    const response = await axios.get(`/q?query=${query}`)
    const data = response.data
    this.props.processfetchedData(data)
  } catch (error) {
    console.log(error)
  }
}

異步函數返回一個Promise,所以我們像下面可以繼續執行流程:

async fetchData(query) => {
  try {
    const response = await axios.get(`/q?query=${query}`)
    const data = response.data
    return data
  } catch (error) {
    console.log(error)
  }
}
fetchData(query).then(data => {
  this.props.processfetchedData(data)
})

有了 async/await,我們的代碼執行異步看起來像執行同步一樣。可以從頭到尾讀起來非常簡單和易懂,因為出現結果順序和函數題中從頭到尾順序一樣啊!

ES8新特性