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