前端知识总结--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 又添加了Map
和Set
】,提供一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 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)更好的语义。
async
和await
,比起星号和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 模块,都只能在运行时确定这些东西。
模块功能主要由两个命令构成:export
和import
。export
命令用于规定模块的对外接口,import
命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export
关键字输出该变量。
23、Module 的加载实现
浏览器加载 ES6 模块,也使用<script>
标签,但是要加入type="module"
属性。
浏览器对于带有type="module"
的<script>
,都是异步加载,不会造成堵塞浏览器,即等到整个页面渲染完,再执行模块脚本,等同于打开了<script>
标签的defer
属性。
以上是关于前端知识总结--ES6新特性的主要内容,如果未能解决你的问题,请参考以下文章