ES6面试、复习干货知识点汇总，前端面试题合集

最新推荐文章于 2024-05-06 15:33:27 发布

饱和面试题

最新推荐文章于 2024-05-06 15:33:27 发布

阅读量939

点赞数 26

分类专栏： 2024年前端程序员文章标签：前端面试 es6

本文链接：https://blog.csdn.net/m0_60635035/article/details/136824255

版权

2024年前端程序员专栏收录该内容

8 篇文章 0 订阅

订阅专栏

十、问：Symbol是什么，有什么作用？

答：Symbol是ES6引入的第七种原始数据类型（说法不准确，应该是第七种数据类型，Object不是原始数据类型之一，已更正），所有Symbol()生成的值都是独一无二的，可以从根本上解决对象属性太多导致属性名冲突覆盖的问题。对象中Symbol()属性不能被for…in遍历，但是也不是私有属性。

十一、问：Set是什么，有什么作用？

答：Set是ES6引入的一种类似Array的新的数据结构，Set实例的成员类似于数组item成员，区别是Set实例的成员都是唯一，不重复的。这个特性可以轻松地实现数组去重。

十二、问：Map是什么，有什么作用？

答：Map是ES6引入的一种类似Object的新的数据结构，Map可以理解为是Object的超集，打破了以传统键值对形式定义对象，对象的key不再局限于字符串，也可以是Object。可以更加全面的描述对象的属性。

十三、问：Proxy是什么，有什么作用？

答：Proxy是ES6新增的一个构造函数，可以理解为JS语言的一个代理，用来改变JS默认的一些语言行为，包括拦截默认的get/set等底层方法，使得JS的使用自由度更高，可以最大限度的满足开发者的需求。比如通过拦截对象的get/set方法，可以轻松地定制自己想要的key或者value。下面的例子可以看到，随便定义一个myOwnObj的key,都可以变成自己想要的函数。

function createMyOwnObj() {

//想把所有的key都变成函数，或者Promise,或者anything

return new Proxy({}, {

get(target, propKey, receiver) {

return new Promise((resolve, reject) => {

setTimeout(() => {

let randomBoolean = Math.random() > 0.5;

let Message;

if (randomBoolean) {

Message = 你的${propKey}运气不错，成功了;

resolve(Message);

} else {

Message = 你的${propKey}运气不行，失败了;

reject(Message);

}

}, 1000);

});

}

});

}

let myOwnObj = createMyOwnObj();

myOwnObj.hahaha.then(result => {

console.log(result) //你的hahaha运气不错，成功了

}).catch(error => {

console.log(error) //你的hahaha运气不行，失败了

})

myOwnObj.wuwuwu.then(result => {

console.log(result) //你的wuwuwu运气不错，成功了

}).catch(error => {

console.log(error) //你的wuwuwu运气不行，失败了

})

十四、问：Reflect是什么，有什么作用？

答：Reflect是ES6引入的一个新的对象，他的主要作用有两点，一是将原生的一些零散分布在Object、Function或者全局函数里的方法(如apply、delete、get、set等等)，统一整合到Reflect上，这样可以更加方便更加统一的管理一些原生API。其次就是因为Proxy可以改写默认的原生API，如果一旦原生API别改写可能就找不到了，所以Reflect也可以起到备份原生API的作用，使得即使原生API被改写了之后，也可以在被改写之后的API用上默认的API。

十五、问：Promise是什么，有什么作用？

答：Promise是ES6引入的一个新的对象，他的主要作用是用来解决JS异步机制里，回调机制产生的“回调地狱”。它并不是什么突破性的API，只是封装了异步回调形式，使得异步回调可以写的更加优雅，可读性更高，而且可以链式调用。

附录：15道ES6 Promise实战练习题

十六、问：Iterator是什么，有什么作用？(重要)

答：Iterator是ES6中一个很重要概念，它并不是对象，也不是任何一种数据类型。因为ES6新增了Set、Map类型，他们和Array、Object类型很像，Array、Object都是可以遍历的，但是Set、Map都不能用for循环遍历，解决这个问题有两种方案，一种是为Set、Map单独新增一个用来遍历的API，另一种是为Set、Map、Array、Object新增一个统一的遍历API，显然，第二种更好，ES6也就顺其自然的需要一种设计标准，来统一所有可遍历类型的遍历方式。Iterator正是这样一种标准。或者说是一种规范理念。

就好像JavaScript是ECMAScript标准的一种具体实现一样，Iterator标准的具体实现是Iterator遍历器。Iterator标准规定，所有部署了key值为[Symbol.iterator]，且[Symbol.iterator]的value是标准的Iterator接口函数(标准的Iterator接口函数: 该函数必须返回一个对象，且对象中包含next方法，且执行next()能返回包含value/done属性的Iterator对象)的对象，都称之为可遍历对象，next()后返回的Iterator对象也就是Iterator遍历器。

//obj就是可遍历的，因为它遵循了Iterator标准，且包含[Symbol.iterator]方法，方法函数也符合标准的Iterator接口规范。

//obj.Symbol.iterator 就是Iterator遍历器

let obj = {

data: [ ‘hello’, ‘world’ ],

Symbol.iterator {

const self = this;

let index = 0;

return {

next() {

if (index < self.data.length) {

return {

value: self.data[index++],

done: false

};

} else {

return { value: undefined, done: true };

}

};

}

};

ES6给Set、Map、Array、String都加上了[Symbol.iterator]方法，且[Symbol.iterator]方法函数也符合标准的Iterator接口规范，所以Set、Map、Array、String默认都是可以遍历的。

//Array

let array = [‘red’, ‘green’, ‘blue’];

arraySymbol.iterator //Iterator遍历器

arraySymbol.iterator.next() //{value: “red”, done: false}

//String

let string = ‘1122334455’;

stringSymbol.iterator //Iterator遍历器

stringSymbol.iterator.next() //{value: “1”, done: false}

//set

let set = new Set([‘red’, ‘green’, ‘blue’]);

setSymbol.iterator //Iterator遍历器

setSymbol.iterator.next() //{value: “red”, done: false}

//Map

let map = new Map();

let obj= {map: ‘map’};

map.set(obj, ‘mapValue’);

mapSymbol.iterator.next() {value: Array(2), done: false}

十七、问：for…in 和for…of有什么区别？

答：如果看到问题十六，那么就很好回答。问题十六提到了ES6统一了遍历标准，制定了可遍历对象，那么用什么方法去遍历呢？答案就是用for…of。ES6规定，有所部署了载了Iterator接口的对象(可遍历对象)都可以通过for…of去遍历，而for…in仅仅可以遍历对象。

这也就意味着，数组也可以用for…of遍历，这极大地方便了数组的取值，且避免了很多程序用for…in去遍历数组的恶习。

上面提到的扩展运算符本质上也就是for…of循环的一种实现。

十八、Generator函数是什么，有什么作用？

答：如果说JavaScript是ECMAScript标准的一种具体实现、Iterator遍历器是Iterator的具体实现，那么Generator函数可以说是Iterator接口的具体实现方式。

执行Generator函数会返回一个遍历器对象，每一次Generator函数里面的yield都相当一次遍历器对象的next()方法，并且可以通过next(value)方法传入自定义的value,来改变Generator函数的行为。

Generator函数可以通过配合Thunk 函数更轻松更优雅的实现异步编程和控制流管理。

十九、async函数是什么，有什么作用？

答：async函数可以理解为内置自动执行器的Generator函数语法糖，它配合ES6的Promise近乎完美的实现了异步编程解决方案。

附录：手写async await的最简实现（20行搞定）！阿里字节面试必考

二十、Class、extends是什么，有什么作用？

答：ES6 的class可以看作只是一个ES5生成实例对象的构造函数的语法糖。它参考了java语言，定义了一个类的概念，让对象原型写法更加清晰，对象实例化更像是一种面向对象编程。Class类可以通过extends实现继承。它和ES5构造函数的不同点：

a. 类的内部定义的所有方法，都是不可枚举的。

///ES5

function ES5Fun (x, y) {

this.x = x;

this.y = y;

}

ES5Fun.prototype.toString = function () {

return ‘(’ + this.x + ', ’ + this.y + ‘)’;

}

var p = new ES5Fun(1, 3);

p.toString();

Object.keys(ES5Fun.prototype); //[‘toString’]

//ES6

class ES6Fun {

constructor (x, y) {

this.x = x;

this.y = y;

}

toString () {

return ‘(’ + this.x + ', ’ + this.y + ‘)’;

}

Object.keys(ES6Fun.prototype); //[]

b.ES6的class类必须用new命令操作，而ES5的构造函数不用new也可以执行。

c.ES6的class类不存在变量提升，必须先定义class之后才能实例化，不像ES5中可以将构造函数写在实例化之后。

d.ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。

二十一、module、export、import是什么，有什么作用？

答：module、export、import是ES6用来统一前端模块化方案的设计思路和实现方案。export、import的出现统一了前端模块化的实现方案，整合规范了浏览器/服务端的模块化方法，用来取代传统的AMD/CMD、requireJS、seaJS、commondJS等等一系列前端模块不同的实现方案，使前端模块化更加统一规范，JS也能更加能实现大型的应用程序开发。

import引入的模块是静态加载（编译阶段加载）而不是动态加载（运行时加载）。

import引入export导出的接口值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

二十二、日常前端代码开发中，有哪些值得用ES6去改进的编程优化或者规范？

答：

常用箭头函数来取代var self = this;的做法。
常用let取代var命令。

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。