【前端面试题】关于一些js的一些面试题（金融行业），我和面试官扯了三个小时
今天去面試了一家金融公司，招聘比較著急，一面后直接二面等結果，這種公司一般對js要求比較高，筆試題基本都是js相關的題，針對公司的客戶要求也會做一些jquery,vue.react相關的插件，H5及webAPP。下面直接說題吧，我個人感覺比較冷門的一些知識點，不做又不行，硬著頭皮干。回去的路上還有其他公司打電話給美團、快手招聘的一些第三方HR提問問題，相當于把你推給他們，你就屬于外包，然后她也能賺傭金的感覺，這個不多說了。
目錄
?
?1.防抖函數與節流函數？
2.如何判斷一個自然數能否被2^n整除？整除返回true,不能整除返回false。
3.遞歸實現1到100的和？
4.有一個數組【1,2,3,4,1，2】去掉其中的重復數字變為【3,4】.
5.1rem,1em,1vh,1px的含義
6.calc,support,media的含義及用法？
?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的。
?
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>?
好啦，本期的內容就分享到這里，我們下期見！
??????????????????? 好書不厭百回讀，熟讀自知其中意。讓學習成為習慣，用知識改變命運，讓博客見證成長，用行動證明努力。
??????????????????? 如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “點贊” “評論” “收藏” 一鍵三連哦！
??????????????????? 聽說 👉 點贊 👈 的人運氣不會太差，每一天都會元氣滿滿呦！^ _ ^ ?? ?? ??
??????????????????? 碼字不易，大家的支持就是我堅持下去的動力。點贊后不要忘了👉 關注 👈我哦！
??????????????????? 更多精彩內容請前往 孫叫獸的博客
微信公眾號【電商程序員】，分享改變自己的項目。
如果以上內容有任何錯誤或者不準確的地方，歡迎在下面 👇 留個言。或者你有更好的想法，歡迎一起交流學習~~~
?
?
總結
以上是生活随笔為你收集整理的【前端面试题】关于一些js的一些面试题（金融行业），我和面试官扯了三个小时的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【前端面试题】2021/3/12挺经典的
- 下一篇： 【粉丝需求】如何把一个前端网页都搞下来？