基礎知識

1. 定義一個對象，裏面包含用戶名、電話，而後將其存入localStorage的代碼

   var json = {username:"張三",phone:17650246248}

for(var key in json){

   localStorage.setItem(key,json[key]);

}

For in 遍歷對象 for of能夠遍歷對象嗎？ 不能夠？緣由？ Symbol.interator

(string/map/set/array等) Object.prototype

2.css兼容性、代碼如何優化、怎麼優化網頁、清除浮動、css3新的技術、語義化標籤、瀏覽器的兼容性問題、如何居中盒子等。

3.Ajax原生對象是什麼？如何完成一個完整的ajax請求？

Ajax 優勢、缺點 異步、同步 跨域 同源策略 解決跨域？（jsonp 原理？）

反向代理？ vue proxy（target changeOrigin pathRewrite）

後端配置 CORS（跨域資源共享 headers *）

4.你所瞭解的http狀態碼有哪一些？

5.Window.onload與$(document).ready()的區別是什麼？ $(function(){})

6.閉包是什麼，所帶來的問題是什麼？閉包使用場景是什麼 垃圾回收機制 怎麼存儲堆棧

https://blog.csdn.net/qappleh/article/details/80337630

https://blog.csdn.net/qq_21132509/article/details/80694517

7.媒體查詢如何實現？rem與em、px的區別是什麼？

Bootstrap（12柵格 -> xs sm md lg）

媒體查詢代碼

@media screen and（mix-width：500px）{具體的樣式}

em 默認16像素 相對於父元素定義的

1rem相對於根元素的單位

Rem的設置：document.document.style.fontSize = document.document.clientWidth / 3.75 + ‘px

Vw vh

你還了解哪些佈局單位

8.採用正則表達式驗證電話號碼、郵箱號碼

9.Cookie/localStorage、sessionStorage的區別是什麼? 本地存儲與Vuex的異同

怎麼存cookie/localstorage，怎麼取，哪些狀況下會用到

本地存儲是永久性存儲，主要是不一樣頁面之間的存儲。Vuex強調的是多個組件之間進行的存儲

10.簡述css盒模型（標準與怪異盒模型）

IE9（標準盒模型） width=padding+margin+border

IE8（怪異盒模型）width=content+padding+border

項目中標準盒模型改爲怪異盒模型：box-sizing：border-box 默認是標準盒模型（content-box）

11.什麼是viewport?

移動端瀏覽器中用來顯示網頁的區域

12.position定位屬性有哪幾個？區別分別是什麼？

Static、absolute（會破壞文檔流的結構）、relative、fixed

通常父元素加相對定位，這樣子元素再加絕對定位就會根據父元素的位置進行偏移

13.什麼是css預處理器？請描述一些簡單的語法規則

Less、scss、stylus

Scss：$定義變量、{}嵌套&、封裝一些css樣式在用的時候進行@include引用

14.阻止事件默認行爲和事件的冒泡方法分別是什麼？（w3c與非w3c瀏覽器）

e.preventDefault return false

e.stopPropagation() e.cancelBubble = true

事件流機制：冒泡（從下到上）和捕獲（從上到下），二者都存在的狀況下，先捕獲後冒泡

事件綁定addEventListener（）

事件委託 $(「ul」).on(「click」,’li’,e=>{ })

15.看下列代碼輸出結果是什麼？

var a;

alert(typeof a);

alert(b);

var c = null;

alert(typeof c)

16.什麼是跨域？解決跨域問題的主流方案是什麼？(jsonp跨域優缺點)

17.請寫出該代碼的執行結果

var bb = 1;

function aa(bb){

      bb=2;

      alert(bb);

}

aa(bb);

alert(bb);

18.下面列出的瀏覽器，無webkit內核的是（ D ）

A.chrome B. safari C.搜狗瀏覽器 D.firefox

19.Call、bind與apply的區別？

call與apply都屬於Function.prototype的一個方法，因此每一個function實例都會有call/apply屬性

二者傳遞參數不一樣，call函數第一個參數都是要傳入當前對象的對象，apply不是

apply傳入的是一個參數數組，也就是將多個參數組合成爲一個數組傳入

Call傳入則是直接的參數列表。Call方法能夠將一個函數的對象上下文從初始的上下文改爲由thisObj指定的新對象

20.下面的代碼輸出結果是什麼？

function Foo(){

     var i=0;

     return function(){

          console.log(i++);

     }

}

var f1 = Foo();

f2 = Foo();

f1();

f1();

21.行內元素、塊級元素、空元素有哪一些？

22.爲什麼要清除浮動？清除浮動的方式？

23.如何讓chrome支持小於12px的文字？

<style>

   p span{

      font-size:10px;

      -webkit-transform:scale(0.8);

      display:block;

   }

</style>

<p><span>haorooms博客測試10px</span></p>

24.如何在css中告訴瀏覽器使用不一樣的盒模型來渲染你的佈局？

25.已知前端頁面中，有以下table

<table id="t1">

     <tr></tr>

     <tr></tr>

     ...

     <tr></tr>

</table>

請添加用戶交互效果，當用戶點擊該表格的某一行的時候，該行背景色設置爲紅色的代碼

26.請問如下結果會輸出什麼？

for(var i=0;i<5;i++){

     console.log(i);

}

 

for(var i=0;i<5;i++){

      setTimeout(function(){

             console.log(i);

      },1000*i);

}

 

for(var i=0;i<5;i++){

   (function(i){

          setTimeout(function(){

             console.log(i);

          },1000*i);

   })(i);

}

 

for(var i=0;i<5;i++){

   (function(){

          setTimeout(function(){

             console.log(i);

          },1000*i);

   })(i);

}

 

for(var i=0;i<5;i++){

      setTimeout((function(){

          console.log(i);

      })(i),1000*i);

}

27.寫出超連接的合理順序（l v h a） link visited hover active

28.寫出函數DateDemo()的返回結果

function DateDemo(){

      for(var i=0,j=0;i<10,j<6;i++,j++){

         k=i+j;

      }

      return k;

}

29.請實現該缺乏的內部代碼，交換兩個數的值

var res = (function(x,y){

     ...補全缺乏的代碼....

return {

          x:x,

          y:y

      }

})(1,2);

console.log(res.x);//打印2

console.log(res.y);//打印1

30.如下程序的執行結果爲：

var array1 = [1,2];

var array2 = array1;

array1[0] = array2[1];

array2.push(3);

console.log(array1);

console.log(array2);

31.寫出下列打印值：

console.log(1+"2"+"2")

console.log("1"-'2'+'2')

console.log('A'+"B"+"2")

console.log("A"-"B"+2)

32.解析連接www.qq.com?name=jack&age=18&id=100，獲取其中的查詢參數，並格式爲js對象的代碼：

如： {name:」jack」,age:18,id:100}

var str = "www.qq.com?name=jack&age=18";

var str2 = str.substring(str.lastIndexOf("?")+1);

var arr = str2.split("&");

var json = {};

for(var i=0;i<arr.length;i++){

   var newArr = arr[i].split("=");

   json[newArr[0]] = newArr[1];

}

33.談一下Jquery中的bind、live、delegate、on的區別？

https://www.cnblogs.com/zagelover/articles/2840762.html

34.Jquery中如何將數組轉化爲json字符串，而後再轉化回來？

 var arr = [{usernname:"張三",age:10}]

console.log($.parseJSON(JSON.stringify(arr)));

35.什麼是zepto點透問題?如何解決此問題？

http://smile-leaf-language.github.io/2016/02/02/zepto-tap/

36.輸出的結果爲

var myObject = {

      foo:"bar",

      func:function(){

         var self = this;

         console.log("outer func:",this.foo);

         console.log("outer func",self.foo);

         (function(){

            console.log("inner func",this.foo);

            console.log("inner func",self.foo);

         })();

      }

   }

myObject.func();

37.下面的結果是什麼？

 (function(){

     var a = b = 1;

})();

  console.log(typeof a);

  console.log(typeof b);

38.優化下面這段css代碼：

.myclass{

      font-family:arial,verdana,sans-serif;

      border-width: 10px;

      border-left-width:20px;

      border-bottom-width: 5px;

      color:#ff6600;

      font-weight: normal;

      font-size:1em;

}

39.Html中form裏的action方法的get與post方法區別是什麼？

40.Html元素id與class區別是什麼？

41.簡述src與href的區別？

42.簡述同步與異步的區別？

43.如何對網站的文件和資源進行優化？

http://www.javashuo.com/article/p-qcylwndr-cz.html

[1.文件合併 2.文件壓縮 3.使用cdn進行託管資源 4.緩存的使用]

44.簡單模擬Bootstrap的12柵格系統

45.ES6新特性

Let/const 數組對象的解構賦值 symbol set和map proxy promise async classs繼承 模塊導入導出 for..of循環

你如何理解ES5中的function與ES6中的類

45.編寫一個高效數組去重的方法 array=[9,22,15,5,9,23,99,15]

function unique(arr){

      var obj = {};

      var result = [];

      for(var i=0;i<arr.length;i++){

         if(!obj[arr[i]]){

            result.push(arr[i]);

            obj[arr[i]] = true;

         }

      }

      return result;

}

用set方法

var array=[9,22,15,5,9,23,99,15];

console.log(array.from(new set(array)))