ES8新特性

时间 2019-11-17

标签 es8 特性繁體版

原文原文链接

Object.values/Object.entries

　　Object.values和 Object.entries是在ES2017规格中，它和Object.keys相似，返回数组类型，其序号和Object.keys序号对应。相似python中的dict.iteritems()。javascript

Object.values,Object.entries和Object.keys各自项返回是数组，相对应包括key,value或者可枚举特定对象property/attributejava

在ES8 /ES2017以前，Javascript开发者须要迭代一个对象的自身属性时候不得不用Object.keys，经过迭代且使用obj[key]获取value值返回一个数组，很挫的：node

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

而使用ES6/ES2015 中for/of稍微好点：python

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的箭头函数隐形返回值：react

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

或者实用for/of:ios

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）分别以数组存放数组中:git

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

可使用ES6/ES2015解构，从这嵌套数组中分别声明key和valuegithub

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.values和Object.entries这种方式不想以前 Object.keys(自身属性key+顺序相同)结合for/of(ES6)一块儿，咱们不只仅能够提取他们还能够迭代他们。axios

String padding(字符串填充)

String.prototype.padStart 和 String.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)
)

或者能够合并两个对象target和source以下：

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

以上是Object.getOwnPropertyDesciptors用法。可是什么是描述符(descriptor)呢？就是一个对象的描述。

这里有两种描述符号类型：
1.数据描述符（Data descriptor）
2.存取器描述符（Accessor descriptor）
存取描述符有必须属性：get 或者set或者get和set两个就是如你所想的getter和setter函数，而后存取描述符还有可选属性 configurable和 enumerable

let azatsBooks = {  
  books: ['React Quickly'],
  get latest () {
    let numberOfBooks = this.books.length
    if (numberOfBooks == 0) return undefined
    return this.books[numberOfBooks - 1]
  }
}

这个例子数据描述符books由Object.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,咱们的代码执行异步看起来像执行同步同样。能够从头至尾读起来很是简单和易懂，由于出现结果顺序和函数题中从头至尾顺序同样啊！