前端考核總結2

代碼問題

console.log([]==false);true
console.log(![]==false);false

let arr = [1,2,3,4];
arr = arr.map((parseInt));
console.log(arr);

• 輸出結果：[1,NaN,NaN,NaN,];
• parseInt()它有兩個引數，引數一是傳入的字串，引數二是要決議數字的基數，如果基數為0或者不寫，默認是以十進制決議，同時基數的范圍在2~36之間，小于2，大于36則會決議為NaN，還有字串表示的數字不能大于基數，
• item:“1”,index:0 //上面提到的引數二是0時，默認決議為十進制 所以為1
• item:‘2’,index：1 // 2大于1 所以為NaN
• item：‘3’，index:2 //3大于2 所以為NaN

理論問題

• 通過JavaScript使網頁后退的代碼是history.back();
• 獲取焦點的事件是onfocus,失去焦點的事件是onblur
• opacity設定為0表示消失
• shift() 方法用于把陣列的第一個元素從其中洗掉，并回傳第一個元素的值，
• unshift() 方法可向陣列的開頭添加一個或更多元素，并回傳新的長度，

閉包

閉包是什么

• 當函式a的內部函式b被函式a外的一個變數參考的時候，就創建了一個閉包
• 讓我們說的更透徹一些，所謂“閉包”，就是在建構式體內定義另外的函式作為目標物件的方法函式，而這個物件的方法函式反過來參考外層函式體中的臨時變數，這使得只要目標 物件在生存期內始終能保持其方法，就能間接保持原建構式體當時用到的臨時變數值，盡管最開始的建構式呼叫已經結束，臨時變數的名稱也都消失了，但在目 標物件的方法內卻始終能參考到該變數的值，而且該值只能通這種方法來訪問，即使再次呼叫相同的建構式，但只會生成新物件和方法，新的臨時變數只是對應新 的值，和上次那次呼叫的是各自獨立的，

閉包的作用

• 簡而言之：閉包的作用就是在a執行完并回傳后，閉包使得Javascript的垃圾回識訓制GC不會識訓a所占用的資源，因為a的內部函式b的執行需要依賴a中的變數，這是對閉包作用的非常直白的描述，不專業也不嚴謹，但大概意思就是這樣，理解閉包需要循序漸進的程序， 在上面的例子中，由于閉包的存在使得函式a回傳后，a中的i始終存在，這樣每次執行c()，i都是自加1后alert出i的值，
  那 么我們來想象另一種情況，如果a回傳的不是函式b，情況就完全不同了，因為a執行完后，b沒有被回傳給a的外界，只是被a所參考，而此時a也只會被b引 用，因此函式a和b互相參考但又不被外界打擾(被外界參考)，函式a和b就會被GC回收，

閉包的應用場景

• 保護函式內的變數安全，以最開始的例子為例，函式a中i只有函式b才能訪問，而無法通過其他途徑訪問到，因此保護了i的安全性， 在記憶體中維持一個變數，依然如前例，由于閉包，函式a中i的一直存在于記憶體中，因此每次執行c()，都會給i自加1， 通過保護變數的安全實作JS私有屬性和私有方法（不能被外部訪問） 私有屬性和方法在Constructor外是無法被訪問的，

JavaScript中的垃圾回識訓制

• 在Javascript中，如果一個物件不再被參考，那么這個物件就會被GC回收，如果兩個物件互相參考，而不再被第3者所參考，那么這兩個互相參考的物件也會被回收，因為函式a被b參考，b又被a外的c參考，這就是為什么函式a執行后不會被回收的原因，

function a() {
 var i = 0; 
 function b() {
  alert(++i);
   };
    return b;
}; 
   var c = a(); 
   c();

use strict–嚴格模式

• 它不是一條陳述句，但是是一個字面量運算式，在 JavaScript 舊版本中會被忽略，
• “use strict” 的目的是指定代碼在嚴格條件下執行，
• 嚴格模式下你不能使用未宣告的變數，
• “use strict” 指令只允許出現在script或函式的開頭，若寫在函式里面，則只會對函式里面起限制

為什么要使用嚴格模式

• 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
  消除代碼運行的一些不安全之處，保證代碼運行的安全；
• 提高編譯器效率，增加運行速度；
• 為未來新版本的Javascript做好鋪墊，
• "嚴格模式"體現了Javascript更合理、更安全、更嚴謹的發展方向，包括IE 10在內的主流瀏覽器，都已經支持它，許多大專案已經開始全面擁抱它，
• 另一方面，同樣的代碼，在"嚴格模式"中，可能會有不一樣的運行結果；一些在"正常模式"下可以運行的陳述句，在"嚴格模式"下將不能運行，掌握這些內容，有助于更細致深入地理解Javascript，讓你變成一個更好的程式員，

深淺拷貝

• 淺拷貝只復制指向某個物件的指標而不復制物件本身，新舊物件還是共享同一塊記憶體，
• 深拷貝會另外創造一個一模一樣的物件，新物件跟原物件不共享記憶體，修改新物件不會改到原物件，
• 深拷貝和淺拷貝是只針對Object和Array這樣的參考資料型別
  的，
  

js中的then（）是什么意思

• then()方法是異步執行，
• 就是當.then()前的方法執行完后再執行then()內部的程式，這樣就避免了，資料沒獲取到等的問題，
• 語法：promise.then(onCompleted, onRejected);
  引數
• promise必需，Promise 物件，
• onCompleted必需，承諾成功完成時要運行的履行處理程式函式，
• onRejected可選，承諾被拒絕時要運行的錯誤處理程式函式

jquery和DOM物件是怎樣轉換的

什么是DOM物件

• 使用JavaScript中的方法獲取頁面中的元素回傳的物件就是dom物件，比如使用document.getElement*系列的方法回傳的就是dom物件，

什么是jQuery物件

• jquery物件就是使用jquery的方法獲取頁面中的元素回傳的物件就是jQuery物件，比如使用$()方法回傳物件都是jquery物件，

jQuery物件和DOM物件的相互轉換

1. jQuery --> DOM

• jQuery提供了兩種方法：[index]和get(index)
• jQuery物件是一個類似陣列的物件，可以通過[index]方法得到相應的DOM物件

1.var $students = $("#students");//jQuery物件
var student = $students[0];//DOM物件
2.另一種方法是jQuery本身提供的，通過get(index)方法得到相應的DOM物件
var student = $students.get(0);

2. DOM --> jQuery

• 只需用$()把DOM物件包起來即可

var student = document.getElementById("student");//DOM物件
var $student = $(student);//jQuery物件

函式節流和函式防抖

概念

• 節流函式：讓一個函式無法在短時間內連續呼叫，只有當上一次函式執行后，過了規定的時間間隔，才能進行下一次該函式的呼叫，
• 函式防抖：頻繁觸發的情況下，只有足夠的空閑時間，才執行代碼一次，（比如生活中的坐公交，就是一定時間內，如果有人陸續刷卡上車，司機就不會開車，只有別人沒刷卡了，司機才開車，）
• 函式節流和函式防抖，兩者都是優化高頻率執行js代碼的一種手段，

應用場景

• 懶加載、滾動加載、加載更多或監聽滾動條位置；
• 百度搜索框，搜索聯想功能；
• 防止高頻點擊提交，防止表單重復提交；

原理

• 主要實作思路就是通過 setTimeout 定時器，通過設定延時時間，在第一次呼叫時，創建定時器，先設定一個變數true，寫入需要執行的函式，第二次執行這個函式時，會判斷變數是否true，是則回傳，當第一次的定時器執行完函式最后會設定變數為false，那么下次判斷變數時則為false，函式會依次運行，目的在于在一定的時間內，保證多次函式的請求只執行最后一次呼叫，

同步和異步的區別

同步

• 概念：所有的操作都做完，才回傳給用戶，這樣用戶在線等待的時間太長，給用戶一種卡死了的感覺（就是系統遷移中，點擊了遷移，界面就不動了，但是程式還在執行，卡死了的感覺），這種情況下，用戶不能關閉界面，如果關閉了，即遷移程式就中斷了，
• 優點：同步是按照順序一個一個來，不會亂掉，更不會出現上面代碼沒有執行完就執行下面的代碼
• 缺點：是決議的速度沒有異步的快，客戶體驗不友好；

異步

• 概念：將用戶請求放入訊息佇列，并反饋給用戶，系統遷移程式已經啟動，你可以關閉瀏覽器了，然后程式再慢慢地去寫入資料庫去，這就是異步，但是用戶沒有卡死的感覺，會告訴你，你的請求系統已經回應了，你可以關閉界面了，
• 優點：異步是接取一個任務，直接給后臺，在接下一個任務，一直一直這樣，誰的先讀取完先執行誰的， 客戶端可以做其他的事情，這樣節約了時間，提高了效率，
• 缺點：沒有順序 ，誰先讀取完先執行誰的 ，會出現上面的代碼還沒出來下面的就已經出來了，會報錯；
• 異步雖然效率更高，但是我們有時候是需要拿到回傳的資料在進行操作的，這些是異步所無法解決的，

map和forEach的區別

相同點

• 都是回圈遍歷陣列中的每一項
• forEach和map方法里每次執行匿名函式都支持3個引數，引數分別是item（當前每一項）、index（索引值）、arr（原陣列）
• 匿名函式中的this都是指向window
• 只能遍歷陣列

不同點

1.forEach()

• 沒有回傳值，

2.map()

• 有回傳值，可以return 出來，

for…in和for…of的區別

• for…in…遍歷陣列，物件的鍵值（下標）

let arr = [1, 2, 3];
for (let i in arr) {
	console.log(i)
}
let obj = {
	name: 'wuxiaodi',
	age: 18,
};
for (let i in obj) {
	console.log(i);0,1,2,name,age
}

• 如果想要遍歷到物件的值，改成下列

let arr = [1, 2, 3];
for (let i in arr) {
	console.log(arr[i])
}
let obj = {
	name: 'wuxiaodi',
	age: 18,
};
for (let i in obj) {
	console.log(obj[i]);1,2,3,'wuxiaodi',18
}

• for…of…遍歷陣列的值

let arr = [1, 2, 3];
for (let i of arr) {
	console.log(i);1,2,3
}