部门人员补充秋招结束,当时自己贡献的几道笔试题也可以放出来了,主要是针对T2-T5职级研发使用的。主要涉及正则运用、git使用、linux了解、webpack使用、简单css能力、前端自驱力、js基础等考察,笔试并没有对react、vue、redux等框架运用和核心原理源码的涉及,但是在面试过程中这些框架有点到面的深入沟通。

Zero认为前端这个职业,首先最重要的是思维(解决问题的方式),比如实现业务的方式有无数种,你选择的那种是不是最优雅、最健壮、最拓展性,100行代码能解决的业务问题,你能不能50行甚至20行就解决,顺带实现前面提到的优雅、健壮、可拓展的问题;其次是基础的深入以及扎实程度,有扎实的基础才能透过现象看本质,才能看懂各种神奇的源码,就像一个孩子手中的积木多了才有可能搭建更稳固和好玩的东西;最后才是各种框架和库的熟练使用程度,使用框架是为了提高效率,而不是为了偷懒。如果一遇到问题就想有没有api可以调,那么工作中拔高程度就很有限,做的再优秀也只是个api调用工程师。

仅供参考,每个部门不同时间笔试题都不一样,只能参考我们秋招(社)出题思路是啥样的,笔试还是回归到力库刷题吧~(=。=)

时间45分钟

使用正则去除价格小数位末尾无效’0’, 例如$90.10, $201.00, 转换成$90.1和$201

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let trimZero = (_price)=>{
trueif(typeof _price !== 'string' && typeof _price !== 'number' ) throw new Error('type error')
truelet price = String(_price)
truelet priceArr = price.split('.')
truelet priceArrLen = priceArr.length
trueif (priceArrLen === 1) return price
let reg = /0+\b/g
truelet intPrice = priceArr[0]
truelet floatPrice = priceArr[1]
truelet freshFloatPrice = floatPrice.replace(reg,'')
trueif(freshFloatPrice){
truetruereturn intPrice+'.'+freshFloatPrice
true}else{
truetruereturn intPrice
true}
}

使用CSS写出实心三角形 ▲ 和一个箭头 > 以及三字型状菜单图标 ≡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* 实心 */
{
width: 0;
height: 0;
border-width: 10px;
border-color: transparent transparent #000;
border-style: solid;
}

/* 箭头 */
{
width: 10px;
height: 10px;
border-width: 2px;
border-color: #000 #000 transparent transparent;
border-style: solid;
transform: rotate(45deg);
}

/* 菜单三字图片 */
{
width: 100px;
height: 20px;
background: #000;
background-clip: content-box;
padding: 20px 0;
border-width: 20px 0;
border-color: #000;
border-style: solid;
}

写出迁移Git仓库的流程的Git命令 , 假设原git仓库地址为git.jd.com/a/migration.git, 新仓拟定为coding.jd.com/b/migration.git

1
2
3
4
5
6
git clone –bare https://git.jd.com/a/migration.git
cd migration.git
git push –mirror https://coding.jd.com/b/migration.git
cd ..
rm -rf migration.git
git clone https://coding.jd.com/b/migration.git

Javascript 中Set, Map的用法,以及应用场景

可以替代switch枚举,具有极快查找速度
set不存储value,key值不能重复

1
2
Var dataMap = new Map().set(0, ‘llily’).set(1,’jim’)
dataMap.get(0)

浏览器标签之间实时的通信方式

Postmessage window.opener window Parent onmessage

同域名考虑使用onstorage

请将如下数组[7,[1,3],[8,[5,6,[2,4]]]] “拍平””排序”“删除最大数”, 输出数组[1,2,3,4,5,6,7]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const getRes = ()=>{
const getSingleArr = (originArr)=>{
const result = []
const generFn = (arr)=> arr.map(item=>{
if(Array.isArray(item)){
generFn(item)
}else{
result.push(item)
}
})
generFn(originArr)
return result
}
const singleArr = getSingleArr(a)
const sortsingleArr = singleArr.sort((a,b)=>{
return a-b
})
sortsingleArr.pop()
return s`ortsingleArr
}

Webpack打包构建可以采取哪些优化,提升构建速度和缩小打包体积 和Rollup的区别?

很多方法,用过的优化plugin列出来,比如dllPlugin

你最近所了解的前瞻性的前端技术或者方向有哪些?

如果关注前端圈的发展,其实很简单,随便说一些东西,比如GraphQL、serverLess、webAssembly、TypeScript项目、Vue3.0、PWA、DENO、Tink等等

原创内容,欢迎交流转载请注明出处