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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞