前端系列11集-ES6 知识总结

ES Module

优点

静态分析
浏览器和 Node 都支持
浏览器的新 API 能用模块格式提供
不再需要对象作为命名空间

export

用于规定模块的对外接口
输出的接口与其对应的值是动态绑定关系可以取到模块内部实时的值

import

用于输入其他模块提供的功能
具有提升效果，会提升到整个模块的头部，首先执行
静态执行不能使用表达式和变量
多次重复执行同一句 import 语句只会执行一次

import()

支持动态加载模块
适用场合按需加载条件加载动态的模块路径

ES6 模块与 CommonJS 模块

CommonJS 模块输出的是一个值的拷贝

ES6 模块输出的是值的引用

CommonJS 模块是运行时加载

ES6 模块是编译时输出接口

CommonJS 加载的是一个对象该对象只有在脚本运行完才会生成；ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成

CommonJS 模块的 require() 是同步加载模块 ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段

加载

CommonJS 的 require() 命令不能加载 ES6 模块，只能使用 import() 这个方法加载
ES6 模块的import命令可以加载 CommonJS 模块，但是只能整体加载，不能只加载单一的输出项

Class 类

本质

一个语法糖，实质依然是函数
只是让对象原型的写法更加清晰、更像面向对象编程的语法

静态方法

static 关键字
该方法不会被实例继承，直接通过类来调用
静态方法中的 this 指向类本身，而不是实例

静态属性

Class 本身的属性

私有方法和私有属性

只能在类的内部访问的方法和属性

new.target 属性

用在构造函数之中，返回 new 命令作用于那个构造函数
可以用来确定构造函数是怎么调用的
Class 内部调用 new.target，返回当前 Class
子类继承父类时，new.target 会返回子类
在函数外部，使用 new.target 会报错

继承

通过 extends 关键字实现继承，让子类继承父类的属性和方法

限制

子类必须在 constructor() 方法中调用 super()
不调用 super() 方法子类就得不到自己的 this 对象

Object.getPrototypeOf()

用来从子类上获取父类

super 关键字

作为函数调用时，代表父类的构造函数

作为函数时只能用在子类的构造函数之中

作为对象时

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

类的 prototype 属性和 __proto__ 属性

子类的 __proto__ 属性，表示构造函数的继承，总是指向父类
子类prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype属性

实例的 __proto__ 属性

指向父类实例的__proto__属性子类的原型的原型，是父类的原型

Promise

是异步编程的一种解决方案

特点

对象的状态不受外界影响三种状态pending（进行中）fulfilled（已成功）rejected（已失败）
状态不可逆：一旦状态改变，就不会再变从 pending 变为 fulfilled从 pending 变为 rejected
链式调用

缺点

无法取消一旦新建它就会立即执行，无法中途取消
如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部
当处于 pending 状态时，无法得知目前进展到哪一个阶段

实例方法

Promise.prototype.then()用于实例添加状态改变时的回调函数（可选）会返回的是一个新的 Promise 实例第一个参数是resolved状态的回调函数第二个参数是rejected状态的回调函数
Promise.prototype.catch()用于指定发生错误时的回调函数
Promise.prototype.finally() （ES2018）用于指定不管 Promise 对象最后状态如何都会执行的操作本质上是 then 方法的特例

静态方法

Promise.resolve()将现有对象转为 Promise 对象参数是一个 Promise 实例直接返回该实例参数是一个thenable对象（具有 then 方法的对象）转为 Promise 对象立即执行 thenable 对象的 then() 方法参数不是具有 then() 方法的对象或根本就不是对象原始值和不具有 then() 方法的对象返回一个 resolved 状态的新 Promise 对象不带有任何参数返回一个 resolved 状态的新 Promise 对象Promise.reject()返回一个 rejected 状态的新 Promise 对象
Promise.all()将多个 Promise 实例，包装成一个新的 Promise 实例，只有所有的 Promise 状态成功才会成功，如果其中一个 Promise 的状态失败就会失败
Promise.race()将多个 Promise 实例，包装成一个新的 Promise 实例，新的 Promise 实例状态会根据最先更改状态的 Promise 而更改状态
Promise.allSettled()（ES2020）将多个 Promise 实例，包装成一个新的 Promise 实例，新的 Promise 实例只有等到所有这些参数实例都返回结果，不管是 resolved 还是 rejected ，包装实例才会结束，一旦结束，状态总是 resolved
Promise.any()（ES2021）将多个 Promise 实例，包装成一个新的 Promise 实例，只要参数实例有一个变成 resolved 状态，包装实例就会变成 resolved 状态；如果所有参数实例都变成 rejected 状态，包装实例就会变成 rejected 状态

异步编程

Generator 函数

是 ES6 提供的一种异步编程解决方案
一个状态机，封装了多个内部状态
特征function 关键字与函数名之间有一个星号函数体内部使用 yield 表达式，定义不同的内部状态

async 函数（ES2017）

特征是 Generator 函数的语法糖function 关键字前添加 async函数体内部使用 await 表达式
对 Generator 函数的改进内置执行器更好的语义更广的适用性返回值是 Promise
使用注意点把 await 命令放在 try...catch 代码块中多个 await 命令后面的异步操作，如果不存在继发关系，最好同时触发。await 命令只能用在 async 函数之中

对象

简洁表示法

引用变量时可以简写
方法省略 function 关键字简写的对象方法不能用作构造函数

属性名表达式

obj['a' + 'bc'] = 123

属性的遍历

for...in遍历对象自身的和继承的可枚举属性，不含 Symbol 属性
Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名
Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名
Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性的键名
Reflect.ownKeys返回一个数组，包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举
首先遍历所有数值键，按数值升序排列其次遍历所有字符串键，按加入时间升序排列最后遍历所有 Symbol 键，按加入时间升序排列

super 关键字

指向当前对象的原型对象，只能用在对象的方法之中使用

扩展运算符

取出参数对象的所有可遍历属性等同于 Object.assign 方法

Object.is

比较两个值是否相等和全等运算符基本一致只有 +0 不等于 -0 和 NaN 等于自身处理不同

Object.assign

用于对象的合并将源对象的所有可枚举属性复制到目标对象参数处理只有一个参数时直接返回该参数参数不是对象会先转成对象然后返回第一个参数为 undefined 和 null 时会报错注意点浅拷贝同名属性会被替换处理数组时会把数组视为对象只能进行值的复制如果复制的值是一个取值函数，会求值后再复制用途为对象添加属性为对象添加方法克隆对象合并多个对象为属性指定默认值

Object.getOwnPropertyDescriptors

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

Object.getPrototypeOf

用来获取一个对象的原型对象

Object.setPrototypeOf

用来设置一个对象的原型对象并返回参数对象

遍历

Object.keys获取参数对象自身的所有可遍历属性的键名
Object.values获取参数对象自身的所有可遍历属性的键值
Object.entries获取参数对象自身的所有可遍历属性的键值对数组
都不含继承的属性都会过滤属性名为 Symbol 值的属性

Object.fromEntries

是 Object.entries 的逆操作将一个键值对数组转为对象

Iterator

是一种接口，为各种不同的数据结构提供统一的访问机制

作用

为各种不同的数据结构提供统一的访问机制
使数据结构的成员能够按某种次序排列
供 for...of 循环消费

遍历过程

创建一个指针对象，指向当前数据结构的起始位置
第一次调用指针对象的 next 方法，指针指向数据结构的第一个成员
第二次调用指针对象的 next 方法，指针指向数据结构的第二个成员
不断调用指针对象的next方法，直到它指向数据结构的结束位置

next 方法

返回一个对象
value 属性返回当前位置的成员
done 属性是一个布尔值，表示遍历是否结束

原生具备 Iterator 接口的数据结构

Array
Map
Set
String
TypedArray
函数的 arguments 对象
NodeList 对象

对象没有 Iterator 接口

因为对象的哪个属性先遍历，哪个属性后遍历是不确定的，需要开发者手动指定

for...of 循环

内部调用的是数据结构的 Symbol.iterator 方法

数组

扩展运算符

将一个数组转为用逗号分隔的参数序列

Array.of

将一组值，转换为数组弥补数组构造函数 Array 的不足

Array.from

将两类对象转为真正的数组类似数组的对象（array-like object）DOM 操作返回的 NodeListarguments和可遍历（iterable）的对象
第二个参数类似数组的map方法
将字符串转为数组能正确处理各种 Unicode 字符

copyWithin

在当前数组内部将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组

查找

find找出第一个符合条件的数组成员未找到返回 undefined
findIndex返回第一个符合条件的数组成员的位置未找到返回 -1
includes表示数组是否包含给定的值返回布尔值

fill

使用给定值填充一个数组

遍历

keys对键名的遍历
values对键值的遍历
entries对键值对的遍历
都返回一个遍历器对象可以用 for...of 循环

flat

将嵌套的数组拍平 默认拍平一层

flatMap

先对原数组的每个成员执行 map 再对返回值组成的数组执行 flat 方法只能拍平一层数组

at

返回参数对应位置的成员支持负索引 倒数的位置
超出范围返回 undefined

let 和 const

相同点

不存在变量提升

暂时性死区 变量在声明之前都是不可用的

不允许重复声明

块级作用域 块级作用域之中的函数声明语句类似于 let，在块级作用域之外不可引用

let 可以修改

const 不可修改 基本类型保证值不可变等同于常量 引用类型保证内存指针不可变

Symbol

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

注意点

Symbol 函数前不能使用 new 命令

Symbol 函数的参数只是表示对当前 Symbol 值的描述，相同参数的 Symbol 函数的返回值是不相等的

Symbol 值不能与其他类型的值进行运算

Symbol 值可以显式转为字符串和布尔值

内置的 Symbol 值

Proxy 代理器

在目标对象之前架设一层拦截，外界对该对象的访问，都必须先通过这层拦截

实例方法

返回一个可取消的 Proxy 实例 Proxy.revocable()

在 Proxy 代理的情况下，目标对象内部的 this 会指向 Proxy 代理

this 问题 在 Proxy 代理的情况下，目标对象内部的 this 会指向 Proxy 代理

函数

参数支持默认值

rest 参数 获取函数的多余参数，只能在最后一个

length 属性 不包括设置了默认值的参数 不包括 rest 参数

name 属性 返回该函数的函数名

箭头函数

特点

没有自己的 this 对象 不能用 call apply bind

不可以当作构造函数 不能使用 new

不可以使用 arguments 对象 用 rest 参数代替

不可以用作 Generator 函数 不能使用 yield

应用 简化和封装回调函数

不适用场合

定义对象的方法且该方法内部需要 this

需要动态 this

允许函数最后一个参数有尾逗号

字符串

模板字符串

可以当作普通字符串使用

用来定义多行字符串 所有的空格和缩进都会被保留

可以在字符串中嵌入任意的 JavaScript 表达式函数等

支持嵌套

标签模板 函数的特殊调用形式

alert`hello` => alert(['hello'])

新增方法

String 对象String.fromCodePoint从 Unicode 码点返回对应字符String.raw用于模板字符串的处理

String 实例

codePointAt 返回一个字符的码点 能够正确处理 4 个字节储存的字符 可测试一个字符由两个字节还是由四个字节组成

normalize Unicode 正规化，用来将字符的不同表示方法统一为同样的形式

查找字符

includes 表示是否找到了参数字符串

startsWith 表示参数字符串是否在原字符串的头部

endsWith 表示参数字符串是否在原字符串的尾部

repeat 返回一个将原字符串重复 n 次的新字符

padStart 头部补全

padEnd 尾部补全

replaceAll 一次性替换所有匹配 第二个参数支持特殊字符匹配

$&：匹配的字符串
$` ：匹配结果前面的文本
$'：匹配结果后面的文本
$n：匹配成功的第n组内容，n是从1开始的自然数（第一个参数必须是正则表达式）
$$：指代美元符号$

at 返回参数指定位置的字符 支持负索引 倒数的位置 超出范围返回 undefined

Reflect

概述

从 Reflect 对象上可以拿到语言内部的方法

修改某些 Object 方法的返回结果，让其变得更合理

让 Object 操作都变成函数行为

静态方法

数值

二进制和八进制表示法

二进制用前缀 0b 或 0B 表示

八进制用前缀 0o 或 0O 表示

数值分隔符

使用下划线 _ 作为分隔符，没有指定间隔的位数
注意点不能放在数值的最前面或最后面不能同时两个或两个以上的分隔符小数点的前后不能有分隔符科学计数法里面表示指数的 e 或 E 前后不能使用

Number 对象新增方法

Number.isFinite检查一个数值是否有限的，即不是 Infinity
Number.isNaN检查一个值是否为 NaN
Number.parseInt解析一个字符串，并返回一个整数
Number.parseFloat解析一个字符串，并返回一个浮点数
Number.isInteger判断一个数值是否为整数受 IEEE 754 标准限制超出 JS 安全数范围会误判

都是从全局方法上移植过来的

只返回第一个数字

允许开头和结尾空格

第一个字符不能被转换为数字 时返回 NaN

Number.EPSILON

常量表示 1 与大于 1 的最小浮点数之间的差

JavaScript 能够表示的最小精度

安全整数

Number.MAX_SAFE_INTEGER表示在 JavaScript 中最大的安全整数2 的 53 次方 - 1
Number.MIN_SAFE_INTEGER表示在 JavaScript 中最小的安全整数字-(2 的 53 次方 - 1)
Number.isSafeInteger判断一个整数是否为安全整数

Math 对象的扩展

BigInt 数据类型

表示整数，可以精确表示任何位数的整数
注意点BigInt 函数必须有参数且参数必须可以转为数值，否则会报错BigInt 不能与普通数值进行混合运算BigInt 与其他类型可以使用比较和相等运算符

新的数据结构Set 和 Map

Set

类似于数组成员的值都是唯一的
Set 函数可以接收一个数组用于初始化实例属性Set.prototype.size返回 Set 实例的成员总数
实例方法Set.prototype.add(value)添加某个值返回 Set 实例本身Set.prototype.delete(value)删除某个值返回一个布尔值表示删除是否成功Set.prototype.has(value)返回一个布尔值表示该值是否为 Set 的成员Set.prototype.clear()清除所有成员没有返回值
遍历方法遍历顺序为插入顺序Set.prototype.keys()返回键名的遍历器Set.prototype.values()返回键值的遍历器Set.prototype.entries()返回键值对的遍历器Set.prototype.forEach()使用回调函数遍历每个成员Set 结构没有键名，只有键值keys 方法和 values 方法的行为完全一致

WeakSet

WeakSet 结构与 Set 类似都是不重复的值的集合
注意点成员只能是对象不能是其他类型，否则会报错WeakSet 中的对象都是弱引用 垃圾回收机制不考虑 WeakSet 对该对象的引用WeakSet 不能遍历
实例方法WeakSet.prototype.add(value)WeakSet.prototype.delete(value)WeakSet.prototype.has(value)

WeakRef （ES2021） 创建对象的弱引用

Map

类似于对象是键值对的集合键的值可以是各种类型的值（包括对象）
Map 构造函数接收一个二维数组作为参数
实例属性Map.prototype.size返回 Map 结构的成员总数
实例方法Map.prototype.set(key, value)设置键名 key 对应的键值为 value 并返回 Map 实例Map.prototype.get(key)读取key对应的键值，找不到时返回 undefinedMap.prototype.has(key)返回一个布尔值表示 key 是否在当前 Map 实例中Map.prototype.delete(key)删除某个 key 返回一个布尔值表示删除是否成功Map.prototype.clear()清除所有成员没有返回值遍历方法 遍历顺序为插入顺序Map.prototype.keys()返回键名的遍历器Map.prototype.values()返回键值的遍历器Map.prototype.entries()返回所有成员的遍历器Map.prototype.forEach()遍历 Map 的所有成员

WeakMap

WeakMap结构与Map结构类似都是键值对的集合
注意点只接受对象作为键名（null 除外）WeakMap 键名所指向的对象不计入垃圾回收机制WeakMap 弱引用的只是键名，键值是正常引用WeakMap 没有遍历操作
实例方法WeakMap.prototype.set(key, value)设置键名 key 对应的键值为 value 并返回 WeakMap 实例WeakMap.prototype.get(key)读取key对应的键值，找不到时返回 undefinedWeakMap.prototype.has(key)返回一个布尔值表示 key 是否在当前 WeakMap 实例中WeakMap.prototype.delete(key)删除某个 key 返回一个布尔值表示删除是否成功

运算符

指数运算符 ** （ES2016）右结合 从最右边开始计算
链判断运算符 ?. （ES2020）
Null 判断运算符 ??（ES2020）
逻辑赋值运算符 （ES2021）或赋值运算符 ||=x ||= y 等同于 x || (x = y)与赋值运算符 &&=x &&= y 等同于 x && (x = y)Null 赋值运算符 ??=x ??= y 等同于 x ?? (x = y)
只有运算符左侧的值为 null 或 undefined 时 才会继续右侧的运算

加群联系作者vx：xiaoda0423

仓库地址：https://github.com/webVueBlog/WebGuideInterview