1.js除錯工具 debugger
<div class="container"> <h3>debugger語句會產生一個斷點，用於除錯程式，並沒有實際功能；</h3> <ol> <li>使用debugger的前提是你手動開啟了“開發者工具”；</li> <li>debugger會產生一個斷點，程式碼會停止在這裡不再往下執行；</li> </ol> </div> <script> console.log(1); debugger; console.log(2); </script>
2.獲取頁面元素 document.querySelector()
<h3>如何獲取頁面元素？</h3>
<ol>
<li>獲取單個元素：document.querySelector(`選擇器`)，如果該選擇器對應多個元素，則只返回第一個；</li>
<li>獲取多個元素：document.querySelectorAll(`選擇器`)，獲取選擇器對應的全部元素；</li>
</ol>
3.型別轉換
<h3>型別轉換</h3>
<ol>
<li>JavaScript總是把值自行轉換為他需要的資料型別;</li>
<li>
轉化為數字：
-(減)、*(乘)、/(除)，會把型別轉換成數字； <br>
true轉化為1，false、空字串轉換為0；<br>
略坑的加號:+，只要有一個是字串，則全部作為字串；
因為加號(+)同時還是字串連線符號；
</li>
<li>原始值到物件的轉換：直接使用String()、Number()、Boolean()建構函式轉換；</li>
</ol>
4.作為屬性的變數
<h3>作為屬性的變數</h3>
<ol>
<li>使用var宣告變數時，作為全域性物件的一個屬性，無法通過delete運算子刪除；</li>
<li>不使用var，直接給一個未宣告的變數賦值，該變數是可以delete的；</li>
<li>不使用var，使用關鍵詞this給一個變數賦值，也是可以delete的；</li>
</ol>
5.作用域鏈(概念知識，重點!)
<h3>作用域鏈</h3>
<ol>
<li>JavaScript裡的全域性程式碼或者函式，都有一個與之對應的作用域鏈；</li>
<li>作用域鏈可以理解為物件的列表，或叫物件的連結串列，他們是按優先順序順序排列的；</li>
<li>這些物件就定義了一段程式碼或者函式的“作用域中”的變數；</li>
<li>在全域性程式碼(就是不是函式的程式碼，好扯~~)中，作用域鏈由一個全域性物件組成；</li>
<li>
在無巢狀的函式中，作用域鏈有兩個物件：<br>
一、定義函式引數和區域性變數的物件； <br>
二、定義全域性變數的物件；<br>
如果是巢狀函式，則作用域鏈上至少三個物件；
</li>
<li>
當程式碼執行需要<code>變數解析</code>(就是查詢需要的變數的值)的時候，<br>
就在作用域鏈(有順序的物件或者連結串列)裡面尋找對應的變數，<br>
一旦找到就使用該變數並結束尋找；<br>
如果作用域鏈裡面找不到對應的變數，則丟擲錯誤；
</li>
</ol>
6.關係表示式
<h3>關係運算子用於檢測兩個值之間的關係；</h3>
<ol>
<li>總是返回一個布林值true或false；</li>
<li>==：相等運算子，檢查兩個值是否相等，不考慮型別；</li>
<li>===：恆等運算子，檢查兩個值是否相等，同時考慮型別；</li>
<li>比較運算子：>、>=、<、<=；</li>
<li>
in運算子：檢查右側物件裡面是否擁有左側屬性名，如果有返回true； <br>
例項程式碼一看就什麼都懂了 ：
<pre>
var a = {x:1, y:2, z:``};
console.log(a);
console.log(`x` in a);
console.log(`z1` in a);
console.log(`toString` in a);
console.log(`isPrototypeOf` in a);
</pre>
</li>
<li>
instanceof:檢查左側的物件是否是右側類的例項，如果是返回true； <br>
如果一個物件是一個“父類”的子類的例項，則一樣返回true； <br>
還有記住一點所有的物件都是Object的子類(後面原型鏈會講到)； <br>
所以，還是看程式碼：
<pre>
var d = new Date();
console.log(d instanceof Date);
console.log(d instanceof Array);
console.log(d instanceof String);
console.log(d instanceof Object);
</pre>
</li>
</ol>
7.位運算子
<h3>位運算子對數字的二進位制資料進行更低層級的按位運算，高階，然而不常用；</h3>
<ol>
<li>位運算要求運算元是整數；</li>
<li>位運算會將NaN、Infinity、-Infinity轉換為0；</li>
<li>按位於：&，對運算元的二進位制表示逐步執行AND操作；</li>
<li>按位或：|，對運算元的二進位制表示逐步執行OR操作；</li>
<li>按位異或：^，對運算元的二進位制表示逐步執行XOR操作，一個為1另一個不為1才返回1；</li>
<li>按位或：~，對運算元的二進位制表示所有位取反；</li>
<li>左移：<<，對運算元的二進位制表示進行左移，移動位數由第二個運算元指定；新的一位用0補充，並捨棄第32位；左移1位相當於*2，左移2位相當於*4，以此類推；</li>
<li>帶符號右移：>>，右邊溢位的位忽略；如果是正數，左邊最高位補0；如果是負數，左邊最高位補1；右移1位相當於/2,右移2位相當於/4，不要餘數，以此類推；</li>
<li>無符號右移：>>>，和帶符號右移一樣，只是左邊的最高位總是補0；</li>
</ol>
8.算術表示式
<h3>大聲說出來你知道的算術運算子：加減乘除取餘，+-*/%；</h3>
<ol>
<li>
+：數字相加 或 字串連線； <br>
加法操作的行為表現： <br>
一、如果其中一個運算元是物件，則JavaScript會自動把他轉成原始型別的值；<br>
二、如果其中一個運算元是字串的話，則另一個也會轉成字串，然後你懂的；<br>
三、如果兩個運算元都是數字，則進行加法運算; <br>
可憐巴巴的樣子，還是給你弄幾個例子吧：
<pre>
console.log(1 + 5);
console.log(`1` + 5);
console.log(new Date() + `--ok`);
console.log(12 + NaN);
console.log(true + true);
console.log(201 + null);
console.log(203 + undefined);
console.log(3 + 5 + `猜猜看`);
</pre>
</li>
<li>其他的算術運算子還用講嗎？</li>
</ol>
9.物件建立表示式
<h3>由函式呼叫表示式延伸而來，前面加個new即可；</h3>
<ol>
<li>如果不需要傳遞引數，函式後面的小括號可以省略；</li>
<li>如果呼叫的函式或方法沒有返回值，則表示式的值是undefined；</li>
<li>簡單理解就是函式或方法名稱後面跟上小括號代表執行；</li>
<li>不看個例子感覺不踏實：
<pre>
new Array(1,2,3);
new String(`hello world!`);
</pre>
</li>
</ol>
10.標籤語句
<h3>跳轉語句可以讓JavaScript程式碼的執行從一個位置跳轉到另一個位置，厲害了~</h3>
<h3>標籤語句</h3>
<ol>
<li>標籤由識別符號加冒號組成，如：gohere:；</li>
<li>標籤識別符號+冒號(:)+語句，就組成了標籤語句；</li>
<li>break 和 continue可以使用語句標籤；</li>
</ol>
11.for-in 一個重點例子，猜猜會列印什麼？為什麼？
var personobj = { name: `你叫什麼？`, sex: `男`, weight: `160` }; var arr = new Array(); var i = 0; for(arr[i++] in personobj); console.log(arr);
12.try-catch-finally
<h3>try-catch-finally是JavaScript的異常處理機制；</h3> <ol> <li> 語法結構是這樣的： <pre> try{ //我們自認為沒有錯誤的 處理業務的程式碼 } catch(e){ //上面的業務處理程式碼報錯了，這裡才會執行 //console.log(e); } finally{ //這裡總是會執行，哎喲，領導啊，總結髮言 } </pre> </li> <li>異常物件e裡面有兩個屬性name和message，分別代表錯誤型別和錯誤描述資訊；</li> <li> 瞄一眼小案例： <pre> try{ console.log(a); } catch(e){ console.log(e.name); //返回錯誤型別 console.log(e.message); //錯誤描述 } finally{ console.log(`大會到處結束`); } </pre> </li> </ol>
13.with語句用於臨時擴充套件作用域鏈
<h3>with語句用於臨時擴充套件作用域鏈；</h3>
<ol>
<li>是的，臨時擴充套件作用域，臨時；with程式碼塊執行完成後恢復原始狀態；</li>
<li>
語法結構是這樣的：
<pre>
with(object){
statement;
}
</pre>
將object新增到作用域鏈的頭部，執行完成statement後，作用域鏈恢復到原始狀態；
</li>
<li>
看程式碼吧
<pre>
/*
*清空表單所有輸入框的值
*document.querySelector[`#myform`].username.value = ``;
*document.querySelector[`#myform`].password.value = ``;
*document.querySelector[`#myform`].coder.value = ``;
*/
with(document.querySelector[`#myform`]){
username.value = ``;
password.value = ``;
coder.value = ``;
}
</pre>
這就是with的用法；
</li>
<li>但是，不推薦使用with，有程式碼不好優化，執行慢等問題；</li>
<li>並且，嚴格模式下是不能使用with的；</li>
<li>所以，能不用我看你還是不要用with了吧；</li>
</ol>
14.use strict
<h3>use strict是將後續的程式碼解析為嚴格程式碼；</h3>
<ol>
<li>嚴格模式下禁止使用with；</li>
<li>嚴格模式下所有的變數都要先宣告；</li>
<li>
嚴格模式下呼叫函式的this值是undefined；下面這段小程式碼不加"use strict"的區別；
<pre>
"use strict";
function fn(){
console.log(this);
}
fn();
</pre>
</li>
<li>嚴格模式和普通模式有很多細微差別，記住很困難，基本原則是：<code>寫程式碼要嚴謹</code>，不要偷懶，不要覺得當前程式碼可以正常執行即可；</li>
</ol>