es6新特性面试题



本篇文章面试官问到es6时，你可以按照套路一一回答面试官的问题，给面试官你基础还不错的印象。

• let和const
• 变量的解构赋值
• 字符串、数组、函数、对象、运算符拓展
• Symbol
• Proxy
• Reflect
• Promise对象、async函数、Genertor函数语法
• Iterator和for...of循环
• class的基本语法
• class继承
• Module的语法
• Moule的语法
• Moudle的加载实现

块级作用域方面: 和有块级作用域，没有块级作用域，但有函数作用域

变量提升方面：支持变量提升，和不支持，且let会出现暂时性死区的问题

声明赋值方面：可以重复声明，和不能重复声明，且一旦初始化数据就不能赋值否则报错。

• 箭头函数没有自己的对象，它的this是它执行上下文的this
• 不可以当作，也就是说不能,否则会抛出一个错误
• 没有
• 不可以使用命令，因此箭头函数不能用作函数。

- Set

它类似于数组，成员的值是唯一的，的值，本身是一个构造函数，用于生成，主要的方法有、、，可以遍历，应用场景数组去重。

- weakSet

它与类似,也是不重复的值的集合。

它与的区别是：

• ，而不能是其他类型的值。

• 没有属性，不能遍历

• ，垃圾回收机制考虑WeakSet对该对象的引用，也就是说，如果其他对象都不在引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑对象还存在WeakSet之中。
• ：WeakSet适合临时存放一组对象，以及存放跟对象绑定的信息。只要这些对象在外部消失，它在WeakSet里面的引用也会消失，这样不容易造成内存泄漏

- Map

本质是键值对的集合（），键可以是对象，优化了。主要的方法为、，、，可以遍历。可以干各种类型转换。

- WeakMap

它与类似，它和的区别：

• 键名只接受对象

• 没有属性，不能遍历

• 是弱引用，不被垃圾回收机制回收

工作原理：垃圾回收机制依赖，如果一个值，垃圾回收机制就这块内存。结束使用该值，就会释放该值内存。如果忘记取消引用，就会导致内存无法释放，进而可能引起。

async/await优点：

• 它做到真正的串行的，代码阅读更
• 对于条件语句和其他流程比较，可以直接写到判断条件

• 处理复杂流程时，在代码方面有优势

async/await缺点：

• promise返回对象的对象，要借助try...catch...
• 用await可能会导致性能问题，因为会，之后的代码也许不依赖于前者，但仍然需要等待前者的完成，导致代码失去并发性。
• try...catch...内部的变量无法传递给下一个try...catchPromise和then/catch内部定义的变量

promise的一些问题：

• 一旦执行，就，链式调用多个不能随便跳出来
• 错误在，只能在内部预判处理，如果内部进行预判处理，如果不设置回调函数，Promise内部抛出的错误，不能反应到外部
• Promise内部如何执行，检测很难，当处于pending状态时，无法得知目前进展到哪一个阶段

• promise通过链式调用，直接在then中返回一个promise来进行成功之后的回调函数，用catch来做错误处理
• async是，async/await则将其变成的写法，即可以用捕获，，，

• 模块输出是一个（浅拷贝），模块输出是
• 是运行时加载，模块是编译时输出接口
• 模块的require()是模块，ES6模块的import命令是，有一个独立依赖的解析模块阶段

CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值

ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

补充点：可能面试官会问你还见过哪些规范

就可以说一下AMD和CMD

AMD规范的模块化：用 指定引用路径等，用定义模块，用加载模块。

CMD规范的模块化：用定义模块， 引用模块。

你可以举如下几个例子：

• 数组结构

• 对象解构

• 复杂解构

• 默认赋值

• 常用函数给默认参数

• 反引号（可以拼接一些变量）

• includes方法

• endsWith、startsWith方法

1. 将类数组转化数组（对象，Set，Map）
2. 用于将一组值，转换为数组

3. 填充数组
4. 和

4. ，和遍历数组
5. 表示某个数组是否包含给定的值

6. n默认为1，表示拉平次数

7. 只能展开一层数组

• super关键字

关键字总是指向函数所在的当前对象，而super指向当前对象的原型对象

• 遍历方式

1. fo...in
2. Object.keys()
3. Reflect.ownKeys(obj)

返回一个数组

• 新增方法

1. 方法判断两个值是否同一个值
2. 方法用于对象的合并,复制到目标对象,且是

• rest参数()

• name属性

• 箭头函数（常问普通函数的区别）
• 严格模式

只要使用了、、或者，那么函数内部就不能显式设定为严格模式，否则会报错。

指数运算符()

看更多拓展可以参考链接运算符的扩展 - ECMAScript 6入门 (ruanyifeng.com)

• class可以通过关键字实现继承
• 方法可以用来从子类上获取父类。
• 这个关键字，，既可以当作函数使用，也可以当作对象使用。
• 子类的 属性,表示构造函数继承，总是指向父类
• 子类的属性的 属性，表示方法的继承，总是指向父类的属性
• Mixin模式实现了继承多个类，参照以下写法

缺点：

1. 无法取消Promise，一旦新建就会立即执行，无法中途取消
2. 如果不设置回调函数，promise内部抛出的错误就无法反应到外部
3. 当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

优点：

1. 解决回调地狱问题
2. 代码扁平可读，.then方法链式调用
3. 更好的进行错误捕获

• 首先三者多是微任务
• 、、都会返回一个新的Promise
• 方法能接受两个参数，第一个是处理成功的函数，第二个处理失败的函数
• catch不管连接到哪一层，都能捕获上传未捕捉的错误。
• 的回调函数不接受任何参数，也就是没法知道最终状态是还是的

promise.all：

• 同时处理多个promise对象，包装到一个新的Promise实例（常会被问到），如果传递的参数不是promise实例，他会调用promise.resolve方法，将参数转换实例

举个例子，p1,p2,p3都是promise对象

其中p状态由,,，分成两种情况

1. 只有p1,p2,p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值成一个数组，传递给的回调函数
2. 只要p1,p2,p3之中有一个被rejected，p的状态就变成rejected的实例返回值，会传递给p的回调函数

promise.race：

• 同时处理多个promise实例，包装成一个新的Promise实例，如果传递的参数不是promise实例，他会调用promise.resolve方法，将参数转换实例

还是以一个例子说明

只有一种情况，只要,,任意一个的状态发生改变，p的状态也随之发生改变。

promise.any：

• 也是同时处理promise实例，包装成一个新的promise实例。
• 它的状态变化跟promise.race类似，只要参数实例有一个变成fulfilled状态，包装实例就会变成fulfilled状态；如果所有参数实例都变成状态，包装实例就会变成状态。
• 和，就是不会因为某个promise变成rejected状态而结束，必须要等到的参数promise变成rejected状态才结束

参考链接：

可能是目前最易理解的手写promise - 掘金 (juejin.cn)

手写Promise核心原理，再也不怕面试官问我Promise原理 - 掘金 (juejin.cn)

其最大的特点是：唯一值，独一无二的。

应用场景如下：

• 作为对象属性名（key）
• 使用symbol来代替常量

回答步骤：

• 什么是?

在目标对象之前架设一层拦截器，必须通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤修改。说上以下三点可以做的操作：

1. (target,propKey,receiver)：拦截对象属性读取
2. (target,popKey,value,receiver)：拦截对象属性的设置
3. (target,propKey)，拦截的操作，以及对象的方法，返回一个布尔值
4. (target,propKey)拦截的操作，返回布尔值

​ ......

• 什么是？

它是一种于proxy对象一样，也是ES6新增的api，它的设计目的如下几点：

1. 将Object对象的一些明显属于语言内部的方法
2. 修改某些object方法的返回结果，让其变得更合理
3. 让object操作都变成操作成为函数行为

4. reflect对象的方法与proxy对象一一对应，只要proxy对象，就能在proxy对象可以方便调用对应的reflect方法，完成默认行为，作为修改的基础,有了reflect对象更简单易懂

直接开讲：

• 在语法上，首先可以把它理解成，函数是一个状态机，封装了多个内部状态
• 形式上，函数是一个普通函数，两个特征。一是，关键字与函数名之间有一个信号；二是，函数体内部状态（语句在英语里就是“产出”）

应用场景：

• 异步操作的同步化表达(异步操作的后续操作可以放在语句下面)
• 控制流管理
• 部署接口
• 作为数据结构（可以看做一个数组结构，因为函数可以返回一系列的值）

主要聊以下几个方面：

• 什么是Iterator（遍历器)？

是一种机制，它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据只要部署iterator接口，就可以完成遍历操作。

• 遍历器的作用

1. 为各种数据结构，提供一个统一的、简便的访问接口
2. 使得数据结构的成员能够按某种次序排列
3. ES6创造一种新的遍历命令循环，Iterator接口主要提供for..of消费

注意：Object.prototype上没有没有实现[Symbol.iterator ]（），所以不能for...of遍历

• 调用iterator接口的场合

1. 结构赋值
2. 拓展运算符()
3. [1,2,3,4]
4. ,
6. ,,,

• 最后聊一下for...of

1. 循环内部调用的是数据结构方法
2. 循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串。

ps: 参考链接

Proxy - ECMAScript 6入门 (ruanyifeng.com)

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.mushiming.com/mjsbk/8058.html