JavaScript基礎文法

1、主要内容

重點：變量、數組，函數、對象

2、JavaScript

2.1簡介

JavaScript是一種具有面向對象能力的，解釋型的程式設計語言。它是基于對象和事件驅動并具有相對安全性的用戶端腳本語言。它的主要目的是，驗證發送伺服器端的資料，增加web互動，加強使用者體驗度等。

ECMAScript定義的隻是這門語言的基礎，與Web浏覽器沒有依賴關系，而在基礎文法上可以建構更完善的腳本語言。JavaScript的運作需要一定的環境，脫離了環境JavaScript代碼是不能運作的，JavaScript隻能夠寄生在某個具體的環境中才能夠工作。JavaScript運作環境一般都由宿主環境和執行期環境共同構成，其中宿主環境是由外殼程式生成的，如Web浏覽器就是一個外殼程式，它提供了一個可控制浏覽器視窗的宿主環境。執行期環境則由嵌入到外殼程式中的JavaScript引擎(或稱為JavaScript解釋器）生成，在這個環境中JavaScript能夠生成内置靜态對象，初始化執行環境等。

Web浏覽器自定義的DOM元件，以面向對象方式描述的文檔模型。DOM定義了表示和修改文檔所需的對象、這些對象的行為和屬性以及這些對象之間的關系。DOM對象，是我們用傳統的方法(javascript)獲得的對象。DOM屬于浏覽器，而不是JavaScript語言規範裡的規定的核心内容。

前面的DOM是為了操作浏覽器中的文檔，而為了控制浏覽器的行為和操作，浏覽器還提供了BOM(浏覽器對象模型)。

ECMAScript(基礎文法)

JavaScript的核心文法ECMAScript描述了該語言的文法和基本對象

DOM(文檔對象模型)

文檔對象模型(DOM)——描述了處理網頁内容的方法和接口

BOM(浏覽器對象模型)

浏覽器對象模型(BOM) —―描述了與浏覽器進行互動的方法和接口

2.2 基本寫法

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

行内JS : 寫在标簽内部的js代碼

内部S : 定義在script标簽内部的js代碼

外部S∶單獨的js檔案，在HTML中通過script标簽引入

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

<head>

部分，最常用的方式是在頁面中head部分放置

<script>

元素，浏覽器解析head部分就會執行這個代碼，然後才解析頁面的其餘部分。放在

<body>

部分，JavaScript代碼在網頁讀取到該語句的時候就會執行。

3、JavaScript基礎文法

3.1語句和注釋

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

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

表達式不需要分号結尾。一旦在表達式後面添加分号，則javaScript引擎就将表達式視為語句，這樣會産生一些沒有任何意義的語句。

//單行注釋:用//起頭;
/*多行注釋:放在之間*/ /
<!--相容htm1注釋方式: -->

3.2辨別符和關鍵字

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

由unicode字母、_、$、數字組成、中文組成
- 不能以數字開頭
- 不能是關鍵字和保留字
- 嚴格區分大小寫
規範:

(1) 見名知意

(2) 駝峰命名或下劃線規則

關鍵字也稱保留字，是被JavaScript征用來有特殊含義的單詞

3.3變量：

3.3.1變量的聲明

js是一種弱類型語言，在聲明變量時不需要指定為資料類型，直接使用var修飾符聲明變量

變量的聲明

聲明并指派
先聲明後再指派

3.3.2 變量聲明的注意點

若隻聲明而沒有指派，則該變量的值為undefined
變量要有定義才能使用，若變量未聲明就使用，javaScript會報錯，告訴你變量未定義
可以在同一條var指令中聲明多個變量

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

重新使用var聲明一個已經存在的變量，是無效的
重新使用var變量聲明一個已經存在的變量且自動指派，則會覆寫掉前面的值
JavaScript是一種動态類型、弱類型的語言，也就是，變量的類型沒有顯示，可以賦予各種類型的值

3.3.3變量提升

JavaScript引擎的工作方式是，先解析代碼，擷取所有被聲明的變量，然後再一行一行地運作。這造成的結果是，所有變量的聲明語句，都會被提升到代碼的頭部，這就叫做變量提升。

注意：隻有用var聲明的變量，才會做變量提升

3.4資料類型

Js是弱類型語言，變量沒有類型，但是資料本身是有類型的。針對不同的類型，我們可以進行不同的操作。

JavaScript有6種資料類型，其中五種簡單的資料類型：Undefined、Null、布爾、數值和字元串。一種複雜資料類型Object

/*
數值(Number)    整數和小數（比如1和3.14)
字元串(string)  字元組成的文本(比如""He11o wor1d"")
布爾值(Boolean) true(真)和false(假)兩個特定值
undefined      表示"未定義"或不存在，即此處目前沒有任何值
Null           表示空缺。即此處應該有一個值,但目前為空

對象(object)(引用):各種值組成的集合
1)、對象(object) {name : "zhangsan" ,age : "18"}
2)、數組(array)[1,2,3]
3)、函數（function) function test(){}
*/

3.4.1Undefined

3.4.2Null

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

使用Null類型值時注意以下幾點:

1) 使用typepf操作符測試null傳回object字元串。

2) undefined派生自null，是以等值比較傳回值是true。未初始化的變量和指派為nulI的變量相等。

<script type="text/javascript">
   	/* Undefined */
   	//1.聲明變量但未指派	
   	
   	// 2.調用函數，函數有形參，但未提供實參，則參數未undefined
   	function test(str){
   		console.log(str)
   	}
   	//調用方法
   	test()
   	// 3.函數沒有傳回值，預設傳回undefined
   	function test01(){
   		console.log("HELLO WORLD")
   	}
   	var re = test01();
   	console.log(re)
   	/* Null */
   	var a = 1
   	var b = true
   	console.log(typeof a)
   	console.log(typeof b)
   	
   	var c = null;
   	console.log(typeof c)//傳回object
   	
   	var d;
   	console.log(c==d);//傳回true
   </script>v

3.4.3Boolean

布爾類型：true或false

3.4.4數值型

數值型包括：整型和浮點型

所有數字〔整型和浮點型）都是以64位浮點類型存儲的。是以在js中，1與1.0是相等的，1+1.0的值為2
浮點類高精度是17位，浮點類型運算時可能不準确，不建議使用浮點型做判斷
在存儲數值時會自動将整型的浮點數值(1.0）轉換成整型(1)

3.4.5.字元串

使用''或" "引起來，如: 'hello',"good""。
使用加号+'進行字元串的拼接，如: console.log('hello' + ' everybody")
3.4.6.對象
對象是一組資料和功能的集合

3.5類型轉換

3.5.1自動類型轉換

3.5.2.函數轉換 (String to Number)

JS提供了parseInt()和 parseFloat()兩個全局轉換函數。前者把值轉換成整數，後者把值轉換成浮點數。隻有對String類型調用這些方法，這兩個函數才能正确運作;對其他類型傳回的都是NaN(Not a Number)。

3.5.2.1. parselnt()

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

<script type="text/javascript">
		// parseInt()
		console.log(parseInt("1234b1ue"));//1234
		console.log(parseInt("22.5"));//22
		console.log(parseInt("blue"))//NaN
	</script>

3.5.2.2. parseFloat()

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

3.5.3.顯示轉換

幾乎每個數對象都提供了toString()函數将内容轉換為字元串形式，其中Number提供的toString()函數可以将數字轉換為字元串。
Number還提供了toFixed()函數将根據小數點後指定位數将數字轉為字元串，四舍五入

//将内容轉換為字元串形式

//根據小數點後指定位數将數字轉為字元串，四舍五入
 var data = 1.455;
console.log(data.toFixed(0))//1
console.log(data.toFixed(1));//1.5
console.log(data.toFixed(2));//1.46 
//不能對nu11和undefined使用toString()

JS為Number、Boolean、String對象提供了構造方法，用于強制轉換其他類型的資料。

此時操作的是整個資料，而不是部分。

最後一種強制類型轉換方法String()是最簡單的，因為它可把任何值轉換成字元串。要執行這種強制類型轉換，隻需要調用作為參數傳遞進來的值的 toString()方法，即把1轉換成"1"，把 true轉換成"true "，把false轉換成"false "，依此類推。強制轉換成字元串和調用toString()方法的唯一不同之處在于，對null 或 undefined值強制類型轉換可以生成字元串而不引發錯誤:

var dat = null;
console.log(String(dat));//null	 
console.log(dat.toString());//錯誤：UncaughtTypeError: Cannot read property 'toString' of null

3.6 運算符

3.6.1算數運算符

3.6.2 指派和擴充運算符

3.6.3比較運算符

3.6.4邏輯運算符

3.6.5三目運算符

?:

如果..否則

<script type="text/javascript">
		var data = 1<2?"true":"false";
		console.log(data)//true
		console.log(typeof data)//string
	</script>

3.7 控制語句

我們寫的JavaScript 代碼都是按照從上到下依次執行，很多時候我們希望代碼按照我們的意願去執行，比如有選擇性地執行某些代碼，或者重複地執行某些代碼，這就需要使用到流程控制語句。

流程控制語句一共有三種:

流程執行:從上到下，從左到右
選擇執行:分支選擇
循環執行:重複執行

3.7.1選擇

3.7.1.1.單選擇

if(條件){

語句體;

}

首先執行條件:

如果結果為true，則執行語句體

如果結果為false，則結束if語句

注意:若語句體隻有一條語句，可以省略大括号，但不建議省略

3.7.1.2.雙選擇

if(條件){
	語句體1;
    else {
	語句體2;
}

首先執行條件

如果結果為true，則執行語句體1;如果結果為false，則執行語句體2。

3.7.1.3.多選擇

if(比較表達式1){
	語句體1;
}else if(比較表達式2){
	語句體2;
}else if(比較表達式3){
	語句體3;
}
	...
[else{
	語句體n+1;
}]

3.7.1.4.switch結構

多個if...else且值為定值時（即在比較運作結果時，采用的是嚴格相等運算符(

===

)，而不是相等運算符(

==

)，這意味着比較時不會發生類型轉)，可以使用switch 替換:

switch(表達式){
	case 值1:
        語句體1;
        break;
    case 值2:
		語句體2;
        break ;
     ...
	default:
		語句體n+1;
        [break;]
}

break防止穿透，如果沒有break,則繼續執行後面的代碼，直到遇到 break或全部執行完畢，但是有些時候會利用穿透。

3.7.2 循環

循環結構用于重複執行某個操作簡單了解就是重複執行同類型的代碼，它有多種形式。

3.7.2.1. while：先判斷後執行

基本格式：

while(判斷條件語句){
	循環體語句;
}

擴充格式：

初始化語句;
while(判斷條件語句){
	循環體語句;
	控制條件語句;//少了它很容易形成死循環
}

3.7.2.2.do...while：先執行後判斷，至少執行一次

基本格式

do {
循環體語句;
}while(判斷條件語句);

擴充格式:

初始化語句;
do {
	循環體語句;
    控制條件語句;
}while(判斷條件語句);

3.7.2.3. for

for(初始化語句;判斷條件語句;控制條件語句){
	循環體語句;
}

3.7.2.4.死循環

條件永遠成立，永遠為true,則會産生死循環，下面是最簡單的死循環

while(true)
for(;;){}

3.7.2.5. break 與continue

break: 停止本層循環

continue:暫停本次循環，繼續下一次

3.8.數組

數組是按次序排列的一組資料，每個值的位置都有編号（從0開始)，整個數組用方括号表示。

3.8.1.數組定義

JS中定義數組的三種方式如下（也可先聲明再指派)︰

var arr =[值1,值2,值3];//隐式建立
var arr = new Array(值1,值2,值3;//直接執行個體化
var arr = new Array(size); //建立數組并指定長度

數組的特點

1．長度可變

2．數組中資料類型任意

3．索引從0開始

4．可以使用任意字元當作數組的索引，如果索引是非正整數，我們稱之為數組的屬性，屬性不影響數組的長度。

5．數組中的每一個元素都可以被通路和修改，甚至是不存在的元素，無所謂越界

3.8.2.基本操作

數組的長度可以通過length屬性來擷取，并可以任意更改

數組名.length
數組名.length =新長度

數組中的每一個元素都可以被通路和修改，甚至是不存在的元素，無所謂越界

數組名[下标]
數組名[下标]=新值

3.8.3.數組周遊

數組的周遊即依次通路數組的每一個元素，JS提供三種周遊數組的方式:

3.8.3.1.普通的for循環周遊

for(var i=0; i<=數組.length-1; i++){

}

如:

for(var idx=0 ; idx<arr. length;idx++){

console.log(arr[idx]);

3.8.3.2.for ... in

for(var下标(名稱任意) in 數組名){
	數組名[下标]是擷取元素
}//下标(名稱任意)

// 直接執行個體化
var arr3 = new Array(1,"2",true);
console.log( arr3);

for (var index in arr3) {
	console.log(index);
	console.log(arr3[index]);
	console.log("====")
}

3.8.3.3. forEach

數組名.forEach(function(element,index){
//element(名釋任意):元素，index(名稱任意):下标
}
如:  
 arr3.forEach(function(elem,index){
	 console.log(elem+"元素");
	 console.log(index+"索引");

3.8.3.4.了解

數組在使用的時候建議大家規矩來用。在存放資料時，從下标0開始順序的存放數組元素。

如果下标:

1.為非負整數(包括整數字元串):自動從0開始,不存在添加undefined

2.為負數、小數、非數字元串:這些内容不計算在長度内，當成"屬性"處理，相當于自定義屬性。

數組非常靈活，使用數組元素

1.下标:非負整數(包括整數字元串)∶

數組.下标

數組[下标]

2.下标:負數、小數、非數字字元串:

數組[屬性]

for -->不周遊屬性
foreach -->不周遊屬性和索引中的undefined
for in -->不周遊索引中的undefined

3.8.4 數組提供的操作方法

Array對象為我們提供了一些方法，可以很友善地操作數組

push 添加元素到最後

unshift 添加元素到最前

pop 删除最後項

shift 删除第一質

reverse 數組翻轉

join 數組轉成字元串

indexof 數組元素索引

slice 截取（切片)數組，原數組不發生變化

splice 剪接數組，原數組變化，可以實作前後删除效果

concat 數組合并

3.9.函數

函數，即方法。就是一段預先設定的功能代碼塊，可以反複調用，根據輸入參數的不同，傳回不同的值。函數也是對象。

3.9.1.函數的定義

有三種函數定義的方式:函數聲明語句、函數定義表達式、 Function構造函數

3.9.1.1.函數聲明語句

function 函數名([參數清單]){
}
例如:
function foo(){
    console.1og(1);
}
foo();
該種方式定義的函數具有聲明提升的效果
foo(;
function foo(){
console.log(1);
}
/變量聲明提升
conso1e.1og( a );
var a = 2;

3.9.1.2.函數定義表達式

以表達式方式定義的函數，函數的名稱是可以不需要的

var 變量名 = function([參數清單]){
}
變量名();
例如:
var fun = function(){
console.log("He11o");
fun();

這種寫法将一個匿名函數指派給變量。這時，這個匿名函數又稱函數表達式，因為指派語句的等号右側隻能放表達式。

Function構造函數

var 變量名 = new Function('a','b','return(a+b)');

注意：

如果使用函數聲明語句這種方式聲明函數，會具有函數名提升的效果

<script type="text/javascript">
		/* 函數的定義 */
		// 1.函數聲明語句
		test();//依然可以調用函數test()!!!!
		function test(){
			console.log("含食宿");}
		// test();
	</script>

Js方法中沒有重載，如果出現同名方法則覆寫

3.9.2函數的參數，調用和return語句

函數運作的時候，有時需要提供外部資料，不同的外部資料會得到不同的結果，這種外部資料就叫參數，定義時的參數稱為形參，調用時的參數稱為實參

實參可以省略，那麼對應形參為undefined
若函數形參同名(一般不會這麼幹)︰在使用時以最後一個值為準
可以給參數預設值：當參數為特殊值時，可以賦予預設值
參數為值傳遞，傳遞副本
引用傳遞時傳遞位址，操作的是同一個對象

<script>
// 調用函數時，實參可以省略，則對應形參為undefined
    function add(a , b) {
	console. log(a + "+” + b + "=”+(a + b));
}
add(3,4,5)//3+4=7
add(1);//1+undefined=NaN
add(); / /undefined+undefined=NaN
//若函數形參同名(一般不會這麼幹)∶在使用時以最後一個值為準
    function add2(a , a) {
		console.log(a);}
add2(1,2);//1

//給參數預設值
	function defau1tvalue(a){
		a = a || "a" ;}
</script>

var變量名= new Function( "a ' , 'b " , " return (a+b) ' );

1 如果使用函數聲明語句這種方式聲明函數，會具有函數名提升的效果。

2 JS中方法沒有重載,如果出現同名方法則覆寫。

函數的調用

1 常用調用方式:函數名([參數清單]);

2 函數調用模式

3 對象調用模式

函數的傳回

1、如果函數有傳回值,需要通過return傳回

2．如果函數不需要傳回資料時，則無傳回值，或者說傳回undefinded

3．如果函數不需要傳回值時，使用return，則表示結束方法

作用:

1.傳回結果給調用者

2.結束語句

3.9.3 函數的作用域

注意：在js中隻有函數有作用域

函數作用域:全局(global variable)和局部(local variable)

<script>
//1．全局變量與局部變量同名問題
var box =1;//全局變量
    function disp1ay(box){
		var box = 3;//此處box與全局變量box沒有關系，這裡的box為傳遞的參數，相當于新聲明的局部變量
        var b = 2;//局部變量
console. log(""box-->" + box);
}
display();
console.log(""b-->" + b) ;// b不能通路
//2.在函數中定義變量時，若沒有加var關鍵字，使用之後自動變為全局變量
function fun(){
    a = 100；
}
a = 100;
fun();
alert(a);
</script>

3.10 内置對象

Arguments 隻在函數内部定義，儲存了函數的實參

Array 數組對象

Date 日期對象，用來建立和擷取日期

Math 數學對象

string 字元串對象，提供對字元串的一系列操作

3.10.1.String

charAt(idx) 傳回指定位置處的字元

indexof(chr) 傳回指定子字元串的位置，從左到右。找不到傳回-1

substr(m,n) 傳回給定字元串中從m位置開始，取n個字元，如果參數n省略，則意味着取到字元串末尾。

substring(m,n) 傳回給定字元串中從m位置開始，到n位置結束，如果參數n省略，則意味着取到字元串末尾。

toLowercase 将字元串中的字元全部轉化成小寫。

touppercase 将字元串中的字元全部轉化成大寫。

length 屬性，不是方法。傳回字元串的長度。

3.10.2.Math

Math .random(）随機數

Math.ceil( ) 向上取整，大于最大整數

Math.floor( ) 向小取整,小于最小整數string

3.10.3. Date

//擷取日期

getFu11Year年:getMonth(月getDateo
日
getHourso時getMinutesO分 getsecondsO
秒
//設定日期
setYear(·setMonth。 setDatee setHoursO。 setMinutes(·setseconds(
。toLoacalestring(轉換成本地時間字元串
說明:
js
1.getMonth():得到的值:0~11 (1月~12月)
2.setMonth(J設定值時0~11
3.toLocaleString():可根據本地時間把Date對象轉換為字元串，并傳回結果。

3.11.對象

對象（object)是JavaScript的核心概念，也是最重要的資料類型。JavaScript的所有資料都可以被視為對象。JavaScript提供多個内建對象，比如String、Date、Array等等。對象是帶有屬性和方法的特殊資料類型。

簡單說，所謂對象，就是一種無序的資料集合，由若幹個"鍵值對”(key-value)構成。通過JavaScript我們可以建立自己的對象。JavaScript對象滿足的這種"鍵值對"的格式我們稱為JSON格式，以後會見得非常多，即偉大的JSON對象。

3.11.1.對象的建立

JS建立自定義對象，主要通過三種方式:字面量形式建立對象(常用）、通過new Object對象建立、通過Object對象的create方法建立對象。

3.11.1.1.字面量形式建立

/* 對象的建立 */
		// 1.字面量形式建立對象
		var obj = {};//空對象 
		console.log(obj);
		// 非空對象（鍵是字元串，值可以是六種資料類型中任意一種
		var obj2 = {
			name: "lisi",
			age:18,
			islike:true,
			sayHello:function(){//函數
				console.log("hello,你好");
			},
			cats:['cat1','cat2'],//數組
			dogs:{//對象
				name:"王二狗",
				age:1
				}
			};
		console.log(obj2)

3.11.1.2 通過new Object建立

// var 對象名 = new Object();

var obj = new Object();
obj.name = 'zs';
obj.age = 18;
console.log(obj);

3.11.1.3 通過Object對象的create方法建立

// var 對象名 = Object.create(null);
var obj = object.create(null);//括号裡必須有null,括号中表示以什麼為模闆來建立對象（可以繼承相應的資料
obj.name = 'ls';
obj.gender = true;
console.log(obj);

3.11.2對象的序列化和反序列化

序列化即将JS對象序列化為字元串，反序列化即将字元串反序列化為JS對象。

JS中通過調用JSON方法，可以将對象序列化成字元串，也可以将字元串反序列化成對象。

//序列化對象，将對象轉為字元串
JSON. stringify(object);
//反序列化，将-個Ison字元串轉換為對象。
JSON.parse(jsonstr);

3.11.3 this

this是JavaScript語言的一一個關鍵字。

它代表函數運作時，自動生成的一個内部對象，隻能在函數内部使用。随着函數使用場合的不同，this的值會發生變化。但是有一個總的原則，那就是this指的是，調用函數的那個對象。

3.11.3.1.在函數中使用this

在函數中使用this屬于全局性調用，代表全局對象，通過window對象來通路。

/* 在函數中使用this */
function test(){
    this.x = 1;
    console.log(this.x);
}
test();//調用的對象是，浏覽器window對象；相當于定義在全局對象上的屬性
console.log(x);
console.log(this);

3.11.3.2 在對象中使用this

/* 在對象中使用this */
var obj2 = {
	name: "lisi",
	age:18,
	sayAge:function(){//函數
		console.log(this.age);},
};
obj2.sayAge();//18
//因為是obj2對象調用的函數sayAge()，是以其中的this指代，obj2對象

JS