瀏覽目錄
一、JavaScript語法基礎
1、變量命名規范
- 變量名只能是 字母、數字、下划線或美元符號的任意組合
- 變量名不能是數字開頭
- 關鍵字不能聲明為變量名
- 建議用駝峰命名方式
- 變量名是區分大小寫
- 變量的定義要具有可描述性
2、變量聲明
- var 變量名 = 變量值;
- JavaScript屬於動態類型(同一個變量可以存不同數據類型的值)
- 語句必須以分號結束
3、注釋
- // 單行注釋
- /*
多行注釋
*/
二、JavaScript數據類型及類型查詢
1、數字number
只有一種數字類型，數字可以帶小數點，也可以不帶
- 示例
var a = 12.34; var b = 20; var c = 123e5; # 12300000 var d = 123e-5; # 0.00123 ☆還有一種NaN，表示不是一個數字（Not a Number）
- 常用方法
# 將字符串轉為數字(當傳入的字符串參數不能轉為數字時，變返回NaN)
parseInt("123") # 返回123
parseInt("ABC") # 返回NaN，NaN屬性是代表非數字值的特殊值，該屬性用於指示某個值不是數字
parseFloat("123.456") # 返回123.456
2、字符串String
字符串可以是引號中的任意文本，可以使用單引號或雙引號
- 示例
var a = "Hello"; var b = 'World'; var c = a + b; console.log(c); # 得到HelloWorld
- 常用方法
·String.length：返回長度
·String.trim()：移除空白
·String.trimLeft()：移除左邊空白
·String.trimRight()：移除右邊空白
·String.charAt(n)：返回第N個字符
·String.concat(value, ...)：拼接字符串
·String.indexOf(substring, start)：返回子序列位置
·String.substring(from, to)：根據索引獲取子序列(顧頭不顧尾)
·String.slice(start, end)：切片
·String.toLowerCase()：轉換成小寫
·String.toUpperCase()：轉換成大寫
·String.split(delimiter, limit)：分割
·string.slice(start, stop)和string.substring(start, stop)對比：
·兩者的相同點：
如果start等於end，返回空字符串
如果stop參數省略，則取到字符串末
如果某個參數超過string的長度，這個參數會被替換為string的長度
·substirng()的特點：
如果 start > stop ，start和stop將被交換
如果參數是負數或者不是數字，將會被0替換
·silce()的特點：
如果 start > stop 不會交換兩者
如果start小於0，則切割從字符串末尾往前數的第abs(start)個的字符開始(包括該位置的字符)
如果stop小於0，則切割在從字符串末尾往前數的第abs(stop)個字符結束(不包含該位置字符)
3、布爾類型Boolean
布爾只能有兩個值：true 或 false(注意true和false都是小寫)
- 示例
var x=true; var y=false;
4、數組Array
- 示例
·創建數組方式一：
var cars=new Array();
cars[0]="A";
cars[1]="B";
cars[2]="C";
·創建數組方式二：
var cars=new Array("A","B","C");
- 常用方法
·Array.length：數組的長度
·Array.push(element)：尾部追加元素
·Array.pop()：獲取尾部的元素
·Array.unshift(element)：頭部插入元素
·Array.shift()：頭部移除元素
·Array.slice(start, end)：切片
·Array.reverse()：反轉
·Array.join(seq)：將數組元素連接成字符串
·Array.concat(val, ...)：連接數組
·Array.sort()：排序
·關於雞肋的JavaScript內置sort方法的解釋及優化：
/*
如果調用sort方法時沒有傳入參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字符串（如有必要），以便進行比較。
如果想按照其他標准進行排序，就需要提供比較函數，該函數要比較兩個值，然后返回一個用於說明這兩個值的相對順序的數字。比較函數應該具有兩個參數 a 和 b，其返回值如下：
若 a 小於 b，在排序后的數組中 a 應該出現在 b 之前，則返回一個小於 0 的值。
若 a 等於 b，則返回 0。
若 a 大於 b，則返回一個大於 0 的值。
*/
// 根據上面的規則自行實現一個排序函數：
function sortNumber(a,b) {
return a - b
}
// 調用sort方法時將定義好的排序函數傳入即可。
stringObj.sort(sortNumber)
5、對象Object
對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔
- 示例
var person={
firstname : "Ya",
lastname : "elegance",
id : 818104
};
- 常用方法
name=person.lastname; name=person["lastname"];
6、空Null
表示值是空，一般在需要指定或清空一個變量時才會使用
7、未定義Undefined
當聲明一個變量但未初始化時，該變量的默認值是undefined，函數無明確的返回值時，返回值也是undefined
8、類型查詢
- 方法：typeof
- typeof是一個一元運算符（就像++，–，！，- 等一元運算符），不是一個函數，也不是一個語句
- 規則
- undefined - 如果變量是 Undefined 類型的
- boolean - 如果變量是 Boolean 類型的
- number - 如果變量是 Number 類型的
- string - 如果變量是 String 類型的
- object - 如果變量是一種引用類型或 Null 類型的
三、JavaScript運算符
1、算數運算符
- +：相加
- -：相減
- *：相乘
- /：相除
- %：取余
- ++：自加1 (注意：n++表示后自加，++n表示先自加)
- –：自減1 (注意：n–表示后自減，–n表示先自減)
2、比較運算符
- > ：大於
- >= ：大於等於
- < ：小於
- <= ：小於等於
- == ：相等，判斷值是否相等
- != ：不等於
- === ：嚴格相等，判斷值、類型是否完全相等
- !== ：嚴格不等於
3、邏輯運算符
- && ：且
- || ：或
- ! ：非
4、賦值運算符
- = ：賦值
- += ：自加
- -= ：自減
- *= ：自乘
- /= ：自除
四、JavaScript流程控制
1、if else
var a = 10;
if (a > 5){
console.log("yes");
}else {
console.log("no");
}
2、if-- else if --else
var a = 10;
if (a > 5){
console.log("a > 5");
}else if (a < 5) {
console.log("a < 5");
}else {
console.log("a = 5");
}
3、switch
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
注意：switch中的case子句通常都會加break語句，否則程序會繼續執行后續case中的語句
4、for
for (var i=0;i<10;i++) {
console.log(i);
}
5、while
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
6、三元運算
格式：判斷條件？滿足條件的返回值：不滿足條件的返回值
var a = 1; var b = 2; var c = a > b ? a : b
五、JavaScript函數
1、函數定義
- 普通函數定義
function func() {
console.log('hello world!');
}
- 帶參數的函數定義
function func(arg1,arg2){
console.log('arg1:',arg1);
console.log('arg2:',arg2);
}
- 帶返回值的函數定義
function func1(arg1,arg2){
return arg1+arg2;
}
fun1(1,2); //函數調用
- 匿名函數定義
var foo= function(arg1,arg2){
return arg1+arg2;
}
foo(1,2) //函數調用
- 立即執行函數定義
(function(arg1,arg2){
return arg1+arg2;
})(1,2);
2、類數組對象arguments
- 作用
- Javascript並沒有重載函數的功能，但是通過Arguments對象能夠模擬重載；
- Javascript的每個函數都會有一個Arguments對象實例arguments，它引着函數的實參，它也有類似於數組的length屬性。
- arguments.length為函數實參個數。
- arguments.callee引用函數自身。
- 示例
function func2(a,b) {
console.log("總共有" + arguments.length + "個參數");
var ret = 0;
for (var i=0;i<arguments.length;i++){
ret += arguments[i]
}
return ret;
}
console.log(func2(11,22,33));
3、局部變量&全局變量
- 局部變量
- 在Javascript函數內部聲明變量（使用var）是局部變量，所以只能在函數內部訪問它（該變量的作用域是函數內部）；
- 只要函數運行完畢，本地變量就會被刪除。
- 全局變量
- 在函數外聲明的變量是全局變量，網頁上的所有腳本和函數都能訪問它。
- 變量生存周期：
- Javascript變量的生命周期從它們被聲明的時開始；
- 局部變量會在函數運行以后被刪除；
- 全局變量會在頁面關閉后被刪除。
4、作用域
首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層。
var city = "BeiJing"; function f() { var city = "ShangHai"; function inner(){ var city = "ShenZhen"; console.log(city); } inner(); } f(); 結果： "ShenZhen"
var city = "BeiJing"; function Bar() { console.log(city); } function f() { var city = "ShangHai"; return Bar; } var ret = f(); ret(); 結果： "BeiJing"
var city = "BeiJing"; function f(){ var city = "ShangHai"; function inner(){ console.log(city); } return inner; } var ret = f(); ret(); 結果： "ShangHai"
六、詞法分析
Javascript中在調用函數的那一瞬間，會先進行詞法分析。
1、詞法分析的過程
- 當函數調用的前一瞬間，會先形成一個激活對象：Avtive Object(AO),並會分析以下3個方面：
- 函數參數，如果有，則將此參數賦值給AO，且值為undefined。如果沒有，則不做任何操作；
- 函數局部變量，如果AO上有同名的值，則不做任何操作。如果沒有，則將此變量賦值給AO，並且值為undefiined。
- 函數聲明，如果AO上有，則會將AO上的對象覆蓋。如果沒有，則不做任何操作。
2.注意：函數內部無論是使用參數還是使用局部變量都到AO上找。
var age = 18; function foo(){ console.log(age); var age = 22; console.log(age); } foo(); 結果： undefined 22
var age = 18; function foo(){ console.log(age); var age = 22; console.log(age); function age(){ console.log("呵呵"); } console.log(age); } foo(); 結果： function age() 22 22 詞法分析過程： 1、分析參數，有一個參數，形成一個 AO.age=undefine; 2、分析變量聲明，有一個 var age, 發現 AO 上面已經有一個 AO.age，因此不做任何處理 3、分析函數聲明，有一個 function age(){...} 聲明， 則把原有的 age 覆蓋成AO.age=function(){...}; 最終，AO上的屬性只有一個age，並且值為一個函數聲明 執行過程： 注意：執行過程中所有的值都是從AO對象上去尋找 1、執行第一個 console.log(age) 時，此時的 AO.age 是一個函數，所以第一個輸出的一個函數 2、這句 var age=22; 是對 AO.age 的屬性賦值， 此時AO.age=22 ，所以在第二個輸出的是 2 3、同理第三個輸出的還是22, 因為中間再沒有改變age值的語句了
七、JavaScript內置對象方法
1、介紹
- JavaScript中的所有事物都是對象：字符串、數字、數組、日期，等等。在JavaScript中，對象是擁有屬性和方法的數據。
- 我們在學習基本數據類型的時候已經帶大家了解了，JavaScript中的Number對象、String對象、Array對象等。
- 注意：var s1 = “abc”和var s2 = new String(“abc”)的區別：typeof s1 –> string而 typeof s2 –> Object
| 類型 | 內置對象 | 介紹 |
| 數據類型 | Number | 數字對象 |
| 數據類型 | String | 字符串對象 |
| 數據類型 | Boolean | 布爾值對象 |
| 組合對象 | Array | 數組對象 |
| 組合對象 | Math | 數學對象 |
| 組合對象 | Date | 日期對象 |
| 高級對象 | Object | 自定義對象 |
| 高級對象 | Error | 錯誤對象 |
| 高級對象 | Function | 函數對象 |
| 高級對象 | RegExp | 正則表達式 |
| 高級對象 | Global | 全局 |
2、自定義對象
- 創建、訪問自定義對象
//方式一：
var a = {"name": "Yang", "age": 18};
console.log(a.name);
console.log(a["age"]);
//方式二：
var person=new Object(); // 創建一個person對象
person.name="Yang"; // person對象的name屬性
person.age=18; // person對象的age屬性
- 遍歷對象中的內容
var a = {"name": "Yang", "age": 18};
for (var i in a){
console.log(i, a[i]);
}
- JavaScript面向對象之繼承（擴展）
// 父類構造函數
var Car = function (loc) {
this.loc = loc;
};
// 父類方法
Car.prototype.move = function () {
this.loc ++;
};
// 子類構造函數
var Van = function (loc) {
Car.call(this, loc);
};
// 繼承父類的方法
Van.prototype = Object.create(Car.prototype);
// 修復 constructor
Van.prototype.constructor = Van;
// 擴展方法
Van.prototype.grab = function () {
/* ... */
};
3、Date對象
- 創建Date對象
//方法1：不指定參數
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：參數為日期字符串
var d2 = new Date("2008/8/8 20:08");
console.log(d2.toLocaleString());
var d3 = new Date("08/8/8 20:08");
console.log(d3.toLocaleString());
//方法3：參數為毫秒數
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
//方法4：參數為年月日小時分鍾秒毫秒
var d4 = new Date(2008,8,8,20,08,08,100);
console.log(d4.toLocaleString()); //毫秒並不直接顯示
- Date對象的方法
var d = new Date(); //getDay () 獲取當前星期X(0-6,0代表星期天) //getMonth () 獲取當前月份(0-11,0代表1月) //getFullYear () 獲取完整的年份(4位,1970-????) //getYear () 獲取當前年份(2位) //getHours () 獲取當前小時數(0-23) //getMinutes () 獲取當前分鍾數(0-59) //getSeconds () 獲取當前秒數(0-59) //getMilliseconds() 獲取當前毫秒數(0-999) //getTime () 返回累計毫秒數(從1970/1/1午夜) //toLocaleDateString(); 獲取當前日期 //toLocaleTimeString(); 獲取當前時間 //toLocaleString( ); 獲取日期與時間
4、JSON對象
方法示例
var str1 = '{"name": "Yang", "age": 18}';
var obj1 = {"name": "Yang", "age": 18};
// JSON字符串轉換成對象
var obj = JSON.parse(str1);
// 對象轉換成JSON字符串
var str = JSON.stringify(obj1);
5、RegExp對象
- 創建方法
- 創建方法一
// 創建RegExp對象方式（逗號后面不要加空格）
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
// 匹配響應的字符串
var s1 = "abc123";
//RegExp對象的test方法，測試一個字符串是否符合對應的正則規則，返回值是true或false。
reg1.test(s1); // true
-
- 創建方法二
// 匹配響應的字符串
var s1 = "abc123";
// /填寫正則表達式/匹配模式（逗號后面不要加空格）
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test(s1); // true
- 示例
// String對象與正則結合的4個方法 var s2 = "hello world"; s2.match(/o/g); // ["o", "o"] 查找字符串中 符合正則 的內容 s2.search(/h/g); // 0 查找字符串中符合正則表達式的內容位置 s2.split(/o/g); // ["hell", " w", "rld"] 按照正則表達式對字符串進行切割 s2.replace(/o/g, "s"); // "hells wsrld" 對字符串按照正則進行替換 // 關於匹配模式：g和i的簡單示例 var s1 = "name:Adele age:18"; s1.replace(/a/, "替換"); // "n替換me:Adele age:18" s1.replace(/a/g, "替換"); // "n替換me:Adele 替換ge:18" 全局匹配 s1.replace(/a/gi, "替換"); // "n替換me:替換dele 替換ge:18" 不區分大小寫
- RegExp對象使用時的幾點之一事項
-
- 正則表達式(不能有空格)
- 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一個匹配后停止)和i(忽略大小寫)
- 如果regExpObject帶有全局標志g，test()函數不是從字符串的開頭開始查找，而是從屬性regExpObject.lastIndex所指定的索引處開始查找。該屬性值默認為0，所以第一次仍然是從字符串的開頭查找。當找到一個匹配時，test()函數會將regExpObject.lastIndex的值改為字符串中本次匹配內容的最后一個字符的下一個索引位置。當再次執行test()函數時，將會從該索引位置處開始查找，從而找到下一個匹配。因此，當我們使用test()函數執行了一次匹配之后，如果想要重新使用test()函數從頭開始查找，則需要手動將regExpObject.lastIndex的值重置為 0。如果test()函數再也找不到可以匹配的文本時，該函數會自動把regExpObject.lastIndex屬性重置為 0。
- 當我們不加參數調用RegExpObj.test()方法時, 相當於執行RegExpObj.test(“undefined”), 並且/undefined/.test()默認返回true。
6、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) | 返回角的正切 |