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

   一、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>

二、html5有哪些新特性

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

三、css3位移怎麼作

   transform:translate(x,y)

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

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

五、如何提高網站性能？SEO優化？

  減小http請求；圖片、樣式、js壓縮再使用；使用cdn；樣式、腳本儘可能使用外鏈；減小dom操做；html語義化；

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

六、js裏面關於數組的操做有哪些？

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

七、js數組操做pop返回值是什麼？push操做返回值是什麼？

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

八、http協議返回碼的含義

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

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

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

 我的淺理解，淺拷貝就是複製這個對象及屬性值，並無從新開一個內存出來，因此原來屬性變了複製過來的也跟着一塊兒變；深拷貝，直接複製整個對象，開闢一個新的內存；

怎麼實現js深拷貝？

十、關於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

十一、關於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和「」也表示空值，我理解爲都是字符串。

 ！取反；！！取反以後再取反

   十二、js變量的提高

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

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

   解釋一下，js中js在執行過程當中，變量和函數的聲明會提高，聲明是聲明！！！表達式不會提高。提高到當前做用域下，若是變量和函數重名了，函數說了算，而後理解一下，上面的代碼，就能夠解釋了。

1三、js做用域

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

1四、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);

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

      主要仍是要注意for循環裏面函數做用域的問題，看清楚循環裏面是函數仍是對象。。。

      for...in...能夠循環輸出一個對象的屬性

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

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

1六、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

1七、js垃圾機制

1八、js數組去重

1九、js數組查重

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

2一、兩個數組相加

2二、js繼承

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

2三、js判斷字母大小寫

2四、一個div裏實現3個三角形

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

       ::after

       ::before

       一樣來兩份，就能夠了

2五、js閉包

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

2六、ES6使用過嗎？使用箭頭函數有什麼好處？

      箭頭函數的this指向

2七、this指向問題

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

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

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

3一、談談eventloop

3二、js事件委託事件冒泡如何實現的

3三、ajax怎樣修改頭部信息

3四、localstorage和什麼綁定在一塊兒？