Docker 系統性入門+進階實踐-07Docker compose
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
流程控制
持續更新中.........................................