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 两种声明方式，通过下面表格来进行归类。

	var	let	const
变量提升	true	false	false
全局变量	true	false	false
重复声明	true	false	false
重新赋值	true	true	false
暂时死区	false	true	true
块作用域	false	true	true
只声明不初始化	true	true	false

延展操作符 (难度 *)

应用场景

  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邀请）入群，在线解答讨论数据可视化、优化图表性能等方面的技术问题~