frontend9 / fe9-interview

前端九部 - 面试题库

1. 面试题库介绍

九部前端面试题库是九部成员整理贡献的一个前端面试题库，任何人都可以把自己遇到的面试问题分享出来，任何人都可以回答，优质答案的提供者有机会进入《九部核心答题小组》

1.1 如何成为核心答题小组正式成员

1. 选择一道已有面试题，全面细致认真的回答该问题
2. 或者自己提问一道面试题，全面细致认真的回答自己提问的面试题
3. 联系常务运营同学，由常务运营同学审核答案的格式编排和内容质量
4. 常务运营同学审核通过，加入九部官方答题小组正式微信群

2. 组织结构和职责

2.1 组长

winter

阮一峰

2.2 组长职责

不定期对面试题及答案进行点评，对高质量面试题问答，选编进九部语雀的 《前端九部 - 面试题库精选集》。

2.3 常务运营

2.4 常务运营职责

1. 负责新成员的接待及咨询帮助
2. 筛选高质量面试题答案创作者，引导成为九部面试题核心答题小组组员
3. 对面试题库的issue进行管理，包括技术栈/公司/面试环节的标签的整理
4. 将高质量面试题，选编进前端九部在语雀上的 《前端九部 - 面试题库精选集》

3 历史面试题索引

3.1 以技术栈为标签

前端基础（html、css、javascript、async、typescript、babel）

编程基础(http、algorithm、compile、regular-expression)

工程相关 (think、build、webpack)

React全家桶（react、router、redux、mobx）

vue全家桶 (vue、vuex)

Ant Design系列（Ant Design、Ant Design Mobile、Ant Design Pro、dva）

Nodejs（nodejs、egg、koa） umi

体验度量和优化(performance)

可视化（antV）

3.2 面试公司为标签

阿里巴巴、淘宝网、天猫、全球速卖通、阿里巴巴国际站、1688、阿里妈妈、阿里云、菜鸟网络，蚂蚁金服

腾讯、微信、QQ、财付通，微信支付、理财通、腾讯游戏、腾讯影业、腾讯电竞、腾讯动漫、腾讯视频、QQ音乐、企鹅影视、腾讯音乐娱乐集团、企鹅电竞、腾讯网、腾讯新闻、天天快报、应用宝、QQ浏览器、腾讯手机管家、腾讯地图、腾讯开放平台、腾讯云、腾讯AILab、优图实验室

网易、考拉、严选

字节跳动、今日头条

有赞

软通

百分点

兑吧

3.3 面试环节为标签

笔试、一面、二面、三面、四面、五面、

fe9-interview's Issues

携程：数组去重和数组扁平化（一面）

面试公司：

携程

面试环节：

一面

问题：

1.数组去重
2.数组扁平化

今日头条： 对async/await的理解以及内部原理（一面）

To：
focus7eleven

面试公司：
今日头条

面试环节：
一面

问题：
谈谈对async/await的理解，以及内部原理

今日头条: 介绍下Promise，内部实现(一面)

To：
arixse

面试公司：
今日头条

面试环节：
一面

问题：
介绍下Promise，内部实现

有赞: 为什么在类实例中可以访问this.setState (二面)

To：
baohuse

面试公司：
有赞

面试环节：
二面

问题：
为什么在类实例中可以访问this.setState

To Tom0121 前端开发中设计到什么模式

To：

https://github.com/Tom0121

面试公司：

未知

面试环节：

未知

问题：

前端开发中用到什么设计模式

如何将 node 标准的回调 API 在 fibjs 内转为"同步"调用形式（一面）

To：
Tapir

面试公司：
未知

面试环节：
一面

问题：
如何将 node 标准的回调 API 在 fibjs 内转为"同步"调用形式

滴滴: JS异步解决方案的发展历程以及优缺点（一面）

面试公司：

滴滴

面试环节：

未知

问题：

JS异步解决方案的发展历程以及优缺点。

深信服：实现一个go()函数（二面）

To：
icyfe

面试公司：
深信服

面试环节：
二面

问题：
实现
go('l')//gol
go()('l')//gool
go()()()('l');//返回goool

自己的答案：

实现如下：

 function go(...arg1) {
    let str = 'go'
    var addarg = function (...arg2) {
        if (!arg2[0]) {
            str += 'o' //当没有参数时候就累加默认的参数o 并返回当前函数保持对str的引用产生闭包
            return addarg
        } else {
            return str += arg2[0]//如果是有参数就直接返回最后累加的字符串
        }
    }
    return addarg(...arg1)
}
console.log(go('l'));//gol
console.log(go()()()()('l'));//goooool

解答思路：
说下基本的思路，这题考察闭包，原理上就是当没有传入参数时就默认是传‘o’然后累加起来返回函数本身，当最后有参数时就返回之前累计的参数拼接字符传返回。
推荐阅读相关文章函数科里化

为什么使用 ctrl+f5 或启用开发者面板中 Disable cache 选项后还会存在读取缓存的现象

面试公司：

不明

面试环节：

不明

问题：

为什么使用 ctrl+f5 和启用开发者面板中 Disable cache 选项后还会存在读取缓存的现象

To weiruizhang：常用的跨域请求方法有哪些（软通）

To：

weiruizhang

面试公司：

软通动力

面试环节：

一面

问题：

常用的跨域请求方法有哪些？

自己的答案：

由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。跨域的解决方案有以下几种。
1、jsonp
这种方式主要是通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。在客户端注册一个callback，然后把callback的名字传给服务器，此时，服务器先生成json数据，然后以js语法的方式，生成一个function，function的名字就是传递上来的参数jsonp，最后将json数据直接以入参的方式，放置到function中，生成了一段js语法的文档，返回给客户端，客户端浏览器，解析script标签，并执行返回的js文档，此时数据作为参数，传入到了客户端预定义好的callback函数里。这种方式有一个很直接的缺点，就是只能够获取数据不能发送数据，即请求方式只能为GET。
前端代码片段
<script> var _script = document.createElement('script'); _script.type = "text/javascript"; _script.src = "http://localhost:8888/jsonp?callback=f"; document.head.appendChild(_script); </script>
后端代码片段
var query = _url.query; console.log(query); var params = qs.parse(query); console.log(params); var f = ""; f = params.callback; res.writeHead(200, {"Content-Type": "text/javascript"}); res.write(f + "({name:'hello world'})"); res.end();

2、Proxy代理
代理的方式首先将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。比较常见的有nginx反向代理。我们在与服务器发生信息请求时，都会经过代理（中间层），由代理帮我们来收发请求，跨域的问题交给代理解决，前端还是正常发送请求就可以，不用理会是否跨域的问题。

3、iframe通信方法也可以实现不同域之间的通信。
利用window.postMessage方法，外页面通过绑定message方法，监听子级页面中（iframe）绑定的postMessage方法，实现不同域之间的通信。

微店: 将二维数组转成一维数组的方法有哪些（一面）

To：
@FishPlusOrange

面试公司：
微店

面试环节：
一面

问题：
假设现在有一个二维数组，如果我们要把该二维数组转成一维数组，你能想到的方法有哪些呢

兑吧: prototype 和 proto 区别（一面）

To：
@hys1440248234

面试公司：
兑吧

面试环节：
未知

问题：
prototype 和 proto 区别

51 信用卡: apply，call，bind 的区别（一面）

面试公司：

51信用卡

面试环节：

一面

问题：

请说明 apply，call，bind 的区别及用法

网易: 介绍观察者模式（一面）

To：
Vdan123

面试公司：
网易

面试环节：
一面

问题：
请介绍观察者模式

有赞: 介绍暂时性死区(一面)

To：
yingpengsha

面试公司：
有赞

面试环节：
一面

问题：
介绍暂时性死区

百分点：算法：前K个最大的元素（一面）

To：
foreverzmy

面试公司：
百分点

面试环节：
一面

问题：
算法：前K个最大的元素

阿里巴巴：实现一些主流框架的循环渲染（笔试）

面试公司：

阿里巴巴

面试环节：

笔试

问题：

var items = [
  { name: 'item1' },
  { name: 'item2' }
];
var str = '<div ali-for="item in items">{{item.name}}<div>';

// 对应生成的dom  
ParseDom(str);
// <div>item1</div>  
// <div>item2</div>  

阿里：Koa-body原理（一面）

面试公司：

阿里

面试环节：

一面

问题：

Koa-body原理

To littleKnave: 实现一个Promise.prototype.first（今日头条）

To：

https://github.com/AlexZ33

面试公司：

今日头条，可视化部门。

面试环节：

一面

问题：

// （1.）最短时间内找出（2.）响应速度最快且（3.）成功的接口。
// 实现 findFatest 函数。

const urls = [
    'https://www.toutiao.com/a',
    'https://www.toutiao.com/b',
    'https://www.toutiao.com/bb',
    'https://www.toutiao.com/d',
    'https://www.toutiao.com/e',
]
findFatest(urls).then(url => console.log(url)

备注：

这是面试后自己的总结，抛砖引玉。
建议大家思考后有了自己的答案在看我的思路对不对。
面试题，实现一个Promise.first

阿里巴巴：浏览器的强缓存和协商缓存（一面）

面试公司：

阿里

面试环节：

一面

问题：

说一说你对浏览器强缓存和协商缓存的理解

有赞: 在不改变原数组的前提下，添加或删除某个元素（一面）

To：

@FishPlusOrange

面试公司：

有赞

面试环节：

一面

问题：

在不改变原数组的前提下，向该数组的首位添加一个新的元素，得到一个新数组，你能想到的方法有哪些呢

同样的前提条件下，删除该数组的最后一个元素，得到一个新数组，你能想到的方法有哪些呢

阿里巴巴: 使用伪码实现 npm install 部分内容（二面）

面试公司：

阿里巴巴

面试环节：

二面（编程面）

问题：

• 假如老板给你 一个 npm 包的列表 ，要你找出这些 npm 包的所有依赖包名，简述一下实现思路

• 对包和包的依赖列表进行缓存 -> A 和 B 都依赖了 C，从 A 分析一次后，B 还需要再分析吗？

• 使用并发，但要控制并发量 -> 一个包一个包的查会不会太慢？请求这么频繁 npm 会不会封你的 ip

• 找依赖的时候使用循环，而不是递归 -> 如果一个包的依赖非常非常复杂，内存爆了怎么办
  具有失败重试和离线缓存 -> 中途网络挂掉怎么处理？失败的一直失败怎么办？

• 利用伪码实现即可

网易考拉：表单可以跨域吗 （一面）

这是一个示例模板，请大家遵照这个issue的格式来提交面试题（直接使用issue的面试题模板即可生成以下格式）

To：
https://github.com/acodercc

面试公司：
网易考拉

面试环节：
一面

问题：
表单可以跨域吗

腾讯：js中精度问题及解决方案（一面）

面试公司：

腾讯

面试环节：

一面

问题：

遇到过js精度问题吗？是怎么解决的？

爱云校：算法两道（一、1-100所有的素数 二、快速排序）（笔试）

面试公司：

爱云校

面试环节：

一面笔试

问题：

1.写出一个方法输出1-100内的所有素数。
2.给定一个整数数组，实现快速排序算法进行升序排列。如[2, 5, 8, 9, 3] =>[2, 3, 5, 8, 9]

备注：

1. 素数定义为一个大于1的自然数，除了1和它自身外，不能被其他自然数整除的数。

阿里巴巴：将输入的数组组装成一颗树状的数据结构（一面）

To：
robinson90

面试公司：
阿里

面试环节：
一面

问题：
将输入的数组组装成一颗树状的数据结构 要求程序具有侦测错误输入的能力，假如数据是下面的，

let dataArr =[
{id:1, name: 'i1'},
{id:2, name:'i2', parentId: 1},
{id:4, name:'i4', parentId: 3},
{id:3, name:'i3', parentId: 2},
{id:8, name:'i8', parentId: 7}
]

有赞: sum(2, 3)实现sum(2)(3)的效果（一面）

To：

https://github.com/IWSR

面试公司：

有赞

面试环节：

网上找的

问题：

sum(2, 3)实现sum(2)(3)的效果