python前端基礎知識----JavaScript
阿新 • • 發佈：2020-11-02
python前端基礎知識----JavaScript
組成
ECMAScript 5.1 2011年 ---- ES5
一個完整的JavaScript由3個部分組成：
- 核心（ECMAScript）
- 文件物件模型（DOM）Document Object Model，整合js，css，html 。
- 瀏覽器物件模型（BOM） Browser Object Model，真個和js和瀏覽器。
js引入
方式1：
<script>
// js程式碼
alert('澳門皇家賭場上線了！！！')
</script>
方式2：
<script src="test.js"></script>
註釋
// 這是單行註釋
/*
這是多行註釋
*/
結束符
以分號為結束，和縮排無關係。
JavaScript語言基礎
在谷歌瀏覽器的Console裡做js程式碼測試
-
變數名
可以使用_,數字，字母，$組成，不能以數字開頭。
-
宣告變數使用 var 變數名。
var a = 10;注意：
區分大小寫
駝峰命名規則，首字母大寫
保留字不行
-
基礎資料型別
動態型別
var x; //此時x的值為undefined x = 1; // 此時為數字 x = 'nihao'; //此時為字串數值（Number）
不區分整形和浮點型
var x = 1; typeof(x); //number型別字串（String）
var c = 'alexsb'; typeof(c); //'string' var c2 = 'alc'; c1 = c + c2; //alexsbalc 拼接 常用方法
方法 說明 .length #不加括號的是屬性 返回長度 .trim() #得到一個新值 移除空白 .trimLeft() 移除左邊的空白 .trimRight() 移除右邊的空白 .charAt(n) #n類似索引，從0開始，超過最大值返回''空字串 返回第n個字元 .concat(value, ...) #s1='hello';s.concat('xx');得到helloxx 拼接 .indexOf(substring, start) #這個start是從索引幾開始找，沒有返回-1 子序列位置 .substring(from, to) #不支援負數，所以一般都不用它，瞭解一下就行了 根據索引獲取子序列 .slice(start, end) #var s1='helloworld';s1.slice(0,-5)看結果，就用它 切片 .toLowerCase() #全部變小寫 小寫 .toUpperCase() #全部變大寫 大寫 .split(delimiter, limit)#分隔,s1.splite(' '),後面還可以加引數s1.split(' '，2),返回切割後的元素個數 分割 var a = 'hello' undefined a "hello" a.length 5 var b = ' hello' undefined b " hello" b.trim() "hello" a.charAt(3) "l" a.concat(b.trim()) "hellohello" a.indexOf('e') 1 a.indexOf('1') -1 a.indexOf('l') 2 a.indexOf('l', 2) 2 a.slice(2,4) "ll" a.toUpperCase() "HELLO" a.toLowerCase() "hello" a.split('e') (2)["h", "llo"]0: "h"1: "llo"length: 2型別轉換
parseInt('123'); // 整型的123 parseInt('123abc'); // 不報錯，也轉成整型的123 parseInt('abc123'); // NaN number型別 parseFloat("123.456");布林值
var a = true; var b = false; ""(空字串)、0、null、undefined、NaN都是false。物件型別（object）
JavaScript 中的所有事物都是物件：字串、數值、陣列、函式...此外，JavaScript 允許自定義物件。 var s = new String('world'); undefined typeof(s) "object" -
複雜資料型別或者引用資料型別
陣列Array
建立陣列： var a = [11, 22, 33]; undefined a (3)[11, 22, 33] var b = new Array([22, 33]); undefined b [Array(2)] typeof a "object" typeof b "object"陣列常用方法和屬性
方法 說明 .length 陣列的大小 .push(ele) 尾部追加元素 .pop() 獲取尾部的元素 .unshift(ele) 頭部插入元素 .shift() 頭部移除元素 .slice(start, end) 切片 .reverse() #在原陣列上改的 反轉 .join(seq)#a1.join('+')，seq是連線符 將陣列元素連線成字串 .concat(val, ...) #連個數組合並,得到一個新陣列，原陣列不變 連線陣列 .sort() 排序 .forEach() #講了函式再說 將陣列的每個元素傳遞給回撥函式 .splice() #引數：1.從哪刪(索引), 2.刪幾個 3.刪除位置替換的新元素(可多個元素) 刪除元素，並向陣列新增新元素。 .map() #講了函式再說 返回一個數組元素呼叫函式處理後的值的新陣列 1.索引取值 a (3)[11, 22, 33] a[1]; 22 2. .length a.length; 3 3. 尾部追加元素 a.push('a'); (4)[11, 22, 33, 'a'] 4. 尾部刪除 a.pop(); 5. 頭部插入 a.unshift('aa'); (5)['aa', 11, 22, 33, 'a'] 6. 頭部刪除 a.shift(); (4)['aa', 11, 22, 33] 7. .sort()排序 把元素轉換成字串，然後按ASCII碼大小排序自定義物件
var a = {'name':'li', 'age':22}; undefined a {name: "li", age: 22} a["age"] 22 // for 迴圈遍歷自定義物件 for (var i in a){ console.log(a[i]); } VM1550:2 li VM1550:2 22 -
運算子
算術運算子
+ - * / % ++ -- i++,是i自加1，i--是i自減1 i++的這個加1操作優先順序低，先執行邏輯，然後再自加1，而++i，這個加1操作優先順序高，先自加1，然後再執行程式碼後面的邏輯比較運算子
// = < <= != == === !== // == 弱等於（不比較資料型別） === 強等於 比較資料型別 var a = 10 undefined var b = '10' undefined a == b true a === b false a != b false a !== b true邏輯運算子
&& || ! #and，or，非（取反）!null返回true賦值運算子
= += -= *= /= #n += 1其實就是n = n + 1 -
流程控制
if-else
var a = 10; if (a > 5){ console.log("yes"); }else { console.log("no"); }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"); }switch切換
var a = 10; switch(a){ case 9: console.log('good'); break; case 10: console.log('perfact'); break; } // perfactfor迴圈
for (var i=0;i<10;i++) { //就這麼個寫法，宣告一個變數，變數小於10，變數每次迴圈自增1，for(;;){console.log(i)}；這種寫法就是個死迴圈，會一直迴圈，直到你的瀏覽器崩了，就不工作了，回頭可以拿別人的電腦試試~~ console.log(i); }迴圈陣列：var l2 = ['aa','bb','dd','cc']方式1for (var i in l2){ console.log(i,l2[i]);}方式2for (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],d.i) #注意迴圈自定義物件的時候，列印鍵對應的值，只能是物件[鍵]來取值，不能使用物件.鍵來取值。}while迴圈
var i = 0; while (i < 10) { console.log(i); i++; }三元運算子
var a = 1; var b = 2; var c = a > b ? a : b //如果a>b這個條件成立，就把冒號前面的值給c，否則把冒號後面的值給c //python中的：a = x if x>y else y -
函式
函式的定義
// 普通函式定義 function f1() { console.log("Hello world!"); } // 帶引數的函式 function f2(a, b) { console.log(arguments); // 內建的arguments物件 console.log(arguments.length); console.log(a, b); } // 帶返回值的函式 function sum(a, b){ return a + b; //在js中，如果你想返回多個值是不行的，比如return a ，b；只能給你返回最後一個值，如果就想返回多個值，你可以用陣列包裹起來 return [a,b]； } sum(1, 2); // 呼叫函式 sum(1,2,3,4,5)引數給多了，也不會報錯，還是執行前兩個引數的和，sum(1)，少引數或者沒引數也不報錯，不過返回值就會是NAN // 匿名函式方式，多和其他函式配合使用，後面我們就會用到了 var sum = function(a, b){ //在es6中，使用var，可能會飄黃，是因為在es6中，建議你使用let來定義變數，不過不影響你使用 return a + b; } sum(1, 2); // 立即執行函式，頁面載入到這裡，這個函式就直接執行了，不需要被呼叫執行 (function(a, b){ return a + b; })(1, 2); //python中寫可以這麼寫：ret=(lambda x,y:x+y)(10,20) 然後print(ret)函式的區域性變數和全域性變數
-
區域性變數
在JavaScript函式內部宣告的變數（使用 var）是區域性變數，所以只能在函式內部訪問它（該變數的作用域是函式內部）。只要函式執行完畢，本地變數就會被刪除。
-
全域性變數
在函式外宣告的變數是全域性變數，網頁上的所有指令碼和函式都能訪問它。
-
變數的生存週期
- JavaScript變數的生命期從它們被宣告的時間開始。
- 區域性變數會在函式執行以後被刪除。
- 全域性變數會在頁面關閉後被刪除。
作用域
首先在函式內部查詢變數，找不到則到外層函式查詢，逐步找到最外層。
-