ECMAScript 6 思维导图模板_ProcessOn思维导图、流程图

变量声明、命令

let

不存在变量提升、不允许重复声明

暂时性死区：凡是在声明之前就使用这些变量，就会报错

块级作用域：let命令所在的代码块内有效。

非全局顶层变量，通过window.xxx获取为undefined

const

不存在变量提升、不允许重复声明

一旦声明，常量的值就不能改变。

非全局顶层变量，通过window.xxx获取为undefined

import

export

export default

class

ES6 声明变量的六种方法

var

function

let

const

import

class

ES6 数据类型

基本类型

String

undefined

null

number

boolean

Symbol

引用类型

Object

Function

Array

ES6 新增方法

字符串（13个）

字符串补全长度

padStart()

用于头部补全

接受两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。

padEnd()

用于尾部补全

接受两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。

字符串查找

includes()

返回布尔值，表示是否找到了参数字符串

子主题

startsWith()

返回布尔值，表示参数字符串是否在原字符串的头部。

endsWith()

返回布尔值，表示参数字符串是否在原字符串的尾部。

字符串消除空格

trimStart()

trimEnd()

String.raw()

String.fromCodePoint()

可以识别大于0xFFFF的字符，弥补了String.fromCharCode()方法的不足。

repeat()

方法返回一个新字符串，表示将原字符串重复n次。

参数如果是小数，会被取整。

repeat的参数是负数或者Infinity，会报错

normalize()

codePointAt()

matchAll()

方法返回一个正则表达式在当前字符串的所有匹配

对象（10个）

Object.is()

与严格比较运算符（===）的行为基本一致。

与===的不同

+0不等于-0

+0 === -0 //true  

Object.is(+0, -0) // false

NaN等于自身

NaN === NaN // false

Object.is(NaN, NaN) // true

Object.assign()

常见用途

添加属性

添加方法

克隆对象

子主题

设置默认参数

数组替换

Object.assign([1, 2, 3], [4, 5]) // [4, 5, 3]

方法特点

方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

方法的第一个参数是目标对象，后面的参数都是源对象。

目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

方法实行的是浅拷贝，而不是深拷贝

注意事项

浅拷贝

方法实行的是浅拷贝，而不是深拷贝，源对象某个属性的值是对象，拷贝得到的是对象的引用。

同名属性的替换

对于嵌套的对象，遇到同名属性，Object.assign会进行属性替换

数组的处理

可以用来处理数组，但是会把数组视为对象。

Object.assign([1, 2, 3], [4, 5]) // [4, 5, 3]

取值函数的处理

只能进行值的复制，如果要复制的值是一个取值函数，那么将求值后再复制。

Object.getOwnPropertyDescriptors()

返回指定对象所有自身属性（非继承属性）的描述对象。

原型相关

__proto__属性

用来读取或设置当前对象的prototype对象

从兼容性的角度，都不要使用这个属性

Object.setPrototypeOf()

方法的作用与__proto__相同，用来设置一个对象的prototype对象，返回参数对象本身

Object.setPrototypeOf(object, prototype)

Object.getPrototypeOf()

用于读取一个对象的原型对象

Object.getPrototypeOf(1) // Number {[[PrimitiveValue]]: 0}

参数是undefined或null，会报错

对象遍历

Object.keys()

返回数组，结果是参数对象自身的（不含继承的）所有可遍历属性的key名。

var obj = { foo: 'bar', baz: 42 }; Object.keys(obj) // ["foo", "baz"]

Object.values()

方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。

const obj = { foo: 'bar', baz: 42 }; Object.values(obj) // ["bar", 42]

Object.entries()

方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。

const obj = { foo: 'bar', baz: 42 }; Object.entries(obj) // [ ["foo", "bar"], ["baz", 42] ]

Object.fromEntries()

Object.fromEntries()方法是Object.entries()的逆操作，用于将一个键值对数组转为对象。

Object.fromEntries([ ['foo', 'bar'], ['baz', 42] ]) // { foo: "bar", baz: 42 }

ES6 扩展

字符串

正则

数值

Number.isInteger()

Number.EPSILON

函数

数组 

Array.from()

方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）

子主题

对象

解构赋值

数组

对象

Module 语法

export

import

import()

适用场景

按需加载。

条件加载

动态的模块路径

子主题

跨模块常量

for...of

数组

set

map

类似数组的对象（比如arguments对象、DOM NodeList 对象）

Generator 对象

字符串

async/await

使用形式

函数申明

async function foo() {}

函数表达式

const foo = async function () {};

对象的方法

let obj = { async foo() {} }; obj.foo().then(...)

class方法

class Storage { constructor() { this.cachePromise = caches.open('avatars'); } async getAvatar(name) { const cache = await this.cachePromise; return cache.match(`/avatars/${name}.jpg`); } } const storage = new Storage(); storage.getAvatar('jake').then(…);

箭头函数

const foo = async () => {};

promise

使用

方法

Promise.all()

接受一个数组作为参数

可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。

只有等到它们的结果都返回了,或者其中有一个变为rejected,才会触发then

Promise.race()

一个实例率先改变状态，p的状态就跟着改变

Promise.allSettled()