?JavaScript系列6部曲：語法篇（萬字長文）?

🎈 作者：不吃西紅柿

🎈 簡介：CSDN博客專家🏆、藍橋簽約作者、Python領域優質創作者、資訊技術智庫公眾號創建者?，技術交流、面試刷題盡管關注咨詢我，

熱門專欄推薦：

🥇 知識集錦專欄：大資料生態硬核學習資料 & 面試真題集錦
🥈 資料倉庫專欄：數倉發展史、建設方法論、實戰經驗、面試真題
🥉 Python專欄：Python相關黑科技：爬蟲、演算法、小工具

（優質好文持續更新中……）?

創作不易，點贊👍 關注💪 鼓勵「不吃西紅柿」吧~

CSDN私信回復「資料」驚喜等你！！

目錄

01 JavaScript (簡稱:js)

02 運算子

03 JS變數

04 JS變數作用

05 JS變數的交換

06 注釋

07 JS的資料型別

08 JS的數字型別

09 進制

10 NaN

11 型別轉換

12 JS基本的代碼規范

01 JavaScript (簡稱:js)

js分三個部分:

• ECMAScript 標準----js的基本的語法

• DOM------Document Object Model 檔案物件模型

• BOM------Browser Object Model 瀏覽器物件模

JavaScript是什么？

• 是一門腳本語言（不需要編譯,直接執行,常見的腳本語言:t-sql,cmd）

• 是一門解釋性語言

• 是一門動態型別的語言

• 是一門基于物件的語言

?

注意：

1.編譯語言是需要把代碼翻譯成計算機所認知的二進制語言,才能夠執行

2.前端基礎是HTML（標記語言,展示資料的）、CSS（美化頁面）、

JavaScript（用戶和瀏覽器互動）這三大塊，

js原名不是JavaScript,而是LiveScript

js的作用?解決用戶和瀏覽器之間的互動的問題

js的代碼可以分三個地方寫:

1.在html的檔案中,script的標簽中寫js代碼

2.js代碼可以在html的標簽中寫

<script> //js代碼    alert("好好學習,天天向上"); //在頁面中彈出對話框   </script> <input type="button" value="按鈕" onclick="alert('被點了');"/> 

3.在js檔案中可以寫js代碼,但是需要在html的頁面中引入 script的標簽中的src="js的路徑"

02 運算子

運算子:一些符號-----用來計算

• 算數運算子: + - * / %

• 算數運算運算式:由算數運算子連接起來的運算式

• 一元運算子: 這個運算子只需要一個運算元就可以運算的符號 ++ –

• 二元運算子: 這個運算子需要兩個運算元就可以運算,

• 三元運算子: 條件運算式?運算式1:運算式2

• 復合運算子: += -= *= /= %=

• 復合運算運算式:由復合運算子連接起來的運算式

 var num=10;  num+=10;------>就是:num=num+10;  console.log(num);20 

賦值運算子: =

關系運算子:

• > < >= <=

• ==不嚴格的

• ===嚴格的

• !=不嚴格的不等

• !==嚴格的不等

關系運算運算式:由關系運算子連接起來的運算式

關系運算運算式的結果是布爾型別

邏輯運算子:

• &&—邏輯與–并且

• ||—邏輯或—或者

• !—邏輯非—取反–取非

邏輯運算運算式:由邏輯運算子連接起來的運算式

• 運算式1&&運算式2

如果有一個為false,整個的結果就是false

• 運算式1||運算式2

如果有一個為true,整個的結果為true

• !運算式1

運算式1的結果是true,整個結果為false

運算式1的結果是false,整個結果為true

var num1=10; var num2=20; ?console.log(num1==num2&&5>6 )var num=20; console.log(num>10||5<0 )var flag=false; console.log(!flag )var num=10; var sum=(num+10)*5; console.log(sum var result = (4 >= 6 || '人' != '狗' && !(12 * 2 == 144) && true) ;console.log(result);var num = 10; var result2 =( 5 == num / 2 && (2 + 2 * num).toString() === '22') ;console.log(result2); ?var num=20; var result=num/3;//num變數與3取余--->10/3的余數 console.log(parseInt(result) var num=20; var result=num%3;//num變數與3取余--->10/3的余數 console.log(result )var num=10; var sum=(num+10)+1 var num = 20;        num %= 5; //    num=num-5; console.log(num )var str="5"; var num=5;console.log(str===num )console.log(5>10);//false console.log(5>=5);//true console.log(5>3);//true console.log(5==10);//false

03 JS變數

變數名的注意問題—變數名的命名：

1.要遵循駝峰命名法（第一個單詞的首字母是小寫的,后面的所有的單詞的首字母都是大寫的）

2.變數名要有意義

3.變數名要規范

4.不能使用關鍵字(系統自帶的一些單詞,不能使用)

宣告變數并初始化—變數的初始化----宣告變數賦值

宣告了一個num的變數存盤了一個數字100

 var num=110;

輸出這個變數的值

 alert(num);//彈框

瀏覽器的控制臺在瀏覽器中的開發人員工具中(快捷鍵:F12)的console的選項中

console.log(num);//把內容輸出在瀏覽器的控制臺中

宣告多個變數然后一個一個的賦值

var num1,num2,num3;//宣告  //依次的賦值num1=10;   num2=20;   num3=30;

宣告多個變數并且賦值

var num1=10,num2=20,num3=30; var num=10;var $break=10;var shuZi=10;

注意：操作的資料都是在記憶體中操作

js中存盤資料使用變數的方式(名字,值—>資料)

js中宣告變數都用var---->存盤資料,資料應該有對應的資料型別

js中的字串型別的值都用雙引號或者單引號

04 JS變數作用

變數的作用是存盤資料的或者是操作資料

變數宣告(有var 有變數名字,沒有值)

變數初始化(有var 有變數名字,有值)

變數宣告的方式:

var 變數名字;

var number;//變數的宣告,此時是沒有賦值的, //一次性宣告多個變數    var x,y,z,k,j;//都是宣告,沒有賦值 //變數的初始化(變數宣告的同時并且賦值了)//   = 的意義:賦值的含義//存盤一個數字10var number = 10; //存盤一個5var number2 = 5; //存盤一個人的名字var name = "小黑"; //存盤真(true)var flag = true; //存盤一個null--->相當于是空var nll = null; //存盤一個物件    var obj = new Object();

05 JS變數的交換

使用第三方的變數進行交換

var num1=10; var num2=20;   // 把num1這個變數的值取出來放在temp變數中var temp=num1; //  把num2這個變數的值取出來放在num1變數中   num1=num2; //  把temp變數的值取出來放在num2變數中   num2=temp;console.log(num1);//20 console.log(num2);//10

第二種方式交換:一般適用于數字的交換

var num1 = 10;  var num2 = 20; // 把num1的變數中的值和num2變數中的值,取出來相加,重新賦值給num1這個變數        num1 = num1 + num2;//30    // num1變數的值和num2變數的值取出來,相減的結果重新賦值給num2        num2 = num1 - num2;//10 //   num1變數的值和num2變數的值取出來,相減的結果重新賦值給num1        num1 = num1 - num2;//20console.log(num1, num2);?

注意；變數的名字是不能重名，因為后面的會覆寫 前面的

var num1=10; var num1=20; console.log(num1);

擴展的變數的交換:只需要看代碼,不需要理解（位運算）

var num1 = 10;  var num2 = 20;  num1 = num1 ^ num2;  num2 = num1 ^ num2;  num1 = num1 ^ num2;  console.log(num1, num2);

06 注釋

注釋的方式:

1.單行注釋 //

2.多行注釋 /★★/

//單行注釋:一般用在一行代碼的上面

/多行注釋:一般是用在函式或者是一段代碼的上面/

//注釋后的代碼不執行了?//console.log("哈哈,我又變漂亮了"); //console.log("第二行"); //宣告變數并初始化//    var num=10;

07 JS的資料型別

值型別(基本型別)：

• 字串（String）

• 數字-整數和小數(Number)

• 布爾(Boolean)

• 對空（Null）

• 未定義（Undefined）

• Symbol

參考資料型別：

• 物件(Object)

• 陣列(Array)

• 函式(Function)，

var num; console.log(num+10);//NaN-----not an number---->不是一個數字 var num; console.log(num);如何獲取這個變數的資料型別是什么? 使用typeof 來獲取    //typeof 的使用的語法     * 都可以獲取這個變數的資料型別是什么!     * typeof 變數名     * typeof(變數 名)     * var num = 10; var str = "小白"; var flag = true; var nll = null; var undef; var obj = new Object();//是使用typeof 獲取變數的型別console.log(typeof num);//number console.log(typeof str);//string console.log(typeof flag);//boolean console.log(String(nll));//是null console.log(typeof nll);//不是null console.log(typeof undef);//undefined console.log(typeof obj);//object console.log(typeof(num));

08 JS的數字型別

 // 數字型別:整數和小數 var num = 12; ?num=20; // 整數  num=98.76; // 小數(其他的語言中,浮點型---單精度,雙精度浮點) ?// 所有的數字都是屬于number型別

09 進制

js中可以表示哪些進制呢？

• var num=10;//十進制

• var num2=012;//八進制

• var num3=0x123;//十六進制

var num=12;//十進制 console.log(num); var num2=012;//八進制 console.log(num2); var num3=0x1a;//十六進制 console.log(num3); var num=0x1f;    console.log(num);

注意：

想要表示十進制:就是正常的數字
想要表示八進制:以0開頭
想要表示十六進制:0x開頭

10 NaN

不要用NaN驗證是不是NaN

var num;  console.log(num+10==NaN); console.log("您好"=="我好");

如何驗證這個結果是不是NaN,應該使用isNaN()

var num;//-----變數宣告了,沒有賦值,結果是:undefined  是不是不是一個數字----->不是一個數字嗎？NaN--->不是一個數字 console.log(isNaN(10));

判斷結果不是一個數字可以使用isNaN(變數名)

var str="您好"; var num;  var sum=num+10;//NaN console.log(sum); console.log(isNaN(sum));//不是數字為true,是數字結果為false

注意：不要使用NaN判斷是不是NaN，應該使用isNaN(值或者是變數)

11 型別轉換

1.parseInt();//轉整數

console.log(parseInt("10"));//10 console.log(parseInt("10afrswfdsf"));//10 console.log(parseInt("g10"));//NaN console.log(parseInt("1fds0"));//1 console.log(parseInt("10.98"));//10 console.log(parseInt("10.98fdsfd"));//10

2.parseFloat()//轉小數

console.log(parseFloat("10"));//10  console.log(parseFloat("10afrswfdsf"));//10  console.log(parseFloat("g10"));//NaN console.log(parseFloat("1fds0"));//1 console.log(parseFloat("10.98"));//10.98 console.log(parseFloat("10.98fdsfd"));//10.98

3.Number();//轉數字

console.log(Number("10"));//10  console.log(Number("10afrswfdsf"));//NaN console.log(Number("g10"));//NaN console.log(Number("1fds0"));//NaN console.log(Number("10.98"));//10.98 console.log(Number("10.98fdsfd"));//NaN

注意:想要轉整數用parseInt(),想要轉小數用parseFloat()

想要轉數字:Number();要比上面的兩種方式嚴格

其他型別轉字串型別

1 .toString()

//    var num=10; //    console.log(num.toString());//字串型別 //    //2  String(); ////    var num1=20; //    console.log(String(num1));

如果變數有意義呼叫.toString()使用轉換
如果變數沒有意義使用String()轉換

var num2; console.log(num2.toString()); var num3=null; console.log(num3.toString());     //這個可以var num2; console.log(String(num2)); var num3=null; console.log(String(num3));?

其他型別轉布爾型別

console.log(Boolean(1));//true console.log(Boolean(0));//false console.log(Boolean(11));//true console.log(Boolean(-10));//true console.log(Boolean("哈哈"));//true console.log(Boolean(""));//false console.log(Boolean(null));//false console.log(Boolean(undefined));//false 

12 JS基本的代碼規范

js中宣告變數用var

js中的每一行代碼結束都應該有分號;(寫代碼有分號的習慣)

js中的大小寫是區分的: var N=10; n

js中的字串可以使用單引號,也可以使用雙引號,目前我們暫時使用雙引號