es6,es7,es8,es9,es10的新特性

es6

• 类（class）
• 模块化(Module)

• 导出(export)

// 导出变量test.js
export let name = 'vin'
export const age = '24';
// 等价于
let name  = 'vin';
const age = '24';
export { name, age }
---
export { name as myName, age } // 起别名
---
export default name  // 导出默认参数
// 等价于
export {name as default};

// 导出函数fn.js
export function fn(arg) {
  return arg;
}
// 等价于
export { fn } // 起别名
---
export default function fn(arg) {  // 导出默认函数
  return arg;
}

• 导入(import)

import { fn } from 'fn'; // fn.js 不需要加.js
import { name, age } from 'test'; // test.js
---
import fn from 'fn'; // 导入默认函数
---
import { fn as fn1 } from 'fn'; // 别名

• 箭头函数
• 模板字符串
• 函数参数默认值

function foo(height = 50, color = 'red')
{
    // ...
}

• 解构赋值
• 延展操作符(Spread operator)
• 对象属性简写

const name = 'Ming',age = '18',city = 'Shanghai';
const student = { name, age, city };
console.log(student); // {name: "Ming", age: "18", city: "Shanghai"}

• Promise

let waitSecond = new Promise(function(resolve, reject) {
    setTimeout(resolve, 1000);
});

waitSecond
    .then(function() {
        console.log("Hello"); // 1秒后输出"Hello"
        return waitSecond;
    })
    .then(function() {
        console.log("Hi"); // 2秒后输出"Hi"
    });

• 支持let与const

es7

• includes()方法判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false

const arr = [1, 3, 5, 2, '8', NaN, -0]
arr.includes(1) // true
arr.includes(1, 2) // false 该方法的第二个参数表示搜索的起始位置，默认为0
arr.includes('1') // false
arr.includes(NaN) // true
arr.includes(+0) // true

• 运算符 ** 与Math.pow()等效

console.log(2**10);// 输出1024
console.log(Math.pow(2, 10)) // 输出1024

es8

• Async/Await
• Object.values()，Object.entries()

const obj = { foo: 'bar', baz: 42 };
Object.values(obj) // ["bar", 42]

const obj = { 100: 'a', 2: 'b', 7: 'c' };
Object.values(obj) // ["b", "c", "a"]

const obj = { foo: 'bar', baz: 42 };
Object.entries(obj) // [ ["foo", "bar"], ["baz", 42] ]

const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.entries(obj); // [['1', 'yyy'], ['3', 'zzz'], ['10': 'xxx']]

• String.prototype.padStart 和 String.prototype.padEnd

• String.padStart(targetLength,[padString])
• –targetLength(必填):当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身
• –padString(可选):填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断，此参数的缺省值为 " "。

'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

• Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors()方法，返回指定对象所有自身属性（非继承属性）的描述对象。

es9

• for await of

ES9新增的for await of可以用来遍历具有Symbol.asyncIterator方法的数据结构，也就是异步迭代器，且会等待前一个成员的状态改变后才会遍历到下一个成员，相当于async函数内部的await

function Gen (time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve(time)
    }, time)
  })
}
async function test () {
  let arr = [Gen(2000), Gen(100), Gen(3000)]
  for await (let item of arr) {
    console.log(Date.now(), item)
  }
}
test()
// 1575536194608 2000
// 1575536194608 100
// 1575536195608 3000

• Object Rest Spread （…）

const arr1 = [10, 20, 30];
const copy = [...arr1]; // 复制
console.log(copy);    // [10, 20, 30]
const arr2 = [40, 50];
const merge = [...arr1, ...arr2]; // 合并
console.log(merge);    // [10, 20, 30, 40, 50]
console.log(Math.max(...arr));    // 30 拆解

• Promise.prototype.finally()

Promise.prototype.finally() 方法返回一个Promise，在promise执行结束时，无论结果是fulfilled或者是rejected，在执行then()和catch()后，都会执行finally指定的回调函数。

axios('https://www.google.com')
  .then((response) => {
    console.log(response.status);
  })
  .catch((error) => { 
    console.log(error);
  })
  .finally(() => { 
    document.querySelector('#spinner').style.display = 'none';
  });

• 正则表达式特性 暂时不写

ES10

• Array.prototype.flat()

newArray = arr.flat(depth) // depth是指定要提取嵌套数组的结构深度，默认值为 1

const numbers1 = [1, 2, [3, 4, [5, 6]]]
console.log(numbers1.flat())// [1, 2, 3, 4, [5, 6]]

const numbers2 = [1, 2, [3, 4, [5, 6]]]
console.log(numbers2.flat(2))// [1, 2, 3, 4, 5, 6]

• Array.prototype.flatMap()

let arr = [1, 2, 3]
console.log(arr.map(item => [item * 2]).flat()) // [2, 4, 6]
console.log(arr.flatMap(item => [item * 2])) // [2, 4, 6]

• Object.fromEntries()

const object = { x: 23, y:24 };
const entries = Object.entries(object); // [['x', 23], ['y', 24]]//es7
const result = Object.fromEntries(entries); // { x: 23, y: 24 }

• String.trimStart 和 String.trimEnd

let str = ' 前端工匠 '
console.log(str.length) // 6
str = str.trimStart()
console.log(str.length) // 5
let str1 = str.trim() // 清除前后的空格
console.log(str1.length) // 4
str.replace(/^\s+/g, '') // 也可以用正则实现开头删除空格

let str = ' 浪里行舟 '
console.log(str.length) // 6
str = str.trimEnd()
console.log(str.length) // 5
let str1 = str.trim() //清除前后的空格
console.log(str1.length) // 4
str.replace(/\s+$/g, '') // 也可以用正则实现右端移除空白字符

• String.prototype.matchAll

function collectGroup1 (regExp, str) {
  let results = []
  for (const match of str.matchAll(regExp)) {
    results.push(match[1])
  }
  return results
}
console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`))
// ["foo", "bar", "baz"]

• try…catch

// ES10之前
try {
  // tryCode
} catch (err) {
  // catchCode
}

// ES10
try {
  console.log('Foobar')
} catch {
  console.error('Bar')
}

• BigInt（大整数）

const aNumber = 111;
const aBigInt = BigInt(aNumber);
aBigInt === 111n // true
typeof aBigInt === 'bigint' // true
typeof 111 // "number"
typeof 111n // "bigint"

• Symbol.prototype.description

Symbol('desc').description;  // "desc"
Symbol('').description;      // ""
Symbol().description;        // undefined

• Function.prototype.toString()

function sum(a, b) {
  return a + b;
}
console.log(sum.toString());
// function sum(a, b) {
//  return a + b;
// }