JS面试题（2）

一.Promise

1.名词约定

promise(首字母小写)对象指的是Promise实例对象

Promise首字母大写且单数形式，表示Promise构造函数

Promises首字母大写且复数形式，用于指代Promise规范

2.为什么有Promises这个东西

同步的方式异步的代码，用来解决回调地狱问题。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

3.什么是Promise

Promise，简单来说就是一个容易，里面保存着某个未来才会结束的事件的结果。从语法上，Promise是一个对象，从他可以异步获取操作的最终状态(成功或失败)。Promise是一个构造函数，对外提供统一的API，自己身上有all、reject、resolve等方法，原型上有then、catch等方法。

4.Promise的两个特点

（1）Promise对象的状态不受外界影响

pending 初始状态fulfilled 成功状态rejected 失败状态 Promis有以上三种状态，只有异步操作的结果可以决定当前是哪一种状态，其他人格操作都无法改变这个状态。

（2）Promise的状态一经改变就不能再变了，任何时候都可以得到这个结果，状态不可逆，只能由pending变成fulfilled或者由pending变成rejected

5.使用new来创建一个Promise对象

Promise接受一个[函数]作为参数，该函数的两个参数分别是resolve和reject。这两个函数就是[回调函数]resolve函数的作用：在异步操作成功时调用，并将异步操作的结果，作为参数传递出去。reject函数的作用：在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

6.Promise的API

（1）then方法

then方法就是把原来的回调写法分离出来，在异步操作执行完成后，用链式调用的方式执行回调函数。Promise的优势就在于这个链式回调。我们可以在then方法中继续写Promise对象并返回，然后继续调用then来进行回调操作。由两个参数：第一个是成功resolve调用的方法，第二个是失败reject调用的方法

7.Promise构造函数的超能力 Promise写法的本质就是把异步写法写成同步写法，传入Promise构造函数的函数参数会第一优先执行，无论这个函数多么的繁复，有多少回调或者计数器，统统都会优先执行。也就是说，我们只要new了一个promise()，那么promise构造函数的函数参数其实是同步代码，但是.then比较特殊，.then会等到promise对象实例有了结果，.then()里面的代码才会执行。链条上的每一个.then哦都会等前面的promise有了结果才会执行，promise构造函数的能力是promise系统的厉害之处。

8.reject()方法 reject方法就是把Promise的状态置为已失败，这时then方法执行"失败"情况的回调（then方法的第二参数）。

9.catch()方法

它可以和then的第二个参数一样，用来指定reject的回调。它的第二个作用是，当执行resolve的回调时，如果抛出异常了，那么也不会出错卡死js，而是会进到这个catch方法中。

10.all()方法 Promise的all方法提供了并行执行异步操作的能力，并且在所有的异步操作执行完后才执行回调。

11.race()方法 race的用法和all一样，只不过all是等所有异步操作都执行完毕后才执行then回调，而race的话只要一个异步操作执行完毕，就立刻执行then回调。

(注意：其他没有执行完毕的异步操作仍然会继续进行，而不是停止。)

使用场景：给异步请求设置超时时间，并且在超时后执行相应的操作。

二、async\await

1.词法定义

async是"异步"的简写，async用于申明一个异步的function

2.await可以认为是axync wait的简写，await用于等待一个异步方法执行完成。

2.特点

async的用法，它作为一个关键字放到函数的前面，这样普通函数就变为了异步函数。异步async函数调用，跟普通函数的使用方式一样。异步async函数返回一个promise对象async函数配合await关键字使用（阻塞代码下行线执行） 是异步方法，但是阻塞式的

3.async\await优点

方便级联调用：即调用依次发生的场景；同步代码编写方式：Promise使用then函数进行调用，一直点点点，是一种从左往右的横向写法，async\await从上到下，顺序执行，就像写同步代码，更符合编码习惯多个参数传递：Promise的then函数只能传递一个参数，虽然可以通过包装成对象来传递多个参数，但是会导致传递冗余信息，频繁的解析又重新组合函数，比较麻烦;async\await没有这个限制，可以当作普通的局部变量来处理，用let或者const定义的块级变量想怎么用就怎么用，像定义几个就定义几个，完全没有限制，也没有冗余工作。同步代码和异步代码可以一起编写：使用promise的时候最好将同步代码和异步代码放在不同的then节点中，这样结构更加清晰；async\await整个书写习惯都是同步的，不需要纠结同步和异步的区别，当然，异步过程需要包装成一个promise对象放在await关键点后面；async\await是对promise的优化：async\await是基于promise的，是进一步的一种优化，不过在写代码时，promise本身的api出现的很少，很接近同步代码的写法。

4.使用场景 async主要用来处理异步的操作 需求：执行的第一步，在执行第一步的结果返回给第二步使用。在ajax中先拿到一个接口的返回数据，后使用第一步返回的数据执行第二步操作的接口调用，达到异步操作。

三、ES6中的generator函数详解

1.Generator函数的定义

语法上可以理解成，Generator函数是一个状态机，封装了多个内部状态。形式上，Generator函数是一个普通函数，不同于普通函数，是可以暂停运行的，所以函数名之前要加星号，以示区别整个Generator函数就是一个封装的异步任务，或者说异步任务的容器，异步操作需要暂停的地方，都用yield语句。

2.什么时Generator函数

1.function关键字和函数之间有一个星号(*)，且内部使用yield表达式，定义不同的内部状态。 2.调用Generator函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象。

但是，调用Generator函数后，函数并不执行，返沪的也不是函数执行后的结果，而是一个指向内部状态的指针对对象。

下一步，必须调用遍历器对象的next方法，使得指针指向下一个状态，

Generator函数是分段执行的，yield表达式时暂停执行的标记，而next方法可以恢复执行。

next方法的作用是分段执行Generator函数，每次调用next方法，会返回一个对象，表示当前阶段的信息 value属性是yield语句后面的表达式的值，表示当前阶段的值。 done属性是一个布尔值，表示Generator函数是否执行完毕，即是否还有下一个阶段。

3.Generator函数的数据交换

（1）迭代器协议 定义了一种标准的方式来产生一个有限或者无线序列的值，当一个对象被认为是一个迭代器时，它实现的了一个next()的方法。

（2）Generator的用途 在javascript中，一个函数一旦被执行，就会执行到最后或者被return，运行期间不会被外部所影响打断，而Generator的出现就打破了这种函数运行的完整性。

（3）Generator函数与普通函数的区别 function关键字与函数名中间有一个*键，Generator函数使用yield表达式，直接调用Generator函数并不会执行，也不会返回运行结果，而是返回一个遍历器对象。调用Generator函数时需用到next（），如果有多个yield状态，要依次调用next（）。该生成器函数执行后会返回一个Iterator对象，对象内有yield的返回值，以及还有一个状态done的属性。

（4）Generator函数的语法 （5）next（） Generator函数（生成器）调用的唯一方法，且注意需依次调用next方法。对于普通的生成器，第一次next调用，相当于启动生成器，会从生成器函数的第一行代码开始执行，直到第一次执行完yield语句，跳出生成器函数。然后第二个next调用，进入生成器函数后，从yield语句的下一句开始执行，然后重新运行到yield语句，执行后，跳出生成器函数。

（6）promise、Generator、async/await 三者都是异步编程的解决方案，不同的是，promise为较早出来的，其次generator，最后是async/await，三者象征了前端进行解决异步编程的进化路程

四、箭头函数与普通函数的区别

1.箭头函数时匿名函数，不能作为构造函数，不能使用new

箭头函数相当于匿名函数，并且简化了函数的定义。箭头函数有两种格式，一种只包含一个表达式，连{…}和return都省略了，还有一种可以包含多条语句，这时就不能省略{…}和return

2.箭头函数不绑定arguments，取而代之需要用展开运算符解决…解决

3.箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值

4.箭头函数通过call()或apply()方法调用一个函数时，只传入一个参数，对this没有影响。

五、ES6新的数据类型Symbol

1.ES6引入了一种新的原始数据类型symbol，表示独一无二的值，它是javascript语言的第七种类型，前六种是：undefined、null、boolean、string、Number、Object

2.Symbol值通过symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种事原来就有的字符串，另一种就是新增的symbol类型，凡是属性名属于symbol类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。

3.symbol函数不能使用new命令，否则会报错，这是因为生成的symbol是一个原始类型的值，不是对象，也就是说，由于symbol值不是对象，所以不能添加属性，基本上，他是一种类似于字符串的数据类型。

六、ES6中的Set、WeakSet、Map、WeakMap数据结构

1.set

set本身是一个构造函数，用来生成set数据结构，类型数组Array，但是成员的值都是唯一的，没有重复的值 属性方法

size：返回set实例的成员总数 add(value)：添加某个值，返回set本身 delete(value)：删除某个值，返回是否删除成功的boolean has(value)；判断是否包含某个值，返回一个boolean clean()：清空set的所有成员，没有返回值。

2.add方法

let aSets = new Set(); aSets.add(1);// 添加1 aSets.add(2);// 添加2 # 结果{ 1,2}

另一种创建set的方法

let bSet = new Set([1,2,3,4,5]);

如果添加重复的value值，会怎么样

aSets.add(2); 结果：{1,2} 独一无二的

添加的数值类型，有什么区别

aSets.add('2'); 结果：{1,2,"2"}

size

aSets.size; // 结果： 2

delete方法

aSets.delete(1); 结果：true aSets.delete(3) #结果： false

has方法

aSets.has(1); #结果：true

clear方法

aSets.clear(); # aSets打印结果是{}

遍历对象

keys():返回一个键的遍历器 values():返回一个键的遍历器 entries():返回一个键值对的遍历器 forEach():使用回调函数遍历每个成员

创建一个Set

let list = new Set(["a","b","c","d"]);

keys

for(let key of list.keys()){ console.log(key); // a b c d }

values()

for(let value of list.values()){ console.log(value); // a b c d }

entries()

for(let [key,value] of list.entries()){ console.log(key,value); // a a b b c c d d }

forEach()

list.forEach(function(item){ console.log(item); // a b c d })

WeakSet

结构和Set类似，但是有写法区别 1、只能存储对象，其他类型的值不行 2、存储的对象是弱引用，也就是说垃圾回收机制不考虑WeakSet对该对象的引用。换种说法如果一个对象都不再被引用，那么垃圾回收机制会自动回收该对象所占用的内存，不会考虑该对象是否存在于WeakSet中。因此WeakSet是不可遍历的

新建一个WeakSet

let list = new WeakSet([{a:1,b:2},{c:3,d:4}]);

属性方法

add(value)方法 delete(value)方法 has(value)方法 不支持clear、size方法 如果增加其他类型的数值，则会报错

list.add(2); # Uncaught TypeError: Invalid value used in weak set

Map

类似于对象，是键值对的集合，但是key的范围不局限与字符串。各种类型均可以作为key

属性方法

set(key,value): 添加一个键值对 get(key): 获取一个key对应的value值 size: 返回Map结构的成员总数 has(key)：判断某个键是否存在Map结构中，返回boolean delete(key)： 删除某个指定的键值，返回boolean clear(): 清除Map结构所有的成员

set

let map = new Map(); map.set("1","a"); map.set("2","b"); map.set("3","c"); 或 let map = new Map([["1","a"],["2","b"],["3","c"]]); # delete map.delete("1"); # size map.size; # has map.has(1);// true #clear map.clear();

遍历方法

keys()：返回一个键名的遍历器 values(): 返回一个键值的遍历器 entries(): 返回一个键值对的遍历器 forEach(): 使用回调函数遍历Map每个成员

keys()

for(let key of map.keys()){ console.log(key); // 1 2 3 }

values()

for(let value of map.values()){ console.log(value); // a b c }

entries()

for(let [key,value] of map.entries()){ console.log(key,value); }

forEach()

map.forEach(function(value,key){ console.log(value,key); })

Map数据结构的定义

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。

Map和object的对比

Map类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。 也就是说， Object 结构提供了“字符串—值”的对应， Map 结构提供了“值—值”的对应是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

Map的深入理解 简单的方法set get has delete

const m = new Map() const o = {x:'isX'} m.set(o,'content') console.log(m); m.get(o) console.log(m); console.log(m.has(o)); m.delete(o) console.log(m.has(o));

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

const m = new Map([ ['name','lisi'], ['age','18'] ]) console.log(m.size);//2 console.log(m.has('name'));//true console.log(m.get('name'));//lisi

WeakMap

和Map类似，区别就是键只能是object类型 键名是对象的弱引用，因此所对应的对象可能会被自动回收，如果对象被回收后，WeakMap自动移除对应的键值对，WeakSet有助于防止内存泄露

属性方法

和Map类似，区别就是键只能是object类型 键名是对象的弱引用，因此所对应的对象可能会被自动回收，如果对象被回收后，WeakMap自动移除对应的键值对，WeakSet有助于防止内存泄露

属性方法

get(key) set(key,value) has(key) delete(key)

let map = new WeakMap(); map.set({a:"1"},"a"); map.set({b:"2"},"b"); map.set({c:"3"},"c"); 或 let map = new WeakMap([[{a:"1"},"a"],[{b:"2"},"b"],[{c:"3"},"c"]]);

WeakMap与Map的区别有两点

首先，WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。

其次，WeakMap的键名所指向的对象，不计入垃圾回收机制。 一旦不再需要这两个对象，我们就必须手动删除这个引用，否则垃圾回收机制就不会释放e1和e2占用的内存。

WeakMap 就是为了解决这个问题而诞生的，它的键名所引用的对象都是弱引用，即垃圾回收机制不将该引用考虑在内。因此，只要所引用的对象的其他引用都被清除，垃圾回收机制就会释放该对象所占用的内存。 也就是说，一旦不再需要，WeakMap 里面的键名对象和所对应的键值对会自动消失，不用手动删除引用。

WeakMap的专用场合就是，它的键所对应的对象，可能会在将来消失。 WeakMap结构有助于防止内存泄漏。

WeakMap只有四个方法可用： get()、set()、has()、delete()

WeakMap的经典应用

myElement是一个 DOM 节点，每当发生click事件，就更新一下状态。我们将这个状态作为键值放在 WeakMap 里，对应的键名就是myElement。一旦这个 DOM 节点删除，该状态就会自动消失，不存在内存泄漏风险。 内存泄漏指由于疏忽或错误造成程序未能释放已经不再使用的内存的情况。 弱集合、内存与垃圾回收

Map和Set中对象的引用都是强类型化的，并不会允许垃圾回收, 如果Map和Set中引用了大型对象（不再被使用）

ps: 已经从DOM树中删除的DOM元素，那么其回收代价是昂贵的从上面可以知道，ES6提供的WeakMap和WeakSet的弱集合，这些集合之所以是“弱的”，是因为它们允许从内存中清除不再需要的被这些集合所引用的对象