ES6 思维导图模板_ProcessOn思维导图、流程图

类

说明

并不是完整意义上的类，基于原型的类

ES5 类定义的一个语法糖

语法

定义

class 关键字

class 中定义的方法都是不可枚举的

类必须使用 new 来调用，否则会报错

constructor 方法

类的构造函数

如果没有显示定义，则默认会生成一个空的构造函数

默认返回实例对象

也可以指定返回另一个对象

类的实例

在构造器中创建的对象都是实例对象

在class中，构造器外，定义的方法都是原型方法

hasOwnProperty 判断一个属性是否存在于对象本身

所有实例共享一个原型对象

getter/setter

在类的内部可以使用 get 和 set 关键字

get

取值函数

当获取使调用 get 方法

set

取值函数

当设置时调用 set 方法

属性表达式

类的属性名和方法名可以采用表达式

名称为表达式的结果

Class 表达式

与函数一样，类也可以使用表达式定义

在 Class 内部需要使用的话，调用本身类名

外部使用，调用表达式的名称

静态方法

在方法前加上 static 来设置静态方法

静态方法通过类来调用，实例无法使用

静态方法this指向类，而不是实例

静态属性

默认情况下需要在类的外面定义

static 也可以定义静态方法，但还是草案

注意点

严格模式

类和模块的内部默认都是严格模式

不存在变量声明提升

name属性

this的指向

类方法内部如果含有 this，默认指向类的实例

继承

extends 关键字继承

可以继承类的所有属性和方法

原型

静态

必须调用 super 方法

子类构造函数通过父类的构造函数加工完成

如果不调用，子类就得不到 this 对象

只有调用 super 之后才可以使用 this 关键字，之前使用的会报错

如果子类没有定义 constructor 方法，这个方法会被默认添加

super关键字

但作为函数调用

代表父类的构造函数

返回的是子类的实例

this 执行子类

只能在子类构造器中使用，否则会报错

当作为对象调用

普通方法中指向父类的原型对象

方法内部的 this 指向当前的子类实例

静态方法中指向父类

在使用super的时候，必须显示的指定是作为函数还是作为对象使用，否则会报错

新增数据结构

Set

类似数组，当时成员值是唯一的，没有重复的值。

语法

new Set()

本身是一个构造函数

可以接受一个具有 iterable 接口的数据结构作为参数

const set = new Set([1, 2, 3, 4, 4]);

可以将其转化为数组

[...set]

原型属性和方法

属性

constructor

构造函数，默认就是Set函数

size

返回Set实例的成员总数

方法

add(value)

添加某个值，返回 Set 结构本身。

delete(value)

删除某个值，返回一个布尔值，表示删除是否成功。

has(value)

返回一个布尔值，表示该值是否为Set的成员。

clear()

清除所有成员，没有返回值。

Map

它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

语法

new Map()

Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组

const map = new Map([ ['name', '张三'], ['title', 'Author'] ]);

原型属性和方法

属性

size

方法

set(key, value)

set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。

get(key)

get方法读取key对应的键值，如果找不到key，返回undefined。

has(key)

has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。

delete(key)

delete方法删除某个键，返回true。如果删除失败，返回false。

clear()

clear方法清除所有成员，没有返回值。

Symbol 元编程

一种新的数据类型，表示独一无二的值

第七种原始数据类型

语法

创建

通过 Symbol 函数生成

let s = Symbol();

Symbol 函数前不能使用 new 命令，否则会报错

类似字符串的数据类型

函数参数

可以接受一个字符串作为参数

为了方便区分

如果参数是一个对象

会调用该对象的 toString 方法，将其转为字符串，然后将结果作为函数的参数

独一无二的，两个相同参数的 Symbol 不相等

Symbol() == Symbol();// false

无法运算

Symbol 值不能与其他类型的值进行运算，会报错。

值的转换

Symbol 值可以显示转换为字符串

调用String或toString方法

也可以显示转换为布尔

强制转换

Boolean

隐式转换

!

if

不能转换为数值

转换的话会报错

description 属性

创建 Symbol 的时候，可以添加一个描述。

可以使用 description 属性，直接返回 Symbol 的描述

Symbol('foo').description // "foo"

作为属性名的 Symbol

可以使用Symbol值作为对象名，这样就可以保证不会出现同名的属性。

用法

直接给一个对象属性名设置为 Symbol 值

不能使用点运算符

点运算符后面跟的是字符串，会导致Symbol的标识符名称失效

a.mySymbol = 'Hello!'; a[mySymbol] // undefined

在对象内部使用 Symbol 值定义属性是，必须放在方括号之中

let obj = { [s]: function (arg) { ... } };

Symbol 值作为属性名时，该属性还是公开属性，不是私有属性。

属性名的遍历

Symbol 作为属性名，遍历对象的时候，该属性不会出现在for...in、for...of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。

Object.getOwnPropertySymbols() 方法

获取指定对象的所有 Symbol 属性名

成员是当前对象的所有用作属性名的 Symbol 值

该方法返回一个数组

Reflect.ownKeys() 方法

返回所有类型的键名，包括常规键名和 Symbol 键名

该方法返回一个数组

可以利用 Symbol 值作为键名不会被常规遍历到的特性来模拟对象的一些非私有，但又希望只用于内部的方法。

Symbol.for() / Symbol.keyFor()

Symbol.for()

创建两个相同的 Symbol 值

它接受一个字符串作为参数，然后搜索有没有以该参数作为名称的 Symbol 值

如果有，就返回这个 Symbol 值

没有就新建一个以该字符串为名称的 Symbol 值，并将其注册到全局。

会先在全局登记一次，之后每次搜索返回

Symbol.keyFor()

返回一个已登记（使用 for 方法）的 Symbol 类型值的 key。

let s1 = Symbol.for("foo"); Symbol.keyFor(s1) // "foo"

新增 API

Array

Array.of

将一组参数转换为数组

只有一个参数时，是一个数组项

Array.from

将类数组转换为数组

浅拷贝

支持和map类似的映射

find

找到满足的第一个元素

findIndex

找到满足第一个条件的元素的下标

includes

检测是否包含

Object

Object.is

判断两个值是否相等

0 和 -0不相等

NaN等于自身

Object.getOwnPropertySymbols

从指定对象上获取所有符号属性名组成的数组

Object.getOwnPropertyNames

获取对象身上所有可枚举但不包括symbol的属性名组成的数组

不能获取原型上的

Object.keys

获取对象身上可枚举属性组成的数组

Object.assign

将源对象拷贝到目标对象身上

浅拷贝

会改变目标对象的值

Number

Number.isNaN

判断数字是否为NaN

String

startsWith

判断当前字符串是否以指定字符开头

endsWith

判断当前字符串是否以指定字符结尾

includes

判断字符是否包含指定字符串

严格模式

'use strict'

开启关键字

必须在作用域第一行使用

特性

严格模式下变量必须先声明后使用

禁止了 this 指向 wind ow，它是一个 undefined

严格模式下对 argument 对象进行了限制

不允许对 arguments 赋值

arguments 不再追踪参数的变化

禁止使用 arguments.callee

对一个只读属性进行赋值会报错

语法

块级作用域声明

let / const

let 声明一个变量

不能重复声明，但可以重新赋值

const 声明一个常量

不能重复声明并且要在声明的时候立即赋值

原始类型值不能改变

引用类型值的可以改变，因为保存的是内存地址

共同特性

只在当前代码块有效

不存在变量声明提升

暂时性死区

从开头到声明关键字之间存在一个封闭区域，这个区域内不能任何方式使用这个变量

块级作用域

使用 let 和 const 触发

可以嵌套多层

每一层之间互不影响

内层作用域可以访问上层作用域，反之不行

内部变量存储在块级环境变量中

for循环每一次都会输出相应的数值

在循环中如果()中包含let和const，这个循环体就是个块级作用域

展开/收集运算符

...

spread / rest

展开

展开数组

展开对象

收集

当实参比形参多

默认参数值

作用

可以给函数的形参直接赋值，当没有传入相应的实参时，使用形参的默认值

也可以给解构赋值设置默认值，当解构不出来的时候，使用默认值

默认值表达式

可以在赋值默认值的时候使用表达式，计算的结果就是默认值

解构

说明

解构化赋值

声明新变量对其进行匹配赋值

使用全等来判断相应位置的值是否有效

可以对2个生效

数组解构

变量和数组值一一对应

let [a, b, c] = [1, 2, 3] a =1 b = 2 c = 3

对象解构

解构 key 和目标 key 一一对应

let {x, y, z} = {x: 1, y: 2, z: 3} x = 1 y = 2 z= 3

赋值模式

对象

key: value

{a: 1, b: 2}

解构

value: key

let {a: AA, b: BB} = {a: 1, b: 2} AA = 1 BB = 2

解构值详解

值的数量

多余的变量因为无法解构所以为 undefined

let [a,b,c] = [1,2]

可以只取其中某几个值

let {a,c} = {a:1,b:2,c:3};

可以和展开运算符一起使用

let [b, ...c] = [1,2,3];

默认值赋值

和函数默认值用法相同

嵌套结构

解构的结构要和目标结构对应

数组

let [a,[b,c,d],e] = [1,[2,3,4],5]

对象

let {x:{y:{z:w}}} = {x:{y:{z:6}}}

函数解构参数

可以在形参中设置解构，实参会被解析出来

可以使用解构来进行函数默认值的设置

默认值设置在左边

有值就覆盖，没有值就使用默认值

默认值设置在右边

相等于将原先的指针替换掉了，这时有值就使用，没有值就是 undefined

解构高级用法

高级赋值操作

将值解构到一个对象中

let o = {}; [o.a, o.b, o.c] = [1, 2, 3];

快捷改变数组值的位置

let arr = []; [arr[2], arr[0], arr[1]] = [1,2,3];

解构中的表达式

可以在解构中使用表达式，最终结果根据表达式来定

互相映射

将数组映射为对象

将对象映射为数组

重复赋值

使用不同的变量名，解构相同的值

{x:AA, x:BB} = {x:10}

链式解构

可以使用 = 进行多个对象的解构

{a} = {b,c} = {a:1,b:2,c:3}

将解构赋值和普通赋值混用

普通值是对象的引用

对象字面量扩展

简洁属性和方法

当 key 和 value 相等时，可以只写 key

方法可以省略冒号和 function

属性名即为方法名

实际上是一个匿名函数

计算属性名

[] 可以定义一个对象的属性名

支持任何表达式

super对象

super 相等于原型上的父类

一般在 class 中使用，对象中不常使用

模板字符串

字符串模板

字符串字面量

语法

``

渲染区域

${}

插入表达式

内部支持任何表达式

let txt = world; `hello ${txt}`; hello world

字符串模板中的换行都是真实有效的，结果会被保留下来

标签模板

可以使用``来使用函数

箭头函数

()=>{}

3部分组成

参数列表

()

0或多个参数，只有一个参数可以省略()

标识

=>

函数体

{}

可以省略，省略的情况下会默认在前面加一个return，只适用于一条语句省略

特点

this指向

this 指向定义时外层包含的作用域中继承的 this

只取决于第一次定义的作用域，无法被改变

call、apply、bind无效

arguments 对象

箭头函数中没有 arguments 对象

继承自父层

不能OOP编程

不存在 prototype 属性

也不能使用 new 操作符创建对象

代码组织

遍历器 Iterator

遍历不同数据结构的一种接口，任意数据结构只要部署 Iterator 接口，就可以完成遍历操作。

作用

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

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

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

语法

在函数中返回一个 next 方法

next 方法中返回 2 个属性

value

当前成员的值

done

布尔值，表示遍历是否结束

默认 Iterator 接口

ES6规定，默认的 Iterator 接口部署在数据结构的 Symbol.iterator 属性，一个数据类型只要具有 Symbol.iterator 属性，就可以认为是“可遍历的”。

ES6 有些数据结构原生具备 Iterator 接口，可以不用任何处理，就可以被 for...of 循环遍历

Array

Map

Set

String

TypedArray

函数的 arguments 对象

NodeList 对象

对象之所以没有默认 Iterator 接口，是因为对象属性遍历的顺序是不确定的。

for...of

遍历所有数据结构的统一方法

一个数据结构只要要部署了 Symbol.iterator 属性，就可以使用 for...of 循环遍历它的成员

生成器 Generator

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

执行 Generator 函数会返回一个遍历器对象。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。

语法

function 关键字与函数名直接有一个 *

任何地方都可以

函数体内部使用 yield 表达式，来定义不同的状态

使用 next 方法来获取遍历器对象的每一个状态。

value

内部状态值

done

是否遍历结束

异步流控制

Promise

说明

Promise 是避免异步编程中回调地狱的一种解决方案

最早由社区提出和实现，ES6 将其写入到标准里

三种状态

Pending

进行中

Fulfilled

已完成

Rejected

已失败

特点

一旦确定状态无法改变

最终状态只有 2 个

成功

失败

可以随时得到这个状态

不受外界影响，只能由异步操作的结果来确定

缺点

无法取消 Promise ，一旦创建就立即指向，无法中途取消

如果不设置回调函数，Promise 内部抛出的错误不会反应到外部

当处于 Pending 状态的时候，无法得知目进展到哪一个阶段

基本用法

new Promise

resolve

进行中变为已完成，并且可以传递一个参数

可以传入一个 Promise 对象那么根据传入的这个Promise 对象确认状态

reject

进行中变为以失败，并且可以传递一个参数

如果程序运行中出现错误，则会改变为 reject 状态

实例方法

then

使用 then 方法获取 Promise 对象返回的结果

2个参数

第一个参数，resolve 状态时的回调

第二个参数，reject 时的回调

catch

捕获 Promise 状态为 reject 时的结果

then的第二个参数失效

链式调用

当处于Promise对象的时候，可以多次调用实例方法（和 jQuery 链式调用原理相同）

then 和 catch 会返回一个 Promise 对象

也可以手动返回一个 Promise 对象

之后的状态由这个 Promise 决定

常用 API

finally

不管 Promise 对象结果如何都会执行这个回调

all

统一返回所有成功状态的结果

数组

返回第一个失败状态的结果

race

谁先成功先执行谁

async 函数

理解

同步方式处理异步

异步编程的一种解决方案

generator 的语法糖

基本使用

任何函数前面加上 async

语法

默认返回一个promise

也可以手动抛出一个错误使状态变为 reject

return 方法相等于将状态改变为 resolve

可以通过 then 来获取返回的结果

await 命令

await 必须在 async 函数里出现

后跟任意值

直接返回

后跟 Promise 对象

获取对象的执行结果

但会照成一定时间的阻塞

要得到promise的结果

错误处理

使用 try...catch... 捕获错误

直接在 Promise 对象后面使用 catch方法来捕获