學習七、ES2016與ES2017的新特性

一、ECMAScript2016版本概述

1、Array.includes();

可以查詢陣列中是否含有某個引數，包括NaN，之前的indexOf可以返回陣列中某個引數的下標，但是無法確認是否含有NaN。

const arr = ['foo', 1, NaN, false]
// 找到返回元素下標
console.log(arr.indexOf('foo'))
// 找不到返回 -1
console.log(arr.indexOf('bar'))
// 無法找到陣列中的 NaN
console.log(arr.indexOf(NaN))
// 直接返回是否存在指定元素
console.log(arr.includes('foo'))
// 能夠查詢 NaN
console.log(arr.includes(NaN))

2、指數運算子：**

Math.pow(2,10) 等同於 2 ** 10

console.log(Math.pow(2, 10))
console.log(2 ** 10)

 

二、ECMAScript2017版本概述

1、Object.values(obj)返回一個obj所有值的一個陣列，從前的Object.keys(obj)返回所有鍵的一個陣列。

const obj = {
  foo: 'value1',
  bar: 'value2'
}
console.log(Object.values(obj))

2、Object.entries(obj)可以返回一個能夠使用for...of的物件，然後我們就可以將這個陣列轉換成一個Map物件new Map();

console.log(Object.entries(obj))
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value)
}
console.log(new Map(Object.entries(obj)))

3、Object.getOwnPropertyDescriptors，自從ES2015以來我們可以給物件新增get/set方法，

    我們無法用assgin方法完全複製一個物件的set/get方法，但是getOwnPropertyDescriptors複製之後，

    就可以用defineProperties代替assgin完全複製一個物件。  

const p1 = {
  firstName: 'Lei',
  lastName: 'Wang',
  get fullName () {
    return this.firstName + ' ' + this.lastName
  }
}
console.log(p1.fullName)

const p2 = Object.assign({}, p1)
p2.firstName = 'zce'
console.log(p2)

const descriptors = Object.getOwnPropertyDescriptors(p1)
// console.log(descriptors)
const p3 = Object.defineProperties({}, descriptors)
p3.firstName = 'zce'
console.log(p3.fullName)

4、padStart和padEnd，用給定的字串去填充，直到我們目標字串達到我們指定的長度。

const books = {
  html: 5,
  css: 16,
  javascript: 128
}
for (const [name, count] of Object.entries(books)) {
  console.log(name, count)
}
for (const [name, count] of Object.entries(books)) {
  console.log(`${name.padEnd(16, '-')}|${count.toString().padStart(3, '0')}`)
}

5、函式引數中允許新增尾部逗號。

function foo (
  bar,
  baz,
) {}

6、Async/await：Promise的語法糖。

async function main () {
    const users = await ajax('/api/users.json')
}