JS基礎語法（一）

阿新 • • 發佈：2021-06-19

1、概述

1.1、簡介

JavaScript 是一種具有面向物件能力的、解釋型的程式設計語言。更具體一點，它是基於物件和事件驅動並具有相對安全性的客戶端指令碼語言。它的主要目的是，驗證發往伺服器端的資料、增加 Web 互動、加強使用者體驗度等。

1.2、JavaScript 的組成

ECMAScript(基礎語法)

JavaScript的核心語法ECMAScript描述了該語言的語法和基本物件

DOM(文件物件模型)

文件物件模型（DOM）—— 描述了處理網頁內容的方法和介面

BOM(瀏覽器物件模型)

瀏覽器物件模型（BOM）—— 描述了與瀏覽器進行互動的方法和介面

1.3、基本用法

JS需要和HTML一起使用才有效果，我們可以通過直接或間接的方式將JS程式碼嵌入在HTML頁面中。

行內JS : 寫在標籤內部的js程式碼

 <button onclick="alert('確認提交嗎')">提交</button>

內部JS : 定義在script標籤內部的js程式碼

<!-- 這裡沒寫type屬性為text/javascript，因為預設就是這個值 -->
<script>
    alert("Hello World");
</script>

外部JS : 單獨的js檔案，在HTML中通過script標籤引入

<!-- 注意此處一定要使用雙標籤，否定將引入外部js失敗 -->
<script src="js/test.js"></script>

注意：

我們可以將JavaScript程式碼放在html檔案中任何位置，但是我們一般放在網頁的head或者body部分。
由於頁面的載入方式是從上往下依次載入的，而這個對我們放置的js程式碼執行是有影響的。

2、基礎語法

2.1、語句與註釋

JavaScript程式的執行單位為行（line），也就是一行一行地執行。一般情況下，每一行就是一個語句。

語句（statement）是為了完成某種任務而進行的操作，語句以分號結尾，一個分號即表示一個語句結束。多個語句可以寫在一行內（不建議這麼寫程式碼），但是一行寫多條語句時，語句必須以分號結尾。

表示式不需要分號結尾。一旦在表示式後面新增分號，則JavaScript引擎就將表示式視為語句，這樣會產生一些沒有任何意義的語句。

單行註釋：用//起頭；
多行註釋：放在/* 和 */之間。
相容html註釋方式：<!-- -->

2.2、識別符號和關鍵字

識別符號就是一個名字，用來給變數和函式進行命名，有特定規則和規範

規則：

由Unicode字母、_、$、數字組成、中文組成
（1）不能以數字開頭
（2）不能是關鍵字和保留字
（3）嚴格區分大小寫

規範：

1）見名知意
2）駝峰命名或下劃線規則

關鍵字也稱保留字，是被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、Infinity、NaN、undefined

2.3、變數

變數即一個帶名字的用來儲存資料的記憶體空間，資料可以儲存到變數中，也可以從變數中取出資料。

變數的宣告

JavaScript是一種弱型別語言，在宣告變數時不需要指明資料型別，直接用var修飾符進行宣告

// 先宣告再賦值
var a ;    
a = 10;
// 宣告同時賦值
var b = 20;

變數的注意點

（1）若只宣告而沒有賦值，則該變數的值為undefined。

var box;
console.log(box);

（2）變數要有定義才能使用，若變數未宣告就使用，JavaScript會報錯，告訴你變數未定義。

console.log(box2);

（3）可以在同一條var命令中宣告多個變數。

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

（4）若使用var重新宣告一個已經存在的變數，是無效的。

var box = 10
var box;

（5）若使用var重新宣告一個已經存在的變數且賦值，則會覆蓋掉前面的值

var box = 10;
var box = 25;

（6）JavaScript是一種動態型別、弱型別語言，也就是說，變數的型別沒有限制，可以賦予各種型別的值。

var box = 'hello world';
box = 10;

變數提升

JavaScript 引擎的工作方式是，先解析程式碼，獲取所有被宣告的變數，然後再一行一行地執行。這造成的結果，就是所有的變數的宣告語句，都會被提升到程式碼的頭部，這就叫做變數提升。

console.log(msg);
var msg = "so easy";
// 變數提升，相當於下面的程式碼
var msg;
console.log(msg);
msg = "so easy";
// 說明： 最後的結果是顯示undefined，表示變數msg已宣告，但還未賦值。

注意：變數提升只對 var 命令宣告的變數有效，如果變數不是用 var 命令宣告的，就不會發生變數提升。

console.log(msg);
const msg = "so easy";
// 結果直接報錯

2.4、資料型別

Undefined

undefined型別的值是undefined。

undefined 是一個表示"無"的原始值，表示值不存在。

出現undefined的常見情況：

（1）當聲明瞭一個變數而沒有初始化時，這個變數的值就是undefined

var box;
console.log(box); //undefined

（2）呼叫函式時，該函式有形參，但未提供實參，則該引數為undefined。

function noData(str) { // js函式形參只需要變數名即可
 console.log(str); // undefined
}
noData(); // 呼叫方法時，未傳遞引數

（3）函式沒有返回值時，預設返回 undefined。

// 方法沒有返回值
function noData() { 
 console.log("Hello"); 
}
var re = noData();// 定義變數接收無返回值的方法
console.log(re);

（4）陣列下標越界

var array = [1,2,3];
console.log(array[3])

Null

null型別是隻有一個值的資料型別，即特殊的值null。它表示空值，即該處的值現在為空，它表示一個空物件引用。

使用Null型別值時注意以下幾點：

使用typeof操作符測試null返回object字串。

undefined派生自null，所以等值(型別不相同)比較返回值是true。未初始化的變數和賦值為null的變數相等。

  console.log(undefined == null);
  var box = null; // 賦值為null的變數
  var a; // 未初始化的變數
  console.log(a == box); // 兩個的值相等

布林型別

布林型別有兩個值：true、false。常用來做判斷和迴圈的條件

Number

1）number的值有：

123 // 整數
2.2 // 浮點數
1.2e2 // 科學計數法
-99 // 負數
NaN // not a number
Infinity // 表示無限大

2）整型和浮點型都是以 64 位浮點數形式儲存。所以，JS中1 與 1.0 相等，而且 1 加上 1.0 得到的還是一個整數。浮點數最高精度是17位小數，由於浮點數運算時可能不精確，儘量不要使用浮點數做判斷。

3）在儲存數值型資料時自動將可以轉換為整型的浮點數值轉為整型。

console.log(1 == 1.0); // true
console.log(1 + 1.0); // 2
var num = 8.0; // 自動將可以轉換為整型的浮點數轉為整型
console.log(num); // 8

字串

1、使用 ' ' 或 " "引起來，如：'hello'，"good"。

2、使用加號 '+' 進行字串的拼接，如：console.log('hello' + ' everybody');

3、使用 \ 進行轉義

\'
\n
\t
\u4e2d // 使用Unicode字元
\x41 //使用Ascll字元

4、使用 `` 進行多行字串編寫

let  msg = `Hello World
你好世界`;

5、模板字串

let name = "conner";
// 注意這裡使用的Esc下的那個符號
let msg = `你好，${name}`;

6、字串長度

str.length

7、字串是不可變的

8、大小寫轉換

// 注意是函式呼叫
name.toUpperCase()
name.toLowerCase()

9、獲取指定字元的下標

name.indexOf('o')

10、擷取字串

// 擷取下標1(包含)到最後的字串
name.substring(1)
// 擷取下標[1,3)的字串
name.substring(1,3)

陣列

陣列的定義

JS 中定義陣列的三種方式如下（也可先宣告再賦值）：

var arr = [值1,值2,值3];  // 隱式建立

var arr = new Array(值1,值2,值3); // 直接例項化

var arr = new Array(size); // 建立陣列並指定長度

基本操作

陣列的長度可以通過length屬性來獲取，並可以任意更改

陣列名.length
陣列名.length = 新長度

陣列中的每一個元素都可以被訪問和修改，甚至是不存在的元素，無所謂越界

陣列名[下標]
陣列名[下標] = 新值

陣列的遍歷

普通的for迴圈遍歷

  for(var i=0; i<=陣列.length-1; i++){
      
  }
  如：
  for(var idx=0;idx<arr.length;idx++){
      console.log(arr[idx]);
  }

for ... in

  for(var 下標(名稱任意) in 陣列名){ 
   陣列名[下標]是獲取元素
  } // 下標(名稱任意)
  如：
  for(var idx in arr){
      console.log(arr[idx]);
  }

forEach

  陣列名.forEach(function(element,index){
      // element(名稱任意)：元素，index(名稱任意)：下標
  })    
  如：
  arr.forEach(function(elem,idx){
      console.log(idx + "-->" + elem);
  });

for...of

  for(var 值(名稱任意) of 陣列名){ 
     // 值就是陣列中的值
  }
  如：
  for(var value of arr){
      console.log(value);
  }

擴充套件

陣列在使用的時候建議大家規矩來用。在存放資料時，從下標0開始順序的存放陣列元素。
如果下標：
 	1.為非負整數(包括整數字符串)：自動從0開始,不存在新增 undefined
 	2.為負數、小數、非數字符串：這些內容不計算在長度內，當成"屬性"處理，相當於自定義屬性。
陣列非常靈活，使用陣列元素
 	1.下標: 非負整數(包括整數字符串)：
 	  陣列.下標
      陣列[下標]
 	2.下標：負數、小數、非數字字串：
      陣列[屬性]
      
* for --> 不遍歷屬性
* foreach -->不遍歷屬性和索引中的undefined
* for in -->不遍歷索引中的undefined

一些常用的函式

1、indexOf，通過元素獲取下標值

// 數字2與字串"2"是不同的
arr.indexOf(2)

2、slice() 擷取Array的一部分返回一個新陣列

3、push()、pop()

push()：壓入元素到陣列尾部
pop()：彈出一個數組尾部的元素

4、unshift()，shift()

unshift()：壓入元素到陣列頭部
shift()：彈出一個數組頭部的元素

5、排序sort()

arr
(3)[2, 3, 1]
arr.sort()
(3)[1, 2, 3]

6、反轉 reverse()

arr
(3)[1, 2, 3]
arr.reverse()
(3)[3, 2, 1]

7、concat()

arr
(3)[3, 2, 1]
arr.concat(["A","C","B"])
(6)[3, 2, 1, "A", "C", "B"]
arr
(3)[3, 2, 1]

注意：原來的陣列還在，返回的是一個新陣列

8、連線符join()

arr
(3)[3, 2, 1]
arr.join('-')
"3-2-1"
// 原來陣列也是不發生變化
arr
(3)[3, 2, 1]

9、多維陣列

arr=[[1,3],[2,4],[,5,6]]
(3)[Array(2), Array(2), Array(3)]
arr[1][1]
4

物件

定義：

var 物件名 {
    屬性名:屬性值，
    屬性名:屬性值，
    屬性名:屬性值，
    ......
}

var student={
    name:"conner",
    age:5,
    score:99
}

Js中物件，{...}表示一個物件，鍵值對描述屬性XXXX:XXXX，多個屬性之間用逗號隔開，最後一個屬性不加逗號!
JavaScript中的所有的鍵都是字串，值是任意物件!

1、物件賦值

student
{name: "conner", age: 5, score: 99}
student.age=10
10
student
{name: "conner", age: 10, score: 99}

2、使用一個不存在的物件屬性，不報錯~

student
{name: "conner", age: 10, score: 99}
student.email
undefined

3、動態的刪減屬性，通過delete刪除物件屬性

delete(student.score)
true
student
{name: "conner", age: 10}

4、動態的增加屬性,直接給新屬性賦值即可

student.email="[email protected]"
"[email protected]"
student
{name: "conner", age: 10, email: "[email protected]"}

5、判斷物件是否擁有某個屬性或函式 xx in xx

'age' in student
true

// 繼承
'toString' in student
true

6、判斷一個屬性是否是這個物件自身擁有的

student.hasOwnProperty('toSring')
false
student.hasOwnProperty('age')
true

Map和Set

ES6的新特性

Map：無序鍵不重複集合

let map = new Map([["conner",15],["tim",10],["jetty", 11]]);
map.get("tim"); // 取值
map.set("admin", 23); // 新增值
map.delete("jetty"); // 刪除值

Set：無序不重複集合

let set = new Set([1,1,1,2,3,4]);
console.log(set); // Set會自動去重
set.add(7); // 新增值
set.delete(3); // 刪除值
console.log(set.has(2)); // 判斷集合中是否有此元素

遍歷：

// Map
let map = new Map([["conner",15],["tim",10],["jetty", 11]]);
for (let e of map) {
    console.log(e);
}

for([k,v] of map){
    console.log(`${k} : ${v}`)
}

map.forEach((v, k)=>{console.log(`${k} : ${v}`)});


// Set
let set = new Set([1,1,1,2,3,4]);
for (let v of set) {
    console.log(v);
}

set.forEach(v=>{console.log(v)});

2.5、型別轉換

自動型別轉換

值	字串	數值	布林值
underfined	"underfined"	NaN	false
null	“null”	0	false
true	"true"	1	true
false	"false"	0	false
“”（空字串）	""	0	false
“1.5”	"1.5"	1.5	true
“one”	"one"	NaN	true
0	"0"	0	false
-0	"0"	0	false
NaN	"NaN"	NaN	false
Infinity	"Infinity"	Infinity	true
-Infinity	"-Infinity"	-Infinity	true

函式轉換

JS 提供了 parseInt()和 parseFloat()兩個全域性轉換函式。前者把值轉換成整數，後者把值轉換成浮點數。只有對 String 型別呼叫這些方法，這兩個函式才能正確執行；對其他型別返回的都是 NaN(Not a Number)。

parseInt()

在轉換之前，首先會分析該字串，判斷位置為0處的字元，判斷它是否是個有效數字，如果不是，則直接返回 NaN，不再繼續，如果是則繼續，直到找到非字元

parseInt("1234blue"); // returns 1234
parseInt("22.5"); // returns 22
parseInt("blue"); // returns NaN

parseFloat()

該方法與 parseInt() 方法的處理方式相似，從位置 0 開始檢視每個字元，直到找到第一個非有效的字元為止，然後把該字元之前的字串轉換成數字。不過，對於這個方法來說，第一個出現的小數點是有效字元。如果有兩個小數點，第二個小數點將被看作無效的，parseFloat()方法會把這個小數點之前的字串轉換成數字。

parseFloat("1234blue"); // returns 1234.0
parseFloat("22.5"); // returns 22.5
parseFloat("22.34.5"); // returns 22.34
parseFloat("blue"); //returns NaN

顯示轉換

幾乎每個數物件都提供了toString()函式將內容轉換為字串形式，其中Number提供的toString()函式可以將數字轉換為字串。

Number還提供了toFixed()函式將根據小數點後指定位數將數字轉為字串，四捨五入

// 將內容轉換為字串形式
var data = 10
console.log(data.toString())

// 根據小數點後指定位數將數字轉為字串，四捨五入
data = 1.4;
console.log(data.toFixed(0));
data = 1.49;
console.log(data.toFixed(1));
 
// 不能對null和undefined使用
data = null
console.log(data.toString())
data = undefined
console.log(data.toString())

JS 為 Number、Boolean、String 物件提供了構造方法，用於強制轉換其他型別的資料。此時操作的是整個資料，而不是部分。

Number(false)       0
Number(true)         1
Number(undefined) NaN
Number(null)         0
Number( "5.5 ")     5.5
Number( "56 ")     56
Number( "5.6.7 ")   NaN
Number(new Object()) NaN
Number(100)         100


Boolean(""); // false – empty string
Boolean("hi"); // true – non-empty string
Boolean(100); // true – non-zero number
Boolean(null); // false - null
Boolean(""); // false – empty string
Boolean("hi"); // true – non-empty string
Boolean(100); // true – non-zero number
Boolean(null); // false - null

/*
1.最後一種強制型別轉換方法 String() 是最簡單的，因為它可把任何值轉換成字串。
2. 要執行這種強制型別轉換，只需要呼叫作為引數傳遞進來的值的 toString() 方法，即把 1 轉換成"1 "，把 true轉換成 "true "，把 false 轉換成 "false"，依此類推。
3. 強制轉換成字串和呼叫 toString() 方法的唯一不同之處在於，對 null 或 undefined 值強制型別轉換可以生成字串而不引發錯誤
4. 最為簡單的一種轉換為字串的方式，直接在任意資料後面 + "" 即可。
*/

var s1 = String(null); // "null"
var oNull = null;
var s2 = oNull.toString(); // won’t work, causes anerror

2.6、嚴格檢查格式

在JavaScript程式碼的第一行加上’use strict‘，預防JavaScript隨意性導致的一些問題
前提是IDEA需要設定支援ES6語法
區域性變數建議使用 let 定義

<script>
    'use strict';
	
	/*	
		我們是不建議這樣定義變數的，因為這樣預設是全域性變數，當我們在引入不同的js檔案時，
		就有可能使用到別的檔案的變數
	*/
	i = 1;/* 此時這裡會爆紅，而且重新整理此頁面會直接報錯 */
</script>

2.7、邏輯判斷

其它運算子與Java一樣，這裡說一個特殊的。

比較運算子：

==  等於 （型別不一樣，值一樣也會判斷為true）
=== 絕對等於  （型別一樣，值一樣才會返回true）

!=	不等於（型別不同，值一樣會判斷false）
!==  不絕對等於（值和型別有一個不相等，或兩個都不相等）

注意：

NaN===NaN，這個與所有的數值都不相同，包括自己
只能通過isNaN(NaN)來判斷這個數是否是NaN

選擇

// 單選擇
if (條件){
    語句體;
}

// 雙選擇
if (條件){
    語句體1;
}else {
    語句體2;
}

// 多選擇
if(比較表示式1) {
    語句體1;
}else if(比較表示式2){
    語句體2;
}else if(比較表示式3){
    語句體3；
}
     ...
[else {
    語句體n+1;
}]

switch結構

// 需要嚴格相等
switch(表示式) {
     case 值1:
     	語句體1;
     	break;
     case 值2:
         語句體2;
         break;
         ...
     default:
         語句體n+1;
         [break;]
}

迴圈

// while
while(判斷條件語句) {
 迴圈體語句;
}

// do...while
do {
 迴圈體語句;
}while(判斷條件語句);

// for
for(初始化語句;判斷條件語句;控制條件語句){
 迴圈體語句;
}

//死迴圈
while(true){}
for(;;){}

break 與 continue

break: 停止本層迴圈
continue:暫停本次迴圈，繼續下一次