爬蟲不得不學之 JavaScript 入門篇

如今的爬蟲愈來愈難了，再也不和以前的那樣，隨便抓個包就能夠找到相關的 url ，而後 post 一下或者 get 一下數據就出來了。還有一個可能就是可能你之前用來學習的爬蟲網站太簡單了，尚未看見過那些猛的。上兩週我就想弄弄知乎登錄，參數的加密算是把 js 代碼扣出來了，可是隻能在瀏覽器上運行，一換到 Python 執行就各類報錯，你不會 JavaScript 就什麼都調不了，因此二話不說，開啓了新的大陸。那就開始吧！

1. JavaScript 介紹

JavaScript 是運行在 客戶端的語言，和大家說的 Java 是很不同的， Java 一般用於服務器端的。可是他們二者也有類似之處，好比 JavaScript 的命名規範和名稱和 Java 類似。其餘的好像就沒有什麼了，哈哈。

JavaScript 也是一門腳本語言，和 python 同樣，都是解釋性語言，即每運行一行代碼就解釋一行，只不過 JavaScript 的解釋器在瀏覽器內部。

JavaScript 最初被應用是爲了處理與表單相關的驗證，如今應用就更加廣了，能夠說是幾乎無所不能，好比用來作服務端開發，命令行工具、桌面程序和遊戲開發等。

我在學了以後也跟着弄了兩個小的頁面遊戲，懷念童年。

2.JavaScript組成

• EcmaScript：JavaScript 的核心，定義了 JavaScript 的基本語法和數據類型，也是咱們今天所學的內容。

• DOM：document odject model， 文檔對象模型，用於操做網頁中的頁面元素的，好比能夠控制相關元素的增刪改查。

• BOM：browser object model,， 瀏覽器對象模型， 用於操做瀏覽器窗口，好比彈出框，控制頁面滑動等。

3.JavaScript 變量

在瞭解變量以前，先要知道 JavaScript 代碼寫在那裏：

1. 行內，即寫在 html 的元素中，不建議

2. 嵌入，即寫在 <script>標籤內，這個練習時可使用，但當代碼量大的時候也不建議

3. 外部，即 js 代碼都在另外一個文件內，用連接的方式接入 html 文件便可，推薦使用這種方式。

還有註釋：

1. 單行註釋： // 註釋內容

2. 多行註釋： /* 註釋內容 */

3.1 變量的定義以及做用

變量是計算機內存中存儲數據的標識符，根據變量名稱能夠獲取到內存中存儲的數據。

使用變量咱們能夠更方便的獲取或修改內存中的數據。

3.2 定義變量

使用 var 關鍵字來聲明變量，和 python 差很少，都是弱類型的語言，只不過 python 不須要使用關鍵字來聲明。

注：console.log()這個方法只是在控制檯打印一下變量而已。

3.3 變量的命名規則和規範

1)：規則-必須遵照的，不遵照就會報錯，就比如人類的法律

• 由字母、數字、下劃線和 $ 組成，可是不能以數字開頭，如：12asd 這個名字就會報錯

• 不能是關鍵字或保留字，好比 var、for等

• 嚴格區分大小寫，就是說大寫和小寫都是不同的變量

2)：規範-建議遵照的，但不遵照也不會報錯，好比人類的道德

• 變量名必須有意義，由於這樣別人才能看得懂，並且也利於維護，沒有意義的就像咱們須要破解相關參數時看到的 js 混淆，想一想就頭痛。

• 遵照駝峯命名法，首字母小寫，後面單詞的首字母大寫，如：userName

3.4 小案例

瞭解完變量以後能夠作個小案例：交換兩個值

4. 數據類型

JavaScript 的數據類型分兩種，一個爲簡單數據類型，另外一個爲複雜數據類型。

簡單數據類型有 Number、String、Boolean、undefined 和 null。一共五種

複雜數據類型好比 object，這個之後遇到再說，慢慢來。

4.1 Number

Number 爲數值固定的表示法，用來表示整數和浮點數的。它的字面量就是數值，那字面量是什麼意思呢？字面量就是這個變量表示的值，

好比上面變量 a 的字面量就是 12，b 的字面量就是 45。

咱們還可使用 typeof 關鍵字來判斷這個數據類型

除了使用上面的十進制來賦值，咱們還可使用八進制和十六進制

八進制的數是以 0 開頭的，而十六進制的是以 0x 開頭的，其餘的進制就不討論了。

不管你寫何種進制，它的存儲仍是以二進制來存儲的，因此這樣就弄成了浮點數的存儲精確度，浮點數只能精確到17位小數。

能夠看到 兩個浮點數的相加不是很準確，因此不要在有浮點數的運算下作判斷，有可能會有你想不到的結果，如

浮點數除了直接表示咱們還可使用科學計數法，固然，整數也是同樣可使用的。

Number 數據類型是有範圍的，可是不須要咱們刻意去計，記住它的關鍵字就能夠了。

最後再說一個關鍵字：NaN：not a number,這個表示不是數值，當有兩個數據運算時，運算失敗就會返回這個值。咱們也能夠判斷一個數據類型是否是 NaN，使用 isNaN() 方法便可。

4.2 String

String 類型就是用單引號或雙引號括起來的內容就是了，和 python 的字符串類型也是差很少的。

length 屬性是獲取字符串的長度。

鏈接兩個字符串可使用 + 進行鏈接， + 號兩邊不須要全是 String 類型也能夠進行鏈接

思考：如何打印出下列字符串

1. 我是一個"帥哥"

2. 我喜歡"學‘python’"

這裏面有單引號和雙引號，若是直接進行打印的話就會出錯，這時候咱們就須要把這些有意義的字符給轉義符，轉成普通的字符

根據上面的轉義符，就能夠寫出下面語句了

4.3 Boolean

boolean 類型，字面量只有 true 和 false，表示真假，即表示計算機的 1 和 0。

當咱們描述只有兩種結果的事物是可使用這個。

4.4 undefined 和 null

1. undefined 表示一個聲明瞭沒有賦值的變量，因此變量的默認值就是undefined。

2. null 只是表示爲空，若是要想把該值設爲 null， 只能手動賦值。

5. 數據類型轉換

5.1 其餘類型轉 String 類型

• 使用 toString() 方法
  

須要注意：undefined 和 null 類型不能使用這個方法

• 使用 String() 強轉，這個對任何類型都適用

• 使用 + 鏈接符 鏈接空字符，這是最方便的,也是支持全部類型

5.2 其餘類型轉 Number 類型

• 使用 Number() ，當轉不了的時候會返回 NaN,說明不是數值，在將 Boolean 類型轉 Number 時，true會轉爲 1， false 會轉爲 0。這個方法不支持將數字開頭帶有其它字符的字符串轉爲數值類型，如 "12df"

• 使用 parseInt() ，只能轉爲整數，並且轉不了Boolean。可是能夠轉以數字開頭而帶有字符的字符串。這個就能夠應用在好比須要將 "16px" 轉爲數值，就可使用這個。轉不了時也會返回 NaN。

• 使用 parseFloat() 能夠轉爲浮點數，當字符串爲整數時也能夠轉爲整數。須要注意的是：當字符串中有兩個小數點的時候，只會轉第二個小數點以前的數字，後面的都看成字符串

• 使用 + 或 - 來將值取正或取負。這個的功能和 Number 差很少。

• 使用 - 來進行減法運算來轉。這個使用運算符就會先把左右兩邊的類型先轉爲數值類型再運算，因此能夠用來相減 0。至於 + 不行，是由於這個用來作字符串的拼接了。

5.3 其餘類型轉 Boolean 類型

這個使用 Boolean() 來轉就能夠了，全部類型均可以轉。轉爲 false 的狀況爲 null、undefined、NaN、0 和 空字符串，其餘狀況均爲 true。

其實這個還可使用隱式轉換，就是不須要本身手動轉，解釋器會自動幫咱們轉，隱式轉換一般用在判斷語句的狀況，隱式轉換能夠減小代碼的書寫，等說到判斷語句再說，下面就有！

6. 操做符

操做符就是用來對數據類型進行操做的符號，每一個語言的操做符都差很少，這裏再說下能夠更深入一點！

6.1 算術運算符

有 + - * / % 五個，任何一個數 除 0 都爲爲無窮大，模 0 爲 NaN

6.2 一元運算符

一元運算符就是隻須要一個操做數的運算符，有 ++、-- 和 !

• 前置++：如 a++，變量在前，這個是先將變量的結果返回再對自身加 1，

• 後置++：如 ++a，變量在後，這個是先將變量進行自身加 1，再把結果返回

還有 -- 也是同樣的，只是 它是自身減 1，在運算中須要注意變量在一元運算符的順序。

• ! 就是對操做數取反，並且返回的是 Boolean 類型

6.3 邏輯運算符

邏輯運算符有 && 、|| 和 !，! 由於只對一個操做數操做因此也屬於一元運算符。

• &&：這個是與運算符，只有當兩邊都爲 true 的時候纔會返回 true，其餘狀況都返回 false。

• ||：這個是或運算符，只有當兩邊都爲 false 的時候才返回 false， 其餘狀況都返回 true。

6.4 關係運算符

關係運算符有 < > <= >= == != === 和 !==。運算完都是返回 Boolean 類型的，這裏就不細說了，都差很少的，只說下 == 和 === 的區別，還有 !== 和 != 的區別。== 只判斷兩值的字面量相等不相等，不會判斷數據類型，而 === 會先去判斷數據類型再判斷字面量，!= 和 !== 的區別也是這樣。

6.5 賦值運算符

賦值運算符有 += -= *= /= %= = 六個。

+= 就是把左右兩邊的值相加起來再賦值給左邊的值，其餘的也同樣，就很少說了。

6.6 運算符優先級從高到低（運算順序）

1. ()

2. 一元運算符

3. 算術運算符，同級時先 * / 再 + -

4. 關係運算符：> >= < <=

5. 相等運算符：== === != !==

6. 邏輯運算符：同級時先 && 再 ||

7. 賦值運算符
   

7. 流程結構

JavaScript 的流程結構有三種，分別是順序結構，分支結構和循環結構，這個也和 python 差很少的。

順序結構就是代碼是按順序從上到下執行的，分支結構就是按照給定條件的是否成立而執行不一樣的語句，循環結構就是重複執行某一段代碼。

順序結構就很少說了，咱們剛纔運行的代碼就是順序結構的，如今先說下分支結構。

7.1 分支結構

使用分支結構可使用 if 和 else 組成的語句，寫法和 python 差很少。

單獨 if 語句

說到判斷，就有個隱式轉換，就是 if 括號裏面的值會將任意類型的值隱式轉換成 Boolean 類型。以下：

另外一種形式的分支語句：

if-else 一塊兒用

這個 if-else 合用還有個簡單點的寫法，叫作三元運算符，語法爲

當表達式1 爲 true 的時候，就會把 表達式2 的值給返回，不然返回 表達式3 的值，這個有一個缺陷，就是必需要有結果返回。

還有一種形式的分支語句：

if-else if-if 三個合用

上面的 三個合用咱們也可使用 switch 語句來改寫，這個是選擇關鍵詞。語法爲

改寫後：

由於 case 的值只能是一個值，不能是範圍，因此用了個除法來解決，要否則須要寫大量的 case，還須要注意一點是必定須要記得寫 break，不然在匹配到相應的值以後它會一直往下運行無論 case 值是否對應，直到遇到 break 或者 所有運行完。

7.2 循環結構

JavaScript 的循環結構也有 while 和 for語句，但他還有 do-while語句。

• for語句：通常在肯定了循環的次數就會使用這個比較方便，語法爲：

這個先去執行初始化表達式1， 而後去執行判斷表達式2，符合條件就會執行循環體，循環體執行完以後就執行自增表達式3，再去判斷，接下來就是重複剛纔的動做，直到不知足判斷表達式2。

• while 語句：在沒法肯定循環次數的時候就能夠用這個，使用這個須要注意循環結束的條件，以避免寫了死循環。語法爲：

知足循環條件以後就執行循環體，而後再去執行循環條件，接下來就是重複剛纔的動做直到不知足條件。

• do-while 語句：這個也是在不知道循環次數的時候使用，可是當循環體不管如何都須要執行一次的話就能夠選擇使用這個。語法爲：

先去執行循環體，再去判斷循環條件，接下來就是重複剛纔的動做直到循環條件不知足。

在循環結構中還可使用 break 和 continue 來對循環進行跳出的操做。break 就是跳出整個循環，就是循環結束，而 continue 是跳出本次循環，接着下一次的循環。

學習了循環以後，咱們也能夠嘗試着本身打印一個三角形，或者 99 乘法表來知足一下本身。

這兩個的思路都是差很少的，只要你搞定了第一個三角形的思路，下面的乘法表天然就迎刃而解了，這裏就很少說了。

下篇就開始進入複雜的數據類型了，即 object，準備好了嗎？