Javascript語法總結筆記

1.0 變量

在js中，若是某個變量在賦值以前未聲明，賦值操做將自動聲明該變量。這在其餘許多編程語言中是不容許的。雖然能夠這樣作，但實際使用中咱們通常不這樣作。

var mood;  // 單獨聲明變量
var name, age  // 一次聲明多個變量

var name = "zhangzhen"  // 聲明變量而且賦值
var name = "zhanghen", age=30   //一次聲明多個變量並賦值（效率高） 
複製代碼

• 注意事項：
  • 變量名中不容許包含空格和標點符號（美圓符號「$」）除外
  • 也可使用駝峯式命名，後面單詞的首字母大寫（一般用作函數命名方式）

2.0 數據類型

2.1 字符串：(string)

• 字符串必須包含在引號裏，單引號或者雙引號均可以

• 若是你想在單引號包含的字符串中顯示一個單引號，必須用 \ 反斜槓來轉義，雙引號的狀況一樣適用

2.2 數值：(int)

• 浮點數，即有小數點的數字
• 整數，無小數點的正整數
• 負數，數字前邊帶減號的數字

2.3 布爾值:（boolean）

• 布爾類型只有兩個可選值 ---true和false
• true值通常表明爲真，false通常表明爲假，若是用漢語來表示，true即表明是、正確的意思，false即表明否、錯誤的意思。

2.4 數組:（array)

• 字符串、數值、布爾值被稱做標量，他們賦值在任什麼時候刻都只能有一個值。

• 數組與他們最大的不一樣是能夠用來保存一組值，數組中的每個值都是這個數組的一個元素。

2.4.1 聲明數組的方式：

var beatles = Array(4)   // 用關鍵字Array()聲明數組，並指定了初始元素的個數爲4
var beatles = Array()    // 指定元素的個數不是必須的
複製代碼

2.4.2 向數組中填充元素

在填充數組時，不只須要給出新元素的值，還須要給出新元素在數組中存儲的位置，這個位置就是這個元素的下標，一個元素配備一個下標，用方括號括起來。

語法：array[index] = element;

2.4.3 爲上一個聲明的數組beatles填充值

beatles[0] = "zhenzhen"
beatles[1] = "xingfu"
複製代碼

備註：數組的下標從0開始計數，0即表明第一個，以此例來講4個元素的話，那麼它的下標依次就是0 1 2 3.

完整示例：

var beatles = Array(4)
beatles[0] = "zhenzhen"
beatles[1] = "xingfu"
beatles[2] = "xiaoma"
beatles[3] = "yuxi"
複製代碼

2.4.4 聲明數組的另一種方式

var beatles = Array("zhangzhen", "xingfu", "xiaoma", "yuxi");
複製代碼

這是一種相對比較簡單的聲明數組方式，在聲明數組的同時對他進行填充，自動分配下標，每一個元素之間用英文逗號隔開.

2.4.5 以中括號聲明數組

var bealtes = ["zhangzhen", 1989, true, "yuxi"]
複製代碼

像以上用方括號把每一個元素包裹起來的方式，也是聲明數組的一種方式，這種方式簡單，直接，不須要引用關鍵字Array()，他不只能夠包含字符串，還能夠包含數值，布爾值。

2.4.6 數組的元素說明

bealtes = Array();
     
// 數組的元素能夠是變量
var name = "zhangzhen";
bealtes[0] = name;
     
// 數組的元素值還能夠是另外一個數組的元素
var names = ["zhengzhen", 1989, "男"];
bealtes[1] = names[3];
     
// 數組還能夠包含其餘數組
var lennon = ["join", 1940, false];
bealtes[2] = lennon;
     
// 甚至能夠包含一個對象，看對象那一節
複製代碼

​

2.4.7 關聯數組

var lennon = Array()
// 用字符串替換數組元素的下標，可使代碼更具可讀性，但數組通常不推薦這樣使用
lennon["name"] = "join"
lennon["year"] = 1940
lennin["living"] = false
複製代碼

3.0 對象

3.1 用關鍵字Object()建立對象

// 用Object()關鍵字聲明對象，對象的每個值都是對象的一個屬性
// 它不使用方括號和下標來獲取屬性，而是用點號來獲取屬性名稱，來得到屬性的值
var lennon = Object();  
lennon.name = "zhenzhen";  // 對象lennon的name屬性
lennon.year = 1940;
lennon.living = false;
複製代碼

3.2 花括號{}建立對象

var lennon = {name:"zhengzhen", year:1940, living:false}
複製代碼

3.3 對象的屬性的值能夠是任何數據類型

// 將數組引用到對象
>> var dicts = {}
>> lists = ["zhengzhen",1940,false]
>> dicts.name = lists
>> dicts.name[0]
>> "zhengzhen"

// 將對象引用到數組
>> var lists = Array()
>> var dict = {name:"zhengzhen", year:1989, liveing:false}
>> lists[0] = dict
>> lists[0].name
"zhengzhen"

// 將對象引用到對象
var dict = {}
var lennon = {name:"xingfu", year:1989, age:"男"}
dict.person = lennon
dict.person.name
"xingfu"
複製代碼

4.0 操做符

4.1 算數操做符

算數操做符包含：加 (+) 減 (-) 乘 (*) 除 (/)， 與數學中的加減乘除算法規則保持一致，若是沒有括號，先乘除後加減，有括號先運算括號裏邊的，再運算括號外邊的。

1 + 4   // 加法操做
1 + (4*5)  // 多種組合操做
(1+3)*5    // 用括號把不一樣的操做分隔開來
複製代碼

4.2 ++ 與 -- 及+=與-=

year = year+1 能夠改寫成 year++ or year+=1 [+=能夠一次完成「加法和賦值」]

4.3 也能夠對變量進行操做

var num = 80;
var age = (num - 30)/2
複製代碼

4.4 字符串經過 加號+ 能夠拼接

var message = "I am feeling" + "happy";
複製代碼

var mood = "happy";
var message = "I am feeling" + mood
複製代碼

甚至能夠把數值和字符串拼接起來，組成一個新的字符串，這是由於js是弱類型語言，這種狀況容許存在。

var year = 1989;
var message = "The year is" + year
複製代碼

5.0 條件語句

5.1 判斷語句

判斷條件必須放在if後邊的括號內，條件的求值結果永遠是一個布爾值，只能是true或false.

// 標準語法，推薦使用
if(1>2){
	alert("正確")
}else{
	alert("錯誤")
}

// 條件語句後邊的花括號並非必需要的，在某些狀況下能夠省略，例如只有一個判斷
if(1>2) alert("錯誤")   // 這個alert永遠也不會執行，只有當判斷條件結果爲true時纔會執行
複製代碼

5.2 比較操做符

操做符幾乎只能用在條件語句當中，因此咱們把操做符歸類到這一章，其中包含大於(>) ,小於(<), 大於等於(>=),小於等於(<=),【相等(==)，這個操做符由兩個等號構成，單個等號爲賦值操做，不能用做比較】（備註：相等(==)操做符並不表示嚴格相等，嚴格相等必須是（===）三個等號，它既比較直又比較類型；【不等於(!=),不等於操做符由一個感嘆號和一個等號構成】；

// == 操做符示例
if(false == ''){   // 這個不是嚴格比較，他認爲false與一個空字符串的意思是同樣的，因此比較結果爲true
    alert('正確')
}

// === 絕對等於
// 嚴格比較，既比較值也比較類型，一個是布爾類型，一個是字符串類型，因此他們的類型不一致，其比較結果是 false，這條alert永遠也不會被執行。
if(false === ''){
    alert('正確')
}
複製代碼

5.3 邏輯操做符

• "邏輯與(&&)【即漢語中的：誰和誰必須是什麼？所表達的意思同樣】"。

• 「邏輯或(||) 【即漢語中的：或者的意思同樣，多個條件只要知足一個條件就能夠】」。

• 「邏輯非(!) 【只能用做單個邏輯操做數，即把那個邏輯操做的結果取反】」。

// 邏輯與，同時爲true才能返回true
if ( num > 5 && num <= 10) {
    alert("這是一個大於5且小於10的數")
}
// 邏輯或，有一個爲true，則返回true
if ( num > 10 || num <5 ) alert("這是一個大於10的數")

// 邏輯非，將比較的結果取反
if ( !(1>2) ) alert("1不大於2則返回false,這裏進行取反操做，因此返回true，這條語句會被執行！")

// 能夠用邏輯非對整個條件語句取反
if ( !(num > 10 || num <5) ) alert("這是一個不大於10或小於5的數")
複製代碼

6.0 循環語句

循環語句能夠反覆屢次執行同一段代碼，只要給定條件一直知足，包含在循環語句裏的代碼就將重複執行，一旦給定再也不爲true,循環就到此爲止。

6.1 while循環

• while循環與if語句很是類似，他們的語法幾乎徹底同樣，while後邊的括號裏爲條件，花括號裏邊放須要執行的代碼，只要給定的條件結果一直爲true，花括號裏邊的代碼塊將被反覆屢次執行，知道條件再也不爲true時結束

// while循環語句，語法
var count = 1;
while(count < 11){
	alert(count);
	count++;
}
複製代碼

6.2 do{}whi()循環

do{}while()循環與while(){}循環最大的不一樣是，一個判斷條件在最後，一個在最前，這就致使do循環的判斷條件即便一開始就爲false，那麼他至少也會被執行一次，由於他的判斷條件在語句塊以後。但while循環不會，由於他的判斷條件在最前。

// 與while循環結果保持一致的循環,這個代碼塊的語句將被執行10次，count變量的值最後爲11
var count = 1;
do{
    alert(count);
    count++;
}while(1<11);

// 判斷條件爲false，至少被執行一次,變量count的初始值爲1，至少被執行一次，那麼count的值將會是2
do{
    alert(count);
    count++;
}while(count<1);
複製代碼

6.3 for循環

for循環實際上是while循環的變體，或者能夠稱做是while循環的另外一種緊湊寫法，與循環有關的語句都寫在括號內。

// 改寫while循環的案例
for(var count=1; count<11; count++){
	alert(count)
}
複製代碼

for循環最多見的用途就是用來遍歷某個數組裏的全體元素。在這裏每每須要用到數組的array.length屬性，來獲取數組裏元素的個數，這裏要特別注意的是，數組的元素都是從零開始，而不是從一開始。

var lists = ["zhangzhen", "xingfu", "yuxi", false, 1989];

// 利用for循環遍歷一個數組
for(var index=0; index < lists.length; index++){
	console.log(lists[index]);
}
複製代碼

7.0 函數

若是須要屢次使用同一段代碼，就能夠將其封裝成一個函數。說白了函數就是一組你隨時能夠在代碼裏調用的語句。

7.1 定義函數

// 定義函數
function shout(){
	alert("這是我聲明的第一個函數")
}
複製代碼

如今若是想在代碼中執行這一動做，能夠隨時調用shout() 語句來調用整函數，這也正是函數的調用方法，能夠大大避免在不一樣的地方大量鍵入相同的代碼。

案例二：

// 遍歷一個數組的函數
function name(){
	var bealtes = ["zhangzhen","xingfu","yuxi",1989,false]
	for(var index=0;index<bealtes.length;index++ ){
		console.log(bealtes[index])
	}
}
// 調用函數
name()
複製代碼

7.2 函數傳參

經過以上案例咱們能夠看出，函數在整合代碼方面的能力，但卻發現他有一個小小的問題，就是貌似只能遍歷咱們函數內指定的那個數組，還不夠通用，也沒有真正體現出函數的威力所在，咱們能夠經過下面咱們將要學習的給函數傳參數，來遍歷不一樣的數組，讓這個函數擁有處理這一類問題的通用能力。

// 爲函數傳參lists，這個參數咱們表明爲一個數組
function name(lists){
	for(var index=0; index<lists.length;index++){
		alert(lists[index])
	}
}
// 假如咱們有這樣一個數組
var bealtes = ["zhangzhen","xingfu","yuxi",1989,false]

// 利用剛纔定義的函數來遍歷這個數組,把數組傳遞給函數便可
// 固然這裏在真實項目中，咱們應該要對傳遞的參數的類型作一個判斷，以備函數有處理傳遞的參數不是數組時的能力
name(bealtes)
複製代碼

案例三（乘法函數）：

function ride(num1,num2){
	var multiply = num1 * num2;
	alert(multiply);
}
// 調用
ride(2,5);
複製代碼

7.3 函數賦給變量及變量做用域

好比咱們要計算一個成年人的標準體重，其公式爲： （身高cm-100）×0.9=標準體重(kg) ,咱們爲他來編寫一個函數，將計算結果返回，這裏咱們就要用到return語句。

function weight(height){
	var dvalue = height-100;
	standard = dvalue * 0.9;
	return standard;
}
// 如今用這個函數來計算咱們本身的標準體重.
var myheight = 175;
// 函數另一種用法是能夠當作一個數據類型來使用，把函數的返回值賦給一個變量，看成變量值來使用
var mystandard = weight(myheight);
alert(mystandard)
複製代碼

變量做用域概念解讀：

在上邊這個函數中咱們看到兩種變量，一種是在函數內部聲明的變量，一種是在函數外部聲明的變量。最開始的時候咱們說過聲明變量必須用var，那麼在函數內部聲明變量也必須使用var聲明，此時函數內部聲明的變量就只能在函數內部調用，咱們將其稱做局部變量。若是函數內部沒有用var 聲明變量，直接賦值，那麼若是此時函數外部有一個同名的變量，那麼這個變量引用的就是函數外部的全局變量。

// 變量做用域概念
function aquare(num){
	total = num * num;
	return total;
}
// 全局變量toatl的值爲50
var total = 50
// 函數內部也有一個total的變量，沒有用var聲明
var number = aquare(20)
// 這裏最終返回的值是400，把total全局變量的值給修改了
console.log(total)
> 400
複製代碼

修改版：

function aquare(num){
	var total = num * num;
	return total;
}
var total = 50
var number = aquare(20)
console.log(total)
> 50
console.log(number)
> 400
複製代碼

8.0 對象詳解

對象是一種很是重要的數據類型，相對來講比較抽象複雜，暫時先空下來，後邊詳細說明。

8.1 自建對象

好比要生產一輛汽車，他們的通用屬性包括顏色、輪胎個數、方向盤、座位等都是通用的屬性，咱們能夠爲其定義一個對象，將這些通用屬性放在這個對象裏。不一樣的是他們的發動機大小都不同，咱們能夠向裏添加另一個方法來對其擴展。

function Person(){
	// 這個對象裏邊的屬性爲通用屬性
	this.name = "zhenzhen";
	this.age = 30;
}
// 建立另一我的的實例，這我的的年齡和張震不同，但其餘同樣
var xinPerson = new Person();
// 向這個對象裏添加一個屬性
Person.prototype.mood = "link";

console.log(xinPerson.mood);

複製代碼

8.2 內建對象

內建對象是js默認給咱們封裝好的對象，其中內建對象中又封裝了不少的屬性，咱們能夠直接拿來使用。

8.2.1 new Array()數組對象

其實當咱們使用new關鍵字來初始化一個數組時，其實建立的就是Array對象。

var bealtes = new Array();
bealtes[0] = "zhenzhen";
// length就是這個對象的一個內置屬性
bealtes.length;
複製代碼

8.2.2 new Date()時間對象

Date對象用來存儲和檢索與日期、時間有關的信息。

var current_date = new Date()
// 獲取星期，獲得的是一個數字
console.log(current_date.getDay())
// 獲取小時，獲得的是具體的時間數組
console.log(current_date.Hours())
複製代碼

8.2.3 new Math()對象

var num = 7.561;
var num = Math.round(num);
console.log(Math)
alert(num)
複製代碼

8.2.4 宿主對象

除了內建對象，咱們還可使用已經預先定義好的其餘對象。這些對象不是由javascript語言自己提供的，而是由他的運行環境提供。這個環境就是瀏覽器，所以上由瀏覽器提供的對象被稱做宿主對象，也就是咱們後邊將要學習的DOM和BOM。