一、ECMAScript 的三個組成部分
• 核心（ECMAScript）
• 文檔對象模型（DOM） Document object model (整合js，css，html)
• 瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）
二、JavaScript語言規范
注釋： 方式一： // 單行注釋 方式二： /*多行注釋*/ 結束符： 結束符(;) 縮進： 無特殊要求 變量聲明： var:申明一個變量 # _，數字，字母，$組成，不能以數字開頭 • 變量名是區分大小寫的 • 推薦使用駝峰式命名規則。首字母大寫 • 保留字不能用做變量名
null和undefined區別 null // 表示值是空 undefined // 表示當聲明一個變量但未初始化時，該變量的默認值是undefined
typeof方法對類型查詢： typeof // 查看變量類型 示例： typeof null // "object" typeof [1,2] // "object" typeof new Object; // "object" typeof "abc" // "string" typeof true // "boolean" typeof 123 // "number" typeof NaN // "number"(非數值類型(Not a Number)，類型：number) typeof undefined; // undefined
三、JavaScript引入方式
3.1 Script標簽內寫代碼：
注意：在head標簽里面可以寫，在body標簽里面也可以寫
示例： <script>console.log('騎士計划！')</script>
3.2 引入額外的JS文件：
示例： <script src="myscript.js"></script>
四、JavaScript常用方法
4.1 alert方法：
注意：執行后瀏覽器彈出一個提示框
示例： <script> alert(' 你好！') #這個是瀏覽器窗口一打開咱們這個文件，就彈出一個窗口 </script>
4.2 console.log方法：
示例： <script> console.log('你好！') # f12建打開瀏覽器的調試窗口，然后在console這個調試台就能看到這個內容了 </script>
五、JavaScript數據類型
5.1 數值(Number)：
注意：
1.JavaScript不區分整型和浮點型
2.NaN（Not a Number）：表示不是一個數字，也就是說是一個值
示例： var a = 12.34; var b = 20; var c = 123e5; // 12300000 科學計數法 var d = 123e-5; // 0.00123
5.2 字符串(String)：
定義字符串： var a = "Hello" 字符串方法： 注意：拼接字符串一般使用“+” • .length // 返回字符串長度(屬性：不需要+括號) • .trim() // 移除兩端空白(得到一個新值) • .trimLeft() // 移除左邊的空白 • .trimRight() // 移除右邊的空白 • .charAt(n) // 返回第n個字符 • .concat(value, ...) // 字符串拼接(例如：value="hello", "world") • .indexOf(substring, start) // 子序列位置，沒有返回-1（substring:子序列字符串，start：起始索引位置） • .substring(from, to) // 根據索引獲取子序列（from:子序列字符串，to：索引結束位置） • .slice(start, end) // 字符串切片(start:起始索引位置，end：索引結束位置) • .toLowerCase() // 字符串全部變小寫 • .toUpperCase() // 字符串全部變大寫 • .split(delimiter, limit) // 字符串分割（delimiter:字符串界定符，limit：索引結束位置） 字符串轉換方法： parseInt("123") // 返回123 parseInt("ABC") // 返回NaN,NaN屬性是代表非數字值的特殊值。該屬性用於指示某個值不是數字。 parseFloat("123.456") // 返回123.456 "
5.3 布爾值(Boolean)：
注意：true和false都是小寫
示例： var a = true; // 真 var b = false; // 假( ""(空字符串)、0、null、undefined、NaN都是false)
5.4 對象(Object):
注意：
1. 對象只是帶有屬性和方法的特殊數據類型
2. JavaScript 中的所有事物都是對象(字符串、數值、數組、函數...此外)
3. JavaScript 提供多個內建對象 (Number、String、Date、Array 等)
4. 數組不需要new生命，類型就是object類型
內建對象創建對象： var s = new String('hello') // 創建一個字符串對象 var n = new Number(12) // 創建一個數值對象 自定義對象一： s3 = {'name': "alie", "age": 12}; // 自定義對象({name: "alie", age: 12})，類似於python中的字典 • s3.name // 獲取對象的屬性 • s3["name"] // 獲取對象的屬性 示例： var a = {"name": "Alex", "age": 18}; for (var i in a){ // 遍歷對象中的內容 console.log(i, a[i]); } 自定義對象二： var person=new Object(); // 創建一個person對象 person.name="Annie"; // person對象的name屬性 person.age=18; // person對象的age屬性 構造方法： • 創建函數對象： function Person(name){ // 創建一個Person函數對象 this.name=name } • 實例化： var p1 = new Person('lisa'); // 實例化這個對象 • 創建對象方法： Person.prototype.func1 = function(){ //添加一些方法，使用prototype，叫做原型鏈 方法 console.log(this.name,'愛編程！') } • 屬性或者方法調用： p1.name // chao p1.func1() // lisa 愛編程！
5.5 數組(Array):
注意：使用單獨的變量名來存儲一系列的值。類似於Python中的列表
定義數組： var a = [123, "ABC"]; 數組方法： • .length // 返回數組的長度 • .pus(value, ...) // 尾部追加元素 • .pop() // 刪除尾部的元素,返回刪除的元素 • .unshift(value, ...) // 頭部插入元素 • .shift() // 頭部移除元素 • .slice(start, end) // 數組切片 • .reverse() // 數組反轉(修改原列表) • .join(seq) // 將數組元素連接成字符串(seq: 連接符，例如：s.join(“+”)) • .concat(val, ...) // 連接數組(類似：python中的extend) • .splice(start, end, substring) // 刪除元素，並向數組添加新元素(可以不指定添加的新字符串) • .sort() // 排序(如果調用該方法時沒有使用參數，將按字母順序的編碼對數組中的元素進行排序) 指定參數： 示例： function sortNumber(a,b){ return a - b } var arr1 = [11, 100, 22, 55, 33, 44] arr1.sort(sortNumber) • .forEach() // 將數組的每個元素傳遞給回調函數 • .map() // 返回一個數組元素調用函數處理后的值的新數組
六、運算符
6.1 算數運算符：
+ - * / % ++ -- 注意： i++,是i自加1，i--是i自減1 i++ // 這個加1操作優先級低，先執行邏輯，然后再自加1 ++i // 這個加1操作優先級高，先自加1，然后再執行代碼后面的邏輯
6.2 比較運算符：
> >= < <= != == === !== 1 == “1” // true, 弱等於(比較值) 1 === "1" // false, 強等於（比較類型 + 比較值）
6.3 邏輯運算符：
&& || ! // !null返回true
6.4 賦值運算符：
= += -= *= /=
七、三元運算符
示例： var a = 1; var b = 2; var c = a > b ? a : b // 如果a>b這個條件成立，就把冒號前面的值給c，否則把冒號后面的值給c //python中的：a = x if x>y else y
八、流程控制語句
8.1 if-else語法：
語法： if else語句： if (條件){函數體}else{函數體} if (條件){函數體}else if (條件){函數體}
單條件示例： var a = 10; if (a > 5){ console.log("yes"); }else { console.log("no"); } 多條件示例： var a = 10; if (a > 5){ console.log("a > 5"); }else if (a < 5) { console.log("a < 5"); }else { console.log("a = 5"); }
8.2 switch語法：
注意：
1. switch里面參數：一個值或者一個一個值的算式
2. switch語句中執行滿足條件的case語句后，一般地需要break退出當前switch語句
語法: switch(條件){case 0:函數體；...default: 函數體；} 示例： var variable = 2; // 這里variable可以是一個值或者表達式 switch (variable){ case 1: console.log("這時variable：1"); break; case 2: console.log("這時variable：2"); break; // 滿足條件后退出 default: // 此處，以上不滿足條件或者沒有break函數，則會執行最后的default語句 console.log("這時variable是其他數值"); }
8.3 for語法：
語法： for (var i=0;i<10;i++){函數體} 注意： ++i與i++在for中的邏輯： for (var i=0;i<10){函數體；++i或者i++} // ++i或者i++都是邏輯執行完后才執行 for (;;) // 死循環
示例： 循環數組： var l2 = ['aa','bb','dd','cc'] 方式1： for (var i in l2){ // 通過遍歷數組元素取值 console.log(i,l2[i]); } 方式2： for (var i=0;i<l2.length;i++){ // 通過遍歷數組長度取值 console.log(i,l2[i]) } 循環自定義對象： var d = {aa:'xxx',bb:'ss',name:'小明'}; for (var i in d){ console.log(i,d[i]) // 注意循環自定義對象的時候，打印鍵對應的值，只能是對象[鍵]來取值，不能使用對象.鍵來取值。 }
8.4 while語法：
注意：while條件必須指定有限條件，否則會產生死循環
示例： var i = 0; while (i < 10) { // 直到循環條件不成立退出程序 console.log(i); i++; }
九、函數
定義函數方法： function 函數名(){函數體} function 函數名(a,b){函數體} 注意： 返回值(return) // 多個返回值時，只返回最后一個值(如果就想返回多個值，你可以用數組包裹起來)
9.1 普通函數定義：
function f1() { console.log("Hello world!"); }
9.2 帶參數的函數：
function f2(a, b) { console.log(arguments); // 內置的arguments對象 console.log(arguments.length); // 返回數組中的元素個數 console.log(a, b); }
9.3 帶返回值的函數：
注意：調用函數時：參數多給只執行前兩個參數的和，參數給少了執行返回NaN
function sum(a, b){ return a + b; // 返回一個結果值 //return [a,b]； // 返回多個值，通過數組返回 }
9.4 匿名函數方式：
var sum = function(a, b){ //在es6中，使用var，可能會飄黃，是因為在es6中，建議你使用let來定義變量，但不影響使用
return a + b;
}
sum(1, 2);
ES6中允許使用“箭頭”（=>）定義函數，可以理解為匿名函數：
示例：
var f = () => 5; // 不帶參數，等同於：var f = function(){return 5};
var sum = (num1, num2) => num1 + num2; // 帶參數，等同於：var sum = function(num1, num2){ return num1 + num2; }
9.5 立即執行函數：
注意：頁面加載到這里，這個函數就直接執行了，不需要被調用執行
(function(a, b){ return a + b; })(1, 2); //python中寫可以這么寫：ret=(lambda x,y:x+y)(10,20) 然后print(ret)
十、函數的全局變量和局部變量
局部變量：
在JavaScript函數內部聲明的變量（使用 var）是局部變量，所以只能在函數內部訪問它（該變量的作用域是函數內部）。只要函數運行完畢，本地變量就會被刪除。
全局變量：
在函數外聲明的變量是全局變量，網頁上的所有腳本和函數都能訪問它
變量生存周期：
JavaScript變量的生命期從它們被聲明的時間開始。
局部變量會在函數運行以后被刪除。
全局變量會在頁面關閉后被刪除。
作用域：
首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層
示例一： 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; // 返回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
十一、詞法分析
注意：函數內部無論是使用參數還是使用局部變量都到AO上找
詞法分析過程： 1、激活詞法分析對象(Avtive Object（AO）) 2、函數參數，如果有，則將此參數賦值給AO，且值為undefined 3、函數局部變量，如果AO上有同名的值，則不做任何操作。如果沒有，則將此變量賦值給AO，並且值為undefined。 4、函數聲明，如果AO上有，則會將AO上的對象覆蓋。如果沒有，則不做任何操作
示例一： var age = 18; function foo(){ console.log(age); //分析到這一步的時候，發現你下面有age變量聲明，那么age變量就在AO對象上樹上了，並且值為undefined，所以函數在執行的時候，還沒有到age=22這步的時候，age=undefined var age = 22; //如果沒有這個變量聲明，那么打印的結果應該是18 console.log(age); } foo(); // undefined 22
示例二： var age = 18; function foo(){ console.log(age); var age = 22; console.log(age); function age(){ #發現age這個函數名也是變量，將OA上的變量給替換了，那么函數在執行的時候，去OA上找，發現OA是個函數，然后執行到age=22的時候，age才被重新賦值 console.log("呵呵"); } console.log(age); } foo(); // function age(){console.log("呵呵");} 22 22
十二、JS中的日期(Date)對象
//方法1：不指定參數 var d1 = new Date(); //獲取當前時間 console.log(d1.toLocaleString()); //當前時間日期的字符串表示 //方法2：參數為日期字符串 var d2 = new Date("2004.3.20 11:12"); console.log(d2.toLocaleString()); var d3 = new Date("04/03/20 11:12"); # 月/日/年(可以寫成04/03/2020) console.log(d3.toLocaleString()); //方法3：參數為毫秒數，了解一下就行 var d3 = new Date(5000); console.log(d3.toLocaleString()); console.log(d3.toUTCString()); //方法4：參數為年月日小時分鍾秒毫秒 var d4 = new Date(2004,2,20,11,12,0,300); console.log(d4.toLocaleString()); //毫秒並不直接顯示 屬性： //getDate() 獲取日 //getDay () 獲取星期 ，數字表示（0-6），周日數字是0 //getMonth () 獲取月（0-11,0表示1月,依次類推） //getFullYear () 獲取完整年份 //getHours () 獲取小時 //getMinutes () 獲取分鍾 //getSeconds () 獲取秒 //getMilliseconds () 獲取毫秒 //getTime () 返回累計毫秒數(從1970/1/1午夜),時間戳
十三、JS中的JSON對象使用
var str1 = '{"name": "chao", "age": 18}'; // 字符串json對象 var obj1 = {"name": "chao", "age": 18}; // js對象 var obj = JSON.parse(str1); // JSON字符串轉換成對象 var str = JSON.stringify(obj1); // 對象轉換成JSON字符串
十四、JS中的Math對象
注意：Math：不需要new來創建對象 • 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) // 返回角的正切。
十五、RegExp對象
注意： 參數1 ：正則表達式(不能有空格) 參數2 ：匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一個匹配后停止)和i(忽略大小寫) 創建RegExp對象： var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); // 創建RegExp對象(方式一) var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; // 創建RegExp對象，簡寫(方式二) 方法： 注意事項1： 如果regExpObject帶有全局標志g，test()函數不是從字符串的開頭開始查找，而是從屬性regExpObject.lastIndex所指定的索引處開始查找。 該屬性值默認為0，所以第一次仍然是從字符串的開頭查找。 當找到一個匹配時，test()函數會將regExpObject.lastIndex的值改為字符串中本次匹配內容的最后一個字符的下一個索引位置。 當再次執行test()函數時，將會從該索引位置處開始查找，從而找到下一個匹配。 因此，當我們使用test()函數執行了一次匹配之后，如果想要重新使用test()函數從頭開始查找，則需要手動將regExpObject.lastIndex的值重置為 0。 如果test()函數再也找不到可以匹配的文本時，該函數會自動把regExpObject.lastIndex屬性重置為 0。 • test方法： 注意： RegExp對象的test方法，測試一個字符串是否符合對應的正則規則，返回值是true或false。 示例： var s1 = "bc123"; // 創建一個需要匹配的字符串，例如：bc123 reg1.test(s1); // true reg1.test(); // test()：如果不傳入參數，默認會傳一個“undefined”字符串（條件匹配則為true否則為false） • match方法： 示例： var s2 = "hello world"; s2.match(/o/g); // ["o", "o"] 查找字符串中 符合正則 的內容 ，/o/g后面這個g的意思是匹配所有的o, • search方法： 示例： var s2 = "hello world"; s2.search(/h/g); // 0 查找字符串中符合正則表達式的內容位置，返回第一個配到的元素的索引位置，加不加g效果相同 • split方法： 示例： var s2 = "hello world"; s2.split(/o/g); // ["hell", " w", "rld"] 按照正則表達式對字符串進行切割，得到一個新值，原數據不變 • replace方法： 示例一： var s2 = "hello world"; s2.replace(/o/g, "s"); // "hells wsrld" 對字符串按照正則進行替換 示例二： var s1 = "name:Annie age:18"; s1.replace(/a/, "哈哈哈"); // "n哈哈哈me:Annie age:18" s1.replace(/a/g, "哈哈哈"); // "n哈哈哈me:Annie 哈哈哈ge:18" 全局匹配 s1.replace(/a/gi, "哈哈哈"); // "n哈哈哈me:哈哈哈nnie 哈哈哈ge:18" 不區分大小寫 特殊示例(test())： 當我們不加參數調用RegExpObj.test()方法時, 相當於執行RegExpObj.test(undefined)，然后將這個undefined又轉為字符串"undefined",去進行匹配了, 並且/undefined/.test()默認返回true。 var reg4 = /^undefined$/; reg4.test(); // 返回true reg4.test(undefined); // 返回true reg4.test("undefined"); // 返回true