2019年最新前端面試題，js程序設計題
阿新 • • 發佈：2019-02-12
type 閉包 cal 實例 css 可能 方式 :after margin
都說機會是留給有準備的人的。
一年之計在於春，面對眾多的前端技術，需要時刻充電自己。
我現在整理一些前端js面試程序題。
1.判斷一個字符串中出現最多的字符，並計算出現的次數?
2.用css偽類實現下面的效果
<!DOCTYPE html> <html> <head> <title>button</title> <style type="text/css"> button{background:#000;color:#fff;border:0;width:150px;height:50px;position:relative;} button:after{ /*content:url(）; posittion:absolute; right:0; top:10px;*/ content:‘‘; width:30px; height:30px; border-radius:30px; background:#fff; display:block; position:absolute; right:-15px; top:10px; } </style> </head> <body> <button>button</button> </body></html> <script> var str=‘asdfssaaasasasasaa‘; var json={}; for(var i=0;i<str.length;i++){ if(!json[str.charAt(i)]){ console.log(str.charAt(i)); json[str.charAt(i)]=1; }else{ json[str.charAt(i)]++; document.write(json[charAt(i)); } }; var iMax=0; var iIndex=‘‘; for(var i in json){ if(json[i]>iMax){ iMax=json[i]; iIndex=i; } } console.log(‘出現次數最多的是:‘+iIndex+‘出現‘+iMax+‘次‘); </script>
解釋： 1. 針對css偽類元素，可以使用content:url()；引入一個圖片進行實現，也可以使用“content:‘ ‘ ”，設置塊狀元素實現，並使用定位
2.charAt(i)函數是獲取字符串i位置的字符，console.log(str.charAt(i)),可輸出a，s，d，f等字符
if(!json[str.charAt(i)])首先得到位置的字符char再判斷json【char】是否存在，如果不存在就賦值為1，如果存在就加1，
document.write(json[charAt(i));輸出json[char]當前的值
var iMax=0;
var iIndex=‘‘;
for(var i in json){
if(json[i]>iMax){
iMax=json[i];
iIndex=i;
}
比較一組數，並求出最大值，並輸出這個值
3.編寫一個方法，去掉一個數組的重復元素
列舉兩種實現方法：
1.
<script> /**第1種**/ var arr=[0,2,3,4,4,0,2]; var obj={}; var tmp=[]; for(var i=0;i<arr.length;i++){ if(!obj[arr[i]]){ obj[arr[i]]=1; tmp.push(arr[i]); } } console.log(tmp);//[0,2,3,4] /**第2種**/ var arr=[2,3,4,4,5,2,3,6]; arr2=[]; for(var i=0;i<arr.length;i++){ if(arr2.indexOf(arr[i])<0){ arr2.push(arr[i]); } } console.log(arr2);//[2,3,4,5,6] </script>
indexOf()可返回某個指定的字符串值在字符串中首次出現的位置
4.使用純js實現一組列表所在的索引值
<body> <ul> <li>test1</li> <li>test2</li> <li>test3</li> <li>test4</li> <li>test5</li> <li>test6</li> <li>test7</li> <li>test8</li> <li>test9</li> <li>test10</li> </ul> <script> var lis = document.querySelectorAll(‘ul li‘); /**1. 使用let 獲取索引 for(let i = 0, len = lis.length; i < len; i++) { lis[i].addEventListener(‘click‘, function () { console.log(i); }, false); } **/ /**2. 立即執行函數來切斷閉包對外部變量i的引用 for(var i = 0, len = lis.length; i < len; i++) { (function(i){ lis[i].addEventListener(‘click‘, function () { console.log(i); }, false); })(i) } **/
/**3.**/
var ul = document.querySelector(‘ul‘); var lis = document.querySelectorAll(‘ul li‘); ul.addEventListener(‘click‘, function (e) { var target = e.target; if(target.nodeName.toLowerCase() === ‘li‘) { console.log([].indexOf.call(lis, target)); } }, false); </script> </body>
5.判斷輸入的值是否為數字
<html> <input type="text" id="tel" maxlength="11" onkeypress="checkint()" onkeyup="value=value.replace(/\D/g,‘‘)"/> <script> function checkint() { var v = window.event.keyCode; if (!(v >= 48 && v <= 57)) { window.event.keyCode = 0; window.event.returnValue = false; alert("not a number;") } } </script> </htm>
6.獲取字符串中出現次數最少的字符，並輸出，此時需要用到hash
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>test</title> <script> // 獲取字符串中出現次數最少的字符 function getRareChar(str) { let hash = {}; // 將各個字符名字、首次出現位置及出現次數存到hash表 for(let i = 0, len = str.length; i < len; i++) { // 如果hash[str[i]]不存在，則對其進行初始化 hash[str[i]] = hash[str[i]] || {index: i, count: 0}; hash[str[i]].count++; // count計數自增 } // 因為哈希表不好排序，將它轉成數組 return Object.keys(hash).map(function (key) { return Object.assign({char: key}, hash[key]); // 根據count屬性進行升序排序 }).sort(function (a, b) { return a.count - b.count; // 取出count最小的 }).filter(function (e, i, arr) { return e.count === arr[0].count; // 在count值最小的集合裏面再根據index屬性進行升序排序 }).sort(function (a, b) { return a.index - b.index; })[0].char; } // 測試數據 var str = ‘ablfdasfdarleoeorwqajhfdsafdlladaasrjhehafdalhewadadfahwesaew‘; alert(getRareChar(str)); </script> </head> <body> </body> </html>
7.js的delete方法如何使用
<script> var arr = [1, 2, 3]; delete arr[1] //arr[1] = undefined; console.log(arr); // [1, undefined × 1, 2] console.log(delete arr[1]) // true console.log(arr[1]); // undefined /**如果想使用console.log(1 in arr)；就不能使用delete，此時需要賦值arr[1] = undefined; console.log(1 in arr) **/ </script>
8.你如何獲取瀏覽器URL中查詢字符串中的參數？
測試地址為：url?channelid=12333&name=xiaoming&age=23
實例如下：
function showWindowHref(){ var sHref = window.location.href; var args = sHref.split(‘?‘); if(args[0] == sHref){ return ""; } var arr = args[1].split(‘&‘); var obj = {}; for(var i = 0;i< arr.length;i++){ var arg = arr[i].split(‘=‘); obj[arg[0]] = arg[1]; } return obj; } var href = showWindowHref(); // obj console.log(href[‘name‘]); // xiaoming
9.常見兼容性問題？
* png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.也可以引用一段腳本處理. * 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。 * IE6雙邊距bug:塊屬性標簽float後，又有橫行的margin情況下，在ie6顯示margin比設置的大。 * 浮動ie產生的雙倍距離（IE6雙邊距問題：在IE6下，如果對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。） #box{ float:left; width:10px; margin:0 0 0 100px;} 這種情況之下IE會產生20px的距離，解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別) * 漸進識別的方式，從總體中逐漸排除局部。 首先，巧妙的使用“\9”這一標記，將IE遊覽器從所有情況中分離出來。 接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。 css .bb{ background-color:#f1ee18;/*所有識別*/ .background-color:#00deff\9; /*IE6、7、8識別*/ +background-color:#a200ff;/*IE6、7識別*/ _background-color:#1e0bd1;/*IE6識別*/ } * IE下,可以使用獲取常規屬性的方法來獲取自定義屬性, 也可以使用getAttribute()獲取自定義屬性; Firefox下,只能使用getAttribute()獲取自定義屬性. 解決方法:統一通過getAttribute()獲取自定義屬性. * IE下,event對象有x,y屬性,但是沒有pageX,pageY屬性; Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性. * 解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。 * Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決. * 超鏈接訪問過後hover樣式就不出現了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {} * 怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養成書寫DTD聲明的好習慣。現在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>` * 上下margin重合問題 ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發生重合。 解決方法，養成良好的代碼編寫習慣，同時采用margin-top或者同時采用margin-bottom。 * ie6對png圖片格式支持不好(引用一段腳本處理)
2019年最新前端面試題，js程序設計題