2019年最新前端面試題，js程序設計題

時間 2019-12-11

標籤 2019年最新端面試題程序設計欄目 JavaScript 简体版

原文原文鏈接

都說機會是留給有準備的人的。css

一年之計在於春，面對衆多的前端技術，須要時刻充電本身。html

我如今整理一些前端js面試程序題。前端

1.判斷一個字符串中出現最多的字符，並計算出現的次數?html5

2.用css僞類實現下面的效果node

<!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:' ' 」，設置塊狀元素實現，並使用定位web

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.編寫一個方法，去掉一個數組的重複元素json

列舉兩種實現方法：數組

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和IE七、IE6分離開來，這樣IE8已經獨立識別。

  css
      .bb{
       background-color:#f1ee18;/*全部識別*/
      .background-color:#00deff\9; /*IE六、七、8識別*/
      +background-color:#a200ff;/*IE六、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圖片格式支持很差(引用一段腳本處理)

到底在調用哪一個函數？

再看下原題，如今知道了程序中有兩個fun函數(第一個和第三個相同)，遂接下來的問題是搞清楚，運行時他執行的是哪一個fun函數？

function fun(n,o) {
 console.log(o)
 return {
  fun:function(m){
   return fun(m,n);
  }
 };
}
var a = fun(0); a.fun(1); a.fun(2); a.fun(3);//undefined,?,?,?
var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,?
var c = fun(0).fun(1); c.fun(2); c.fun(3);//undefined,?,?,?
//問:三行a,b,c的輸出分別是什麼？

一、第一行a

var a = fun(0); a.fun(1); a.fun(2); a.fun(3);
能夠得知，第一個fun(0)是在調用第一層fun函數。第二個fun(1)是在調用前一個fun的返回值的fun函數，因此：

第後面幾個fun(1),fun(2),fun(3),函數都是在調用第二層fun函數。

遂：

在第一次調用fun(0)時，o爲undefined；

第二次調用fun(1)時m爲1，此時fun閉包了外層函數的n，也就是第一次調用的n=0，即m=1，n=0，並在內部調用第一層fun函數fun(1,0);因此o爲0；

第三次調用fun(2)時m爲2，但依然是調用a.fun，因此仍是閉包了第一次調用時的n，因此內部調用第一層的fun(2,0);因此o爲0

第四次同理；

即：最終答案爲undefined,0,0,0

二、第二行b

var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,?
先從fun(0)開始看，確定是調用的第一層fun函數；而他的返回值是一個對象，因此第二個fun(1)調用的是第二層fun函數，後面幾個也是調用的第二層fun函數。

遂：

在第一次調用第一層fun(0)時，o爲undefined；

第二次調用 .fun(1)時m爲1，此時fun閉包了外層函數的n，也就是第一次調用的n=0，即m=1，n=0，並在內部調用第一層fun函數fun(1,0);因此o爲0；

第三次調用 .fun(2)時m爲2，此時當前的fun函數不是第一次執行的返回對象，而是第二次執行的返回對象。而在第二次執行第一層fun函數時時(1,0)因此n=1,o=0,返回時閉包了第二次的n，遂在第三次調用第三層fun函數時m=2,n=1，即調用第一層fun函數fun(2,1)，因此o爲1；

第四次調用 .fun(3)時m爲3，閉包了第三次調用的n，同理，最終調用第一層fun函數爲fun(3,2)；因此o爲2；

即最終答案：undefined,0,1,2

三、第三行c

var c = fun(0).fun(1); c.fun(2); c.fun(3);//undefined,?,?,?
根據前面兩個例子，能夠得知：

fun(0)爲執行第一層fun函數，.fun(1)執行的是fun(0)返回的第二層fun函數，這裏語句結束，遂c存放的是fun(1)的返回值，而不是fun(0)的返回值，因此c中閉包的也是fun(1)第二次執行的n的值。c.fun(2)執行的是fun(1)返回的第二層fun函數，c.fun(3)執行的也是fun(1)返回的第二層fun函數。

遂：

在第一次調用第一層fun(0)時，o爲undefined；

第二次調用 .fun(1)時m爲1，此時fun閉包了外層函數的n，也就是第一次調用的n=0，即m=1，n=0，並在內部調用第一層fun函數fun(1,0);因此o爲0；

第三次調用 .fun(2)時m爲2，此時fun閉包的是第二次調用的n=1，即m=2，n=1，並在內部調用第一層fun函數fun(2,1);因此o爲1；

第四次.fun(3)時同理，但依然是調用的第二次的返回值，遂最終調用第一層fun函數fun(3,1)，因此o還爲1

即最終答案：undefined,0,1,1