轉載請註明預見才能遇見的博客：http://my.csdn.net/
原文地址：https://mp.csdn.net/postedit/100654006
JavaScript原生系列-總結篇(一)
目錄
1.window.onload、οnlοad=""和$(document).ready()的區別
(1)使用ES6數據結構Set 和 ES6 Array.from()
1.window.onload、οnlοad=""和$(document).ready()的區別
window.onload是在頁面中包含圖片在內的所有元素全部加載完成再執行，多次會覆蓋；【JQ】$(document).ready()是DOM樹加載完成之後執行，不包含圖片，其他媒體文件；一般$(document).ready()快於window.onload執行，代碼少的情況下執行順序是不確定的。<body οnlοad="meathName1();meathName2();">在body加載完成執行，在window和dom之後執行，總是最後執行，這裏的函數會覆蓋window.onload，但是meathName2不會覆蓋meathName1。
詳細資料： https://blog.csdn.net/pcaxb/article/details/100661841
2.數組去重
(1)使用ES6數據結構Set 和 ES6 Array.from()
let arr = ['a','bb','22','a','yuci','haha','22'];
let setArr = new Set(arr);
console.log(setArr);
arr = Array.from(setArr);
console.log(arr);
Array.from()擴展， 將類數組轉換成數組參考
(2)使用push 和 indexOf
let arr = ['a','bb','22','a','yuci','haha','22'],
arrCenter = [];
for (const index in arr) {
let item = arr[index];
if(arrCenter.indexOf(item) == -1){
arrCenter.push(item);
}
}
console.log(arrCenter);
如果當前數組的第i項在當前數組中第一次出現的位置不是i，那麼表示第i項是重複的，忽略掉。否則存入結果數組
let arr = ['a','bb','22','a','yuci','haha','22','cc'],
arrCenter = [];
for (const index in arr) {
let item = arr[index];
//0 1 2 0 4 5 2 7
// console.log(arr.indexOf(item));
if(arr.indexOf(item) == index){
arrCenter.push(item);
}
}
console.log(arrCenter);
(3)排序去除相鄰重複元素
let arr = ['a','bb','22','a','yuci','haha','22','cc'],
arrCenter = [];
arr = arr.sort();//["22", "22", "a", "a", "bb", "cc", "haha", "yuci"]
for (let index in arr) {
//index 是字符串
let item = arr[index];
if(item != arr[parseInt(index)+1]){
arrCenter.push(item);
}
}
console.log(arrCenter);
3.事件委託(事件代理)、事件捕獲、事件冒泡
事件委託(事件代理)：事件委託就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。
事件捕獲：當一個事件觸發後,從Window對象觸發,不斷經過下級節點,直到目標節點。在事件到達目標節點之前的過程就是捕獲階段。所有經過的節點,都會觸發對應的事件
事件冒泡：當事件到達目標節點後，會沿着捕獲階段的路線原路返回。同樣，所有經過的節點,都會觸發對應的事件
//事件冒泡
window.addEventListener("click",()=>console.log("window"));
document.addEventListener("click",()=>console.log("document"));
document.body.addEventListener("click",()=>console.log("body"));
document.getElementById("div01").addEventListener("click",()=>console.log("div01"));
//事件捕獲
window.addEventListener("click",()=>console.log("window"),true);
document.addEventListener("click",()=>console.log("document"),true);
document.body.addEventListener("click",()=>console.log("body"),true);
document.getElementById("div01").addEventListener("click",()=>console.log("div01"),true);
參考資料：https://blog.csdn.net/pcaxb/article/details/100665670
4.判斷變量類型
typeof()用於判斷簡單數據；
判斷一個變量是對象還是數組使用instanceof，constructor或Object.prototype.toString.call()；
參考資料：https://blog.csdn.net/pcaxb/article/details/101020581
5.同步和異步（簡要闡述）
同步：由於js單線程，同步任務都在主線程上排隊執行，前面任務沒執行完成，後面的任務會一直等待；
異步：不進入主線程，進入任務隊列，等待主線程任務執行完成，開始執行。最基礎的異步操作setTimeout和setInterval，等待主線程任務執行完，在開始執行裏面的函數；
參考資料：http://www.ruanyifeng.com/blog/2014/10/event-loop.html
6.返回false的幾種情況
除了"",0,false,null,undefined,NaN返回false，其他全部返回true(包括空對象，空數組)
參考資料：https://blog.csdn.net/pcaxb/article/details/101020581
7.js數據在內存中的存儲
存儲方式：
簡單數據類型：存儲在棧中；
引用數據類型：存儲在堆中，在棧中存儲了指針，指向存儲在堆中的地址，解釋器會先檢索在棧中的地址，從堆中獲得實體；
內存佔用大小：
簡單數據類型：大小固定，佔用空間小，頻繁使用，所以存儲在棧中；
引用數據類型：大小不固定，佔用空間大；
8.閉包
何爲閉包：有權訪問另一個作用域中變量的函數
閉包特性：可實現函數外訪問函數內變量，外層變量可以不被垃圾回收機制回收
for(var i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
//結果全部是10
//閉包解決
for(var i = 0; i < 10; i++) {
(function(j) {
setTimeout(function() {
console.log(j);
}, 1000);
})(i);
}
參考資料：https://blog.csdn.net/pcaxb/article/details/100583697
9.this的指向
1.當函數作爲對象的方法被調用時，this 指向該對象
2.作爲普通函數調用時，this 總是指向全局對象（window）
3. 構造器調用，構造器裏的 this 就指向返回的這個對象
4. Function.prototype.call 或 Function.prototype.apply 調用，將this指向第一個參數指明的對象。
5.全局範圍：指向window（嚴格模式下不存在全局變量，指向undefined）;
參考資料：https://blog.csdn.net/pcaxb/article/details/87622552
10.new具體做了些什麼
(1)創建一個對象
(2)將構造函數的作用域賦給新對象(因此this指針就指向了新的對象) 【代碼：p.__proto__ = Person.prototype】
說明：Person中的prototype是在創建構造函數的時候創建的。其實原型對象就是構造函數的一個實例對象。Person.prototype就是Person的一個實例對象。相當於在Person創建的時候，自動創建了一個它的實例，並且把這個實例賦值給了prototype。
function Person(){};
var temp = new Person();
Person.prototype = temp;
(3)執行構造函數中的代碼
(4)返回新對象
參考資料：https://blog.csdn.net/pcaxb/article/details/100668246
11.原型和原型鏈
參考資料：https://blog.csdn.net/pcaxb/article/details/100668246
12.繼承方式
參考資料：https://blog.csdn.net/pcaxb/article/details/100668246
13.數組常用方法
1.改變原數組
尾部刪除pop()，尾部添加push()，頭部刪除shift()，頭部添加unshift()，排序sort()，顛倒數組元素reverse()，刪除或插入元素splice();
2.不改變原數組
合併數組concat()，拼接數組元素join()，截取元素slice()，indexOf()，lastIndexOf()，toString()
參考資料：Array數組方法總結
14.數據存儲
Cookie：用於客戶端與服務端通信，也具有本地存儲的功能
localStorage，sessionStorage：專門用於存儲
區別：
大小：Cookie容量爲4K，因爲用於客戶端與服務端通信，所有http都攜帶，如果太大會降低效率； localStorage，sessionStorage大小爲5M。
失效時間：Cookie會在瀏覽器關閉時刪除，除非主動設置刪除時間；localStorage一直都在直到用戶主動刪除或清除瀏覽器緩存；sessionStorage在瀏覽器關閉時刪除。
JavaScript原生系列-總結篇(一)