1、JavaScript概述 1、ECMAScript和JavaScript的關係 1996年11月，JavaScript的創造者--Netscape公司，決定將JavaScript提交給國際標準化組織ECMA，但願這門語言可以成爲國際標準。 次年，ECMA發佈262號標準文件（ECMA-262）的初版，規定了瀏覽器腳本語言的標準，並將這種語言稱爲ECMAScript，這個版本就是1.0版。 該標準一開始就是針對JavaScript語言制定的，可是沒有稱其爲JavaScript，有兩個方面的緣由。一是商標，JavaScript自己已被Netscape註冊爲商標。 二是想體現這門語言的制定者是ECMA，而不是Netscape，這樣有利於保證這門語言的開發性和中立性。 所以ECMAScript是JavaScript的規格，JavaScript是ECMAScript的一種實現，在平常場合，這兩個詞是能夠互換的。 javascript遵照ECMA指定的標準，換句話說javascript就是ECMAscript的方言。 2、ECMAScript的歷史
| 年份 | 名稱 | 描述 |
| 1997 | ECMAScript 1 | 第一個版本 |
| 1998 | ECMAScript 2 | 版本變動 |
| 1999 | ECMAScript 3 | 添加正則表達式javascript 添加try/catchcss |
| ECMAScript 4 | 沒有發佈 | |
| 2009 | ECMAScript 5 | 添加"strict mode"嚴格模式html 添加JSON支持java |
| 2011 | ECMAScript 5.1 | 版本變動 |
| 2015 | ECMAScript 6 | 添加類和模塊 |
| 2016 | ECMAScript 7 | 增長指數運算符（**）python 增長Array.prototype.includes正則表達式 |
3、JavaScript的組成 日常所說的ES6就是指ECMAScript 6 一個完整的JavaScript 實現是由如下 3 個不一樣部分組成的： 1.核心（ECMAScript） 2.文檔對象模型（DOM） Document object model (整合js，css，html) 3.瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器） 4、JavaScript的特色 JavaScript 是腳本語言 JavaScript 是一種輕量級的編程語言。 JavaScript 是可插入 HTML 頁面的編程代碼。 JavaScript 插入 HTML 頁面後，可由全部的現代瀏覽器執行。 2、JavaScript引入方式 1、行內JS <input type="button" value="點擊我" onclick="javascript:alert('我被點擊了')"> <!--onclick:點擊觸發一個事件，alert：彈出一個對話框--> 2、內部JS：script裏的程序整個頁面均可以用 <head> <meta charset="UTF-8"> <title>JS內部定義</title> <script type="text/javascript"> function Example(){ /*函數*/ alert('我喜歡你') } </script> </head> 3、外部JS 外部樣式就是將JS寫在一個單獨的文件(.js文件)中，而後在HTML頁面進行引入。 <script type="text/javascript" src="MyJavascript.js"></script> 3、JavaScript語言規範 1、註釋 單行註釋：// 二、多行註釋：/*註釋內容*/ /* 多行註釋 */ 3、對比 HTML註釋：<!--註釋內容--> CSS註釋：/*註釋內容*/ 單行多行都是用這個 JavaScript註釋： 單行註釋：// 多行註釋：/*註釋內容*/ 4、結束符 JavaScript中的語句要以分號 ; 爲結束符。 4、JavaScript語言基礎 1、變量聲明 JavaScript的變量名可使用數字，字母，_和$組成，不能以數字開頭。 聲明變量使用var關鍵字 var name = "mingzai"; var age = 18; 2、注意事項 1.變量名是區分大小寫的 2.推薦使用駝峯式命名規則(python中則推薦使用下劃線的形式命名) 3.保留字(關鍵字)不能用作變量名 4.javascript和python同樣是動態的語言，即定義的變量不須要聲明是什麼類型，例如： var a = 'xiaoming' //定義一個字符串變量 a = 18 //能夠直接修改爲數字類型的變量 3、補充 1.ES6新增了let命令，用來聲明變量。它的用法相似於var，可是所聲明的變量，只在let命令所在的代碼塊內有效。 例如： { let a = 100; var b = 50; } a // Uncaught ReferenceError: a is not defined b // 50 for循環的計數器，就很合適使用let命令，例如： for (let i = 0; i < 10; i++) { 代碼 } 2.ES6新增const用來聲明常量。一旦聲明，其值就不能改變。 const ID = 1 ID //1 ID = 2 //VM602:1 Uncaught TypeError: Assignment to constant variable. 3.保留字列表
abstract boolean byte char class const debugger double enum export extends final float goto implements import int interface long native package private protected public short static super synchronized throws transient volatile
5、JavaScript數據類型 1、JavaScript動態類型 var x; // 此時x是undefined var x = 1; // 此時x是數字 var x = "xiaoming" // 此時x是字符串 2、數值(Number) JavaScript不區分整型和浮點型，就只有一種數字類型。 var a = 100 //100 var b = 10.5 //10.5 var c = 12.13e3 //12130 還有一種NaN，表示不是一個數字（Not a Number） 就是說，若是你想把一個字符串轉換成數字類型，那麼這個字符串必須是全數字組成的才能轉換，不然就不能轉， 好比字符串'abc' 是不能夠轉成數字類型的，可是字符串'123'卻能夠轉成數字類型。 經常使用方法： parseInt(123) //123 parseInt('123') //123 parseFloat(123) //123 parseFloat('12.3') //12.3 parseInt('abc') //NaN parseFloat('abc') //NaN 3、字符串(String) var a = "Hello" var b = "world; var c = a + b; console.log(c); // Helloworld 1.經常使用方法：
| 方法 | 說明 |
| .length | 返回長度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左邊的空白 |
| .trimRight() | 移除右邊的空白 |
| .charAt(n) | 返回第n個字符 |
| .concat(value, ...) | 拼接 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 切片 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小寫 |
| .toUpperCase() | 大寫 |
| .split(delimiter, limit) | 分割 |
2.例子： //長度 var s1 = 'hello world'; s1.length; //11(length是屬性，不是方法) //去除空白 var s2 = ' hello '; s2; //" hello " s2.trim(); //"hello"(至關於python的strip()) s2.trimLeft(); //"hello "(至關於python的lstrip()) s2.trimRight(); //" hello"(至關於python的rstrip()) //返回第n個字符 var s3 = 'hello girl'; s3.charAt(0); //"h" 至關於python的按索引找值 s3.charAt(11); //"" 沒有值則返回空字符串 //拼接 var s4 = 'hello'; s4.concat('boy','girl'); //"helloboygirl" //找元素的索引位置，跟python的index類似，但有不一樣 //indexOf接收兩個參數，第一個參數是要找的元素，第二個參數是表示從哪裏開始找，找不到就返回-1 var s4 = 'hello'; s4.indexOf('e',0); //1 從索引爲0開始找，找到元素e，e的索引是1 s4.indexOf('e',1); //1 從索引爲1開始找，找到元素e，e的索引是1 s4.indexOf('e',2); //-1 從索引爲2開始找，找不到元素e，返回-1 //切片的兩種方式 substring：不支持負數，由於若第一個參數大於第二個參數，則會把兩個參數互換，若參數是負數會把這個負數變成0 例如：substring(1,-5) --> substring(-5,1) --> substring(0,1) slice：跟咱們python中的切片同樣，也支持負數 var s5 = 'hello world'; s5.substring(0,5); //"hello" s5.substring(0,-5); //"" 從0到0 s5.substring(1,-5); //"h" 從0到1 s5.slice(1,-5); //"ello " //大小寫 var s6 = 'Hello World'; s6.toLowerCase(); //"hello world" s6.toUpperCase(); //"HELLO WORLD" //分割 var s7 = 'hello world'; s7.split(); //["hello world"] 沒有默認參數，不寫參數不分割，可是仍是生成了列表 s7.split(' '); //["hello", "world"] 按照空格分割 s7.split(' ',1); //["hello"] 第二個參數是表明返回的列表的長度 s7.split(' ',2); //["hello", "world"] s7.split(' ',3); //["hello", "world"] 超出列表的長度，也至關於把整個列表的長度都返回 //拼接字符串通常使用「+」 var name = 'xiaoming'; var age = 18; msg = name + age; //"xiaoming18" 3.注意：slice和substring的區別 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)個字符結束(不包含該位置字符) 4.模板字符串 ES6中引入了模板字符串 模板字符串（template string）是加強版的字符串，用反引號（`）標識（就是ESC下面那個鍵），用${}取值 它能夠當作普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量。 若是模板字符串中須要使用反引號，則在其前面要用反斜槓轉義。 JavaScript模板字符串 var name = '明哥'; var msg = `I am ${name}`; //"I am 明哥" var msg2 = `I am ${name} I am 18 year old`; 結果： `I am 明哥 I am 18 year old`; //直接定義多行字符串 var msg3 = 'I am ${name} I am 18 year old'; 結果：Uncaught SyntaxError: Invalid or unexpected token python模板字符串 f'xxx' 或 F'xxx' 且以大括號 {} 代表被替換的字段，{}裏面能夠是字符串或者表達式 name = '小白' msg = f'我叫{name}，今年{18}歲，性別{"男"}' print(msg) # 我叫小白，今年18歲，性別男 四、布爾值(Boolean) 區別於Python，JavaStript的true和false都是小寫。 var a = true; var b = false; ""(空字符串)、0、null、undefined、NaN都是false。 五、null和undefined null表示有值的，可是值是空，通常在須要指定或清空一個變量時纔會使用，如 name=null; undefined表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有就是函數無明確的返回值時，返回的也是undefined。 var name //此時聲明瞭變量，但未初始化，默認值是undefined 六、對象(Object) 1.概念 JavaScript和python同樣都是一切皆對象：字符串、數值、數組、函數...此外，JavaScript 容許自定義對象。 JavaScript 提供多個內建對象，好比 String、Date、Array 等等。 對象只是帶有屬性和方法的特殊數據類型。 2.數組 數組對象的做用是：使用單獨的變量名來存儲一系列的值。相似於Python中的列表。 var a = [1234, "heiheihei"]; console.log(a[1]); // "heiheihei" 3.數組的經常使用方法：
| 方法 | 說明 |
| .length | 數組的大小 |
| .push(ele) | 在尾部追加元素 |
| .pop() | 刪除尾部的元素並返回刪除的元素 |
| .unshift(ele) | 在頭部插入元素 |
| .shift() | 在頭部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() | 反轉 |
| .join(seq) | 將數組元素鏈接成字符串 |
| .concat(val, ...) | 鏈接數組 |
| .sort() | 排序 |
| .forEach() | 將數組的每一個元素傳遞給回調函數 |
| .splice() | 刪除元素，並向數組添加新元素。 |
| .map() | 返回一個數組元素調用函數處理後的值的新數組 |
4.數組的例子 //切片 var a1 = [1,2,3,4]; a1[1]; // 2 a1[6]; // undefined 超出範圍就返回undefined //數組的大小 a1.length; //4 //增長刪除元素 var a2 = [1,2,3]; //在尾部追加 a2.push(4); //[1, 2, 3, 4] //在尾部刪除 a2.pop(); // [1, 2, 3] //在頭部增長 a2.unshift(0); //[0, 1, 2, 3] //在頭部刪除 a2.shift(); //[1, 2, 3] //切片 var a3 = [1,2,3,4,5]; a3.slice(1,3); //[2, 3] a3.slice(1,-1); //[2, 3, 4] //把數組反過來 a3.reverse(); //[5, 4, 3, 2, 1] //將數組元素鏈接成字符串 a3.join('+') //"5+4+3+2+1" //Python中的join list1 = [11, 22, 33, 44] ret = '+'.join([str(i) for i in list1])) //鏈接數組(造成新的數組) var a4 = [1,2,3,4]; new_a4 = a4.concat(5,6,7); //[1, 2, 3, 4, 5, 6, 7] new_a4_2 = a4.concat(['a','b','c']); //[1, 2, 3, 4, "a", "b", "c"] //關於sort()須要注意： 若是調用該方法時沒有使用參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。 要實現這一點，首先應把數組的元素都轉換成字符串（若有必要），以便進行比較。 若是想按照其餘標準進行排序，就須要提供比較函數，該函數要比較兩個值，而後返回一個用於說明這兩個值的相對順序的數字。 比較函數應該具備兩個參數 a 和 b，其返回值(sort有函數做爲參數時會按返回值進行比較)以下： 若 a 小於 b，則返回一個小於 0 的值。 若 a 等於 b，則返回 0。 若 a 大於 b，則返回一個大於 0 的值 var a5 = [11,2,12,19,13]; a5.sort(); // [11, 12, 13, 19, 2] 默認按ASCII排序 function sortNumber(a,b){ return a -b } // 定義一個排序函數 a5.sort(sortNumber); // [2, 11, 12, 13, 19] 數組的刪除splice接收三個參數： 第一個參數：從哪一個位置開始刪 第二個參數：刪除數組的個數 第三個參數：在刪除的位置新增的元素(可多個) var a6 = [1,2,3,4,5,6]; a6.splice(0,1); a6; //[2, 3, 4, 5, 6] a6.splice(0,2); a6; // [4, 5, 6] a6.splice(0,1,7); a6; // [7, 5, 6] a6.splice(0,1,8,9,10); a6; // [8, 9, 10, 5, 6] 補充： ES6新引入了一種新的原始數據類型（Symbol），表示獨一無二的值。它是JavaScript語言的第7種數據類型。
5.JS中自定義對象，相似於python中的字典，key能夠不加引號，key默認是字符串
var d1 = {'name':'小明',age:18}; //{name:'小明',age:18} 七、類型查詢：typeof是一個一元運算符（就像++，--，！，- 等一元運算符），不是一個函數，也不是一個語句 對變量或值調用 typeof 運算符將返回下列值之一： object - 若是變量是一種引用類型或 Null 類型的 undefined - 若是變量是 Undefined 類型的 boolean - 若是變量是 Boolean 類型的 number - 若是變量是 Number 類型的 string - 若是變量是 String 類型的 例如： typeof [1,2,3]; //"object" typeof null; //"object" typeof NaN; //"number" typeof 1; //"number" typeof undefined; //"undefined" typeof 'a'; //"string" typeof true; //"boolean" 6、運算符 一、算數運算符 + - * / % ++ -- 二、比較運算符 > >= < <= != == === !== 注意：雙等號比較的是值是否相同，三等號比較的是值和類型是否都相同 1 == 「1」 // true 1 === "1" // false 三、邏輯運算符 and or not && || ! 四、賦值運算符 = += -= *= /=