前端面試總結（JavaScript）

時間 2019-12-01

原文原文鏈接

ajax優缺點:

js url傳值中文亂碼之解決之道：

在get方式用URL傳中文的時候若是不轉碼的話，在後臺接收參數的會出現亂碼問題。javascript

因此在要傳的中文encodeURI("參數","UTF-8"); 進行轉碼，後臺直接getParameter就OK！css

ajax優勢：
1.無刷新更新數據
2.異步與服務器通訊
3.前端後端負載平衡
4.基於標準被普遍支持
5.界面與應用分離html

ajax缺點：
1.ajax幹掉了back和history功能，即對瀏覽器機制的破壞
2.ajax的安全問題
3.對搜索引擎支持較弱
4.破壞程序的異常處理機制
5.違背url和資源定位的初衷
6.ajax不能很好的支持移動設備
7.客戶端過肥，太多客戶端代碼形成開發上的成本 ajax的原理：Ajax的原理簡單來講經過XmlHttpRequest對象來向服務器發異步請求，從服務器得到數據，而後用javascript來操做DOM而更新頁面 get和post區別：前端

1. get是從服務器上獲取數據，post是向服務器傳送數據。
2. get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中，值和表單內各個字段一一對應，在URL中能夠看到。post是經過HTTP post機制，將表單內各個字段與其內容放置在HTML HEADER內一塊兒傳送到ACTION屬性所指的URL地址。用戶看不到這個過程。
3. 對於get方式，服務器端用Request.QueryString獲取變量的值，對於post方式，服務器端用Request.Form獲取提交的數據。
4. get傳送的數據量較小，不能大於2KB。post傳送的數據量較大，通常被默認爲不受限制。但理論上，IIS4中最大量爲80KB，IIS5中爲100KB。
5. get安全性很是低，post安全性較高。可是執行效率卻比Post方法好。 

建議：
一、get方式的安全性較Post方式要差些，包含機密信息的話，建議用Post數據提交方式；
二、在作數據查詢時，建議用Get方式；而在作數據添加、修改或刪除時，建議用Post方式；

json和jsonP區別：JSON是一種基於文本的數據交換方式<1>.JSON的優勢：
　　A.數據格式比較簡單，易於讀寫，格式都是壓縮的，佔用帶寬小；
　　B.易於解析，客戶端JavaScript能夠簡單的經過eval_r()進行JSON數據的讀取；
　　C.支持多種語言，包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服務器端語言，便於服務器端的解析；
　　D.在PHP世界，已經有PHP-JSON和JSON-PHP出現了，偏於PHP序列化後的程序直接調用，PHP服務器端的對象、數組等能直接生成JSON格式，便於客戶端的訪問提取；
　　E.由於JSON格式能直接爲服務器端代碼使用，大大簡化了服務器端和客戶端的代碼開發量，且完成任務不變，而且易於維護。
<2>.JSON的缺點
　　A.沒有XML格式這麼推廣的深刻人心和喜用普遍，沒有XML那麼通用性；
　　B.JSON格式目前在Web Service中推廣還屬於初級階段。 jsonp 爲了便於客戶端使用數據，逐漸造成了一種非正式傳輸協議，人們把它稱做JSONP，該協議的一個要點就是容許用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了。 但ajax和jsonp其實本質上是不一樣的東西。ajax的核心是經過XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態添加<script>標籤來調用服務器提供的js腳本。因爲同源策略（同domain（或ip）,同端口，同協議視爲同一個域，一個域內的腳本僅僅具備本域內的權限，能夠理解爲本域腳本只能讀寫本域內的資源，而沒法訪問其它域的資源。這種安全限制稱爲同源策略。），爲了跨域（不一樣域名之間相互訪問
）請求數據，使用jsonp（）這種傳輸協議來解決
```
var url = "http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=callbackfunction";   
  var script = document.createElement('script');   
  script.setAttribute('src', url);  //load javascript    
  document.getElementsByTagName('head')[0].appendChild(script);   
  
  //回調函數  
   function callbackfunction(data){  
var html=JSON.stringify(data.RESULTSET);  
alert(html);  
```

省市聯動：

<!doctype html>
<html>
    <head>
        <title>省市聯動</title>
        <meta charset = "utf-8"/>
    </head>
<style type="text/css">


</style>
<script type="text/javascript">
    //省市聯動
var cityArr=[
    {
        "name":"北京",
        "city":[
                    {
                        "ID":0101,
                        "name":"海淀"
                    },
                    {
                        "ID":0102,
                        "name":"昌平"
                    },
                ]
    },
    {
        "name":"上海",
        "city":[
                    {
                        "ID":0211,
                        "name":"浦東"
                    },
                    {
                        "ID":0212,
                        "name":"閘北"
                    },
                ]
    },
    {
        "name":"天津",
        "city":"天津"
    },
    {
        "name":"重慶",
        "city":"重慶"
    },
    {
        "name":"陝西",
        "city":
                [
                    {
                        "ID":029,
                        "name":"西安"
                    },
                    {
                        "ID":0911,
                        "name":"延安"
                    },
                    {
                        "ID":0912,
                        "name":"榆林"
                    },
                    {
                        "ID":0913,
                        "name":"渭南"
                    },
                    {
                        "ID":0914,
                        "name":"商洛"
                    },
                    {
                        "ID":0915,
                        "name":"安康"
                    },
                    {
                        "ID":0916,
                        "name":"漢中"
                    },
                    {
                        "ID":0917,
                        "name":"寶雞"
                    },{
                        "ID":0919,
                        "name":"銅川"
                    },
                    {
                        "ID":0910,
                        "name":"咸陽"
                    },
                ]
    }
];
function showProviceFun(){
    var province = document.getElementById("proviceSelect");
    province.length = 0;
    for(var i=0;i<cityArr.length;i++){
        var option = document.createElement("option");
        option.value = cityArr[i].name;
        option.innerHTML = cityArr[i].name;        
        province.appendChild(option);
    }    
}
function showCity(){
    var temp = document.getElementById("proviceSelect");
    var city = document.getElementById("citySelect");
    city.length = 0;
    for(var i=0;i<cityArr.length;i++){
        if(temp.value==cityArr[i].name){
            for(var j=0;j<cityArr[i].city.length;j++){
                var option = document.createElement("option");
                option.value = cityArr[i].city[j].name;
                option.innerHTML = cityArr[i].city[j].name;        
                city.appendChild(option);                
            }
        }
    }
}
</script>
<body onload="showProviceFun()" >    
    <select id="proviceSelect" onchange="showCity()">
        <option>==省==</option>
    </select>省：    
    <select id="citySelect">
        <option>==市==</option>
    </select>市：
</body>
</html>

全選和全不選：

$("#all").click(function(){   
    if(this.checked){   
        $("#list :checkbox").prop("checked", true);  
    }else{   
    $("#list :checkbox").prop("checked", false);
    }   
});

數組去重:

如何消除一個數組裏面重復的元素？

// 方法一：
var arr1 =[1,2,2,2,3,3,3,4,5,6], arr2 = []; for(var i = 0,len = arr1.length; i< len; i++){ if(arr2.indexOf(arr1[i]) < 0){ arr2.push(arr1[i]); } } document.write(arr2); // 1,2,3,4,5,6

//放法二
 var res = [];
 var json = {};
 for(var i = 0; i < this.length; i++){
  if(!json[this[i]]){
   res.push(this[i]);
   json[this[i]] = 1;
  }
 }
 return res;
}
var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique3());

做用域和做用域鏈：

JavaScript中全部的量都是存在於某一個做用域中的

除了全局做用域, 每個做用域都是存在於某個做用域中的

在試圖訪問一個變量時JS引擎會從當前做用域開始向上查找直到Global全局做用域中止

例如
10
var A;//全局做用域
function B()
{
    var C;//C位於B函數的做用域
    function D()
    {
        var E;//E位於D函數的做用域
        alert(A)
    }
}
當alert(A)時, JS引擎沿着D的做用域, B的做用域, 全局做用域的順序進行查找.

這三個做用域組成的有序集合就成爲做用域鏈

至於爲何叫鏈, 你能夠理解和鏈表有類似之處, 深層的做用域會可以訪問到上層做用域, 就如同鏈表中兩個連續節點可以單向訪問同樣

字符串：

正則：

RegExp 對象
RegExp 對象表示正則表達式，它是對字符串執行模式匹配的強大工具。

直接量語法
/pattern/attributes建立 RegExp 對象的語法：
new RegExp(pattern, attributes);
參數
參數 pattern 是一個字符串，指定了正則表達式的模式或其餘正則表達式。

參數 attributes 是一個可選的字符串，包含屬性 "g"、"i" 和 "m"，分別用於指定全局匹配、區分大小寫的匹配和多行匹配。ECMAScript 標準化以前，不支持 m 屬性。若是 pattern 是正則表達式，而不是字符串，則必須省略該參數。
RegExp 對象方法
FF: Firefox, IE: Internet Explorer

方法 描述 FF IE 
compile 編譯正則表達式。 1 4 
exec 檢索字符串中指定的值。返回找到的值，並肯定其位置。 1 4 
test 檢索字符串中指定的值。返回 true 或 false。 1 4 
支持正則表達式的 String 對象的方法
FF: Firefox, IE: Internet Explorer

方法 描述 FF IE 
search 檢索與正則表達式相匹配的值。 1 4 
match 找到一個或多個正則表達式的匹配。 1 4 
replace 替換與正則表達式匹配的子串。 1 4 
split 把字符串分割爲字符串數組。 1 4

Cookie，localstorage，sessionstorage：

Js內部機制：

本地對象是ECMA官方定義好的對象；內置對象也是本地對象，只包括Global對象和Math對象；宿主對象包括BOM和DOM對象。
1. 本地對象
 本地對象包括以下內容：Object、Function、String、Array、Boolean、Number、Date、 RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。由此可知，本地對象是ECMA-2定義的類（引用類型）。
2. 內置對象
 ECMA-262把內置對象（built-in object）定義爲「 由ECMAScript實現提供的，獨立與宿主環境的全部對象，在ECMAScript程序開始執行時出現」。這意味着開發者沒必要明確實例化內置對象，它已經被實例化了。ECMA只定義了兩個內置對象，即Global和Math（它們也是本地對象，根據定義，全部內置對象都是本地對象）。
3. 宿主對象

      全部非本地對象都是宿主對象（host Object），即由ECMAScript實現的宿主環境提供的對象。

      全部的BOM和DOM對象都是宿主對象。

數據類型：String、Number、Boolean、Null、Undefined

JS 數據類型轉換 方法主要有三種
轉換函數、強制類型轉換、利用js變量弱類型轉換。
1. 轉換函數：
js提供了parseInt()和parseFloat()兩個轉換函數。前者把值轉換成整數，後者把值轉換成浮點數。只有對String類型調用這些方法，這兩個函數才能正確運行；對其餘類型返回的都是NaN(Not a Number)。
2. 強制類型轉換

還可以使用強制類型轉換（type casting）處理轉換值的類型。使用強制類型轉換能夠訪問特定的值，即便它是另外一種類型的。
ECMAScript中可用的3種強制類型轉換以下： 
Boolean(value)——把給定的值轉換成Boolean型； 
Number(value)——把給定的值轉換成數字（能夠是整數或浮點數）； 
String(value)——把給定的值轉換成字符串。 
用這三個函數之一轉換值，將建立一個新值，存放由原始值直接轉換成的值。這會形成意想不到的後果。 
當要轉換的值是至少有一個字符的字符串、非0數字或對象（下一節將討論這一點）時，Boolean()函數將返回true。若是該值是空字符串、數字0、undefined或null，它將返回false。

3. 利用js變量弱類型轉換

舉個小例子，一看，就會明白了。
<script> 
var   str= '012.345 '; 
var   x   =   str-0; 
x   =   x*1;
</script>

js判斷數據類型：

如何判斷js中的數據類型：typeof、instanceof、 constructor、 prototype方法比較
如何判斷js中的類型呢，先舉幾個例子：
var a = "iamstring.";
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};
 
最多見的判斷方法：typeof
alert(typeof a)   ------------> string
alert(typeof b)   ------------> number
alert(typeof c)   ------------> object
alert(typeof d)   ------------> object
alert(typeof e)   ------------> function
alert(typeof f)   ------------> function
其中typeof返回的類型都是字符串形式，需注意，例如：
alert(typeof a == "string") -------------> true
alert(typeof a == String) ---------------> false
另外typeof 能夠判斷function的類型；在判斷除Object類型的對象時比較方便。
 
判斷已知對象類型的方法： instanceof
alert(c instanceof Array) ---------------> true
alert(d instanceof Date) 
alert(f instanceof Function) ------------> true
alert(f instanceof function) ------------> false
注意：instanceof 後面必定要是對象類型，而且大小寫不能錯，該方法適合一些條件選擇或分支。
 
根據對象的constructor判斷： constructor
alert(c.constructor === Array) ----------> true
alert(d.constructor === Date) -----------> true
alert(e.constructor === Function) -------> true
注意： constructor 在類繼承時會出錯
eg,
      function A(){};
      function B(){};
      A.prototype = new B(); //A繼承自B
      var aObj = new A();
      alert(aobj.constructor === B) -----------> true;
      alert(aobj.constructor === A) -----------> false;
而instanceof方法不會出現該問題，對象直接繼承和間接繼承的都會報true：
      alert(aobj instanceof B) ----------------> true;
      alert(aobj instanceof B) ----------------> true;
言歸正傳，解決construtor的問題一般是讓對象的constructor手動指向本身：
      aobj.constructor = A; //將本身的類賦值給對象的constructor屬性
      alert(aobj.constructor === A) -----------> true;
      alert(aobj.constructor === B) -----------> false; //基類不會報true了;
 
通用但很繁瑣的方法： prototype
alert(Object.prototype.toString.call(a) === ‘[object String]’) -------> true;
alert(Object.prototype.toString.call(b) === ‘[object Number]’) -------> true;
alert(Object.prototype.toString.call(c) === ‘[object Array]’) -------> true;
alert(Object.prototype.toString.call(d) === ‘[object Date]’) -------> true;
alert(Object.prototype.toString.call(e) === ‘[object Function]’) -------> true;
alert(Object.prototype.toString.call(f) === ‘[object Function]’) -------> true;

js檢測一個變量是string類型的方法：function a(obj){

return typeof(obj)=="string";api

}

請說出三種減小頁面加載時間的方法
：1. 優化圖片

2. 圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）

3. 優化CSS（壓縮合並css，如 margin-top, margin-left...)

4. 網址後加斜槓（如www.campr.com/目錄，會判斷這個目錄是什麼文件類型，或者是目錄。）

5. 標明高度和寬度（若是瀏覽器沒有找到這兩個參數，它須要一邊下載圖片一邊計算大小，若是圖片不少，瀏覽器須要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。

當瀏覽器知道了高度和寬度參數後，即便圖片暫時沒法顯示，頁面上也會騰出圖片的空位，而後繼續加載後面的內容。從而加載時間快了，瀏覽體驗也更好了）

6. 減小http請求（合併文件，合併圖片）
eval() 函數可計算某個字符串，並執行其中的的 JavaScript 代碼。
Js的Url中傳遞中文參數亂碼問題，重點：encodeURI編碼，decodeURI解碼