垂直入坑JS

• • JavaScript簡介
  • • 起源
    • JavaScript的組成
  • JavaScript的特點
  • JS的使用
  • JS編寫位置
  • JS基本語法
  • • 單行注釋：`//注釋內容`
    • 多行注釋：`/*注釋內容*/`
    • 字面量：不可改變的值，如：6、null、"access"等
    • **變量**：值可以任意改變，可以用來保存字面量對字面量進行描述
    • 標識符
    • 數據類型
    • 強制類型轉換
    • 運算符

JavaScript簡介

起源

由于九十年代末期網速極慢，向后端發(fā)送請求瀏覽器需長時間得到響應，故創(chuàng)立JavaScript用于處理網頁中的前端驗證–檢查用戶輸入的內容是否符合一定的規(guī)則。

JavaScript的組成

ECMAScript是一個標準，需要由各個廠商去實現，不同的瀏覽器廠商對該標準會有不同的實現。

瀏覽器JavaScript實現方式

FireFox	SpiderMonkey
Internet Explorer	JScript/Chakra
Safari	JavaScriptCore
Chrome	v8
Carakan	Carakan

完整的JavaScript由以下三部分構成

#mermaid-svg-aw4iuMzPAqJ02dxG {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-aw4iuMzPAqJ02dxG .error-icon{fill:#552222;}#mermaid-svg-aw4iuMzPAqJ02dxG .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-aw4iuMzPAqJ02dxG .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-aw4iuMzPAqJ02dxG .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-aw4iuMzPAqJ02dxG .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-aw4iuMzPAqJ02dxG .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-aw4iuMzPAqJ02dxG .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-aw4iuMzPAqJ02dxG .marker{fill:#333333;stroke:#333333;}#mermaid-svg-aw4iuMzPAqJ02dxG .marker.cross{stroke:#333333;}#mermaid-svg-aw4iuMzPAqJ02dxG svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-aw4iuMzPAqJ02dxG .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-aw4iuMzPAqJ02dxG .cluster-label text{fill:#333;}#mermaid-svg-aw4iuMzPAqJ02dxG .cluster-label span{color:#333;}#mermaid-svg-aw4iuMzPAqJ02dxG .label text,#mermaid-svg-aw4iuMzPAqJ02dxG span{fill:#333;color:#333;}#mermaid-svg-aw4iuMzPAqJ02dxG .node rect,#mermaid-svg-aw4iuMzPAqJ02dxG .node circle,#mermaid-svg-aw4iuMzPAqJ02dxG .node ellipse,#mermaid-svg-aw4iuMzPAqJ02dxG .node polygon,#mermaid-svg-aw4iuMzPAqJ02dxG .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-aw4iuMzPAqJ02dxG .node .label{text-align:center;}#mermaid-svg-aw4iuMzPAqJ02dxG .node.clickable{cursor:pointer;}#mermaid-svg-aw4iuMzPAqJ02dxG .arrowheadPath{fill:#333333;}#mermaid-svg-aw4iuMzPAqJ02dxG .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-aw4iuMzPAqJ02dxG .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-aw4iuMzPAqJ02dxG .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-aw4iuMzPAqJ02dxG .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-aw4iuMzPAqJ02dxG .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-aw4iuMzPAqJ02dxG .cluster text{fill:#333;}#mermaid-svg-aw4iuMzPAqJ02dxG .cluster span{color:#333;}#mermaid-svg-aw4iuMzPAqJ02dxG div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-aw4iuMzPAqJ02dxG :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}JSECMAScriptDOMBOM

JavaScript的特點

• 解釋型語言

優(yōu)勢：不需要編譯，直接執(zhí)行
劣勢：運行速度較慢

• 類似于 C 和 Java 的語法結構
• 動態(tài)語言
• 基于原型的面向對象
• 嚴格區(qū)分大小寫
• 每一條語句以分號(;)結尾
• JS中會忽略多個空格和換行，所以我們可以利用空格和換行對代碼進行格式化

JS的使用

彈出警告框

<script>alert("404 not found!")</script>

輸出內容

<script>document.write("What 'Error 404' means and how to fix it")</script>

控制臺輸出

<script>console.log("The browser then displays this error code.")</script>

JS編寫位置

• 將JS代碼編寫到外部JS文件中，通過script標簽引入（推薦）

<script src="./script.js"></script>

script標簽一旦引入外部文件，編寫的代碼會被忽略，解決方法是可再創(chuàng)建一個新的script標簽用于編寫內部代碼

• 將JS代碼寫入HTML中的script標簽內，編寫進onclick屬性中

JS基本語法

單行注釋：//注釋內容

多行注釋：/*注釋內容*/

字面量：不可改變的值，如：6、null、"access"等

變量：值可以任意改變，可以用來保存字面量對字面量進行描述

變量聲明：

var a;

變量賦值：

a = 666;

聲明和賦值同時進行：

var a = 666；

標識符

在JS中可以指給變量、函數、屬性或函數的參數自主命名
命名規(guī)則

第一個字符必須是一個字母、下劃線（ _ ）或一個美元符號（ $ ）。

其它字符可以是字母、下劃線、美元符號或數字。

按照慣例，ECMAScript 標識符采用駝峰命名法。

標識符不能是關鍵字和保留字符。


JS底層保存標識符時實際上是采用的Unicode編碼，
所以理論上講，所有的utf-8中含有的內容都可以作為標識符

關鍵字：
保留字：

數據類型

JavaScript中一共有6種基本數據類型：

#mermaid-svg-kFD6mqKuAvTQYN5z {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-kFD6mqKuAvTQYN5z .error-icon{fill:#552222;}#mermaid-svg-kFD6mqKuAvTQYN5z .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-kFD6mqKuAvTQYN5z .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-kFD6mqKuAvTQYN5z .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-kFD6mqKuAvTQYN5z .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-kFD6mqKuAvTQYN5z .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-kFD6mqKuAvTQYN5z .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-kFD6mqKuAvTQYN5z .marker{fill:#333333;stroke:#333333;}#mermaid-svg-kFD6mqKuAvTQYN5z .marker.cross{stroke:#333333;}#mermaid-svg-kFD6mqKuAvTQYN5z svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-kFD6mqKuAvTQYN5z .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-kFD6mqKuAvTQYN5z .cluster-label text{fill:#333;}#mermaid-svg-kFD6mqKuAvTQYN5z .cluster-label span{color:#333;}#mermaid-svg-kFD6mqKuAvTQYN5z .label text,#mermaid-svg-kFD6mqKuAvTQYN5z span{fill:#333;color:#333;}#mermaid-svg-kFD6mqKuAvTQYN5z .node rect,#mermaid-svg-kFD6mqKuAvTQYN5z .node circle,#mermaid-svg-kFD6mqKuAvTQYN5z .node ellipse,#mermaid-svg-kFD6mqKuAvTQYN5z .node polygon,#mermaid-svg-kFD6mqKuAvTQYN5z .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-kFD6mqKuAvTQYN5z .node .label{text-align:center;}#mermaid-svg-kFD6mqKuAvTQYN5z .node.clickable{cursor:pointer;}#mermaid-svg-kFD6mqKuAvTQYN5z .arrowheadPath{fill:#333333;}#mermaid-svg-kFD6mqKuAvTQYN5z .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-kFD6mqKuAvTQYN5z .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-kFD6mqKuAvTQYN5z .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-kFD6mqKuAvTQYN5z .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-kFD6mqKuAvTQYN5z .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-kFD6mqKuAvTQYN5z .cluster text{fill:#333;}#mermaid-svg-kFD6mqKuAvTQYN5z .cluster span{color:#333;}#mermaid-svg-kFD6mqKuAvTQYN5z div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-kFD6mqKuAvTQYN5z :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}JS數據類型字符串型String數值型Number布爾型BooleanNull型Undefined型Object型引用數據類型基本數據類型

String字符串
String用于表示一個字符序列，即字符串。字符串需要使用 單引號 或 雙引號 括起來。
引號不能嵌套

var str = "hello world";

轉義字符：

轉義字符含義

\n	換行
\t	制表
\b	空格
\r	回車
\\	斜杠
\’	單引號
\"	雙引號

Number
Number 類型用來表示整數和浮點數
可以利用typeof運算符檢查一個變量的類型

var a = 666; var b = "666"; // console.log(typeof a); console.log(typeof b);

Number表示的數字大小是有限的，如果超過了這個范圍，則會返回 ±Infinity

最大值：Number.Max_VALUE
+1.7976931348623157e+308
最小值：Number.Min_VALUE
-1.7976931348623157e+308
0以上的最小值：5e-324
正無窮：Infinity
負無窮：-Infinity

NaN 是一個特殊的數字，表示Not A Number

Boolean
用于做邏輯判斷

• true
• false

// var bool = true; var bool = false; console.log(typeof bool);

Null
只有一個值的數據類型，這個特殊的值是 null
從語義上看null表示的是一個空的對象，所以使用typeof檢查null會返回一個Object

Undefined
只有一個值的數據類型，這個特殊的值是 undefined
當聲明一個變量，但不是給變量賦值時，它的值就是undefined
使用typeof對沒有初始化和沒有聲明的變量，會返回undefined

強制類型轉換

將其它的數據類型轉換為String、Number、Boolean

• 轉換為String類型

調用被轉換數據類型的toString()方法
該方法不會影響到原變量，它會將轉換的結果返回
null和undefined這兩個值沒有toString()方法，如果調用它們的方法，會報錯

var a = 666; var a = a.toString(); console.log(typeof a) console.log(a);

2.調用String()函數，并將被轉換的數據作為參數傳遞給函數
使用String()函數做強制類型轉換時，對于Number和Boolean實際上就是調用的toString()方法
對于null和undefined則會直接調用對應類型

var a = 666; var a = String(a); console.log(typeof a) console.log(a);

• 轉換為Number
  1.使用Number()函數

#mermaid-svg-c1a7M7AOdC4to6dm {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-c1a7M7AOdC4to6dm .error-icon{fill:#552222;}#mermaid-svg-c1a7M7AOdC4to6dm .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-c1a7M7AOdC4to6dm .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-c1a7M7AOdC4to6dm .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-c1a7M7AOdC4to6dm .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-c1a7M7AOdC4to6dm .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-c1a7M7AOdC4to6dm .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-c1a7M7AOdC4to6dm .marker{fill:#333333;stroke:#333333;}#mermaid-svg-c1a7M7AOdC4to6dm .marker.cross{stroke:#333333;}#mermaid-svg-c1a7M7AOdC4to6dm svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-c1a7M7AOdC4to6dm .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-c1a7M7AOdC4to6dm .cluster-label text{fill:#333;}#mermaid-svg-c1a7M7AOdC4to6dm .cluster-label span{color:#333;}#mermaid-svg-c1a7M7AOdC4to6dm .label text,#mermaid-svg-c1a7M7AOdC4to6dm span{fill:#333;color:#333;}#mermaid-svg-c1a7M7AOdC4to6dm .node rect,#mermaid-svg-c1a7M7AOdC4to6dm .node circle,#mermaid-svg-c1a7M7AOdC4to6dm .node ellipse,#mermaid-svg-c1a7M7AOdC4to6dm .node polygon,#mermaid-svg-c1a7M7AOdC4to6dm .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-c1a7M7AOdC4to6dm .node .label{text-align:center;}#mermaid-svg-c1a7M7AOdC4to6dm .node.clickable{cursor:pointer;}#mermaid-svg-c1a7M7AOdC4to6dm .arrowheadPath{fill:#333333;}#mermaid-svg-c1a7M7AOdC4to6dm .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-c1a7M7AOdC4to6dm .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-c1a7M7AOdC4to6dm .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-c1a7M7AOdC4to6dm .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-c1a7M7AOdC4to6dm .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-c1a7M7AOdC4to6dm .cluster text{fill:#333;}#mermaid-svg-c1a7M7AOdC4to6dm .cluster span{color:#333;}#mermaid-svg-c1a7M7AOdC4to6dm div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-c1a7M7AOdC4to6dm :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}純數字的字符串,則直接將其轉換為數字字符串中有非數字的內容,則轉換為NaN字符串是一個空串或者是一個全是空格的字符串,則轉換為0true 轉成 1false 轉成 0null 轉成 0undefined 轉成 NaNStringNumberBooleanNullUndefined var a = "666"; var a = Number(a); console.log(typeof a) console.log(a);

針對字符串，parseInt() 把一個字符串轉換為一個整數

var a = "666px"; var a = parseInt(a); console.log(typeof a) console.log(a);

parseFloat() 把一個字符串轉換為一個浮點數

var a = "666.99px"; var a = parseFloat(a); console.log(typeof a) console.log(a);

在JS中如果需要表示16進制的數字，需以0x開頭
表示8進制的數字，需以0開頭
表示2進制的數字，需以0b開頭

如"070"字符串，可能會當成八進制或十進制解析
可在parseInt()中傳遞一個第二個參數，來指定數字的進制

var a = "070"; // var a = parseInt(a,8); var a = parseInt(a,10); console.log(typeof a) console.log(a);

• 轉換為Boolean類型

#mermaid-svg-FC1EcMuJyqTqFFib {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-FC1EcMuJyqTqFFib .error-icon{fill:#552222;}#mermaid-svg-FC1EcMuJyqTqFFib .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-FC1EcMuJyqTqFFib .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-FC1EcMuJyqTqFFib .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-FC1EcMuJyqTqFFib .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-FC1EcMuJyqTqFFib .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-FC1EcMuJyqTqFFib .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-FC1EcMuJyqTqFFib .marker{fill:#333333;stroke:#333333;}#mermaid-svg-FC1EcMuJyqTqFFib .marker.cross{stroke:#333333;}#mermaid-svg-FC1EcMuJyqTqFFib svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-FC1EcMuJyqTqFFib .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-FC1EcMuJyqTqFFib .cluster-label text{fill:#333;}#mermaid-svg-FC1EcMuJyqTqFFib .cluster-label span{color:#333;}#mermaid-svg-FC1EcMuJyqTqFFib .label text,#mermaid-svg-FC1EcMuJyqTqFFib span{fill:#333;color:#333;}#mermaid-svg-FC1EcMuJyqTqFFib .node rect,#mermaid-svg-FC1EcMuJyqTqFFib .node circle,#mermaid-svg-FC1EcMuJyqTqFFib .node ellipse,#mermaid-svg-FC1EcMuJyqTqFFib .node polygon,#mermaid-svg-FC1EcMuJyqTqFFib .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-FC1EcMuJyqTqFFib .node .label{text-align:center;}#mermaid-svg-FC1EcMuJyqTqFFib .node.clickable{cursor:pointer;}#mermaid-svg-FC1EcMuJyqTqFFib .arrowheadPath{fill:#333333;}#mermaid-svg-FC1EcMuJyqTqFFib .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-FC1EcMuJyqTqFFib .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-FC1EcMuJyqTqFFib .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-FC1EcMuJyqTqFFib .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-FC1EcMuJyqTqFFib .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-FC1EcMuJyqTqFFib .cluster text{fill:#333;}#mermaid-svg-FC1EcMuJyqTqFFib .cluster span{color:#333;}#mermaid-svg-FC1EcMuJyqTqFFib div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-FC1EcMuJyqTqFFib :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}0和NaN空串NumberfalseStringNullUndefinedObjecttrue

運算符

通過運算符可以對一個或多個值進行運算并獲取運算結果
比如：typeof就是運算符，可以來獲得一個值的類型，它會將該值的類型以字符串的形式返回（number string boolean undefined object）

• 算數運算符（可進行隱式轉換）

用于表達式計算

運算符描述

+	加法
-	減法
*	乘法
/	除法
%	取余
++	自增
- -	自減

注：任何的值和字符串做加法運算，會先轉換為字符串，然后拼串

無論是a++ 還是++a，都會立即使原變量的值自增1
不同的是a++和++a的值不同
a++的值等于原變量的值（自增前的值）
++a的值等于原變量新值（自增后的值）
自減同理

• 一元運算符

對于非Number類型的值
它會先轉換為Number，然后再運算
可以對一個其他的數據類型使用+，將其轉換為number
原理與Number()函數一樣

a = true; var a = 2; a = +a; console.log(a); console.log(typeof a);

• 關系運算符

邏輯語句中使用，以測定變量或值是否相等

運算符描述

>	大于
<	小于
>=	大于或等于
<=	小于或等于

任何值和NaN作任何比較結果都是false

如果符號兩側的值都是字符串時，不會將其轉換為數字進行比較
而會分別比較字符串中字符的Unicode編碼

比較字符編碼是一位一位比較
如果兩位一樣，則比較下一位，所以借用它來對英文字符進行排序

比較中文時沒有意義

如果比較的兩個字符串類型的數字，可能會超出預期的效果
！！必須進行轉型

• 賦值運算符

用于給 JavaScript 變量賦值

運算符例子等同于

=	x=y
+=	x+=y	x=x+y
-=	x-=y	x=x-y
*=	x*=y	x=x*y
/=	x/=y	x=x/y
%=	x%=y	x=x%y

• 邏輯運算符

用于測定變量或值之間的邏輯

運算符描述例子

&&	and 與	(x < 10 && y > 1) 為 true
ΙΙ	or 或	(x==5 ΙΙ y==5) 為 false
!	not 非	!(x==y) 為 true

注：

所謂非運算就是對一個布爾值進行取反操作
true變false，false變true
如果對一個值進行兩次取反，它不會變化
如果對非布爾值進行運算，則會將其轉換為布爾值，然后再取反
所以我們可以利用該特點，來將一個其他的數據類型轉換為布爾值
原理和Boolean()函數一樣

&& || 非布爾值的情況
對于非布爾值進行與或運算時
會將其轉換為布爾值，然后再運算，并且返回原值
對于&&只要出現false
返回前邊的
反之亦然
對于||只要出現true
返回前邊的
第一個值為false則直接返回第二個值

var result = 3 && 6; console.log("result="+result);

var result = NaN && true; console.log("result="+result);

• 相等運算符

比較運算符用來比較兩個值是否相等，如果相等會返回true，否則返回false

使用 == 來做相等運算
當使用==來比較兩個值時，如果值的類型不同，則會自動進行類型轉換，將其轉換為相同的類型，然后再比較

NaN不和任何值相等，包括它本身（可以通過isNaN()函數來判斷一個值是否是NaN）

使用 != 來做不相等運算
不相等用來判斷兩個值是否不相等，如果不相等返回true，否則返回false，不相等也會對變量進行自動的類型轉換，如果轉換后相等它也會返回false

使用 === 來做全等運算
用來判斷兩個值是否全等，它和相等類似，不同的是它不會做自動的類型轉換，如果兩個值的類型不同，直接返回false

使用 !== 來做不全等運算
用來判斷兩個值是否不全等，它和不等類似，不同的是它不會做自動的類型轉換，如果兩個值的類型不同，直接返回true

• 條件運算符
  語法：條件表達式?語句1:語句2;
  執(zhí)行流程：

首先對表達式進行求值

判斷
如果該值為true，則執(zhí)行語句1，并返回執(zhí)行結果
如果為false，則執(zhí)行語句2，并返回執(zhí)行結果
如果條件的表達式的求值結果是一個非布爾值
會將其轉換為布爾值然后再運算

true?alert("1"):alert("2");

false?alert("1"):alert("2");

總結

以上是生活随笔為你收集整理的web大前端之旅Ⅵ的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。