前端面試題整合（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