跳至主要內容
1.序言
简介 本教程系统的归纳和总结了从 JavaScript 到 ECMAScript 的重难点以及高阶使用方法。 目录 1. 序言 2. 基础关注点 3. 数据类型的检验和转换 4. 错误处理机制 5. Array 6. String 7. Object 8. Class 9. Symbol 10. 解构赋值 11. 新增运算符 12. 异步编程 13. ...

Harry Xiong大约 1 分钟Web 前端JS 进阶教程
10.解构赋值
数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。 以前,为变量赋值,只能直接指定值。 ES6 允许写成下面这样。 上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。 本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面...

Harry Xiong大约 14 分钟Web 前端JS 进阶教程
11.新增运算符
数组的扩展运算符 理解 扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。 更好的理解是,…args 就是把args中的数据一项一项取出来。 这里有一个例子可以很好的理解...args。 我们传入的参数是1, 2, 3,意味着...args的等于是1, 2, 3。又因为之前说过…args ...

Harry Xiong大约 19 分钟Web 前端JS 进阶教程
12.异步编程
异步编程存在的意义 JS是单线程模型 单线程模型指的是,JavaScript 只在一个线程上运行。也就是说,JavaScript 同时只能执行一个任务,其他任务都必须在后面排队等待。 注意,JavaScript 只在一个线程上运行,不代表 JavaScript 引擎只有一个线程。事实上,JavaScript 引擎有多个线程,单个脚本只能在一个线程上运行...

Harry Xiong大约 114 分钟Web 前端JS 进阶教程
13.Set
概念 ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。 基本语法 构造函数 Set本身是一个构造函数,用来生成 Set 数据结构。 上面代码通过add()方法向 Set 结构加入成员,结果表明 Set 结构不会添加重复的值。 Set函数可以接受一个数组(或者具有 Iterable 接口的其他数据结构)作为参数,用...

Harry Xiong大约 10 分钟Web 前端JS 进阶教程
14.Map
概念 JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。 上面代码原意是将一个 DOM 节点作为对象data的键,但是由于对象只接受字符串作为键名,所以element被自动转为字符串[object HTMLDivElement]。 为了解决这个问题,ES6 ...

Harry Xiong大约 14 分钟Web 前端JS 进阶教程
15.Iterator
设计目的 JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和`Set。这样就有了四种数据集合,用户还可以组合使用它们,定义自己的数据结构,比如数组的成员是Map,Map的成员是对象。这样就需要一种统一的接口机制,来处理所有不同的数据结构。 遍历器(Iterator)就是这样一种机...

Harry Xiong大约 19 分钟Web 前端JS 进阶教程
16.异步遍历器
同步遍历器的问题 Iterator 接口是一种数据遍历的协议,只要调用遍历器对象的next方法,就会得到一个对象,表示当前遍历指针所在的那个位置的信息。next方法返回的对象的结构是{value, done},其中value表示当前的数据的值,done是一个布尔值,表示遍历是否结束。 上面代码中,变量it是一个遍历器(iterator)。每次调用it....

Harry Xiong大约 11 分钟Web 前端JS 进阶教程
17.Proxy
设计意义 Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。 Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示...

Harry Xiong大约 23 分钟Web 前端JS 进阶教程
18.Reflect
设计目的 Reflect对象与Proxy对象一样,也是 ES6 为了操作对象而提供的新 API。Reflect对象的设计目的有这样几个: (1) 将Object对象的一些明显属于语言内部的方法(比如Object.defineProperty),放到Reflect对象上。现阶段,某些方法同时在Object和`Reflect对象上部署,未来的新方法将只部署...

Harry Xiong大约 8 分钟Web 前端JS 进阶教程
2
3