es6到es10增加了那些新特性?

ES6新特性(2015)

在2015年6月：ECMAScript 2015 (ES2015)，第6版，最早被称作是 ECMAScript 6 (ES6) 。ES6是一次非常关键的革命，在这次的版本更新中，增加的东西比较多。在这里列举几个容易理解并且实用的:

• 函数参数默认值 (难度 *)

应用场景

  function add(a = 1, b = 2) {
    //...
  }

• 模板字符串 (难度 *)

应用场景

let name = 'Andy';
const str = `Hello ${name}`;
console.log(str)

• 解构赋值

应用场景

  var a, b;
  [a, b] = [1, 2]

• 对象属性简写 (难度 *)

应用场景

  const name = 'Andy', age = '22', city = 'WuHan';
  const student = {
    name,
    age,
    city
  };
  console.log(student); //{name: "Andy", age: "22", city: "WuHan"};

• Let与Const (难度 *)

在前端开发过程中，ES6 中用的最多就应该是声明方式了。在 ES6 以前，JavaScript中就只有 var 一种声明，但是现在引入了 let 和 const 两种声明方式，通过下面表格来进行归类。

• 延展操作符 (难度 *)

应用场景

  function add(a, b) {
    return a+b;
  };
  const numberArray = [1, 2];

  // 不实用延展符
  console.log(add.apply(null, numberArray))

  // 使用延展符
  console.log(add(...numberArray))

• 箭头函数 (难度 * * *)

箭头函数的出现给前端开发带来了很大的帮助，它不仅极大的简化了代码的简练，最大的一个特点就是箭头函数与包围它的代码共享同一个this,能帮助开发者解决this作用域问题。

应用场景

  // 常见的箭头函数写法
  () = 1
  a => a+1
  (a, b , c) => a+b+c
  () => {
    console.log("hello")
  }

ES7新特性(2016)

ES 2016年添加了两个比较简单的新特性

• Array.prototype.includes()：(难度 *)

应用场景

  const strArray = ['a', 'b', 'c'];
  const str = 'a';
  const str0 = 'd';
  console.log(strArray.includes(str)); // true
  console.log(strArray.includes(str0)); // false

• 指数操作符

应用场景

  console.log(2**10) // 1024

ES8新特性(2017)

• Object.values() （难度 *）

应用场景

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

console.log(Object.values(obj))

• Object.entries() （难度 *）

应用场景

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

console.log(Object.entries(obj))

• String padding: padStart()和padEnd() （难度 *）

padStart()应用场景

  let str = 'hello'
  console.log(str.padStart(7, '00')) // "00hello"

padEnd()应用场景

  let str = 'hello';
  console.log(str.padEnd(7,00)) // "hello00"

• Object.getOwnPropertyDescriptors() （难度 **） 其实这个方法在开发过程中并不是很常见，Object.getOwnPropertyDescriptors()函数用来获取Object对象自身属性

应用常见

  const obj = {
    name: 'Andy',
    age: 18
  };
  Object.getOwnPropertyDescriptors(obj)

ES9新特性(2018)

• 异步迭代

• Promise.finally() (难度 * * *)

对于Promise调用链一般要么最终成功 (.then) 要么失败 (.catch)。但是有的时候，需要无论成功还是失败，都需要执行某一行代码，finally()是可以指定你最终的代码。

应用场景

  let state = true;
  fetch(request).then((response) => {
    //
  }).then(() => {console.log("hi, 进入.then")})
  .catch((err) => {console.log("hi, 进入.catch")})
  .finally(() => {state = false})

• Rest/Spread 属性 （难度 * *）

应用场景

  const obj = {
    name: 'Andy',
    age: 22,
    six: 'm'
  };
  const {name, ...b} = obj;
  // name = 'Andy'
  // b = { age: 22, six: 'm'}

ES10新特性(2019)

• Array.prototype.flat()

flat() 方法会按照指定的要求去深度遍历数组，返回已经降维的新数组

应用场景

  var numberArray = [1, 2, 3, [4, 5], [6, 7, [8, 9]]];
  console.log(numberArray.flat()); // [1, 2, 3, 4, 5, 6, 7, [8, 9]
  console.log(numberArray.flat(2)); // [1, 2, 3, 4, 5, 6, 7, 8, 9];

• BagInt

在2019年6月时，推出了 ES10 新特性，其中比较特殊的就是推出了 BigInt 基本类型。BigInt 是一种内置对象，它提供了一种方法来表示大于 253 - 1 的整数。这原本是 Javascript中可以用 Number 表示的最大数字。BigInt 可以表示任意大的整数。

PS:大家看了后觉得对自己有帮助可以三连留言,欢迎提出宝贵意见，也欢迎各位对相关技术有兴趣的开发者（由团队开发人员微信号x118422邀请）入群，在线解答讨论数据可视化、优化图表性能等方面的技术问题~