初中級web前端工程師的面試題分享

   1、html三欄布局有幾種(就是左右固定，中間自適應)

     浮動布局float、定位布局、flex布局、表格布局、css3柵欄布局

<style media="screen">    //浮動布局float
      .layout.float .left{
        float:left;
        width:300px;
        background: red;
      }
      .layout.float .center{
        background: yellow;
      }
      .layout.float .right{
        float:right;
        width:300px;
        background: blue;
      }
 </style>

<style>
        .layout.absolute .left-center-right>div{   //定位布局
          position: absolute;
        }
        .layout.absolute .left{
          left:0;
          width: 300px;
          background: red;
        }
        .layout.absolute .center{
          left: 300px;
          right: 300px;
          background: yellow;
        }
        .layout.absolute .right{
          right:0;
          width: 300px;
          background: blue;
        }
</style>

<style>
        .layout.flexbox{    //flex布局
          margin-top: 110px;
        }
        .layout.flexbox .left-center-right{
          display: flex;
        }
        .layout.flexbox .left{
          width: 300px;
          background: red;
        }
        .layout.flexbox .center{
          flex:1;
          background: yellow;
        }
        .layout.flexbox .right{
          width: 300px;
          background: blue;
        }
</style>

<style>
        .layout.table .left-center-right{    //表格布局
          width:100%;
          height: 100px;
          display: table;
        }
        .layout.table .left-center-right>div{
          display: table-cell;
        }
        .layout.table .left{
          width: 300px;
          background: red;
        }
        .layout.table .center{
          background: yellow;
        }
        .layout.table .right{
          width: 300px;
          background: blue;
        }
</style>

2、html5有哪些新特性

    字體樣式、圓角、視頻、音頻、canvas、svg、sessionstorge、localstorage........

3、css3位移怎么做

   transform:translate(x,y)

4、垂直居中有幾種方法？

  定位，表格下（text-justify），display:flex(align-item,text-justify)

5、如何提升網站性能？SEO優化？

  減少http請求；圖片、樣式、js壓縮再使用；使用cdn；樣式、腳本盡量使用外鏈；減少dom操作；html語義化；

  網站頭部title,keywords,description正確描述；html語義化；

6、js里面關於數組的操作有哪些？

     jion;concat;pop;push;splice;slice;

7、js數組操作pop返回值是什么？push操作返回值是什么？

   pop返回刪掉數組最后的那個元素;push增加元素返回長度

8、http協議返回碼的含義

   4xx：客戶端錯了；5xx：服務端錯了；2xx：成功

9、js深拷貝和淺拷貝的問題

<script type="text/javascript">
	var a={
		name:'aa'
	};
	var b = a;
	a.name = "cc";
	console.log(b.name); //淺拷貝cc
</script>

 個人淺理解，淺拷貝就是復制這個對象及屬性值，並沒有重新開一個內存出來，所以原來屬性變了復制過來的也跟着一起變；深拷貝，直接復制整個對象，開辟一個新的內存；

怎么實現js深拷貝？

10、關於typeof

  console.log(typeof(a))                 //object
  console.log(typeof('a'))               //string
  console.log(typeof(1))                //number
  console.log(typeof(null))                //object
  console.log(typeof(undefined))     //undefined
  console.log(typeof(false))             //boolean

11、關於null、undefined

    console.log(!!0)     //false
    console.log(null==null)  //true
    console.log(null!=null)  //false
    console.log(!! undefined)  //false
    console.log(!! "")  //false
    console.log(!! null)  //false
    console.log(null == undefined)  //true
    console.log(null == 0) //false
    console.log(null == "")  //false
    console.log(0 == undefined) //false
    console.log（0 == “”）  //true

其實很好理解的，0，null，undefined，“”單獨存在的時候，都是表示false;但是null表示為空值；undefined表示未定義的；0和“”也表示空值，我理解為都是字符串。

 ！取反；！！取反之后再取反

   12、js變量的提升

    看下面的，最后執行結果————tt/undefined

b();   //tt
console.log(a);   //undefined var a = "bb";
function b(){
  console.log("tt");
}

   解釋一下，js中js在執行過程中，變量和函數的聲明會提升，聲明是聲明！！！表達式不會提升。提升到當前作用域下，如果變量和函數重名了，函數說了算，然后理解一下，上面的代碼，就可以解釋了。

13、js作用域

   這個很好理解，就是還真不知道怎么說，答曰全部變量和局部變量，網上查一下，官方說法如下：在 JavaScript 中, 作用域為可訪問變量，對象，函數的集合。

14、js原型與原型鏈

  每個對象創建都會有一個prototype的原型屬性，當這個對象的某個屬性不存在時就會去他的prototype上查找，而prototype又有自己的prototype,然后如此循環，就是原型鏈。。。

 個人理解：只有函數才有prototype屬性，可能這個說法不大准確，但大多數用的時候就這意思，如

 scar.color==car.prototype   //true   具體我也不多說，大家可以自己查一下

function car(){
       this.name = "bmw";
}
car.prototype.color="#f00";
var scar = new car();
console.log(scar.color==car.prototype);

15、for循環 ，衍生問題，for...in...，forEach...，map

      主要還是要注意for循環里面函數作用域的問題，看清楚循環里面是函數還是對象。。。

      for...in...可以循環輸出一個對象的屬性

      forEach 比較輕便...可以看出不用定義變量計算數組的長度，但是，他不能中斷循環，這就憂桑了，講真，我基本不用

      map map() 方法返回一個由原數組中的每個元素調用一個指定方法后的返回值組成的新數組。返回的指定函數一定要有返回值，不然他哪來的值組成新數組呢，不都得undefined

16、settimeout（攜程）

      js是單線程的，從上到下開始執行，遇到setTimeout、鼠標點擊等事件，異步執行它們，同步任務就先執行完畢（我這里都是簡而言之的）

     下面執行結果：333,444,222

setTimeout(function(){
    	console.log(222);
    },100);
console.log(333);
console.log(444);

     那么，問題又來了，settimeout，一定是在100ms后執行的么？顯然不是的，具體參考：https://www.cnblogs.com/zichi/p/4604053.html

17、js垃圾機制

18、js數組去重

19、js數組查重

20、單例模式和觀察者模式用代碼表示出來

21、兩個數組相加

22、js繼承

     構造繼承、原型繼承（攜程）

23、js判斷字母大小寫

24、一個div里實現3個三角形

      css設置div三邊邊框和高度同樣大小，div設置box-sizing,三邊框中其中兩邊顏色設置transprent,就可以獲得一個小三角；

       ::after

       ::before

       同樣來兩份，就可以了

25、js閉包

       簡而言之，函數里面的一些變量和函數表達式，可以通過里面的函數訪問這個函數的變量，防止全局變量的污染以及變量的改變

26、ES6使用過嗎？使用箭頭函數有什么好處？

      箭頭函數的this指向

27、this指向問題

28、瀏覽器存儲的問題（cookie、localstorage、sessionstorage區別，cookie是如何實現的）

29、原生js的增刪改查是如何實現的

30、刪除數組中出現次數最多的元素並將其輸出；

31、談談eventloop

32、js事件委托事件冒泡如何實現的

33、ajax怎樣修改頭部信息

34、localstorage和什么綁定在一起？