Web前端開發工程師知識體系_3_JavaScript基礎（一）

JavaScript（簡稱“JS”） 是一種具有函式優先的輕量級，解釋型或即時編譯型的編程語言，雖然它是作為開發Web頁面的腳本語言而出名，但是它也被用到了很多非瀏覽器環境中，JavaScript 基于原型編程、多范式的動態腳本語言，并且支持面向物件、命令式、宣告式、函式式編程范式，

自ES6出世以來，JavaScript已成為世界上唯一一種可以同時包攬前后端的編程語言，

一、JS開發環境的搭建

JavaScript開發環境分為瀏覽器端和服務器端，

所謂瀏覽器端就是JS代碼通過瀏覽器自帶的JS解釋器來執行，典型代表就是五大瀏覽器：谷歌、火狐、edge、safari、歐朋，瀏覽器端執行需要創建一個.js檔案和一個.html檔案，然后將.js 檔案嵌入到.html檔案中，

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

嵌入之后用瀏覽器打開.html檔案即可，

服務器端則需要用到Node.js，它是運行在服務器端的開發環境，需要使用時下載安裝，下載地址www.nodejs.org，執行方式也較為簡單快捷，只需在命令提示符cmd下輸入：node 空格 然后拖拽要運行的檔案，如下：

那么，如何檢測自己是否安裝Node了呢？

在cmd命令提示符下輸入node -v;

如果顯示出版本號，則表示Node已成功安裝，

二、變數和常量

變數是存盤資料的容器；常量同變數一樣用于存盤資料，但常量宣告以后不允許重新賦值，

宣告變數使用關鍵字var，宣告常量使用關鍵字const，示例：

//變數宣告
var x = 1;//表示在內容中開辟一塊空間并命名為x，把1保存至這個空間中
var y = 2;
var ename = '張三';//使用字串時需要加引號

//常量宣告
const pi = 3.14;

三、資料型別

五大原始型別：數值型、字串型、布爾型、未定義型、空

數值型number，包括二進制、八進制和十進制，

var n1 = 10;//10進制
var n2 = 012;//8進制
var n3 = 0xa;//16進制
var n5 = 3.1415E+2;//浮點型

字串型string，被引號包含的資料即為字串，

var str1 = 'abc';
var str2 = '8';

布爾型Boolean，只有兩個值：true、false，通常用于保存只有兩個狀態的資料，例如是否在線、是否登錄、一些運算子的結果等，

未定義型undefined，只有一個值undefined，代表一個空值，例如宣告了變數未賦值，

空null，只有一個值null，型別為object，通常結合物件一起使用

補充：檢測資料型別需要用到typeof，使用方法如下：

var p = null;//定義一個變數為空
console.log(p,typeof p);//列印并用typeof檢測資料型別，顯示為null

四、資料型別的轉換

首先是隱式轉換，它是運算程序中自動產生的資料轉換，其實是自動呼叫了Number函式

（1）數字+字串 數字轉換為字串后拼接
（2）數字+布爾型 布爾型轉換為數字，true--1，false--0
（3）布爾型+字串 布爾型轉換為字串后拼接
（4）undefined+數字 undefined轉為NaN
（5）減乘除時，資料自動轉為數值

var n1 = 2 + '3';//23
var n2 = 2 + true;//3
var n3 = 'zxc' + false;//zxcfalse
var n2 = '3' - 1;//2
var n3 = '2' * true;//2

第二個是強制轉換，需要用到函式

（1）強制轉換為數值型 Number( )

var n1 = Number("1"); //1
var n1 = Number(true); //1
var n2 = Number(false); //0
var n3 = Number(undefined); //NaN
var n4 = Number(null); //0
var n5 = Number("1a"); //NaN

（2）強制轉換為整型 parseInt( ) ，強制將字串和小數轉為整型

var p1 = parseInt("3.14"); //3
var p2 = parseInt("6.18a"); //6
var p3 = parseInt("a6.18"); //NaN
var p4 = parseInt(5.9); //5

（3）強制轉換為浮點型 parseFloat( ) ，強制將字串轉換為浮點型

var f1 = parseFloat("3.14"); //3.14
var f2 = parseFloat("6.18a"); //6.18
var f3 = parseFloat("6a"); //6
var f4 = parseFloat("a6.18"); //NaN

（4）數值和布爾型強制轉為字串 toString( )

var num = 5;
var str = num.toString( ); //"5"

五、運算子

在學習運算子之前，先來了解以下“運算式”的定義：由資料本身或者由運算子連接的操作資料組成的形式稱為運算式，也就是說，運算子所連接的資料均稱為運算式，

（1）算數運算子，即我們平常所用的加(+)、減(-)、乘(*)、除(/)，還有取余(%)、自增(++)、自減(--)，加減乘除以及取余較為簡單，不做探討，通過一組代碼來理解自增和自減：

var a2 = 5;
var a3 = a2++;//先將a2的值賦給a3，再自增
console.log(a2,a3);//6 5

var a4 = 7;
var a5 = ++a4;//a4先自增，再賦值給a5
console.log(a4,a5);//8 8

可以看出，如果自增用在變數后面，則是先使用變數的值參與計算，隨后再進行變數加1；而如果自增用在變數前面，則是先將變數進行自增以后再參與計算，自減同理，

（2）比較運算子

· 等于“==”只比較兩者的值是否相同，全等于“===”同時比較型別和值
· 不等于“!=”只比較值是否不同，不全等于“!==”同時比較型別和值，有一個不等即為true
· 數字與字串比較時，字串轉為數值
· 字串之間比較時，比較首個字符的Unicode碼
· NaN和任何值比較均回傳false，NaN == NaN也為false

console.log(2 == '2');//== 只比較值的大小，都為2，所以顯示true
console.log(2 === '2');//=== 比較值和型別，值雖然都為2，但前者為數值型，后者為字串，所以顯示false

（3）邏輯運算子

&&邏輯與，關聯的兩個條件都為true，結果為true

||邏輯或，關聯的兩個條件有一個為true結果即為true ，

！邏輯非，取反 eg：!true = false

邏輯運算子中比較重要的為短路邏輯：

var a = 2;
a > 3 && console.log(num);

如上代碼，a的值為2，邏輯與判斷中，第一個運算式為a>3，而2不大于3，說明此處為false，由于這里使用的運算子為邏輯與&&，只有前后兩個條件都為true時整體才為true，所以第二個運算式就沒有必要再運行了，此時就是發生了短路邏輯，換句話說，短路邏輯的看重點就是在于是否執行第二個運算式，

（4）位運算子

模擬計算機底層的運算，先將資料轉為2進制進行運算，運算結束后再將結果轉回10進制
· & 按位與，上下兩位都是1，結果為1，否則為0
· | 按位或，上下兩位有一個1則結果為1
· ^ 按位異或，上下兩位不同為1，相同為0
· >> 按位右移，洗掉末尾的位數（原基礎上除以2再取整）
· << 按位左移，在末尾補0（原基礎上乘以2）

//按位與
console.log(3 & 5);//011 & 101 == 001 == 1
console.log(5 & 8);//0101 & 1000 == 0000 == 0
//按位或
console.log(4 | 7);//100 | 111 == 111 == 7
//按位異或 
console.log(6 ^ 9);//0110 ^ 1001 == 1111 == 15
//按位右移
console.log(9 >> 1);//1001 >> 1 == 0100 == 4
//按位左移
console.log(5 << 1);//101 << 1 == 1010 == 10

（5）賦值運算子

所謂賦值運算，就是先進行運算，再進行賦值

var a = 1;
a += 3;//4
a = a + 3;//4

（6）三目運算子

· 一目運算子：由一個運算子連接的一個操作資料或者運算式 ! ++ --
· 二目運算子：由一個運算子連接的兩個操作資料或者運算式
· 三目運算子：由兩個運算子連接的三個操作資料或者運算式
格式：條件運算式 ? 運算式1 : 運算式2
如果條件運算式為true，執行運算式1
如果條件運算式為false，執行運算式2

var a = 1,b = 2;
a > b ? console.log('對') : console.log('錯');

在以上函式中，a為1，b為2，首先判斷a是否大于b，如果大于，則執行console.log('對')，如果小于，則執行console.log('錯')，所以此陳述句輸出結果為：錯，