新手怎麼學JS？JavaScript基礎入門

時間 2019-11-18

原文原文鏈接

新手應該怎麼學習JS？JavaScript入門 - 01

準備工做

在正式的學習JavaScript以前，咱們先來學習一些小工具，幫助咱們更好的學習和理解後面的內容。javascript

js代碼位置

首先是如何編寫JavaScript代碼，說到這，咱們首先要來講明一個須要新人們關注的點，由於咱們的js是一門跨平臺的語言，因此說，咱們的代碼能夠運行在不一樣的平臺之上。這也就致使了可能相同的代碼放在不一樣的平臺運行就會有所出入。html

這裏面說的平臺其實被稱之爲宿主環境。java

同時，代碼在不一樣的平臺上的運行方式也有所不一樣。nginx

若是運行在服務端，那麼更多的時候咱們須要經過命令行的形式去運行，而若是是代碼運行在客戶端，則須要經過啓動瀏覽器來運行代碼。git

咱們在學習的初期建議是在瀏覽器中運行代碼，減小學習成本。程序員

首先，咱們的js代碼能夠寫在script標籤內部而且將script標籤放在網頁的任何位置。es6

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script>
        // js code ...
    </script>
</head>
<body>
    <script>
        // js code ...
    </script>
</body>
<script>
    // js code ... 
</script>
</html>

在上面的代碼中，咱們把包含有js代碼的script標籤放在了head標籤、body標籤、和body標籤以後的位置。從語法的層面來講，上面的這幾種寫法都是正確的。可是在本教程中較爲推薦的寫法是將scirpt標籤放在body標籤的閉合標籤的後面。數據庫

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </head> <body> </body> <script> // js code ... </script> </html>

推薦的緣由，是由於js代碼常常須要操做html標籤，而放在後面能夠等到html標籤加載完畢以後再來執行js代碼。避免由於html標籤未加載而致使的報錯。express

而另一種寫法是將js代碼徹底的寫在一個後綴名爲.js的文件中。在須要的html文件中經過script標籤引入。編程

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </head> <body> </body> // 經過src屬性與script標籤配合引入外部的js文件 <script src="01.js"></script> </html>

js語句

js當中的語句表示js向宿主環境發送的命令。

例以下面的語句是向頁面中輸出計算10 + 2的結果。

document.write(10+2);

在每一條語句的後面都帶有一個分號，表示語句結束。

固然js容許咱們將分號省略掉，可是不管是從代碼的維護成本仍是其餘因素考慮，都不建議將每條語句後面的分號省略掉。

須要注意的是，若是分號前面的語句爲空，則沒有意義。

; ; ;

相似上面的語句代碼是沒有意義的。

註釋

註釋是任何編程語言當中必不可少的一環。經過註釋，可讓咱們開發過的代碼具備更好的可讀性，也能變相的提高後期代碼的維護和升級速度。

通常狀況下，註釋的內容能夠包含不少，例如參數信息，代碼功能、使用方式等等。

在js中，註釋分爲兩種，一種是單行註釋，一種是多行註釋。

單行註釋經過//表示，通常寫在語句的後面或者語句的上方。

// 這裏是代碼註釋

多行註釋經過/**/的形式來建立,通常寫在代碼的上方。

/* 這裏是多行註釋... */

不管你是一個js新人，仍是一個成熟的老程序員，合理的應用註釋都是一個很是好的習慣。

直接量

在js中，直接使用的量，咱們稱之爲叫作直接量。

例如，在代碼中，咱們要使用10,那麼這個10就是一個直接量。

表達式

通常狀況下，表達式須要獲得一個結果。

例如10+2就是一個表達式，咱們在建立這個表達式的時候，就但願獲得10+2的結果。

document.write(10+2);// 經過document.write()方法將10+2這個表達式的結果輸出到網頁當中

輸出方式

咱們在編寫js代碼的時候，常常須要獲得計算的值，用以判斷獲得的值與咱們預期的值是否相符，因此咱們須要瞭解下面的基本的輸出方式。

// console.log() 將內容輸出到瀏覽器的控制檯 console.log(10+2); // document.write() 將內容輸出到網頁當中 document.write(10+2);

一般狀況下咱們經過console.log()這種形式輸出代碼咱們稱之爲代碼打印。

彈窗

在js中，若是你的代碼運行環境是在瀏覽器當中，那麼就可使用瀏覽器給咱們提供的彈窗。

alert(10+2); confirm(10+2); prompt(10+2);

上述的三個彈窗只可以在運行環境爲瀏覽器的狀況下使用。

變量

咱們上面說到了表達式，經過表達式可以獲得計算的結果，可是若是咱們計算的邏輯較爲複雜，那麼若是單純的依賴表達式將會變得不那麼方便。

這個時候，就可使用變量。

什麼是變量呢？

咱們能夠把變量理解爲是一個代名詞或者說叫作臨時的容器。

咱們能夠把一個具體的值存入到變量中。那麼此時這個變量就表明着咱們這個具體的值。咱們若是想要從新的使用這個值，再也不須要從新的計算或者其餘操做，直接使用變量就能夠獲得以前存儲的這個值。

而想要建立一個變量(也能夠說是聲明一個變量)，須要經過var關鍵字(es6中經過let聲明)。

var val = 10 + 2;

在上面的代碼中，咱們建立了一個變量val，而且使用這個變量val存儲了表達式10+2的計算結果。那麼若是想要第二次使用10+2的結果，能夠直接使用變量val便可。

console.log(val);// 經過console.log() 輸出val,此時就能夠在控制檯看到10+2的結果

在咱們使用變量的時候，還有一點須要理解，變量之因此叫變量，是由於變量隨時能夠根據咱們的須要更改其中存儲的值。

var a = 10; a = 20; // 當咱們從新的向變量中存儲數據的時候，不須要再加var console.log(a); // 此時再打印a結果就爲20

須要注意的是，上面咱們將變量a內存儲的數據由10變成了20,在從新存儲的過程當中，咱們並無使用var，那麼上面的代碼就至關於咱們將20的值存儲到以前建立的變量a中。

而若是在從新的存儲的過程當中使用了var，如同下面的案例:

var a = 10; // 第一次聲明變量a var a = 20; // 再一次經過var聲明變量a，而且使用了var consoloe.log(a);

須要注意的是，雖然最後的結果和上面的打印結果相同，可是變量a本質上已經發生了變化。

若是在從新存儲數據的過程當中，沒有在變量名前面加var，那麼至關因而更改變量a中存儲的值，而若是前面加了var，則至關於從新的建立了一個變量a，而且存儲了20這個數據。

若是採用下面的這種寫法，那麼從新建立的變量將會無效：

var x = 1; var x; x // 1

變量提高：

JavaScript 引擎的工做方式是，先解析代碼，獲取全部被聲明的變量，而後再一行一行地運行。這形成的結果，就是全部的變量的聲明語句，都會被提高到代碼的頭部，這就叫作變量提高（hoisting）。

console.log(a); var a = 1;

上面代碼首先使用console.log方法，在控制檯（console）顯示變量a的值。這時變量a尚未聲明和賦值，因此這是一種錯誤的作法，可是實際上不會報錯。由於存在變量提高，真正運行的是下面的代碼。

var a; console.log(a); a = 1;

最後的結果是顯示undefined，表示變量a已聲明，但還未賦值。

標識符

標識符（identifier）指的是用來識別各類值的合法名稱。最多見的標識符就是變量名，以及後面要提到的函數名。JavaScript 語言的標識符對大小寫敏感，因此a和A是兩個不一樣的標識符。

標識符有一套命名規則，不符合規則的就是非法標識符。JavaScript 引擎遇到非法標識符，就會報錯。

簡單說，標識符命名規則以下。

第一個字符，能夠是任意 Unicode 字母（包括英文字母和其餘語言的字母），以及美圓符號（$）和下劃線（_）。
第二個字符及後面的字符，除了 Unicode 字母、美圓符號和下劃線，還能夠用數字0-9。

下面這些都是合法的標識符。

arg0 _tmp $elem π

下面則是一些不合法的標識符：

1a // 第一個字符不能是數字 23 // 同上 *** // 標識符不能包含星號 a+b // 標識符不能包含加號 -d // 標識符不能包含減號或連詞線

須要注意的是，在js當中，中文也是合法的標識符，可是並不推薦使用。

JavaScript 有一些保留字，不能用做標識符：arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。

數據類型

變量用來臨時存儲數據(若是想要永久的存儲數據，須要經過數據庫)。而在任何一門編程語言當中，數據都是分爲不一樣類型的。就如同人類也分爲男人和女人同樣。

下面就來講一下在JavaScript中數據的不一樣類型。

在js當中數據類型分爲兩類，一類是原始類型，一類是引用數據類型。原始類型又稱之爲基礎數據類型，引用類型也稱之爲對象類型。

原始類型的數據包含有下面幾個：

Boolean
Null
Undefined
Number
String
Symbol(ES6中新增長的內容)

引用類型的數據包含有下面幾個：

Object
Array
Function

在js當中，引用類型也包括Date、Math和RegExp等內容。

須要注意的是，JS當中的原始值並不可以更改，也就意味着一旦一個原始值建立成功。那麼將不可以進行第二次的值得修改，除非從新建立一個數據。

Boolean

In computer science, a Boolean is a logical data type that can have only the values true or false. For example, in JavaScript, Boolean conditionals are often used to decide which sections of code to execute (such as in if statements) or repeat (such as in for loops).

在MDN中，對於JavaScript中的布爾值(Boolean)有上面一段描述，翻譯過來的意思大體以下：

在計算機科學中，布爾值是一種邏輯數據類型，其值只能爲真或假。例如，在JavaScript中，布爾條件 經常使用於決定執行哪一部分代碼(例如在if語句中)或重複(例如在For循環中)。

布爾值包含有兩個值true和false。其中true表示真，false表示假。

例如咱們判斷一個條件，若是這個條件知足，那麼對應着布爾值true，若是這個條件不知足，那麼就對應着布爾值false。

下列運算符會返回布爾值：

前置邏輯運算符： ! (Not)
相等運算符：===，!==，==，!=
比較運算符：>，>=，<，<=

若是 JavaScript 預期某個位置應該是布爾值，會將該位置上現有的值自動轉爲布爾值。轉換規則是除了下面六個值被轉爲false，其餘值都視爲true。

undefined
null
false
0
NaN
""或''（空字符串）

Null

In computer science, a null value represents a reference that points, generally intentionally, to a nonexistent or invalid object or address. The meaning of a null reference varies among language implementations.

In JavaScript, null is one of the primitive values.

譯文：

在計算機科學中，空值表示一個引用，該引用一般有意指向不存在或無效的對象或地址。空引用的含義因語言實現而異。

在JavaScript中，null是一個基本值(原始數據)。

Null類型裏面只有一個值，就是null。
關於null，你能夠把它理解爲無，它表示一個空值。

var a = null;

例如上面的代碼當中，你能夠理解爲此事的變量a表示的值爲空。

當咱們在一些須要傳遞值的地方，若是咱們沒有值進行傳遞，那麼就能夠傳遞一個null，表示傳遞的值爲空。

undefined

Undefined類型當中只有一個值就是undefined。

在代碼的編寫過程當中，一個沒有被賦值的變量的類型就是undefined。

var a; console.log(a); // 會在瀏覽器的控制檯中輸出undefined

若是一個變量聲明可是沒有被賦值，咱們就可使用typeof運算符來檢查一下結果.

var a; console.log(typeof a);// 輸出undefined類型

Number

Number類型即爲數字類型。

在MDN中關於Number類型的描述以下:

根據 ECMAScript 標準，JavaScript 中只有一種數字類型：基於 IEEE 754 標準的雙精度 64 位二進制格式的值（-(263 -1) 到 263 -1）。它並無爲整數給出一種特定的類型。除了可以表示浮點數外，還有一些帶符號的值：+Infinity，-Infinity 和 NaN (非數值，Not-a-Number)。

JavaScript 內部，全部數字都是以64位浮點數形式儲存，即便整數也是如此。因此，1與1.0是相同的，是同一個數。

1 === 1.0 // true

這就是說，JavaScript 語言的底層根本沒有整數，全部數字都是小數（64位浮點數）。容易形成混淆的是，某些運算只有整數才能完成，此時 JavaScript 會自動把64位浮點數，轉成32位整數，而後再進行運算。

因爲浮點數不是精確的值，因此涉及小數的比較和運算要特別當心。

0.1 + 0.2 === 0.3 // false 0.3 / 0.1 // 2.9999999999999996 (0.3 - 0.2) === (0.2 - 0.1) // false

數值範圍:

根據標準，64位浮點數的指數部分的長度是11個二進制位，意味着指數部分的最大值是2047（2的11次方減1）。也就是說，64位浮點數的指數部分的值最大爲2047，分出一半表示負數，則 JavaScript 可以表示的數值範圍爲21024到2-1023（開區間），超出這個範圍的數沒法表示。

若是一個數大於等於2的1024次方，那麼就會發生「正向溢出」，即 JavaScript 沒法表示這麼大的數，這時就會返回Infinity。

若是一個數小於等於2的-1075次方（指數部分最小值-1023，再加上小數部分的52位），那麼就會發生爲「負向溢出」，即 JavaScript 沒法表示這麼小的數，這時會直接返回0。

Math.pow(2, -1075) // 0

下面是一個實際的例子。

var x = 0.5; for(var i = 0; i < 25; i++) { x = x * x; } x // 0

上面代碼中，對0.5連續作25次平方，因爲最後結果太接近0，超出了可表示的範圍，JavaScript 就直接將其轉爲0。

而若是在js小於-1.7976931348623157E+103088 的時候，就會表示爲-Infinity.

Number當中的特殊值:

一、正零和負零

JavaScript 的64位浮點數之中，有一個二進制位是符號位。這意味着，任何一個數都有一個對應的負值，就連0也不例外。

JavaScript 內部實際上存在2個0：一個是+0，一個是-0，區別就是64位浮點數表示法的符號位不一樣。它們是等價的。

-0 === +0 // true 0 === -0 // true 0 === +0 // true

幾乎全部場合，正零和負零都會被看成正常的0。

+0 // 0 -0 // 0 (-0).toString() // '0' (+0).toString() // '0'

可是當0和-0被充當分母的時候，返回的值是不相等的。

(1 / +0) === (1 / -0) // false

上面的代碼之因此出現這樣結果，是由於除以正零獲得+Infinity，除以負零獲得-Infinity，這二者是不相等的。

二、NaN

NaN是 JavaScript 的特殊值，表示「非數字」（Not a Number），主要出如今將字符串解析成數字出錯的場合。

console.log(5 - 'x'); //NaN

須要注意的是，NaN不是獨立的數據類型，而是一個特殊數值，它的數據類型依然屬於Number，使用typeof運算符能夠看得很清楚。

須要注意,NaN是一個很是狠的角色，它連本身都不認，也就是說，若是你判斷NaN是否等於NaN，答案是否認的，也就是false，兩者根本不想等。

三、Infinity

Infinity表示爲無窮大。在js中，若是數值的內容超過了js所能表示的範圍，就會輸出Infinity或者-Infinity。

Number當中的全局方法:

一、parseInt()

parseInt方法用於將字符串轉爲整數。

parseInt('123') // 123

若是字符串頭部有空格，空格會被自動去除。

parseInt(' 81') // 81

若是parseInt的參數不是字符串，則會先轉爲字符串再轉換。

parseInt(1.23) // 1 // 等同於 parseInt('1.23') // 1

字符串轉爲整數的時候，是一個個字符依次轉換，若是遇到不能轉爲數字的字符，就再也不進行下去，返回已經轉好的部分。

parseInt('8a') // 8 parseInt('12**') // 12 parseInt('12.34') // 12 parseInt('15e2') // 15 parseInt('15px') // 15

上面代碼中，parseInt的參數都是字符串，結果只返回字符串頭部能夠轉爲數字的部分。

若是字符串的第一個字符不能轉化爲數字（後面跟着數字的正負號除外），返回NaN。

parseInt('abc') // NaN parseInt('.3') // NaN parseInt('') // NaN parseInt('+') // NaN parseInt('+1') // 1

因此，parseInt的返回值只有兩種可能，要麼是一個十進制整數，要麼是NaN。

二、parseFloat()

parseFloat方法用於將一個字符串轉爲浮點數。

parseFloat('3.14') // 3.14

若是字符串符合科學計數法，則會進行相應的轉換。

parseFloat('314e-2') // 3.14 parseFloat('0.0314E+2') // 3.14

若是字符串包含不能轉爲浮點數的字符，則再也不進行日後轉換，返回已經轉好的部分。

parseFloat('3.14more non-digit characters') // 3.14

parseFloat方法會自動過濾字符串前導的空格。

parseFloat('\t\v\r12.34\n ') // 12.34

若是參數不是字符串，或者字符串的第一個字符不能轉化爲浮點數，則返回NaN。

parseFloat([]) // NaN parseFloat('FF2') // NaN parseFloat('') // NaN parseFloat('1avc') // 1 parseFloat('a1') // NaN

上面代碼中，尤爲值得注意，parseFloat會將空字符串轉爲NaN。

這些特色使得parseFloat的轉換結果不一樣於Number函數。

parseFloat(true) // NaN Number(true) // 1 parseFloat(null) // NaN Number(null) // 0 parseFloat('') // NaN Number('') // 0 parseFloat('123.45#') // 123.45 Number('123.45#') // NaN

三、isNaN()

isNaN方法能夠用來判斷一個值是否爲NaN。

isNaN(NaN) // true isNaN(123) // false

可是，isNaN只對數值有效，若是傳入其餘值，會被先轉成數值。好比，傳入字符串的時候，字符串會被先轉成NaN，因此最後返回true，這一點要特別引發注意。也就是說，isNaN爲true的值，有可能不是NaN，而是一個字符串。

isNaN('Hello') // true // 至關於 isNaN(Number('Hello')) // true

四、isFinite()

isFinite方法返回一個布爾值，表示某個值是否爲正常的數值。

isFinite(Infinity) // false isFinite(-Infinity) // false isFinite(NaN) // false isFinite(undefined) // false isFinite(null) // true isFinite(-1) // true

除了Infinity、-Infinity、NaN和undefined這幾個值會返回false，isFinite對於其餘的數值都會返回true。

String

將0個或者任意多個字符排列起來放在單引號或者雙引號當中，就是一個字符串(String)。

var a = "hello,world!"; var b = 'hello,JavaScript!';

上面的變量a和b當中存儲的數據就是字符串，其中一個使用了單引號，一個使用了雙引號，二者都是合法的。

單引號字符串的內部，可使用雙引號。雙引號字符串的內部，可使用單引號。

'key = "value"' "It's a long journey"

若是要在單引號字符串的內部，使用單引號，就必須在內部的單引號前面加上反斜槓，用來轉義。雙引號字符串內部使用雙引號，也是如此。

'Did she say \'Hello\'?' // "Did she say 'Hello'?" "Did she say \"Hello\"?" // "Did she say "Hello"?"

因爲 HTML 語言的屬性值使用雙引號，因此不少項目約定JavaScript語言的字符串只使用單引號，在這套系列教程中會遵照這個約定。固然，只使用雙引號也徹底能夠。重要的是堅持使用一種風格，不要一會使用單引號表示字符串，一會又使用雙引號表示。

字符串默認只能寫在一行內，分紅多行將會報錯。

'a b c' // SyntaxError: Unexpected token ILLEGAL

上面代碼將一個字符串分紅三行，JavaScript 就會報錯。

若是長字符串必須分紅多行，能夠在每一行的尾部使用反斜槓。

var longString = 'Long \ long \ long \ string'; longString // "Long long long string"

上面代碼表示，加了反斜槓之後，原來寫在一行的字符串，能夠分紅多行書寫。可是，輸出的時候仍是單行，效果與寫在同一行徹底同樣。注意，反斜槓的後面必須是換行符，而不能有其餘字符（好比空格），不然會報錯。

鏈接運算符（+）能夠鏈接多個單行字符串，將長字符串拆成多行書寫，輸出的時候也是單行。

var longString = 'Long ' + 'long ' + 'long ' + 'string';

轉義字符：

反斜槓（）在字符串內有特殊含義，用來表示一些特殊字符，因此又稱爲轉義符。

須要用反斜槓轉義的特殊字符，主要有下面這些。

\0 ：null（\u0000）
\b ：後退鍵（\u0008）
\f ：換頁符（\u000C）
\n ：換行符（\u000A）
\r ：回車鍵（\u000D）
\t ：製表符（\u0009）
\v ：垂直製表符（\u000B）
\' ：單引號（\u0027）
\" ：雙引號（\u0022）
\\ ：反斜槓（\u005C）

若是在一個正常的字符前面加了\，是沒有效果的。

console.log("\a"); //輸出a

運算符

在編程語言當中，運算符是處理數據的基本方法，可以根據現有的值獲得新的值。

在JavaScript當中，存在下列的運算符。

賦值運算符
比較運算符
算數運算符
位運算符
邏輯運算符
字符串運算符
條件（三元）運算符
逗號運算符
一元運算符
關係運算符

下面咱們將逐一的來說解不一樣的運算符。

這一部分很枯燥，請作好心理準備！

賦值運算符

賦值運算符（assignment operator）基於右值（right operand）的值，給左值（left operand）賦值。

在以前的內容中，咱們經過下面的寫法來建立變量。

var a = 10;

上面咱們經過=來將右邊的10存儲到左邊的變量a身上。而這種操做，咱們在編程當中稱之爲賦值。

而=也就是賦值運算符。也可使用鏈式賦值。

var a = b = c = 15; console.log(a,b,c);//15,15,15

順序是從右向左的進行賦值操做。

下面的列表中包含所有的賦值運算符。

賦值 x = y
加賦值 x += y
減賦值 x -= y
乘賦值 x *= y
除賦值 x /= y
模賦值 x %= y
指數賦值 x **= y
左移賦值 x <<= y
右移賦值 x >>= y
無符號右移賦值 x >>>= y
按位與賦值 x &= y
按位異或賦值 x ^= y
按位或賦值 x |= y

賦值

簡單的賦值運算符，把一個值賦給一個變量。爲了把一個值賦給多個變量，能夠以鏈式使用賦值運算符。

加賦值

加賦值運算符把一個右值與一個變量相加，而後把相加的結果賦給該變量。兩個操做數的類型決定了加賦值運算符的行爲。算術相加或字符串鏈接都有可能。

例如：

var x = 10; var y = 20; x += y; console.log(x); // 至關於 x = x + y;

減賦值

減賦值運算符使一個變量減去右值，而後把結果賦給該變量。

例如：

var x = 10; var y = 20; x -= y; console.log(x); // -10 // 至關於 x = x - y;

乘賦值

乘賦值運算符使一個變量乘以右值，而後把相成的結果賦給該變量。

例如：

var x = 10; var y = 20; x *= y; console.log(x); // 200 // 至關於 x = x * y;

除賦值

除賦值運算符使一個變量除以右值，而後把結果賦給該變量。

例如:

var a = 10; var b = 20; a /= b; console.log(a); // 至關於 a = a / b;

模賦值

模賦值運算符使一個變量除以右值，而後把餘數交給該變量。

var x = 10; var y = 20; a %= b; console.log(a); //等同於 a = a % b;

指數賦值

指數賦值運算符使一個變量爲底數、以右值爲指數的指數運算（乘方）結果賦給該變量。

例如:

var x = 2; var y = 3; x **= y; console.log(x); // 8 // 至關於 x = x ** y

剩下的放在後面說到進制的時候再來講。

比較運算符

比較運算符包括下列內容:

等於 == 若是兩邊操做數相等時返回true。
不等於 != 若是兩邊操做數不相等時返回true
全等 === 兩邊操做數相等且類型相同時返回true。
不全等!== 兩邊操做數不相等或類型不一樣時返回true。
大於> 左邊的操做數大於右邊的操做數返回true
大於等於>= 左邊的操做數大於或等於右邊的操做數返回true
小於< 左邊的操做數小於右邊的操做數返回true
小於等於<= 左邊的操做數小於或等於右邊的操做數返回true

=> 並非一個運算符，而是箭頭函數。

/* 下面是比較運算符的示例： */ // == 相等運算符 console.log(10 == 10); // true console.log(20 == "20"); // true // ！= 不等運算符 console.log(3 != 2); // true console.log(2 != "hello"); // true // === 全等 console.log(3 === 3); // true console.log(3 === "3"); // false 值雖然相等，可是類型不相等。 // !== 不全等 console.log(3 !== "3"); // true console.log(3 !== 2); // true // > 大於 console.log(3 > 2); // true console.log("3" > "4"); // false // < 小於 console.log(2 < 1); // false console.log(3 < 4); // true // >= 大於等於 // <= 小於等於 console.log(2 >= 1); // true console.log(2 >= 2); // true console.log(3 <= 3); // true console.log(3 <= 4); // true

算數運算符

在js當中，除了提供基礎的+,-,*,/之外，還提供了一些其餘的運算符，下面是全部的算術運算符：

+加法運算
- 減法運算
*乘法運算
/ 除法運算
%求餘運算(求模運算)
++自增運算
--自減運算
+一元正值符
-一元負值符
**指數運算符

例子：

/* 下面是一些算數運算符的案例: */ var a,b; a = 10; b = 3; console.log(a + b); // 13 console.log(a - b); // 7 console.log(a * b); // 30 console.log(a / b); // 3.3333333333333335 console.log(a % b); // 1 console.log(++a); // 11 自增|自減符號在前，則先運算，在使用值 console.log(a++); // 11 自增|自減符號在後，則先使用值，在運算 console.log(a); // 12 // 上面a++後a由11變成了12 // 一元正值符，若是操做數不是Number，則嘗試着將操做數轉換爲Number var c = "3"; console.log(+c,typeof +c); // 3 number // 一元負值負，將一個值變爲負數 var d = 3; console.log(-d); // -3 var e = '3'; console.log(-e,typeof -e); //-3 number 也起到了轉換的效果 console.log(-3 === -e); // true // 指數運算符 var f = 2; var x = 3; console.log(f ** x); // 8 至關於2 的 3 次冪

邏輯運算符

邏輯運算符經常使用於布爾（邏輯）值之間; 當操做數都是布爾值時，返回值也是布爾值。不過實際上&&和||返回的是一個特定的操做數的值，因此當它用於非布爾值的時候，返回值就多是非布爾值。

下面是邏輯運算符：

邏輯與(&&)
邏輯或(||)
邏輯非(!)

邏輯與:

邏輯與&&運算符又稱爲且運算符，每每用於多個表達式之間的求值。

它的運算規則是：若是第一個運算子的布爾值爲true，則返回第二個運算子的值（注意是值，不是布爾值）；若是第一個運算子的布爾值爲false，則直接返回第一個運算子的值，且再也不對第二個運算子求值。

語法:

exrp1 && exrp2;

邏輯或:

邏輯或||運算符又稱爲或運算符，一樣用於在多個表達式之間求值。

它的運算規則是：若是第一個運算子的布爾值爲true，則返回第一個運算子的值，且再也不對第二個運算子求值；若是第一個運算子的布爾值爲false，則返回第二個運算子的值。

語法：

exrp1 || exrp2

例如:

// 邏輯與 // 當運算符的先後都爲條件語句的時候，當條件同時爲true，則返回true，不然返回false var a = 1; var b = 2; console.log(a > 0 && b > a); //true 第一個條件判斷爲true，第二個條件判斷爲true，那麼總體返回true console.log(a > b && b > 1); // false 第一個條件判斷爲false，第二個條件判斷爲true，總體返回false console.log(a > 0 && b > 2); // false 第一個條件爲true，第二個條件爲false，總體返回false // console.log("dog" && "cat"); // cat 當運算符的先後是一個直接量的時候，若是運算符先後都爲true，則返回第二個直接量 // 邏輯或 console.log(a > b || b > a); //true 其中只要有一個條件成立，那麼就會返回true console.log(a > 2 || b > 2); // false 兩個條件都不成立，因此返回fasle // 第一個條件若是成立，那麼就不會去讀取後面的條件 console.log(a > 0 || b > 2); // true

在上面的兩個邏輯運算符的使用過程當中，容易形成短路效果。

false && anything // 被短路求值爲false
true || anything // 被短路求值爲true

在上面的短路代碼中，anything部分不會被求值，也就意味着不會對代碼產生任何的影響。

邏輯與運算符和邏輯或的連用:

邏輯與運算符能夠多個連用，這時返回第一個布爾值爲false的表達式的值。若是全部表達式的布爾值都爲true，則返回最後一個表達式的值。

true && 'foo' && '' && 4 && 'foo' && true // '' 1 && 2 && 3 // 3

上面代碼中，例一里面，第一個布爾值爲false的表達式爲第三個表達式，因此獲得一個空字符串。例二里面，全部表達式的布爾值都是true，全部返回最後一個表達式的值3。

運算符能夠多個連用，這時返回第一個布爾值爲true的表達式的值。若是全部表達式都爲false，則返回最後一個表達式的值。

false || 0 || '' || 4 || 'foo' || true // 4 false || 0 || '' // ''

上面代碼中，例一里面，第一個布爾值爲true的表達式是第四個表達式，因此獲得數值4。例二里面，全部表達式的布爾值都爲false，因此返回最後一個表達式的值。

邏輯或運算符一般狀況下用於給一個變量設置默認值。

var a = username || "zhangsan";

邏輯非:

邏輯非(!)運算符又叫取反運算符，就是取一個值的反值。主要用於將一個布爾值變爲相反值。即true變爲false,false變爲true。

若是使用取反運算符的值不是一個布爾值，那麼取反運算符就會將其變爲一個布爾值，而後再取反。

下面的六個值使用取反運算符取反後都爲true，其餘都爲false。

undefined
null
false
0
NaN
空字符串('')

!undefined // true !null // true !0 // true !NaN // true !"" // true !54 // false !'hello' // false ![] // false !{} // false

無論什麼類型的值，通過取反運算後都會變成布爾值。

若是對一個值連續作兩次的取反運算，等於將其轉換爲對應的布爾值，與Boolean函數的做用相同。這是一種較爲常見的類型轉換的方法。

例如:
var a = "hello"; console.log(!!a); // true 

字符串運算符

字符串運算符指的是+，經過加號，咱們能夠對兩個字符串進行拼接從而返回一個新的字符串。

var a = "hello,"; var b = "world!"; console.log(a + b); // hello,world!

也能夠採用簡寫的形式來拼接字符串。

var str = "hello,"; var str += "world!"; console.log(str); // hello,world!

咱們也能夠在使用的過程當中進行數據的拼接。

var sayHello = "hello,my name is "; console.log(sayHello + "zhangsan");// hello,my name is zhangsan

條件運算符

條件運算符也稱之爲三元運算符。

條件運算符是JavaScript中惟一須要三個操做數的運算符。運算的結果根據給定條件在兩個值中取其一。語法爲：

條件 ? 值1 : 值2

若是條件爲真，則結果取值1。不然爲值2。你可以在任何容許使用標準運算符的地方使用條件運算符。

var status = (age >= 18) ? "adult" : "minor";

當 age 大於等於18的時候，將「adult」賦值給status；不然將「minor」賦值給 status。

逗號運算符

逗號操做符（,）對兩個操做數進行求值並返回最終操做數的值。它經常用在 for 循環中，在每次循環時對多個變量進行更新。

固然，咱們在console.log()的過程當中，若是輸出多個值，也會用到逗號運算符。

console.log("hello","world");

一元操做符

一元操做符僅對應一個操做數。

經常使用的一元操做符有以下幾個:

delete
typeof
void

delete主要用於刪除對象當中的某個元素。

void主要用於代表一個運算沒有返回值。

例如:

var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); delete trees[3]; // 刪除數組當中的一個元素 <a href="javascript:void(0)">Click here to do nothing</a> // 用戶點擊這個連接不會有任何效果

上面的demo中的兩個運算符，咱們暫時尚未用到，因此能夠先放在這，後面再來理解。

至於typeof運算符，主要用來查看數據的類型，將獲取的數據類型以一個字符串的形式展現出來。

var a = "hello,world!"; console.log(typeof a); // "string" var b = 13; console.log(typeof (b)); // "number"

在上面的demo中，咱們發現typeof有兩種使用方式。運算符後面的括號能夠選擇省略或者不省略。

案例:

console.log(typeof "hello,world"); // "string" console.log(typeof 10); // "number" console.log(typeof true); // "boolean" console.log(typeof false); // "boolean" console.log(typeof null); // "object" console.log(typeof undefined); // "undefined" // 查看typeof返回的數據的類型 console.log(typeof typeof(10)); // "string"

關係操做符

關係操做符對操做數進行比較，根據比較結果然或假，返回相應的布爾值。

下面是關係操做符的具體內容：

in
instanceof

運算符優先級

運算符的優先級，用於肯定一個表達式的計算順序。在你不能肯定優先級時，能夠經過使用括號顯式聲明運算符的優先級。

下表列出了描述符的優先級，從最高到最低。

Operator type	Individual operators
member	`. []`
call / create instance	`() new`
negation/increment	`! ~ - + ++ -- typeof void delete`
multiply/divide	`* / %`
addition/subtraction	`+ -`
bitwise shift	`<< >> >>>`
relational	`< <= > >= in instanceof`
equality	`== != === !==`
bitwise-and	`&`
bitwise-xor	`^`
bitwise-or	`\|`
logical-and	`&&`
logical-or	`\|\|`
conditional	`?:`
assignment	`= += -= *= /= %= <<= >>= >>>= &= ^= \|=`
comma	`,`

數據類型轉換

JavaScript 是一種動態類型語言，變量沒有類型限制，能夠隨時賦予任意值。

例如:

var a = 10; // 建立一個變量a，而且賦值爲10 a = "hello,world!"; // 將"hello,world"從新賦值給變量a，這樣a就由number變爲string

再來看下面這個案例:

var x = y ? 1 : 'a';

上面代碼中，變量x究竟是數值仍是字符串，取決於另外一個變量y的值。y爲true時，x是一個數值；y爲false時，x是一個字符串。這意味着，x的類型無法在編譯階段就知道，必須等到運行時才能知道。

雖然變量的數據類型是不肯定的，可是各類運算符對數據類型是有要求的。若是運算符發現，運算子的類型與預期不符，就會自動轉換類型。好比，減法運算符預期左右兩側的運算子應該是數值，若是不是，就會自動將它們轉爲數值。

'4' - '3' // 1

上面代碼中，雖然是兩個字符串相減，可是依然會獲得結果數值1，緣由就在於 JavaScript 將運算子自動轉爲了數值。

在章節，咱們將會先來說解手動強制類型轉換數據類型，接着會說到數據類型的自動轉換規則。

強制類型轉換

強制轉換主要指使用Number()、String()和Boolean()三個函數，手動將各類類型的值，分別轉換成數字、字符串或者布爾值。

Number()

使用Number函數，能夠將任意類型的值轉化成數值。

下面分紅兩種狀況討論，一種是參數是原始類型的值，另外一種是參數是對象。

原始類型值:

下面經過案例來演示一下原始類型值轉換爲Number類型的規則：

// 數值：轉換後仍是原來的值 Number(324) // 324 // 字符串：若是能夠被解析爲數值，則轉換爲相應的數值 Number('324') // 324 // 字符串：若是不能夠被解析爲數值，返回 NaN Number('324abc') // NaN // 空字符串轉爲0 Number('') // 0 // 布爾值：true 轉成 1，false 轉成 0 Number(true) // 1 Number(false) // 0 // undefined：轉成 NaN Number(undefined) // NaN // null：轉成0 Number(null) // 0

Number函數會自動過濾一個字符串前導和後綴的空格。

對象:
簡單的規則是，Number方法的參數是對象時，將返回NaN，除非是包含單個數值的數組。

Number({a: 1}) // NaN Number([1, 2, 3]) // NaN Number([5]) // 5

String()

String函數能夠將任意類型的值轉化成字符串，轉換規則以下。
(1)原始類型值

數值：轉爲相應的字符串。
字符串：轉換後仍是原來的值。
布爾值：true轉爲字符串"true"，false轉爲字符串"false"。
undefined：轉爲字符串"undefined"。
null：轉爲字符串"null"。

String(123) // "123" String('abc') // "abc" String(true) // "true" String(undefined) // "undefined" String(null) // "null"

(2)對象:

String方法的參數若是是對象，返回一個類型字符串；若是是數組，返回該數組的字符串形式。

String({a: 1}) // "[object Object]" String([1, 2, 3]) // "1,2,3"

Boolean()

Boolean()函數能夠將任意類型的值轉爲布爾值。

它的轉換規則相對簡單：除了如下五個值的轉換結果爲false，其餘的值所有爲true。

undefined
null
0（包含-0和+0）
NaN
''（空字符串）

Boolean(undefined) // false Boolean(null) // false Boolean(0) // false Boolean(NaN) // false Boolean('') // false

固然，true和false這兩個布爾值不會發生變化。

Boolean(true) // true Boolean(false) // false

注意，全部對象（包括空對象）的轉換結果都是true，甚至連false對應的布爾對象new Boolean(false)也是true

Boolean({}) // true Boolean([]) // true Boolean(new Boolean(false)) // true

全部對象的布爾值都是true，這是由於 JavaScript 語言設計的時候，出於性能的考慮，若是對象須要計算才能獲得布爾值，對於obj1 && obj2這樣的場景，可能會須要較多的計算。爲了保證性能，就統一規定，對象的布爾值爲true。

自動類型轉換

上面說完了強制類型轉換，再來講下自動類型轉換，它是以強制類型轉換爲基礎的。

遇到如下三種狀況時，JavaScript 會自動轉換數據類型，即轉換是自動完成的，用戶不可見。

第一種狀況，不一樣類型的數據互相運算。

123 + 'abc' // "123abc"

第二種狀況，對非布爾值類型的數據求布爾值。

if ('abc') { console.log('hello') }

第三種狀況，對非數值類型的值使用一元運算符（即+和-）。

var a = "10"; console.log(+ a,typeof +a); // 10 "number" + {foo: 'bar'} // NaN - [1, 2, 3] // NaN

自動轉換的規則是這樣的：預期什麼類型的值，就調用該類型的轉換函數。好比，某個位置預期爲字符串，就調用String函數進行轉換。若是該位置便可以是字符串，也多是數值，那麼默認轉爲數值。

因爲自動轉換具備不肯定性，並且不易除錯，建議在預期爲布爾值、數值、字符串的地方，所有使用Boolean、Number和String函數進行顯式轉換。

自動轉換爲布爾值

JavaScript 遇到預期爲布爾值的地方（好比if語句的條件部分），就會將非布爾值的參數自動轉換爲布爾值。系統內部會自動調用Boolean函數。

所以除了如下五個值，其餘都是自動轉爲true。

undefined
null
+0或-0
NaN
''（空字符串）

下面這個例子中，條件部分的每一個值都至關於false，使用否認運算符後，就變成了true。

if ( !undefined && !null && !0 && !NaN && !'' ) { console.log('true'); } // true

下面兩種寫法，有時也用於將一個表達式轉爲布爾值。它們內部調用的也是Boolean函數。

// 寫法一 expression ? true : false // 寫法二 !! expression

自動轉換爲字符串

JavaScript 遇到預期爲字符串的地方，就會將非字符串的值自動轉爲字符串。具體規則是，先將複合類型的值轉爲原始類型的值，再將原始類型的值轉爲字符串。

字符串的自動轉換，主要發生在字符串的加法運算時。當一個值爲字符串，另外一個值爲非字符串，則後者轉爲字符串。

'5' + 1 // '51' '5' + true // "5true" '5' + false // "5false" '5' + {} // "5[object Object]" '5' + [] // "5" '5' + function (){} // "5function (){}" '5' + undefined // "5undefined" '5' + null // "5null"

這種自動轉換很容易出錯。

var obj = { width: '100' }; obj.width + 20 // "10020"

上面代碼中，開發者可能指望返回120，可是因爲自動轉換，實際上返回了一個字符10020。

自動轉換爲數值

JavaScript 遇到預期爲數值的地方，就會將參數值自動轉換爲數值。系統內部會自動調用Number函數。

除了加法運算符（+）有可能把運算子轉爲字符串，其餘運算符都會把運算子自動轉成數值。

'5' - '2' // 3 '5' * '2' // 10 true - 1 // 0 false - 1 // -1 '1' - 1 // 0 '5' * [] // 0 false / '5' // 0 'abc' - 1 // NaN null + 1 // 1 undefined + 1 // NaN

上面代碼中，運算符兩側的運算子，都被轉成了數值。

注意：null轉爲數值時爲0，而undefined轉爲數值時爲NaN。

一元運算符也會把運算子轉成數值。

+'abc' // NaN -'abc' // NaN +true // 1 -false // 0

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。