ECMScript 2016,2017新特性

ECMAScript 2016 新特性

Array.prototype.includes

查找元素

const arr = ['foo', 1, NaN, false]
// 找到返回元素下标
console.log(arr.indexOf('foo'))
// 0

// 找不到返回 -1
console.log(arr.indexOf('bar'))
// -1

// 无法找到数组中的 NaN
console.log(arr.indexOf(NaN))
// -1

console.log(arr.indexOf(false))
// 3

新增 includes 方法，直接返回布尔值表示否是存在

const arr = ['foo', 1, NaN, false]

console.log(arr.includes('foo'))
// true

console.log(arr.includes('bar'))
// false

// 可以查找 NaN
console.log(arr.includes(NaN))
// true

指数运算法

console.log(Math.pow(2, 10))
// 1024

// 新增指数运算符
console.log(2 ** 10)
// 1024

ECMAScript 2017 新特性

Object.values

输出对象的值

const obj = {
  foo: 'value1',
  bar: 'value2',
}

console.log(Object.values(obj))
// [ 'value1', 'value2' ]

Object.entries

以数组的方式输出对象

const obj = {
  foo: 'value1',
  bar: 'value2',
}

console.log(Object.entries(obj))
// [ [ 'foo', 'value1' ], [ 'bar', 'value2' ] ]

// 配合数组解构，可以直接遍历对象
for(const [key,value] of Object.entries(obj)) {
  console.log(key, value)
}
// foo value1
// bar value2

Object.getOwnPropertyDescriptors

使用 assign 复制对象

const p1 = {
  firstName: 'Lei',
  lastName: 'Wang',

  get fullName() {
    return this.firstName + ' ' + this.lastName
  }
}
console.log(p1.fullName)
// Lei Wang

// 通过 assign 复制对象，不会把 get 方法复制，最后打印的 fullName 还是之前的 fullName
const p2 = Object.assign({}, p1)
p2.firstName = 'hhh'
console.log(p2)
// { firstName: 'hhh', lastName: 'Wang', fullName: 'Lei Wang' }

使用 getOwnPropertyDescriptors + defineProperties 复制对象
getOwnPropertyDescriptors: 所指定对象的所有自身属性的描述符，如果没有任何自身属性，则返回空对象

const p1 = {
  firstName: 'Lei',
  lastName: 'Wang',

  get fullName() {
    return this.firstName + ' ' + this.lastName
  }
}
console.log(p1.fullName)
// Lei Wang

const descriptors = Object.getOwnPropertyDescriptors(p1)
console.log(descriptors)
// {
//   firstName: {
//     value: 'Lei',
//       writable: true,
//       enumerable: true,
//       configurable: true
//   },
//   lastName: {
//     value: 'Wang',
//       writable: true,
//       enumerable: true,
//       configurable: true
//   },
//   fullName: {
//     get: [Function: get fullName],
//     set: undefined,
//       enumerable: true,
//       configurable: true
//   }
// }

const p2 = Object.defineProperties({}, descriptors)
p2.firstName = 'hhh'
console.log(p2.fullName)
// hhh Wang

String.prototype.padStart / String.prototype.padEnd

String.prototype.padStart: 方法用另一个字符串填充当前字符串(如果需要的话，会重复多次)，
以便产生的字符串达到给定的长度。从当前字符串的左侧开始填充。

String.prototype.padEnd: 方法会用一个字符串填充当前字符串（如果需要的话则重复填充），
返回填充后达到指定长度的字符串。从当前字符串的末尾（右侧）开始填充。

const books = {
  html: 5,
  css: 16,
  javascript: 128
}

for (const [name,count] of Object.entries(books)) {
  console.log(`${name.padEnd(16, '-')}, ${count.toString().padStart(3, 0)}`)
}

在函数参数中添加尾逗号

function foo(
  bar,
  baz,
) {
  
}

const a = [
  1,
  2,
]

const obj = {
  a: 1,
  b: 2,
}