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

今天去面试了一家金融公司，招聘比较着急，一面后直接二面等结果，这种公司一般对 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>

复制代码

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

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

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

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

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

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

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

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