spring使用註解的形式注入Bean
JavaScript合集
學完HTML5+CSS3的小夥伴，學習JS時，要多敲多練多想多拓展
剛開始入門JS的時候，我們不需要糾結那麼多，有些需要先記住，後面會慢慢明白為什麼是這樣的
JS基礎部分
我們為什麼要學習JS？
js是前端開發的核心，沒有js，前端就沒有了靈魂，它是一門解釋型的語言，不需要我們手動編譯，而是通過直譯器邊解釋，邊執行，也就是我們所說的JS引擎，不管是瀏覽器還是Node.js都要遵循我們的ECMAScript的語法（ES）標準，ES6是一個大的變化，其中的一些語法也要掌握，Node.js後續也會有。
js可以像其他型別的值一樣賦值給任意變數，也可以作為引數傳遞給其他函式，所有JS的函式是非常重要的，函數語言程式設計
js是一個單執行緒的程式語言，總而言之，言而總之，js同一時間只能做一件事，不像Java那樣多執行緒，一個時間幹多件事。有人可能會問，一個時間做一件事，那效率得多低呀，效能得多差呀，單執行緒雖然降低了JS程式碼的複雜程度，但是JS效能變差，所以為了解決問題，JS又提供了非同步的程式設計方式，提高程式碼執行速度，同步非同步這些後面也會有說到。
幾乎大多數的程式語言都是面向物件的，同樣我們的JS也是，這個物件非比"物件",面向物件，通俗的來說，就是把一些相關的功能都封裝到一個物件中，使用的時候直接呼叫就可以完成該功能，比如：汽車，汽車裡面的每個大的零件都是有小的零件組成，我們把小零件都封裝成一個大的零件----也就是物件，我們組裝車的時候，只需要使用這個大零件就行，至於小零件怎麼安裝的，我們不需要考慮。
JS基礎中的基礎語法
如果你瞭解其他的程式語言，第一個程式都是編寫HelloWorld,我們直接上程式碼：
編寫位置（你不知道編寫位置，你怎麼編寫）
編寫位置分為三種：
-
script標籤內部<script> // 此處編寫JS程式碼 </script> -
外部的JS檔案<script src="xxx.script"></script> 注意：這個可不是你css學的link引入，注意這個是雙標籤的 script -
標籤的屬性中<button onclick="js程式碼">按鈕</button> <a href="javascript:js程式碼;">超連結</a>
這個三個呀，你肯定該說，這要怎麼用呀，到底用哪個呢？
js程式碼少可以寫在script內部，如果多一些就外部引入，標籤屬性的方式，框架用的還是比較多的
這個地方注意一點的是，你要注意引入的位置，js是從上往下執行的，如果你把js程式碼放到頁面渲染之前執行，就會出問題，所以一般的話，把js放到DOM 渲染結束後的位置
基本輸出語句
那我們就先試試幾個列印語句吧，為以後的排錯輸出打下基礎：
<script>
alert("我是彈出框語句")
// 控制檯就是頁面點選F12開啟
console.log("我是控制檯輸出語句")
document.write("我是頁面列印語句")
</script>
註釋的方式和分號的使用
-
單行註釋// 單行註釋 -
多行註釋/* 多行註釋 */ -
分號3.1 基本上大多數的程式語言都需要加分號，但是JS不一樣，可加可不加，完全看自己的心情。
3.2 JS嚴格區分大小寫
3.3 同時我們也可以忽略空格，空格和換行都會被忽略掉，但是我們為了程式碼的美觀，可以適當的使用一些外掛來美化。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hello World</title> <!-- 1.JS程式碼需要編寫到script中 --> <script> alert("哈哈哈哈") console.log('你猜我在哪？') document.write('你猜我在哪？') </script> <!-- 2.可以將js編寫外部的js檔案中，然後通過script標籤進行引入 --> <script src="./script/script.js"></script> </head> <body> <!-- 3.可以將js程式碼編寫到指定屬性中 --> <button onclick="alert('你點我幹嘛！')">點我一下</button> <hr> <a href="javascript:alert(123);">超連結</a> <hr> <a href="javascript:;">超連結</a></body> </html>
字面量和變數
1.字面量
- 字面量其實就是一個值，它所代表的含義就是它字面的意思
- 比如：1 2 3 4 100 "hello" true null .....
- 在js中所有的字面量都可以直接使用，但是直接使用字面量並不方便
2.變數
-
變數可以用“儲存”字面量
-
並且變數中儲存的字面量可以隨意的修改
-
通過變數可以對字面量進行描述，並且變數比較方便修改
變數有三種宣告方式：
1.var ---有很多缺陷，會造成變數的值洩露，一般很少使用
2.let --推薦使用，有塊級作用域，不可以重複宣告，沒有變數提升
3.const --用於宣告常量，也可以宣告物件和陣列這些複雜資料型別的
let num = 10
const obj = {}
const arr = []
變數的記憶體結構（看圖理解）：
變數中並不儲存任何值，而是儲存值的記憶體地址！
我們可以通過：
console.log(a===b) //true
的形式檢視兩者的記憶體地址是否指向同一個
常量
在JS中，使用const宣告常量，常量只能賦值一次，重複賦值會報錯
在JS中除了常規的常量外，有一些物件型別的資料我們也會宣告為常量
const PI = 3.1415926
識別符號
在JS中，所有可以由我們自主命名的內容，都可以認為是一個識別符號
像 變數名 函式名 類名...
使用識別符號需要遵循如下的命名規範：
1. 識別符號只能含有字母、數字、下劃線、$，且不能以數字開頭
2. 識別符號不能是JS中的關鍵字和保留字，也不建議使用內建的函式或類名作為變數名
3. 命名規範：
- 通常會使用駝峰命名法
- 首字母小寫，每個單詞開頭大寫
- maxlength --> maxLength
- borderleftwidth --> borderLeftWidth
- 類名會使用大駝峰命名法
- 首字母大寫，每個單詞開頭大寫
- maxlength --> MaxLength
- 常量的字母會全部大寫
- MAX_LENGTH
資料型別
數值
數值（Number）
- 在JS中所有的整數和浮點數都是Number型別
- JS中的數值並不是無限大的，當數值超過一定範圍後會顯示近似值
- Infinity 是一個特殊的數值表示無窮
- 所以在JS中進行一些精度比較高的運算時要十分注意
- NaN 也是一個特殊的數值，表示非法的數值
let a = 10
a = 10.5
a = 3.14
a = 9999999999999991111111111111111111
a = 99999 ** 99999
a = Infinity
a = 1.11111111111111111111111111111111111111111111
a = 0.0000000000000000000000000000000000001
a = 0.1 + 0.2 //出現精度問題
a = 1 - "a" // NaN (Not a Number)
a = NaN
大整數(BigInt)
- 大整數用來表示一些比較大的整數
- 大整數使用n結尾，它可以表示的數字範圍是無限大
a =666666666666888888888888888888888855555555555n
其他進位制的數字：
二進位制 0b
八進位制 0o
十六進位制 0x
a = 0b1010
a = 0o10
a = 0xff
console.log(a) //以十進位制列印
型別檢查
typeof 運算子
- typeof用來檢查不同的值的型別
- 它會根據不同的值返回不同的結果
let a = 0
let b = 10n
console.log(typeof a) // "number"
console.log(typeof b) // "bigint"
字串
字串（String）
-
在JS中使用單引號或雙引號來表示字串
-
轉義字元
- \ " --> "
- \ ' --> '
- \\ --> \\
- \t --> 製表符
- \n --> 換行
-
模板字串
- 使用反單引號` 來表示模板字串
- 模板字串中可以嵌入變數,可以跨行書寫
- 使用typeof檢查一個字串時會返回 "string"
let str = `你好，${name}`
console.log(typeof str) //"string"
其他資料型別
布林值（Boolean）
-
布林值主要用來進行邏輯判斷
-
布林值只有兩個true 和 false
-
使用typeof檢查一個布林值時會返回 "boolean"
let bool = true // 真 bool = false // 假 let num = 1
空值 （Null）
-
空值用來表示空物件
-
空值只有一個 null
-
使用typeof檢查一個空值時會返回"object"
-
使用typeof無法檢查空值
let a = null console.log(typeof a) //"object"
未定義（Undefined）
-
當宣告一個變數而沒有賦值時，它的值就是Undefined
-
Undefined型別的值只有一個就是 undefined
-
使用typeof檢查一個Undefined型別的值時，會返回 "undefined"
let b console.log(typeof b) //"undefined"
符號（Symbol）
-
用來建立一個唯一的標識
-
使用typeof檢查符號時會返回 "symbol"
let c = Symbol() // 呼叫Symbol()建立了一個符號
console.log(typeof c)
七種資料型別
JS中原始值一共有七種
Number，BigInt，String，Boolean，Null，Undefined，Symbol
七種原始值是構成各種資料的基石 原始值在JS中是不可變型別，一旦建立就不能修改
型別轉換
轉換為字串
-
呼叫
toString()方法將其他型別轉換成字串let a = 10 a = a.toString() // "10" -
呼叫
String()函式將其他型別轉換為字串對於擁有toString()方法的值呼叫String()函式時， 實際上就是在呼叫toString()方法 對於null，則直接轉換為"null" 對於undefined，直接轉換為"undefined" -
b = null // "null" b = undefined // "undefined" b = true console.log(typeof b, b) b = String(b) console.log(typeof b, b)null和undefined沒有toString()方法，通常用String函式，
型別轉換不是改變了原始值，而是根據原始值去建立了一個新的型別的值
轉換為數值
1.使用Number()函式來將其他型別轉換為數值
轉換的情況：
- 字串：
- 如果字串是一個合法的數字，則會自動轉換為對應的數字
- 如果字串不是合法數字，則轉換為NaN
- 如果字串是空串或純空格的字串，則轉換為0
- 布林值：
- true轉換為1，false轉換為0
- null 轉換為 0
- undefined 轉換為 NaN
2.專門將字串轉化為數值
-
parseInt()--- 將一個字串轉成一個整數- 解析時，會自左向右讀取一個字串，直到讀取到字串中所有的有效的整數
- 也可以使用parseInt()來對一個數字進行取整
-
parseFloat()---- 將一個字串轉成浮點數- 解析時，會自左向右讀取一個字串，直到讀取到字串中所有的有效的小數
轉換為Boolean
1.使用Boolean()函式來將其他型別轉換為布林值
- 轉換的情況：
數字：
- 0 和 NaN 轉換為false
- 其餘是true
字串：
- 空串 轉換為 false
- 其餘是true
null和undefined 都轉換為 false
物件：物件會轉換為true
- 所有表示空性的沒有的錯誤的值都會轉換為false：
0、NaN、空串、null、undefined、false
運算子
-
運算子可以用來對一個或多個運算元（值）進行運算
算數運算子+ 加法運算子 - 減法運算子 * 乘法運算子 / 除法運算子 ** 冪運算 % 模運算，兩個數相除取餘數-
注意：
-
-
算術運算時，除了字串的加法其他運算的運算元是非數值時，都會轉換為數值然後再運算
let a = 1 + 1 a = 10 - 5 a = 2 * 4 a = 10 / 5 a = 10 / 3 a = 10 / 0 // Infinity a = 10 ** 4 a = 9 ** .5 // 開方 a = 10 % 2 a = 10 % 3 a = 10 % 4
JS是一門弱型別語言，當進行運算時會通過自動的型別轉換來完成運算a = 10 - '5' // 10 - 5 a = 10 + true // 10 + 1 a = 5 + null // 5 + 0 a = 6 - undefined // 6 - NaN當任意一個值和字串做加法運算時，它會先將其他值轉換為字串， 然後再做拼串的操作 可以利用這一特點來完成型別轉換 可以通過為任意型別 + 一個空串的形式來將其轉換為字串 其原理和String()函式相同，但使用起來更加簡潔當任意一個值和字串做加法運算時，它會先將其他的值轉化為字串，然後再做拼串操作
可以利用這個特徵來完成隱式型別轉換
可以通過為任意型別 + 一個空串的形式來將其轉換為字串
a = 'hello' + 'world' a = '1' + 2 // "1" + "2" a = true a = a + '' console.log(typeof a, a) //string true -
-
賦值運算子
賦值運算子用來將一個值賦值給一個變數
=
- 將符號右側的值賦值給左側的變數
??=
- 空賦值
- 只有當變數的值為null或undefined時才會對變數進行賦值
+=
- a += n 等價於 a = a + n
-=
- a -= n 等價於 a = a - n
*=
- a *= n 等價於 a = a * n
/=
- a /= n 等價於 a = a / n
%=
- a %= n 等價於 a = a % n
**=
- a **= n 等價於 a = a ** n
-------------------------------------------------------------------
let a = 10
a = 5 // 將右邊的值 賦值 給左邊的變數
let b = a // 一個變數只有在=左邊時才是變數，在=右邊時它是值
a = 66
a = a + 11 // 大部分的運算子都不會改變變數的值，賦值運算子除外
a = 5
// a = a + 5 // 10
a += 5 // 在a原來值的基礎上增加5
a = null
//當a的值為null或者undefined時，就會賦值
a ??= 101
console.log(a)
一元運算子
一元的加減
-
正號 +
不會改變數值的符號
-
負號 -
可以對數值進行符號位取反
當我們對非數值型別進行正負運算時，會先將其轉換為數值小試： let a = -10 a = -a let b = '123' b = +b // b = Number(b) console.log(typeof b, b)
自增自減運算子
-
自增運算子
-
使用後會使原來的變數加1
-
自增分為前自增(++a)和後自增(a++)
-
前自增：
先自增後賦值新值 -
後自增：
先賦值後自增舊值let n = 5 let result = n++ + ++n + n 是多少呢？
-
-
自減運算子
同自增，執行的方式都是一樣的
邏輯運算子
-
邏輯非 ！
-
可以用來對一個值進行非運算 ！
-
它可以對一個布林值進行取反操作
- true --> false
- false --> true
-
如果對一個非布林值型別的值進行取反，它會先將其轉化為布林值
可以利用這個特點將其他型別轉化為布林值
-
型別轉換
-
轉化為字串
-
顯式轉換
String() -
隱式轉換
+ ""
-
-
轉化為數值
-
顯式轉換
Number() -
隱式轉換
+
-
-
轉化為布林值
-
顯式轉換
Boolean() -
隱式轉換
!!
-
-
-
-
邏輯與 &&
- 可以對兩個值進行運算
- 當&&左右都為true時，則返回true，否則返回false
- 與運算是短路的與，如果第一個是false，就不看第二個值了
- 對於非布林值運算，它會轉換為布林值然後運算，但是最終會返回原值
- 如果第一個值是false，則直接返回第一個值
- 如果第一個值為true，則返回第二個值
-
邏輯或 ||
- 可以對兩個值進行或運算
- 當||左右有true時，則返回true，否則返回false
- 或運算是找true，如果找到true，就直接返回
- 對於非布林值或運算，它會轉換為布林值然後運算，但是最終會返回原值
- 如果第一個為true，則返回第一個
- 如果第一個值為false，則返回第二個值
也就是說：
邏輯與&&：必須都要滿足，如果一個就是false，就不用看第二個了，因為有一個false就為false了，沒必要看第二個
邏輯或||：有一個滿足就可，如果第一個true了，也就直接返回了，沒必要看第二個了
let result = true && true // true
result = true && false // false
result = false && true // false
result = false && false // false
result = true || false // true
result = false || true // true
result = true || true // true
result = false || false // false
關係運算符
關係運算符：關係運算符用來檢查兩個值之間的關係是否成立 成立返回true，不成立返回false
關係運算符
>
- 用來檢查左值是否大於右值
>=
- 用來檢查左值是否大於或等於右值
<
- 用來檢查左值是否小於右值
<=
- 用來檢查左值是否小於或等於右值
注意：
1.當對非數值進行關係運算時，它會先將前轉換為數值然後再比較
2.當關系運算子的兩端是兩個字串，它不會將字串轉換為數值，而是逐位的比 較字元的Unicode編碼 ，利用這個特點可以對字串按照字母排序
注意比較兩個字串格式的數字時一定要進行型別轉換
let result = 10 > 5 // true
result = 5 > 5 // false
result = 5 >= 5 // true
result = 5 < "10" // true
result = "1" > false // true
result = "a" < "b" // true
result = "z" < "f" // false
result = "abc" < "b" // true
result = "12" < "2" // true
result = +"12" < "2" // false
// 檢查num是否在5和10之間
let num = 4
// result = 5 < num < 10 // 錯誤的寫法
result = num > 5 && num < 10
console.log(result)
相等運算子
==
相等運算子，用來比較兩個值是否相等，返回一個布林值
- 使用相等運算子比較兩個不同型別的值時， 它會將其轉換為相同的型別（通常轉換為數值）然後再比較，型別轉換後值相同也會返回true
- null和undefined進行相等比較時會返回true
- NaN不和任何值相等，包括它自身
===
全等運算子，返回一個布林值
- 它不會進行自動的型別轉換，如果兩個值的型別不同直接返回false
- null和undefined進行全等比較時會返回false
let result = 1 == 1 // true
result = 1 == 2 // false
result = 1 == '1' // true
result = true == "1" // true
result = null == undefined // true
result = NaN == NaN // false
result = 1 === "1" // false
result = null === undefined // false
result = 1 != 1 // false
result = 1 != "1" // false
result = 1 !== "1" // true
console.log(result)
條件運算子
條件運算子
條件表示式 ? 表示式1 : 表示式2
- 執行順序：
條件運算子在執行時，會先對條件表示式進行求值判斷，
如果結果為true，則執行表示式1
如果結果為false，則執行表示式2
也就是說：
先判斷條件表示式，如果返回true，就執行表示式1，如果返回的是false，就執行表示式2
let a = 100
let b = 200
// a > b ? alert('a大！') : alert("b大！")
let max = a > b ? a : b
三元運算子的值就是比較之後返回true的對應的值
運算子的優先順序
優先順序查詢：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
流程控制
持續更新中.........................................