JavaScript ECMAScript語法思維導圖見文章底部
JavaScript是什麼 ？
- JavaScript是一門腳本語言
腳本語言:不需要編譯，直接運行(js,python...)
編譯語言:需要把代碼翻譯成計算機所認識的二進制語言，才能運行(c,c++,java...) - JavaScript是一門基於對象的語言
基於 而不是 面向
JavaScript可以模擬其他語言的特性(封裝、繼承、多態) - JavaScript是一門動態類型的語言
- JavaScript是一門弱類型的語言
- JavaScript是一門解釋性的語言
JavaScript能做什麼？
- 前端開發
- 後端開發
- 底層
- 操作系統開發
- 大數據
- 區塊鏈
- 人工智能
- ... js無所不能
引入js的兩種方式
- 內聯
在html中 body標籤內的最下方通過script標籤 編寫js代碼 - 外聯
引入外部文件 在html中 body標籤內的最下方通過script標籤的src屬性引入文件
為什麼要有變量？
為了存儲和複用一個數據，方便修改
當聲明一個變量的時候 var a = 10 ,會在內存中開闢以一個空間 存放變量名和變量值 ,會將變量和值存放到window對象中 a:10
1. 全局變量
全局作用域中的變量 可以在該腳本文件中的任何地方訪問到
2. 局部變量
局部作用域中的變量 局部變量只能在該函數中訪問到
注意
在局部作用域中(函數中)聲明變量 如果未加關鍵字 var || let || const 這個變量就會變為隱式全局變量
<code>function a(){
num = 1;
}
=>
var num;
function a(){
num = 1;
}
/<code><code>/*只有num1 是局部變量 ， num2 和 num3 是隱式全局變量*/
function a(){
var num1 = num2 = num3 = 100;
}
=>
var num2;
var num3;
function a(){
var num1 = 100;
num2 = 100;
num3 = 100;
}
/<code>
JavaScript代碼規範以及變量命名
聲明關鍵詞 var let const 變量名區分大小寫
命名規範
一般以字母、$、下劃線、數字組成(不能以數字開頭) 不能使用系統關鍵詞和保留字 一般遵循駝峰命名法(第一個單詞首字面小寫後面單詞首字母大寫) 變量名需得有意義
預解析
JavaScript在執行的過程中，瀏覽器的js引擎會將代碼掃描一遍(預解析) 並把 **聲明式** 函數 和 變量 提升到 **該作用域** 的最頂端
1. 變量預解析
變量預解析只會將變量的聲明提升到該作用域的最前面
<code>console.log(a) // undefined
var a = 10;
=>
var a
console.log(a) // undefined
a = 10
/<code>
2. 函數預解析
變量預解析只會將變量的聲明提升到該作用域的最前面
<code>b()
function b(){
}
=>
function b(){
}
b()
/<code>
斷點調試
直接在瀏覽器中Sources添加斷點 或者在編輯器中在語句之後添加 debugger
數據類型
什麼是數據類型？
計算機裡面有很多數據，JS為了方便調試與使用，提供了一些對應的輔助方法，將它們做了歸類，就是數據類型。
簡單數據類型
1. Number
1.1. 整數 => 正數 負數 1.2. 小數 1.3. NaN Not a Number => 不是一個數字 判斷一個數字是否是非數字isNaN(x) 返回布爾值 true是一個非數字，false不是一個非數字
<code>isNaN(undefined) // true
isNaN(null) // false
/<code>
NaN不等於任何值，包括它自己
- 數值的取之範圍
<code>Infinity // 無窮大
-Infinity // 無窮小
Number.MAX_VALUE /*最大值*/
Number.MIN_VALUE /*最小值*/
/<code>
- 運算符
算數運算符
+:加
-:減 *:乘 /:除 %:求模 任何數除以0為無窮大 任何數-*/%字符串為NaN (除了+)
複合運算符
+=
自增自減運算符 a++ ++a a-- --a
- 前置自增 ++a 先運算、再返回
- 後置自增 a++ 先返回、再運算
2. String
2.1 字符串的長度str.length 2.2 字符串加號運算 會將數據與數據拼接字符串 + 任何數據類型 = 拼接之後的新的字符串
3. Boolean
true => 1 false => 0
用布爾值來判斷條件真假
4. Undefined
未定義
5. Null
空
- undefined和null的區別
null 表示一個值被定義了，定義為null undefined 表示一個值聲明瞭 但是未定義(未賦值) 所以設置一個值為null是合理的 設置一個值為undefined是不合理的 null == undefined // true null === undefined // false 說明 null 和 undefined 在轉boolean 的時候都為 0 值相同 所以 == 為true ，數據類型不一樣 === 為false
複雜數據類型
1. Array
- 創建數組的方式
new
<code>new Array()
new Array(初始長度)
new Array( 1 , 2 , 3 )
/<code>
字面量
<code>[ ]
[ 1 , 2 , 3 ]
/<code>
- 數組的三個概念
元素: 數組中的值就是元素 下標(索引): 下標從0開始 長度: length 數組的長度 從1開始
- 遍歷數組
正敘遍歷
<code>for(let i = 0; i < arr.length; i++){
/*代碼塊*/
}
/<code>倒敘遍歷
<code>for(let i = arr.length; i > 0; i--){
/*代碼塊*/
}
/<code>- 棧和隊列操作
棧操作 先進後出
<code>arr.unshift() /*從頭部放入*/
arr.shift() /*從頭部取出*/
/<code>
<code>arr.push(); /*從尾部放入*/
arr.pop(); /*從尾部取出*/
/<code>
隊列操作 先進先出
<code>arr.unshift() /*從頭部放入*/
arr.pop(); /*從尾部取出*/
/<code>
<code>arr.push(); /*從尾部放入*/
arr.shift() /*從頭部取出*/
/<code>
2. Function
- 函數的聲明
<code>function fn (){
//代碼塊
}
/<code>匿名方式創建函數
<code>let fn = function(){
//代碼塊
}
/<code>函數對象
<code>let fn = new Function("形參","形參","代碼塊") /*前面的都是參數，最後面的參數是代碼塊*/
/<code>- 函數的默認值
形參默認值 形參 = 形參 || 默認值 - 函數的調用
函數名(實參列表) - return 關鍵字
函數中 return 將數據給調用者 函數中遇到 return 直接跳出函數 後面代碼不執行 函數默認 return undefined
- 函數的預解析
只有聲明式的函數和變量才會預解析 先調用 -> 後聲明 在js執行的時候 瀏覽器會執行 預解析的操作
預解析會把所有的 聲明式 創建的函數(包括變量) 提升到當前作用域的最頂端
- 回調函數 函數作為參數傳遞 函數作為返回值
- arguments 屬性
函數內部的特殊屬性 用來保存實參列表 arguments 是一個 偽數組 => 不是數組 但是具有數組的特性(下標索引、長度、可以進行循環遍歷) 可以模擬函數重載 => 同一個函數，因為傳遞的實參數量不同，可以執行不同的操作
- 工廠函數 和 構造函數
<code>/*工廠函數*/
function createStr(name,age){
let obj = new Object()
obj.name = name
obj.age = age
obj.sayHi = function(){
console.log(this.obj)
}
return obj
}
let obj1 = createStr("藍海",11)
/<code>
<code>/*構造函數*/
function StuInFo(name,age){
this.name = name
this.age = age
this.sayHi = function(){
console.log(this.obj)
}
}
let obj2 = new StuInFo("藍海",11)
/<code>
構造函數相對於自定義類(class) 1.變量名一般用名詞，首字母大寫 2.構造函數中 不需要我們去創建對象、返回對象 3.構造函數一般 被 new 關鍵詞調用
new 關鍵字 做的四件事
創建空對象 將空對象 傳遞給 構造函數 裡面的 this 調用構造函數 返回對象
- 自調用函數
<code>(function("形參列表"){
/*代碼塊*/
})("實參列表")
/<code>- 函數內存存放
函數名存放在棧裡面
通過內存地址相關聯
函數體和形參列表存放在堆裡面
3. Object
- 創建對象的方式
new
<code>let obj = new Object()
||
let obj = new Object({
name : "藍海",
age : 11
})
/<code>
字面量
<code>let obj = { }
||
let obj = {
name : "藍海",
age : 11
}
/<code>- 訪問對象中的屬性
對象.屬性
對象["屬性"] => 注意 用中括號的方式訪問對象中的屬性 屬性名️加引號
訪問對象中不存在的屬性 => undefined - 對象屬性操作
添加屬性 => 直接對象 . 屬性名 = 屬性值
刪除屬性 => delete 對象 . 屬性名 || delete 對象 . 方法名 - 判斷一個對象中是否存在某個屬性或某個方法
"屬性" in 對象 => "name" in obj - 對象中的 this
對象中的this就是這個對象 可以通過this.屬性名 在對象的方法中訪問對象裡的其他屬性或方法
- 對象內存存放
對象名存放在棧裡面
通過內存地址相關聯
對象裡面的方法和屬性存放在堆裡面
獲取數據類型
1. typeof
typeof檢查簡單數據類型[值類型] 返回的是 字符串類型的數據類型
<code>typeof(123) => "number"
/*注意點*/
typeof(typeof(123)) => "string"
typeof(null) => "object"
typeof(Infinity) => "number"
typeof(NaN) => "number"
typeof(new Date()) => "object" => /*typeof檢查其他new出來的對象 都返回 object*/
/*typeof() 複雜數據類型object、array 和 null 都返回 object
typeof(function) => function // 函數除外
*/
/<code>
2. instanceof
instanceof檢查複雜數據類型[引用類型] 返回boolean值
<code>數據名 instanceof 數據類型 /*[Function||Object||Array]*/
返回 false 或 true
只能檢查複雜數據類型 簡單數據類型都返回false
/<code>
typeof 和 instanceof 的區別
typeof用來檢測簡單數據類型 返回值是一個字符串的數據類型 instanceof用來檢測複雜數據類型 返回的是boolean值 如果用來檢測簡單數據類型都會返回false
數據類型轉換
1. 轉換為字符串
str.tostring() 默認模式把變量轉換為字符串 || 基模式 String(str) 把特殊值轉換為字符串 String(undefined) => “undefined” 加號拼接字符串
2. 轉換為數組
parseFloat(str) 把字符串轉換為浮點數(小數) parseInt(str) 把字符串轉換為整數
{Number(str) 任何數據轉換為整數
如果字符串截去開頭和結尾的空白字符後， 不是純數字字符串，那麼最終返回NaN。 如果字符串中只包含了數字，(包括前面帶正號和負號)， 則將其轉換為十進制數值，即"1"->1，”011“->11 如果字符串是空的""則返回0 如果字符串包含除了上面的格式之外的字符，則將其轉換為NaN
<code>boolean true轉換為1 false轉換為0
null 返回 0
undefined 返回 NaN
/<code>
}
3. 轉換為布爾值
Boolean()
將布爾字符串轉成布爾值 除了 0、false 、undefiend、NaN、null 轉換為false 其他都為true
4. 轉義符
console.log("轉義符的應用\"嗯") ->[轉義符的應用“嗯] 常用
- \\n 換行符
- " 雙引號
- ' 單引號
- \\ \\ 斜槓\\
JavaScript內置對象
戳一下 之前總結的常用內置對象博客
條件判斷
一些很簡單條件判斷這裡就不說了哈
1. 三元運算符
條件 ? true : false
2. switch-case
<code>/*相對於 if (a === 1) 用來做全等判斷*/
break /*每個case裡面的代碼斷都要寫 break 否則會穿透*/
/*合理使用switch穿透 */
default /*如果case都不匹配的情況下 會執行 default 裡面的代碼*/
/<code>
3. && || !
&& 與 一假則假 || 或 一真則真 ! 非 取反
循環
1. for
for 循環體上面的 i 變量的作用域是全局作用域 如果在函數中使用就是局部作用域 一般建議使用let 關鍵詞來聲明 i
<code>for (let i = 1;i < 10; i++){
/*代碼塊*/
}
/*拆解為*/
let i = 1;
for(;i<10;){
/*代碼塊*/
i++;
}
/<code>2. do while
先執行do裡面的代碼塊 再條件判斷
<code>do{
/*代碼塊*/
}while(boolean)
/<code>3. while
先條件判斷 再執行代碼塊
<code>while(boolean){
/*代碼塊*/
}
/<code>do-while 與 while 的區別
do-while 不管條件是否成立 都會執行一次do裡面的代碼塊 然後再進行條件判斷 while 先進行條件判斷 再執行代碼塊
3. for in
遍歷對象
<code>for(let "屬性名" in "對象"){
/*訪問對象中的屬性或方法*/ /*這裡的屬性名已經是string類型 所以無需再加引號*/
obj[name] => /*對象[屬性名]*/
}
/<code>break 和 continue 的區別
break 跳出整個循環 後面的循環不再執行 continue 跳出本次循環 繼續執行後面的循環
xmind知識導圖
總結
若有感興趣的小夥伴，需要JavaScript ECMAScript語法思維導圖原圖的，關注我，私信回覆獲取：ECMAScript語法思維導圖
作者：藍海00
鏈接：https://www.jianshu.com/p/5a5fb2b78d13
閱讀更多 Echa攻城獅 的文章
