前端開發之JavaScript
JavaScript
JS是一種腳本語言，瀏覽器執行，用於渲染HTML網頁，實現網頁的動畫效果。
JavaScript的引用方式：
1，在HTML文件中script標簽中寫JS代碼
<script> // JS代碼 </script>
2，引用外部的JS文件
<script src="my-JavaScript.js"></script>
JavaScript的註釋和語句規範
// 單行註釋： // var name = "tom"; /*多行註釋：*/ /* var name = "tom"; var age = 18;*/ // 每一句代碼要用分號；為結束
JavaScript變量聲明
變量聲明：var 變量名 = 數據；
var age = 18;
變量名命名規則：
1，變量名使用數字，字母，下劃線和$組成，但是不能以數字開頭；
2，不能使用JS的保留字；
3，駝峰式命名，見名知意。
JavaScript的數據類型
1，字符串string：
引號包裹的為字符串類型。如 var s = "tom"；
字符串拼接使用+號，其他的常用方法有：
| 方法 | 說明 |
| .length | 返回長度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左邊的空白 |
| .trimRight() | 移除右邊的空白 |
| .charAt(n) | 返回第n個字符 |
| .concat(value, ...) | 拼接 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 根據索引獲取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小寫 |
| .toUpperCase() | 大寫 |
| .split(delimiter, limit) | 分割 |
2，數字number：
JavaScript沒有整型和浮點型的區分，就是數字類型。如 var n = 2.3；
數字還要一種比較特別的類型：NaN(Not a Number)，表示不是一個是數字。當字符串和數字相加時會返回NaN。
常用的方法：
parseInt("123") // 返回123
parseInt("ABC") // 返回NaN
parseFloat("3.1415926") // 返回123.456
3，undefined：
JavaScript中一種特殊的類型，當一個變量只聲明而沒有賦值時，它的類型就是undefined。還有就是函數無明確的返回值時，返回的也是undefined。
var x; // 此時x是undefined
4，布爾值boolean：
true和false。在JavaScript中，空字符串，數字0，null，undefined和NaN都是false，其他的為true。
5，數組：
形式類似python中列表。
var li = [123, "ABC"];
常用方法：
| 方法 | 說明 |
| .length | 數組的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 獲取尾部的元素 |
| .unshift(ele) | 頭部插入元素 |
| .shift() | 頭部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() | 反轉 |
| .join(seq) | 將數組元素連接成字符串 |
| .concat(val, ...) | 連接數組 |
| .sort() | 排序 |
JavaScript數據類型查看
查看方式：typeof 數據。
// 返回string typeof "abc" ; // 返回number typeof 12;
JavaScript的運算符
1，算數運算符：加+ 減- 乘* 除/ 取余% 自加++ 自減--
2，比較運算符：大於> 大於等於>= 小於< 小於等於<= 弱不等於!= 弱等於== 等於=== 不等於!==
弱等於只比較數值不看類型，如 1 == ‘‘1"，它返回的是true。
3，邏輯運算符：與 && 或|| 非！
4，賦值運算符：=將數值賦值給前面的變量 +=變量加上數值後再賦值 -=變量減去數值後再賦值 *=變量乘以數值後再賦值 /=變量除以數值後再賦值
JavaScript流程控制
判斷
1，if else：單一條件
var a = 10; if (a > 5){ 條件成立時執行的代碼 }else { 條件不成立時執行的代碼 }
2，if else if else：多條件
var a = 10; if (a > 5){ 條件一成立時執行的代碼 }else if (a < 5) { 條件二成立時執行的代碼 }else { 條件都不成立時執行的代碼 }
3，switch：特定多條件
var day = 2; switch (day) { // 變量名 case 0: // 條件數值 console.log("Sunday"); // 滿足條件執行的代碼 break; // 退出，確保不會執行下面的代碼 case 1: console.log("Monday"); break; default: console.log("...") // 都不滿足時執行的代碼 }
循環
1，for：
for (var i=0;i<10;i++) { // 聲明變量i，設定條件，i自增 console.log(i); }
2，while：
var i = 0; while (i < 10) { // 滿足條件進入循環 console.log(i); i++; // 自增，用於改變條件值來結束循環 }
3，三元運算：
var a = 1; var b = 2; var c = a > b ? a : b // 當a>b時，返回冒號之前的a，反之返回冒號之後的b
JavaScript的函數
1，函數的定義
function 函數名() { 函數體 } // 可以設置參數 function 函數名(參數1，參數2，......) { 函數體 } // 可以有返回值 function 函數名() { 函數體 return 返回值 }
匿名函數
// 通過變量來接收 var func = function() { 函數體 }
2，函數的調用
function foo() { console.log(‘tom‘); } // 函數調用 foo() // 立即執行函數，直接執行。 (function(a, b){ return a + b; })(1, 2);
如果函數有參數，調用時傳的參數即使和形參數量不同，也不會報錯。為了避免這個問題，可以使用arguments，它會獲取傳的所有參數。通過判斷它的長度，我們就可以確定傳的參數是否滿足條件。
function add(a,b){ console.log(a+b); console.log(arguments.length) } add(1,2,3) // 輸出3 3
3，函數的全局變量和局部變量
1，全局變量：在全局定義的變量，所有都可以訪問它。
2，局部變量：在函數內定義的變量，只有函數內部的能訪問它。當函數運行結束後就會清楚局部的變量。
4，函數的作用域
函數內部在找變量時，是從內向外找，逐步找到最外層。
5，函數的詞法分析
在JavaScript中調用函數會先進性詞法分析：
詞法分析的過程： 當函數調用的前一瞬間，會先形成一個激活對象：Avtive Object（AO），並會分析以下3個方面： 1:函數參數，如果有，則將此參數賦值給AO，且值為undefined。如果沒有，則不做任何操作。 2:函數局部變量，如果AO上有同名的值，則不做任何操作。如果沒有，則將此變量賦值給AO，並且值為undefined。 3:函數聲明，如果AO上有，則會將AO上的對象覆蓋。如果沒有，則不做任何操作。 函數內部無論是使用參數還是使用局部變量都到AO上找。
JavaScript的對象和內置方法
在JavaScript中一切皆對象。我們也可以自定義對象。
1，自定義對象：
var a = {"name": "Alex", "age": 18}; // 自定義對象 console.log(a.name); // 取值方式一 console.log(a["age"]); // 取值方式二
2，JavaScript語句創建對象：
var person=new Object(); // 創建對象 person.name="Alex"; // 給對象添加屬性和值 person.age=18;
3，內置對象和方法：
1，Date對象
var d1 = new Date(); // 創建Date對象 d1.getDate() // 使用對象方法
getDate() 從 Date 對象返回一個月中的某一天 (1 ~ 31)。 getDay() 從 Date 對象返回一周中的某一天 (0 ~ 6)。 getFullYear() 從 Date 對象以四位數字返回年份。 getHours() 返回 Date 對象的小時 (0 ~ 23)。 getMilliseconds() 返回 Date 對象的毫秒(0 ~ 999)。 getMinutes() 返回 Date 對象的分鐘 (0 ~ 59)。 getMonth() 從 Date 對象返回月份 (0 ~ 11)。 getSeconds() 返回 Date 對象的秒數 (0 ~ 59)。 getTime() 返回 1970 年 1 月 1 日至今的毫秒數。 getTimezoneOffset() 返回本地時間與格林威治標準時間 (GMT) 的分鐘差。 getUTCDate() 根據世界時從 Date 對象返回月中的一天 (1 ~ 31)。 getUTCDay() 根據世界時從 Date 對象返回周中的一天 (0 ~ 6)。 getUTCFullYear() 根據世界時從 Date 對象返回四位數的年份。 getUTCHours() 根據世界時返回 Date 對象的小時 (0 ~ 23)。 getUTCMilliseconds() 根據世界時返回 Date 對象的毫秒(0 ~ 999)。 getUTCMinutes() 根據世界時返回 Date 對象的分鐘 (0 ~ 59)。 getUTCMonth() 根據世界時從 Date 對象返回月份 (0 ~ 11)。 getUTCSeconds() 根據世界時返回 Date 對象的秒鐘 (0 ~ 59)。 getYear() 已廢棄。 請使用 getFullYear() 方法代替。 parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒數。 setDate() 設置 Date 對象中月的某一天 (1 ~ 31)。 setFullYear() 設置 Date 對象中的年份（四位數字）。 setHours() 設置 Date 對象中的小時 (0 ~ 23)。 setMilliseconds() 設置 Date 對象中的毫秒 (0 ~ 999)。 setMinutes() 設置 Date 對象中的分鐘 (0 ~ 59)。 setMonth() 設置 Date 對象中月份 (0 ~ 11)。 setSeconds() 設置 Date 對象中的秒鐘 (0 ~ 59)。 setTime() setTime() 方法以毫秒設置 Date 對象。 setUTCDate() 根據世界時設置 Date 對象中月份的一天 (1 ~ 31)。 setUTCFullYear() 根據世界時設置 Date 對象中的年份（四位數字）。 setUTCHours() 根據世界時設置 Date 對象中的小時 (0 ~ 23)。 setUTCMilliseconds() 根據世界時設置 Date 對象中的毫秒 (0 ~ 999)。 setUTCMinutes() 根據世界時設置 Date 對象中的分鐘 (0 ~ 59)。 setUTCMonth() 根據世界時設置 Date 對象中的月份 (0 ~ 11)。 setUTCSeconds() setUTCSeconds() 方法用於根據世界時 (UTC) 設置指定時間的秒字段。 setYear() 已廢棄。請使用 setFullYear() 方法代替。 toDateString() 把 Date 對象的日期部分轉換為字符串。 toGMTString() 已廢棄。請使用 toUTCString() 方法代替。 toISOString() 使用 ISO 標準返回字符串的日期格式。 toJSON() 以 JSON 數據格式返回日期字符串。 toLocaleDateString() 根據本地時間格式，把 Date 對象的日期部分轉換為字符串。 toLocaleTimeString() 根據本地時間格式，把 Date 對象的時間部分轉換為字符串。 toLocaleString() 據本地時間格式，把 Date 對象轉換為字符串。 toString() 把 Date 對象轉換為字符串。 toTimeString() 把 Date 對象的時間部分轉換為字符串。 toUTCString() 根據世界時，把 Date 對象轉換為字符串。 UTC() 根據世界時返回 1970 年 1 月 1 日 到指定日期的毫秒數。 valueOf() 返回 Date 對象的原始值。Date內置方法
2，JSON對象
var obj = JSON.parse(字符串)：將字符串轉換成對象；
var str = JSON.stringify(對象)：將對象轉換成字符串。
3，RegExp對象
JavaScript中正則相關的對象。
1，正則定義的兩種方式：
var reObj1 = new RegExp("正則語句"); var reObj2 = /正則語句/
2，常用的方法 ：RegExp對象.test("將要被校驗的字符串")
3，正則的匹配模式：
1，g：全局匹配
2，i：不區分大小寫
4，註意事項：
1. 正則表達式之間不能加空格 2. .test()不傳值相當於.test(undefined) --> .test("undefined") 3. 全局匹配模式註意事項 var reObj = /abc/g; -->按lastIndex的值進行匹配 reObj.test("abc") --> lastIndex屬性被設置成下一位的索引3 reObj.test("123abc") -->從索引3開始匹配，能匹配上abc所以就返回true
4，Math對象
數學計算相關的對象。方法有：
abs(x) 返回數的絕對值。 exp(x) 返回 e 的指數。 floor(x) 對數進行下舍入。 log(x) 返回數的自然對數（底為e）。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次冪。 random() 返回 0 ~ 1 之間的隨機數。 round(x) 把數四舍五入為最接近的整數。 sin(x) 返回數的正弦。 sqrt(x) 返回數的平方根。 tan(x) 返回角的正切。
前端開發之JavaScript