2018面試題總結(一)

2018面試題總結

現將我整頓的一些前端筆試題分享一下,願望對人人有所協助。

  1. html中罕見行內元素和塊級元素有哪些?

    行內元素:a,b,strong,span,img,label,button,input,select,textarea
    塊級元素:header,footer,form,ul,ol,table,article,div,canvas,video,audio,figure
    行內塊元素罕見的有: img, input, td

  2. input的readonly 和disable有什麼區別?

    readonly 和disable的值為true時,都會使显示出來的文本框不能輸入筆墨,不能變動變動表單域中的內容。
    不同點:

    (1)disabled會使文本框變灰,而readonly只是使文本框不能輸入,表面沒有變化
    (2)表單以POST或GET的體式格局提交時,disabled的值不會被通報出去,而readonly會將該值通報出去

  3. HTML5新增了哪些標籤? input新增了哪些範例?

    h5新增標籤: header、footer、nav、article、section、aside、video、audio、 dateils、mark、progress、time、datelist、canvas等

    input新增範例:email、url、number、range、Date pickers (date, month, week, time, datetime, datetime-local)、search、color

  4. css中的偽類有哪些?

    偽類: :link,:visited,:hover,:active ,:focus :first-child,:lang
    偽元素,比方::first-letter,:first-line,:before,:after。

  5. 擺布等高規劃,左邊寬度牢固,右邊自適應

    要領一:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>高度自適應規劃</title>
    <style>
       *{
      margin: 0;
      padding: 0;
       }
       .container{ 
      width:100%; 
      overflow:hidden; 
       }
       .left{ 
      float: left;
      width: 200px;
      background: lightblue;
      padding-bottom:9999px;
      margin-bottom:-9999px;
       }
       .right{ 
      margin-left: 200px;
      background:pink;
      padding-bottom:9999px;
      margin-bottom:-9999px;
       }
    </style>
    </head>
    
    <body>
    
    <div class="container">
       <div class="left">我是left</div>
       <div class="right">我是right<br><br><br><br></div>
     
    </div>
    
    </body>
    </html>
    

    要領二:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>高度自適應規劃</title>
    <style>
     body,p{margin: 0;}
     .parent{
         display: flex;
     }
     .left{
         width: 200px;
         background-color: lightblue;
     }
    
     .right{
        width: 100%;
        background-color: lightgreen;
     }
     
    </style>
    </head>
    
    <body>
    
    <div class="parent" >
     <div class="left" >
        left
     </div>  
    
     <div class="right" >
         right <br><br><br><br><br><br><br><br><br>
     </div>        
    </div>
    
    </body>
    </html>
  6. 寫出順序的運轉效果

    (1)

      alert(typeof(null));  //object
      alert(typeof(undefined));  //undefined
      alert(typeof(NaN));  //number
      alert(typeof(NaN==undefined)); //boolean
      var str="123abc";
      alert(typeof(str++));  // number
      alert(str);   //NaN

    (2)

     var x=1,y=z=0;
     function add(n){
      return n=n+1;
     }
     y=add(x); 
     function add(n){
         return n=n+3;
     }
     z=add(x); 
    
     alert(y); //4
     alert(z); //4

    (3)

    var myObject={
        num:2,
        add:function(){
         this.num=3;
         (function(){
               alert(this.num); //undefined
               this.num=4;
         })();
    
         alert(this.num); //3
        }
    }
    
    myObject.add();
    

    (4)

    var i=0;
    for (var i = 0;  i++<3;) {
        setTimeout(function(){
         return function(){
             alert(i);  //4, 4, 4 
         }
        }(),0);
    }
    
  7. js的繼續體式格局有哪幾種?
    (1)原型鏈(prototype chaining)
    (2)call()/apply()
    (3)夾雜體式格局(prototype和call()/apply()連繫)
    (4)對象假裝
  8. 寫出一個給數組元素排重函數
    要領一:

    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]
    

    要領二:

    var arr = [0,2,3,4,4,0,2],
    var arr2 = [];
    for(var i = 0;i< arr.length;i++){
      if(arr2.indexOf(arr[i]) < 0){
          arr2.push(arr[i]);
      }
    }
    console.log(arr2); //[0,2,3,4]
    
  9. 寫出一個函數序列化URL上問號后的參數:

    如:URL:”http://3g.baidu.com?search=list&user=john&page=news”
    解出:{‘search’:’list’,’user’:’john’,’page’:’news’}

       function urlArgs(URL){
    
           var args = URL.split('?');
    
           // 推斷 假如?號背面沒有參數,則返回""
           if(args[0] == URL){
               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 URL ='http://3g.baidu.com?search=list&user=john&page=news';
       var _URL = urlArgs(URL); 
       // console.log(_URL); //{'search':'list','user':'john','page':'news'}
    原文作者:sunny_ma
    原文地址: https://segmentfault.com/a/1190000014397899
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞