前端知识总结--ES6新特性

Posted 水香木鱼

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端知识总结--ES6新特性相关的知识,希望对你有一定的参考价值。

 

ECMAScript 6.0(以下简称 ES6)是 javascript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

整理下ES6的新特性,具体用法不详细描述,只作为总结归纳

1、let 和 const 命令

  • 使用let声明的变量可以重新赋值,但是不能在同一作用域内重新声明
  • 使用const声明的变量必须赋值初始化,但是不能在同一作用域类重新声明也无法重新赋值

2、变量的解构赋值

  • 数组的解构赋值
  • 对象的解构赋值
  • 字符串的解构赋值
  • 数值和布尔值的解构赋值
  • 函数参数的解构赋值
  • 圆括号问题

3、字符串的扩展

  • 字符的 Unicode 表示法
  • 字符串的遍历器接口
  • 直接输入 U+2028 和 U+2029
  • JSON.stringify() 的改造
  • 模板字符串
  • 实例:模板编译
  • 标签模板
  • 模板字符串的限制

4、字符串的新增方法

  • String.fromCodePoint():从 Unicode 码点返回对应字符
  • String.raw():返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,往往用于模板字符串的处理方法。
  • codePointAt():能够正确处理 4 个字节储存的字符,返回一个字符的码点。
  • normalize():用来将字符的不同表示方法统一为同样的形式,这称为 Unicode 正规化。
  • includes(), startsWith(), endsWith():是否包含、在头部、在尾部
  • repeat():返回一个新字符串,表示将原字符串重复n次。
  • padStart(),padEnd():补全头部、尾部
  • trimStart(),trimEnd():消除头部、尾部空格
  • matchAll():返回一个正则表达式在当前字符串的所有匹配

5、正则的扩展

  • RegExp 构造函数
  • 字符串的正则方法
  • u 修饰符
  • RegExp.prototype.unicode 属性
  • y 修饰符
  • RegExp.prototype.sticky 属性
  • RegExp.prototype.flags 属性
  • s 修饰符:dotAll 模式
  • 后行断言
  • Unicode 属性类
  • 具名组匹配
  • String.prototype.matchAll

6、数值的扩展

  • 二进制和八进制表示法
  • Number.isFinite(), Number.isNaN()
  • Number.parseInt(), Number.parseFloat()
  • Number.isInteger()
  • Number.EPSILON
  • 安全整数和 Number.isSafeInteger()
  • Math 对象的扩展
  • 指数运算符

7、函数的扩展

  • 函数参数的默认值
  • rest 参数
  • 严格模式
  • name 属性
  • 箭头函数
  • 尾调用优化
  • 函数参数的尾逗号

8、数组的扩展

  • 扩展运算符
  • Array.from()
  • Array.of()
  • copyWithin()
  • find() 和 findIndex()
  • fill()
  • entries(),keys() 和 values()
  • includes()
  • flat(),flatMap()
  • 数组的空位

9、对象的扩展

  • 属性的简洁表示法
  • 属性名表达式
  • 方法的 name 属性
  • 属性的可枚举性和遍历
  • super 关键字
  • 对象的扩展运算符

10、对象的新增方法

  • Object.is()
  • Object.assign()
  • Object.getOwnPropertyDescriptors()
  • __proto__属性,Object.setPrototypeOf(),Object.getPrototypeOf()
  • Object.keys(),Object.values(),Object.entries()
  • Object.fromEntries()

11、Symbol

ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型

12、Set 和 Map 数据结构

ES6中新的数据结构Set:它类似于数组,但是成员的值都是唯一的,没有重复的值。

Set本身是一个构造函数,用来生成Set数据结构。

Set结构的实例有四个遍历方法,可以用于遍历成员。

  • keys():返回键名的遍历器
  • values():返回键值的遍历器
  • entries():返回键值对的遍历器
  • forEach():使用回调函数遍历每个成员

ES6中Map数据结构:类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。

也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。

如果你需要“键值对”的数据结构,Map比Object更合适。

13、Proxy

Proxy 在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。可以拦截目标对象的任意属性

14、Reflect

  • Reflect对象与Proxy对象一样,也是 ES6 为了操作对象而提供的新 API。
  • Object对象的一些明显属于语言内部的方法(比如Object.defineProperty),放到Reflect对象上。
  • 修改某些Object方法的返回结果,让其变得更合理。
  • Object操作都变成函数行为。
  • Reflect对象的方法与Proxy对象的方法一一对应,只要是Proxy对象的方法,就能在Reflect对象上找到对应的方法。

15、Promise 对象

 Promise 是异步编程的一种解决方案,可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易。

缺点:

  • 无法取消Promise,一旦新建它就会立即执行,无法中途取消。
  • 如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。
  • 当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

16、Iterator 和 for...of 循环

遍历器(Iterator)针对四种数据集合【数组(Array)和对象(Object),ES6 又添加了MapSet】,提供一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。

Iterator 的作用有三个:

一是为各种数据结构,提供一个统一的、简便的访问接口;

二是使得数据结构的成员能够按某种次序排列;

三是 ES6 创造了一种新的遍历命令for...of循环,Iterator 接口主要供for...of消费。

17、Generator 函数的语法

Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。

语法上,Generator 函数是一个状态机,封装了多个内部状态。

形式上,Generator 函数是一个普通函数,但是有两个特征。一是,function关键字与函数名之间有一个星号;二是,函数体内部使用yield表达式,定义不同的内部状态(yield在英语里的意思就是“产出”)。

18、Generator 函数的异步应用

整个 Generator 函数就是一个封装的异步任务,或者说是异步任务的容器。异步操作需要暂停的地方,都用yield语句注明。

 

19、async 函数

ES2017 标准引入了 async 函数,使得异步操作变得更加方便。它就是 Generator 函数的语法糖。

async函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await,仅此而已。

async函数对 Generator 函数的改进,体现在以下四点:

(1)内置执行器。

调用函数就会自动执行,输出最后结果。完全不像 Generator 函数,需要调用next方法,或者用co模块,才能真正执行,得到最后结果。

(2)更好的语义。

asyncawait,比起星号和yield,语义更清楚了。async表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果。

(3)更广的适用性。

co模块约定,yield命令后面只能是 Thunk 函数或 Promise 对象,而async函数的await命令后面,可以是 Promise 对象和原始类型的值(数值、字符串和布尔值,但这时会自动转成立即 resolved 的 Promise 对象)。

(4)返回值是 Promise。

async函数的返回值是 Promise 对象,这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。

20、Class 的基本语法

 class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

21、Class 的继承

 Class 可以通过extends关键字实现继承,子类必须在constructor方法中调用super方法,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,得到this对象

22、Module 的语法

ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。

ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。

模块功能主要由两个命令构成:exportimportexport命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。

23、Module 的加载实现

浏览器加载 ES6 模块,也使用<script>标签,但是要加入type="module"属性。

浏览器对于带有type="module"<script>,都是异步加载,不会造成堵塞浏览器,即等到整个页面渲染完,再执行模块脚本,等同于打开了<script>标签的defer属性。

以上是关于前端知识总结--ES6新特性的主要内容,如果未能解决你的问题,请参考以下文章

web前端技巧-ES6新特性与重点知识汇总

web前端技巧-ES6新特性与重点知识汇总

ES6 新特性知识点总结

Atitit js es5 es6新特性 attilax总结

面试知识点总结

总结常见的ES6新语法特性