学习七、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')
}

学习七、ES2016新特性概要、ES2017新特性概要

猜你喜欢