【笔试】前端笔试

朋友推荐去平安子公司一帐通去面试，没有初面，直接进入二面和三面，蛮简单的，过了，但放弃入职。下面谈谈面试题吧。

关于技术性的题目

1.document.ready和onload的区别？

页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。(可以说：ready 在onload 前加载！！！)

我的理解：一般样式控制的，比如图片大小控制放在onload 里面加载;

而：jS事件触发的方法，可以在ready 里面加载;

2.关于一个变量提升的题目

function a(){}
var a
console.log(typeof a) //function

还有就是介绍项目经验巴拉巴拉。。。还问我接收不接收996，瞬间心里一万cnm，当他问我的时候，我觉得是压力测试，我就说如果正常的是996，是不接收的，如果项目急，接收加班和周六赶项目。。。说了下平安薪资体系，年终奖4.8个月薪资，百分之多少能拿到吧，一般人都能拿到，以上是二面，三面是项目经理，也是问了些项目，根据自己说的再提一些问题。。。很好应付，我的体验是，只要感到项目经理不是搞前端的，面试立场自己完全hold住。。。然后就结束啦，哈哈哈。。。接下来就是人事打电话，准备好多东西，薪资证明，简历要输入平安简历库中心，还有iq,eq什么测试，到这一步我就没去做，好麻烦，都没告诉我给我多少薪资，人事说经过以上步骤才能定薪，后来果断放弃。。。没想到好事发生了，我司给我涨薪了。。。

下面是平安银行的面试，一个朋友的笔试题（直接贴图，哈哈哈）

答案

1.编程题，让我说直接jion(',')变成数组，然后再split(','),哈哈

但是要求要递归，递归嘛，也简单哟，主要考察是不是数组，其次是递归结束条件

精简版

const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));

更精简的实现

const groupBy = (arr, fn) =>
  arr.map(typeof fn === 'function' ? fn : val => val[fn]).reduce((acc, val, i) => {
    acc[val] = (acc[val] || []).concat(arr[i]);
    return acc;
  }, {});

plus：算法精简版推荐看github.com/Chalarangel… 蛮不错的

3.4.图形自己脑补吧，哈哈哈

下面是车轮互联的笔试题（还是我朋友面的）

1.物理分辨率是硬件所支持的，逻辑分辨率是软件可以达到的，互转的话乘以像素倍率

详细的说：

在iphone3gs的时候，逻辑分辨率是320*480，物理分辨率也是320*480

iphone4出了之后，逻辑分辨率和3gs一样是320*480，显示的内容是一样多的，但是物理分辨率变成了640*960，原来在3gs的一个像素内容，在iphone4上则填充了4个像素，因此虽然内容显示还是一样多，但是iphone4s的屏幕精细度比3gs高了2倍，像素倍率是2.

iphone5/5s/SE逻辑分辨率是320*568，和iphone4相比，逻辑分辨率宽度不变，高度增加了，所以相比iphone4，宽度内容显示一样多，但是高度内容增加。而物理分辨率是640*1136，像素倍率和iphone4/4s一样，是2倍

iphone6的逻辑分辨率是375*667，比iphone4/4s/5/5s/SE逻辑分辨率都要大，所以显示的内容更多。物理分辨率是750*1334，所以和上边谈到的机型一样，仍然是2倍的像素倍率

iphone6plus逻辑分辨率是414*736，物理分辨率是1080*1920，像素倍率约等于2.6. 渲染像素是1242*2208。做设计图的时候，也是假设1242*2208的物理分辨率（3的倍率）来做图的，系统会把图片压缩到1080*1920。所以6plus做设计图的尺寸1242*2208是基于假设，实际物理分辨率是1080*1920。据说是因为产能还有耗电的考虑，以后性能提升，也许会直接用1242*2208

2.　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

哪些元素会生成BFC:

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

3.同源是指，域名，协议，端口相同，三者有一个不同，则为跨域

解决方案：

node代理，具体自己起个node服务，在node中转发来自浏览器的请求，node服务和浏览器请求要同源，然后转发携带具体参数，cookie...,转发到后端的跨域接口，转发库可以用axios，支持在node，和浏览器都可以使用（具体实现可以参照github）。

nginx配置代理（基础配置，可以参照我之前写的文章）

在react,vue中可以用webpack-dev-server配置代理

跨域资源共享cors，后端设置Access-Control-Allow-Origin：*

jsonp

。。。其他感觉现实开发中，并不是很实用

4.var reg = /^[\u4e00-\u9fa5]{1}[A-Z]{1}[A-Z_0-9]{5}$/

三步

1、找基准（一般是以中间项为基准）

2、遍历数组，小于基准的放在left，大于基准的放在right

3、递归

        function quickSort(arr){
            //如果数组<=1,则直接返回
            if(arr.length<=1){return arr;}
            var pivotIndex=Math.floor(arr.length/2);
            //找基准，并把基准从原数组删除
            var pivot=arr.splice(pivotIndex,1)[0];
            //定义左右数组
            var left=[];
            var right=[];

            //比基准小的放在left，比基准大的放在right
            for(var i=0;i<arr.length;i++){
                if(arr[i]<=pivot){
                    left.push(arr[i]);
                }
                else{
                    right.push(arr[i]);
                }
            }
            //递归
            return quickSort(left).concat([pivot],quickSort(right));
        }

6.　　1.最高优先级是 (直接在标签中的设置样式，假设级别为1000)<div style="color:Red;"></div>

　　2.次优先级是（ID选择器 ,假设级别为100）   #myDiv{color:Red;}
　　3.其次优先级是（类选择器，假设级别为10） .divClass{color:Red;}
　　4.最后优先级是 （标签选择器，假设级别是 1）  div{color:Red;}
　　5.那么后代选择器的优先级就可以计算了啊
　　比如 .divClass  span { color:Red;}   优先级别就是：10+1=11

7.。。。

下次更新剩余题目答案。。。

总结

现在面试，小公司一般问框架和看你个人的学习能力，比如我公司，我一般看他的学习和研究能力，大公司一般看基础能力，我没怎么面过，不过网上很多都有文章参考。想要面试成功，自己要有扎实基础，业务能力，当然表达也很重要，个人的研究喜欢编码，一些公司也很看重。

juejin.im/post/5aaf2a…

libin1991 / libin_Blog