前端知识总结--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新特性的更多相关文章
- 前端学习笔记 --ES6新特性
前言 这篇博客是我在b站进行学习es6课程时的笔记总结与补充. 此处贴出up主的教程视频地址:深入解读ES6系列(全18讲) 1.ES6学习之路 1.1 ES6新特性 1. 变量 2. 函数 3. 数 ...
- 前端入门21-JavaScript的ES6新特性
声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...
- Atitit js版本es5 es6新特性
Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...
- ES6新特性(函数默认参数,箭头函数)
ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...
- 必须掌握的ES6新特性
ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...
- 34.js----JS 开发者必须知道的十个 ES6 新特性
JS 开发者必须知道的十个 ES6 新特性 这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序): 默认参数 模版表达式 多行字符串 拆包表达式 改进的对象表达式 箭头函数 =&> ...
- Atitit js es5 es6新特性 attilax总结
Atitit js es5 es6新特性 attilax总结 1.1. JavaScript发展时间轴:1 1.2. 以下是ES6排名前十的最佳特性列表(排名不分先后):1 1.3. Es6 支持情况 ...
- ES6新特性概览
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
- ES6新特性之模板字符串
ES6新特性概览 http://www.cnblogs.com/Wayou/p/es6_new_features.html 深入浅出ES6(四):模板字符串 http://www.infoq.c ...
随机推荐
- openresty开发系列17--lua中的正则表达式
与其他脚本语言不同的是,Lua并不使用POSIX规范的正则表达式[4](也写作regexp)来进行模式匹配.主要的原因出于程序大小方面的考虑:实现一个典型的符合POSIX标准的regexp大概需要40 ...
- ISO/IEC 9899:2011 条款6.7.1——存储类说明符
6.7.1 存储类说明符 语法 1.storage-class-specifier: typedef extern static _Thread_local auto register 约束 2.在一 ...
- spring boot集成Websocket
websocket实现后台像前端主动推送消息的模式,可以减去前端的请求获取数据的模式.而后台主动推送消息一般都是要求消息回馈比较及时,同时减少前端ajax轮询请求,减少资源开销. spring boo ...
- Linux记录-shell自动化批量部署sql脚本并记录日志信息(转载)
#!/bin/bash #script_version=v110 db_host=127.0.0.1 db_port=3306 db_username=db_test_inst db_passwd=` ...
- 【433】COMP9024 复习
目录: 01. Week01 - Lec02 - Revision and setting the scene 02. Week02 - Lec01 - Data structures - memor ...
- 利用cglib给javabean动态添加属性,不用在建VO
有的时候 比如你用的是hibernate或者Spring jdbc 来做dao层进行数据库相关的操作的时候,若果是单表的操作的时候 还比较简单 hibernate可直接返回(get,load)你的需要 ...
- 推荐一款好用的 office word 的markdown插件 - Writage
软件地址:http://www.writage.com/
- 原生JavaScript常用本地浏览器存储方法五(LocalStorage+userData的一个浏览器兼容类)
基于LocalStorage+globalStorage+userData实现的一个本地存储类 userData用来兼容ie6 ie7 由userData模仿Session的方法:浏览器关闭删除保存的 ...
- web端自动化——Selenium3+python自动化(3.7版本)-chrome67环境搭建
前言 目前selenium版本已经升级到3.0了,网上的大部分教程是基于2.0写的,所以在学习前先要弄清楚版本号,这点非常重要.本系列依然以selenium3为基础. 一.selenium简介 Sel ...
- adb中文乱码问题怎么解决?
1.chcp 65001 执行完命令后 2.在cmd命令弹出的终端页面,右键单击属性设置成字体Lucida Console ,设置完成就解决了 adb 中文乱码问题