阅读 242

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

varletconst
变量提升truefalsefalse
全局变量truefalsefalse
重复声明truefalsefalse
重新赋值truetruefalse
暂时死区falsetruetrue
块作用域falsetruetrue
只声明不初始化truetruefalse
  • 延展操作符 (难度 *)

应用场景

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

文章分类
前端
文章标签