写点什么

【前端面试题】关于一些 js 的一些面试题(金融行业),我和面试官扯了三个小时

用户头像
孙叫兽
关注
发布于: 2021 年 03 月 19 日

今天去面试了一家金融公司,招聘比较着急,一面后直接二面等结果,这种公司一般对 js 要求比较高,笔试题基本都是 js 相关的题,针对公司的客户要求也会做一些 jquery,vue.react 相关的插件,H5 及 webAPP。下面直接说题吧,我个人感觉比较冷门的一些知识点,不做又不行,硬着头皮干。回去的路上还有其他公司打电话给美团、快手招聘的一些第三方 HR 提问问题,相当于把你推给他们,你就属于外包,然后她也能赚佣金的感觉,这个不多说了。


1.防抖函数与节流函数?


场景:前端常见实用场景,有滚动加载、搜索框输入、窗口大小拖拽 Resize。


区别与联系:


函数节流:是确保函数特定的时间内至多执行一次。

函数防抖:是函数在特定的时间内不被再调用后执行。


他们都是可以防止一个函数被无意义的高频率调用.


函数防抖

    function throttle(method,context){
clearTimeout(method.timer)
method.timer = setTimeout(function(){
method.call(context)
},500)
}
复制代码


这个方法接受你想防抖的函数以及他的上下文,然后在 500ms 延时之后执行这个函数,若下一次函数在 500ms 内调用则清除上个定时器然后在延迟 500ms 执行,函数防抖有效的防止了一个函数被多次调用,比如 onresize,onmouseover 和上述的键盘监听事件


函数节流

    // 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
if(!canRun){
return
}
canRun = false
setTimeout( function () {
console.log("函数节流")
canRun = true
}, 500)
}
复制代码


用一个 flag 让该函数在 500ms 内只执行一次.

2.如何判断一个自然数能否被 2^n 整除?整除返回 true,不能整除返回 false。


这个问题是他们二面的金融技术主管直接问的,我当时回答的两种方法发现死活绕不过去次幂的问题,就只好放弃了。这里梳理一下。


方法一:二进制法


    function check(num){

return (num > 0) && ((num & (num - 1)) == 0);

}
复制代码


通过二进制的方法可以判断一个数 num 是不是 2 的 n 次方幂,规律可知,只要是 2 的次方幂,必然是最高位为 1,其余为 0,当 num-1 时,则最高位是 0,其余是 1.


按位与运算: 1&1=1 0&1=0 0&0=0 1&0=0


2 ---> 10 3 ---> 11


4 ---> 100 6 ---> 110


8 ---> 1000 7 ---> 111


例子:


8 的二进制 1000 8-1 的二进制 0111 按位与运算 1000&0111 --> 0000 所以 8 是 2 的 n 次方幂。


9 的二进制 1001 9-1 的二进制 1000 按位与运算 1001&1000 ---> 1000 所以 9 不是 2 的次方幂。


24 的二进制 11000 24-1 的二进制 10111 按位与运算 11000&10111 ---> 10000 所以 24 不是 2 的次方幂。


可以通过 num.toString(2)来写出 num 的二进制。

读一些源码的话,发现上面的是最优解。


方法二:取余法

    function check(num){

if(num != 1){

while(num != 1){

if(num%2 == 0){

num = num / 2;

}else{

return false;

}

}

return true;

}else{

return true;

}

}
复制代码


如何判断一个数是否是 2 的 n 次方幂,其简单判断方法就是这个数 num 直接除 2,若余数为 0,则 num/2 再除 2,再判断是不是余数是不是 0,是的话继续按上一步来,直到最后为 num=1。


比如:


2 2%2=0 (2/2)=1 是


4 4%2=0 (4/2)%2=0 (4/2/2)=1 是


6 6%2=0 (6/2)%2=1 不是


7 7%2=1 不是


24 24%2=0 (24/2)%2=0 (24/2/2)%2=0 (24/2/2/2)%2=1 不是

3.递归实现 1 到 100 的和?


我当时都忘记递归的形式了,直接用了 for 循环,他一面面试我,我又重新给他说了一个递归的实现。


方法一:递归


 function num(n){
if(n==1) return 1;
return num(n-1)+n;
}
num(100);

复制代码


方法二:for 循环


    var sum = 0;
for(i=0;i<=100;i++){
sum +=i;
}
console.log("sum="+sum);
复制代码


4.有一个数组【1,2,3,4,1,2】去掉其中的重复数字变为【3,4】.


我当时直接用的一个 for 循环,然后两个两个比较,有相同的就加个判断,都给她移除,最后就会剩下【3,4】。最后他给我剖析了一下,如果有三个相同的数字怎么搞?说我的思维不对,我日了狗了。不过对于这个题,程序确实没毛病。


方法一:优化遍历数组法


获取没重复的最右一值放入新数组。(检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断)


    function unique1(array){
var r = [];
for(var i = 0, l = array.length; i<l; i++){
for(var j = i + 1; j < l; j++)
if(array[i] == array[j]) j == ++i;
r.push(array[i]);
}
return r;
}
//测试代码:
var arr=[1,2,3,4,5,1,2];
var rel=unique1(arr);
console.log(rel);
复制代码


方法二:对象键值对法


新建一 js 对象以及新数组,遍历传入数组时,判断值是否为 js 对象的键,不是的话给对象新增该键并放入新数组。


    //注意点: 判断 是否为js对象键时,会自动对传入的键执行“toString()”,不同的键可能会被误认为一样;例如: a[1]、a["1"] 。解决上述问题还是得调用“indexOf”。
//速度最快, 占空间最多(空间换时间)
function unique(array){
var n = {}, r = [], len = array.length, val, type;
for (var i = 0; i < array.length; i++) {
val = array[i];
type = typeof val;
if (!n[val]) {
n[val] = [type];
r.push(val);
} else if (n[val].indexOf(type) < 0) {
n[val].push(type);
r.push(val);
}
}
return r;
}
//测试代码:
var arr=[1,2,3,4,5,1,2];
var rel=unique(arr);
console.log(rel);
复制代码


5.1rem,1em,1vh,1px 的含义


这个问题平时开发都会用到,也知道啥意思,书面表达可能写不好,这里整理一下。


rem


rem 是全部的长度都相对于根元素<html>元素。通常做法是给 html 元素设置一个字体大小,然后其他元素的长度单位就为 rem。


em


子元素字体大小的 em 是相对于父元素字体大小

元素的 width/height/padding/margin 用 em 的话是相对于该元素的 font-size


vw/vh


全称是 Viewport Width 和 Viewport Height,视窗的宽度和高度,相当于 屏幕宽度和高度的 1%,不过,处理宽度的时候 %单位更合适,处理高度的 话 vh 单位更好。


px


px 像素(Pixel)。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。


一般电脑的分辨率有{1920*1024}等不同的分辨率


1920*1024 前者是屏幕宽度总共有 1920 个像素,后者则是高度为 1024 个像素

6.calc,support,media 的含义及用法?


答: calc()从字面我们可以把他理解为一个函数 function。其实 calc 是英文单词 calculate(计算)的缩写,是 css3 的一个新增的功能,用来指定元素的长度。比如说,你可以使用 calc()给元素的 border、margin、pading、font-size 和 width 等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过 calc()最大的好处就是用在流体布局上,可以通过 calc()计算得到元素的宽度。


.elm{
/Firefox/
-moz-calc(expression);
/chromesafari/
-webkit-calc(expression);
/Standard/
calc();
}
.box{
background:#f60;
height:50px;
padding:10px;
border:5pxsolidgreen;
width:90%;/写给不支持calc()的浏览器/
width:-moz-calc(100%-(10px+5px)*2);
width:-webkit-calc(100%-(10px+5px)*2);
width:calc(100%-(10px+5px)*2);
}
复制代码


CSS 中的 @support 主要是用于检测浏览器是否支持 CSS 的某个属性,其实就是条件判断,如果支持某个属性,你可以写一套样式,如果不支持某个属性,你也可以提供另外一套样式作为替补。但是这里有一点需要注意的是:@support 对于浏览器的版本也是有要求的,不是说所有的浏览器以及其所有的版本都是支持 @support 的。

        @support(prop:value){
/自己的样式/
}
@supports (display: flex) { div { display: flex; }}
复制代码


media 属性规定媒体资源的类型(文件是为何种媒体/设备进行了优化)。


浏览器可使用该属性来判断它是否能播放这个文件。如果不能播放,则可以选择不进行下载。

    <!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
<source src="/i/movie.mp4" type="video/mp4" media="screen and (min-width:320px)">
<source src="/i/movie.ogg" type="video/ogg" media="screen and (min-width:320px)">
Your browser does not support the video tag.
</video>

<p><b>注释:</b>目前几乎没有浏览器支持 media 属性。</p>

</body>
</html>
复制代码


好啦,本期的内容就分享到这里,我们下期见!


好书不厌百回读,熟读自知其中意。让学习成为习惯,用知识改变命运,让博客见证成长,用行动证明努力。

如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “点赞” “评论” “收藏” 一键三连哦!

听说 👉 点赞 👈 的人运气不会太差,每一天都会元气满满呦!^ _ ^ ❤️ ❤️ ❤️

码字不易,大家的支持就是我坚持下去的动力。点赞后不要忘了👉 关注 👈我哦!

更多精彩内容请前往 孙叫兽的博客


微信公众号【电商程序员】,分享改变自己的项目。


如果以上内容有任何错误或者不准确的地方,欢迎在下面 👇 留个言。或者你有更好的想法,欢迎一起交流学习~~~


发布于: 2021 年 03 月 19 日阅读数: 30
用户头像

孙叫兽

关注

前端全栈工程师,java工程师 2019.07.22 加入

csdn博客专家:孙叫兽,多年的开发经验,开发过APP,小程序,网站及系统,以前从事java相关系统研发,目前从事保险,证券,金融相关的前端全栈开发工作,微信搜:电商程序员.QQ交流群:426360778

评论

发布
暂无评论
【前端面试题】关于一些js的一些面试题(金融行业),我和面试官扯了三个小时