2018面試題總結（一）

2023年5月14日 137次阅读来源: sunny_ma

2018面試題總結

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

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
input的readonly 和disable有什麼區別?
readonly 和disable的值為true時，都會使显示出來的文本框不能輸入筆墨，不能變動變動表單域中的內容。
不同點：
（1）disabled會使文本框變灰，而readonly只是使文本框不能輸入，表面沒有變化
（2)表單以POST或GET的體式格局提交時，disabled的值不會被通報出去，而readonly會將該值通報出去
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
css中的偽類有哪些?
偽類： :link，:visited，:hover，:active ，:focus :first-child，:lang
偽元素，比方：:first-letter，:first-line，:before，:after。

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

要領一：

<!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>

寫出順序的運轉效果

（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);
}

js的繼續體式格局有哪幾種？
（1）原型鏈（prototype chaining）
（2）call()/apply()
（3）夾雜體式格局(prototype和call()/apply()連繫)
（4）對象假裝

寫出一個給數組元素排重函數
要領一：

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]

寫出一個函數序列化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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。