前端面試題整合（JS基礎篇）（一）

typeof返回的數據類型

• undefined
• string
• boolean
• number
• object
• function
• symbol

js數據類型

基本六種

• string            字符串
• number         數字
• boolean         布爾
• Null               空
• undefined      未定義
• Object           引用類型
• es6新增 symbol類型

”==”和“===”的區別

前者會強制轉換類型 后者不會

有哪些強制類型轉換和隱式類型轉換

強制：parseInt(),parseFloat(),Number()
隱式：== ,!=

解決js兼容性問題

• 使用 event對象

function eventHandler(event) {
    event = event || window.event
}

• 獲取滾動條屬性

var scrollTop = document.documentElment.scrollTop || document.body.scrollTop

• 阻止瀏覽器默認行為

        function eventHandler(event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        }

• 事件冒泡

        function eventHandler(event) {
            if (event.stopPropagation) {
                event.stopPropagation()
            } else {
                event.cancelBubble()
            }
        }

事件流

冒泡型事件流：事件的傳播是從最特定的事件目標到最不特定的事件目標。即從DOM樹的葉子到根。就子元素向父元素觸發
捕獲型事件流：事件的傳播是從最不特定的事件目標到最特定的事件目標。 即從DOM樹的根到葉子。就是父元素向子元素觸發                 優點：
（1）可以大量節省內存占用
（2）可以實現當新新增對象時，無需在對其進行綁定

事件委托

可以為同樣元素綁定多次同一事件
可以確定是冒泡還是捕獲
動態創建元素，可以創建元素的函數體外部為其添加
把某個事件加到父元素上 提高程序執行效率

瀏覽器的事件機制

事件捕獲階段---處於目標階段 --- 事件的冒泡階段---- 事件的默認階段

事件綁定和普通事件的區別

• 普通添加事件的方法：

var btn = document.getElementById("ele");
 btn.onclick = function(){
     alert(1); 
}
 btn.onclick = function(){
     alert(2); 
} 

執行上面的代碼只會alert   2 

• 事件綁定方式添加事件：

var btn = document.getElementById("ele");
btn.addEventListener("click",function(){
    alert(1);
},false);
btn.addEventListener("click",function(){
    alert(2);
},false);

執行上面的代碼會先alert 1 再 alert 2 

• 普通添加事件的方法不支持添加多個事件，最下面的事件會覆蓋上面的，而事件綁定   （addEventListener）方式添加事件可以添加多個。
• addEventListener不兼容低版本IE
• 普通事件無法取消
• addEventLisntener還支持事件冒泡+事件捕獲

eval的理解

• 可以將字符串生成語句執行，一般執行動態js語句
• eval的使用場合：有時候我們預先不知道要執行什么語句，只有當條件和參數給時才知到執行什么語句，這時候eval就派上用場了         eval和json.parse的誰更高效？
• 是json.parse
• 因為evel他是轉化在解析而json.parse是直接解析
• 應該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執行）。

數組的方法

• push() 從隊尾添加,改變原數組
• pop()   移除數組末尾最后一項,返回移除的項  
• shift()    刪除數組第一項,返回刪除元素的值,如果數組為空返回undefined  
• unshift() 添加頭部,改變原數組
• sort()  數組排序,參數為一個匿名函數,如果匿名函數返回正值,則升序排列,反之相反
• reverse() 翻轉數組項的順序 原數組改變
• concat() 將參數添加到原數組,將參數添加到數組的末尾,並返回一個新數組,不改變原數組
• slice()   返回原數組中指定開始下標到結束下標之間的項組成的新數組,slice接受兩個參數,如果致謝一個參數,slice方法返回從該參數到數組末尾的所有項,如果有兩個參數,該方法返回起始位置和結束位置之間的項,但不包括結束位置的項
• splice()    可以實現刪除,插入,替換   刪除(可以刪除任意屬相的項,只需要指定2個參數,要刪除的第一項的位置和要刪除的項)  插入,替換(可以向指定位置插入任意數量的項,只需提供3個參數:起始位置,0(要刪除的項),插入的項),splice()方法始終都會返回一個數組,數組中包括從原數組中刪除的項,如果沒有刪除任何項則返回一個空數組  
• map()  對數組中的每一項運行給定函數,返回每次函數調用的結果組成的數組  
• some() 判斷數組中是否存在滿足條件的項,只要有一項滿足條件,就返回true  
• every()    判斷數組中每一項都是否滿足條件,只有所有選項都滿足條件,才會返回true  
• filter() 過濾功能,數組中的每一項運行給定函數,返回滿足過濾條件組成的數組  
• forEach() 對數組進行循環遍歷,對數組中的每一項運行給定函數,這個方法沒有返回值,參數都是function類型,默認有傳參功能,參數分別是,便利的數組內容,對應的索引,數組本身
• indexOf() 接受兩個參數,要查找的項和表示查找起點位置的索引,返回查找的項在數組的位置,沒找到的情況下返回-1

偽數組轉成真數組的方法

• Array.from()
• Array.prototype.slice.call();
• 循環並push到新數組
• 解構賦值：list=[..._list]（es6）

window.onload與$(document).ready()的區別

• 執行時間  window.onload必須等到頁面內包括圖片的所有元素加載完畢后才能執行。  $(document).ready()是DOM結構繪制完畢后就執行，不必等到加載完畢.
• 編寫個數不同 window.onload不能同時編寫多個，如果有多個window.onload方法，只會執行一個 $(document).ready()可以同時編寫多個，並且都可以得到執行
• 簡化寫法 window.onload沒有簡化寫法 $(document).ready(function(){})可以簡寫成$(function(){});

this的理解

this代表函數運行時，自動生成的一個內部對象，只能在函數內部使用，隨着函數使用場合的不同，this的值會發生變化。但有一個總的原則就是，誰調用它，它就指向誰。一般在這幾種情況下會用到它.

• 單純的函數調用；
• 作為對象方法的調用；
• 作為構造函數調用；
• apply調用，apply（）是函數對象的一個方法，它的作用是改變函數的調用對象，它的第一個參數就表示改變后的調用這個函數的對象，當它的參數為空時，默認調用全局對象

跨域機制是什么，解決方式

因為同源策略的誕生,只能訪問相同端口,協議,域名的網站,所以我們要進行跨域，以下是常見解決方式

• 通過JsonP(動態創建一個script標簽,通過src屬性,設置一個端口號,通過接口上的某個參數向服務器傳送一個函數,通過之歌回調函數接受服務器返回的數據)
• 通過修改document.domain來跨子域
• 使用window.name來進行跨域
• cors
• 反向代理
• webSocket

get和post的區別

共同點：

• 無論是get還是post，都是可以發送數據，也可以接受數據

區別：

• get是以url方式傳遞數據，而post是以http請求中的body部分傳遞數據 ，所以說post更安全
• get傳遞數據時，直接再瀏覽器地址欄可以看到；而post可以使用開發者工具中看到
• get傳遞數據，中文不會被編碼或有可能出現亂碼，而post不會
• get在IE下會走緩存，而post不會

js如何創建一個對象

對象的字面量創建 var obj= {}
創建實例對象 var obj = new Object（）
構造函數的模式 function fn(){}, new fn()
工廠模式 用一個函數，通過傳參數返回對象

function createObj(name,age,family) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.family = family;
    return o;
}

原型模式

function Obj() {
}

Obj.prototype.name = "Obj";
Obj.prototype.age = 10;
var obj= new Obj()

混合模式

function createObj(name,age) {
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    return o;
}

createObj.prototype.name = "Obj";
createObj.prototype.age = 10;
var _obj= new createObj()

null，undefined 的區別

• null表示一個對象是“沒有值”的值，也就是值為“空”；
• undefined表示一個變量聲明了沒有初始化(賦值)；
• undefined不是一個有效的JSON，而null是；
• undefined的類型(typeof)是undefined；  null的類型(typeof)是object；
• Javascript將未賦值的變量默認值設為undefined；  Javascript不會將變量設為null。null是用來讓程序員表明某個用var聲明的變量時沒有值的。
• null == undefined // true    null === undefined // false

對JSON 的了解

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。
它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 占用帶寬小
JSON字符串轉換為JSON對象:  

• var obj =eval('('+ str +')');
• var obj = str.parseJSON();
• var obj = JSON.parse(str);

JSON對象轉換為JSON字符串：

• var last=obj.toJSONString();
• var last=JSON.stringify(obj);

js延遲加載的方式有哪些？

defer和async、動態創建DOM方式（用得最多）、按需異步載入js