超過20家的前端面試題

wencheng 7年前發布 | 19K 次閱讀 前端技術 JavaScript

1. 前言

這里有超過20家的前端面試題，你確定不點進來看看？

好吧，如果你看到這句話，你明顯是點進來了。

那么恭喜你，接下來我就和你們分享一下，近期我收集到的各個公司的面試題。

本文為作者原創，轉載請告知作者并取得同意方可轉載。

違者作者保留法律追究權利。

2. 正文

閑話就不扯了，直接開始分享。

2.1 第一套面試題

  • 當前一段代碼輸出結果是什么？
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>MR_LP -->  QQ ：3206064928</title>
    </head>
    <body>



</body>
<script type="text/javascript" charset="utf-8">
    var z = 10;
    function foo(){
            console.log(z);
    }
    (function(funArg){
            var z = 20;
            funArg();
    })(foo);
</script>



</html></code></pre> 
  
     
   
  • 當前一段代碼輸出結果是什么？
    •  
  
 
  
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>MR_LP -->  QQ ：3206064928</title>
</head>
<body>


</body>
<script type="text/javascript" charset="utf-8">
    var data = [];
    for(var k = 0; k < 3; k++){
            data[k] = function(){
                console.log(k);
            };
    }
    data0;
    data1;
    data2;
</script>
</html></code></pre> 
  
     
   
  •  
    假設現有一篇文章， var content = "...大量文字" ，
     
    文章中觸及到一些敏感詞匯,如 ["習近平","周永康","中共","6.4"] 等內容。
     
    如何在文章中發現這些敏感詞，并將背景設置為 紅色 或者 改變字體顏色 并標示出來。
     
    •  
   
  •  
    JQuery 中 $fn.extend 函數的實現（實現核心代碼即可）
     
    •  
   
  •  
    設計基于觀察者模式的事件綁定機制
     
    •  
  
 
  
2.2 第二套面試題
 
  
 
  
     
   
  •  
    列出 display 的值，并說明他們的作用
     
    •  
   
  •  
    position 中，relative 和 absolute 的區別，包括使用時的注意事項和定位原點
     
    •  
   
  •  
    CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？CSS 3 新增的偽類有哪些？
     
    •  
   
  •  
    CSS 3 有哪些新特性？
     
    •  
   
  •  
    new 操作符具體做了什么？
     
    •  
   
  •  
    請問三行 a，b，c 輸出分別是什么？
     
    •  
  
 
  
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>MR_LP -->  QQ ：3206064928</title>
</head>
<body>


</body>
<script type="text/javascript" charset="utf-8">
    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);
    var b = fun(0).fun(1).fun(2).fun(3);
    var c = fun(0).fun(1); c.fun(2); c.fun(3);
</script>
</html></code></pre> 
  
     
   
  • 問，輸出分別為什么？
    •  
  
 
  
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>MR_LP -->  QQ ：3206064928</title>
</head>
<body>


</body>
<script type="text/javascript" charset="utf-8">
    var a = 100;
    function testResult(){
            var b = 2 * a;
            var a = 200;
            var c = a / 2;
            alert(b);
            alert(c);
    }
    testResult();
</script>
</html></code></pre> 
  
     
   
  • 問輸出結果為什么？
    •  
  
 
  
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>MR_LP -->  QQ ：3206064928</title>
</head>
<body>


</body>
<script type="text/javascript" charset="utf-8">
    var tt = "MR_LP -->  QQ ：3206064928";
    function test(){
            alert(tt);
            var tt = "李鵬";
            alert(tt);
    }
    test();
</script>
</html></code></pre> 
  
2.3 第三套面試題
 
  
 
  
     
   
  •  
    用盡可能多的方法找出數組中重復出現過的元素
     
    
       
     
    • 例如：[1，2，4，4，3，3，1，5，3]
      •  
     
    • 輸出：[1，3，4]
      •  
     
    • 作者補充：若給出多種方式，請分別給出他們的復雜度
      •  
    
     </li> 
   
  •  
    給定一些文檔（docs）、詞（words），找出詞在文檔中全部存在的所有文檔
     
    •  
  </ul> 
  
    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>李鵬 --> QQ : 3206064928</title>
</head>
<body>
    給定一些文檔（docs）、詞（words），
    找出詞在文檔中全部存在的所有文檔
</body>
<script type="text/javascript" charset="utf-8">
    var docs = [
            {
                id: 1,
                words: ['hello',"world"]
            },
            {
                id: 2,
                words: ['hello',"kids"]
            },
            {
                id: 3,
                words: ['zzzz',"hello"]
            },
            {
                id: 4,
                words: ['world',"kids"]
            }
    


    ];
findDocList(docs,['hello']) //文檔1，文檔2，文檔3
findDocList(docs,['hello','world']) //文檔1

    

    </script>
</html></code></pre> 
  
    2.4 第四套面試題
     
  
     
  
       
   
    •  
      本地服務器為 172.16.2.30：8080/test/index.html
       
      服務器地址為 172.16.3.30：8088/get/data，
       
      請求方式為 ‘get’，data 為 '',
       
      請求成功時獲取數據為
       
      {
      "success"  : true,
      "message"  : "請求成功",
      "data"     : "李鵬QQ：3206064928",
      "code"     : 200
  };
       
      請寫一段 JS 程序獲取服務器地址上的數據
       
      PS:
       
      如果解題需要用到 JS 庫或者插件，
  請用 reqiure.js 在 題前引入
       
      •  
  
     
  
    2.5 第五套面試題
     
  
     
  
       
   
    •  
      請用算法實現，從給定的無序、不重復的數組 A 中，取出 N 個數，使其相加和 為 M。
       
      并給出算法的 時間/空間復雜度。
       
      •  
  
     
  
    2.6 第六套面試題
     
  
     
  
       
   
    • 請寫出超鏈接的順序或者你在初始樣式中的鏈接方法。 
    
         
     
      • 要求默認無下劃線，鼠標經過有下劃線
        •  
    
       </li> 
  </ul> 
  
         
   
      •  
        當 float 和 margin 同時使用，IE 6 的雙倍邊距 BUG 如何解決？
         
        •  
   
      •  
        為什么無法定義 1px 左右高度的容器？
         
        •  
   
      •  
        FireFox 中標簽的居中問題的解決方法？
         
        •  
   
      •  
        請寫出 XHTML 和 CSS 如何注釋？
         
        •  
   
      •  
        請以縮寫方法寫出 1px 直線灰色，上面無邊框的矩形邊框樣式。
         
        •  
  
       
  
      2.7 第七套面試題
       
  
       
  
         
   
      • 下面代碼會輸出什么？
        •  
  
       
  
      <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>李鵬 --> QQ : 3206064928</title>
</head>
<body>
      

      </body>
<script type="text/javascript" charset="utf-8">
    var test = (function(a){
            this.a = a;
            return function(b){
                return this.a + b;
            }
    }(function(a,b){
            return a;
    }(1,2)));
    console.log(test(1));
</script>
</html></code></pre> 
  
         
   
      •  
        定義一個 log 方法，讓它可以代理 console.log 的方法。
         
        •  
   
      •  
        簡述一下 Sass 和 Less，并說明區別。
         
        •  
   
      •  
        不用循環，創建一個長度為 100 的數組，并且每個元素的值等于它的下標。
         
        •  
   
      •  
        當項目的某個模塊發生問題了，你是怎么定位錯誤的？你常用的測試工具是什么？
         
        •  
   
      •  
        HTML5 中如何嵌入音頻？
         
        •  
   
      •  
        HTML5 儲存類型都有哪些，有什么區別？
         
        •  
   
      •  
        CSS 3 新增偽類有哪些？
         
        •  
   
      •  
        iOS 自動識別數字為手機號碼，導致部分設置好的樣式無法訪問，如何解決這個問題？
         
        •  
  
       
  
      2.8 第八套面試題
       
  
       
  
         
   
      •  
        HTML 和 XHTML 的區別？
         
        •  
   
      •  
        行內元素有哪些？塊級元素有哪些？
         
        •  
   
      •  
        CSS 的 盒模型
         
        •  
   
      •  
        寫出 CSS 3 中的幾個屬性
         
        •  
   
      •  
        HTML 5 中新加了哪些標簽，移除了哪些標簽？
         
        •  
   
      •  
        定位有哪幾種？
         
        •  
   
      •  
        寫出一段代碼，實現 tab 切換。
         
    
           
     
        • 作者補充: 請用不少于三種方式實現
          •  
    
         </li> 
   
      •  
        當點擊一個頁面內的元素時，alert 出這個元素的標簽名
         
    
           
     
        • 注意兼容性問題
          •  
    </ul> </li> 
   
        •  
          一個整數，它的各位數字如果是左右對稱的，則這個數字是對稱數。那么請找出 1 至 10000 中所有的對稱數。
           
          •  
  </ul> 
  
          2.9 第九套面試題
           
  
           
  
             
   
          •  
            編譯語言與解釋執行語言（腳本語言）有什么區別？
             
    
               
     
            • 請各舉例兩種程序語言
              •  
    
             </li> 
   
          •  
            請列舉出至少五個應用層網絡協議。
             
            •  
   
          •  
            解釋 UNIX 時間戳的含義及作用，并寫出獲取當前 UNIX 時間戳的代碼。
             
            •  
   
          •  
            版本控制工具的作用是什么？請列舉你熟知的版本控制工具。
             
            •  
   
          •  
            HTTP 協議的 GET/POST 方法的區別以及適用場景分別是什么？
             
    
               
     
            • 作者補充：如果為 HTTPS 呢？知道 SSL 么？它們之間分別有哪些聯系？
              •  
    </ul> </li> 
  </ul> 
  
              2.10 第 10 套面試題
               
  
               
  
                 
   
              •  
                寫出兩個開發中遇到的兼容性問題。
                 
    
                   
     
                • 作者補充：你是如何解決的？
                  •  
    
                 </li> 
   
              •  
                寫出五個 Array 對象的方法
                 
                •  
   
              •  
                簡單介紹前端工程化
                 
                •  
  </ul> 
  
                2.11 第十一套面試題
                 
  
                 
  
                   
   
                •  
                  typeof bar === "object" 判斷是否為 object 類型？有什么問題？怎么避免？
                   
                  •  
   
                •  
                  以下代碼輸出結果是什么？
                   
                  •  
  
                 
  
                <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>李鵬 --> QQ : 3206064928</title>
</head>
<body>
                

                </body>
<script type="text/javascript" charset="utf-8">
    (function(){
            var a = b = 3;
    })();
    console.log("a defined?" + (typeof a != 'undefined'));
    console.log("a defined?" + (typeof b != 'undefined'));
</script>
</html></code></pre> 
  
                   
   
                • 以下代碼輸出結果是什么？
                  •  
  
                 
  
                <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>李鵬 --> QQ : 3206064928</title>
</head>
<body>
                

                </body>
<script type="text/javascript" charset="utf-8">
    var myObject = {
            foo: "bar",
            func: function(){
                var self = this;
                console.log('outer func : this.foo' + this.foo);
                console.log('outer func : self.foo' + self.foo);
                (function(){
                    console.log('inner func : this.foo' + this.foo);
                    console.log('inner func : self.foo' + self.foo);
                })();
            }
    };
    myObject.func();
</script>
</html></code></pre> 
  
                   
   
                • 以下代碼輸出結果是什么？
                  •  
  
                 
  
                <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>李鵬 --> QQ : 3206064928</title>
</head>
<body>
                

                </body>
<script type="text/javascript" charset="utf-8">
       (function(){
           console.log(1);
           setTimeout(function(){console.log(2)},1000);
           setTimeout(function(){console.log(3)},0);
           console.log(4);
       })();
</script>
</html></code></pre> 
  
                2.12 第十二套面試題
                 
  
                 
  
                   
   
                •  
                  JS 中有幾種數據類型？
                   
                  •  
   
                •  
                  JS 中，哪些為 真，哪些為假？
                   
                  •  
   
                •  
                  計算以下運算結果
                   
                  •  
  
                 
  
                <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>李鵬 --> QQ : 3206064928</title>
</head>
<body>
                

                </body>
<script type="text/javascript" charset="utf-8">
    // 1
    alert(0/0);
                


                // 2
alert(1/0);

// 3
var arr = [1,'abc',function(){alert(3333);}];
alert(arr[2]());
arr[2]();

// 4
var len = 4;
while(len--){
        setTimeout(function(){console.log(len)},3000);
        console.log(len);
}

// 5
window.name = "Window";
var cat = {
        name:'Cat'
};
var dog = {
        name:'Dog',
        sound:function(word){
            alert(this.name + word);
        }
};
dog.sound("is pooping");
dog.sound.call(window,"is banking");
dog.sound.call(dog,"is banking");
dog.sound.apply(cat,['李鵬']);

//本文為作者 李鵬 原創，請勿私自轉載，違者保留法律追究權利
//作者 QQ : 3206064928


                

                </script>
</html></code></pre> 
  
                   
   
                •  
                  請寫出以下正則表達式的詳細規則說明
                   
    
                     
     
                  • /^(0[1-9]\d\d?)?[1-9]\d{6}\d?$/
                    •  
     
                  • /^(1[89]|[2-9]\d|100)$/i
                    •  
     
                  • /^[\w-]+@[a-z0-9-]+({[a-z]{2,6}}){1,2}$/i
                    •  
    
                   </li> 
   
                •  
                  請寫出打亂數組方法
                   
                  •  
   
                •  
                  寫出 李鵬 --> QQ : 3206064928.getElementsByClassName 的實現方法
                   
                  •  
  </ul> 
  
                  2.13 第十三套面試題
                   
  
                   
  
                     
   
                  •  
                    請描述 JSON 和 JSONP 的區別？
                     
                    •  
   
                  •  
                    源與目標資源位于同域之下，JQuery 中 JSONP 是異步進行的么？跨域時是異步么？
                     
                    •  
   
                  •  
                    目前熟練使用的前端框架有哪些？
                     
    
                       
     
                    • 作者補充：不少于 5 項
                      •  
    
                     </li> 
   
                  •  
                    列舉 IE 與 FF 腳本兼容性問題
                     
    
                       
     
                    • 作者補充：不少于 7 種
                      •  
    </ul> </li> 
   
                    •  
                      請至少寫出 5 個 HTML 5 新增的標簽，并說明他們的語義和應用場景。
                       
                      •  
   
                    •  
                      HTML5 中有哪些新的表單元素類型？
                       
    
                         
     
                      • 作者補充：不少于5項，并說明使用場景
                        •  
    </ul> </li> 
   
                      •  
                        CSS 3 中新增了哪些文本效果？
                         
    
                           
     
                        • 作者補充：并說明內部常用屬性
                          •  
    </ul> </li> 
   
                        •  
                          FF 下如何實現 outerHTML?
                           
                          •  
   
                        •  
                          border-left-color、margin-left、-moz-viewport 改寫成 JS 格式
                           
    
                             
     
                          • 李鵬之吐槽：我的天，你見過 marin-left？border-color-left?
                            •  
    </ul> </li> 
  </ul> 
  
                            2.14 第十四套面試題
                             
  
                             
  
                               
   
                            • 請寫出代碼輸出結果。
                              •  
  
                             
  
                            <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>李鵬 --> QQ : 3206064928</title>
</head>
<body>
                            

                            </body>
<script type="text/javascript" charset="utf-8">
    for(var i = 0,j = 0; i < 10, j < 6; i++, j++){
            value = i + j;
    }
    alert(value);
</script>
</html></code></pre> 
  
                               
   
                            • 請寫出代碼輸出結果。
                              •  
  
                             
  
                            <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>李鵬 --> QQ : 3206064928</title>
</head>
<body>
                            

                            </body>
<script type="text/javascript" charset="utf-8">
    if(!("a" in window)){
            var a = 1;
    }
    alert(a);
</script>
</html></code></pre> 
  
                               
   
                            • 請寫出代碼輸出結果。
                              •  
  
                             
  
                            <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>李鵬 --> QQ : 3206064928</title>
</head>
<body>
                            

                            </body>
<script type="text/javascript" charset="utf-8">
    var handle = function(a){
            var b = 3;
            var tmp = function(a){
                b = a + b;
                return tmp;
            }
            tmp.toString() = function(){
                return b;
            }
            return tmp;
    }
    alert(handle(4)(5)(6));
</script>
</html></code></pre> 
  
                            2.15 其他一些面試題的集合
                             
  
                            電腦馬上要沒電了，趕緊把剩下的一起發了，省的大家看的不爽。
                             
  
                            如果覺得有用，請給作者點個贊，并分享一下，畢竟現在在找工作的小伙伴還是很多的。
                             
  
                            作者姓名：李鵬
                             
  
                            作者QQ : 3206064928
                             
  
                            作者微信：lipeng_0524
                             
  
                            此文感言：碼字真辛苦，且看且珍惜
                             
  
                             
  
                             
  
                             
  
                             
  
                             
  
                             
  
                             
  
                            3. 后記
                             
  
                            我的天，終于寫完了，前前后后得用了三天時間才出來這一篇文章。
                             
  
                            真是累死喵了。
                             
  
                            但是寫完，還是很有成就感的。
                             
  
                            其實很多人對寫博客的人表示很不理解，為什么要去寫博客？自己的時間都不夠用，何必浪費心血？你自己寫一篇文章可能用兩三天，別人過來偷一篇文章，前后算上也就十幾分鐘。
                             
  
                            其實自己也想過這些問題，就像之前寫的文章，閱讀量近7W，別人過來問問，能轉載么？我說可以，回頭文章就變成別人的，而且經常冠以什么，《知名 XXX 告訴你，應該XXXX》什么的，結果就沒有自己什么事情了。
                             
  
                            那時候，突然覺得自己的努力真的是沒什么作用。
                             
  
                            經過那么多年的“拿來主義”，很多時候你會發現，你寫的甚至沒有人家抄的快。
                             
  
                            哎，吐槽一波負能量。
                             
  
                            但是吐槽歸吐槽，文章還是要寫的，不為別的，只希望認識我的，喜歡看我文章的小伙伴們，在未來某個時間，遇到某個問題，能想起來，唉？這個問題之前鵬哥寫過。我趕緊去看看。
                             
  
                            總歸一句話，我寫文章不為別的，只是做個分享，這是愛好，沒有任何利益糾葛。
                             
  
                            今天的后記應該是有史以來最長的后記了，最后再送大家一句話。
                             
  
                            往事不足夠，余生不強求。
                             
  
                            希望大家在這個金三銀四的跳槽季，能夠找到一份更適合自己的工作。
                             
  
                             
                             
  
                             
                             
  
                            來自：http://www.jianshu.com/p/8b68f4df749e
                             
  
                             
 本文由用戶 wencheng 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！