javascript
万字长文详解JavaScript(JavaScript从入门到精通)(持续更新)
目錄(該目錄點擊后跳轉內容可能不匹配,可使用Ctrl+F進行檢索)
一、JavaScript介紹
二、JavaScript與html代碼的結合方式
2.1 第一種方式
2.2第二種方式
補充 三種常見輸出語句:
三、變量
補充 Undefined 與 Null 與 NaN:
補充 轉義字符?編輯
補充 進制表示
補充 類型轉換
1. 其他數據類型轉成String
2.其他數據類型轉成Number
3.將其他數據類型轉換為Boolean
補充 算術運算符
補充 一元運算符
補充 使用Unicode編碼
四、關系(比較)運算符
五、邏輯運算符
補充 條件運算符(三元運算符)
補充 代碼塊?編輯
補充 基本數據類型與引用數據類型
六、數組(Array)
1.構造函數創建數組
2.數組字面量
3.Array對象常用方法
七、函數
補充 使用構成函數創建一個函數對象
1.使用function關鍵字定義函數
2.將函數賦給var
3. 函數的隱形參數arguments(只在function函數內)
補充 立即執行函數(匿名函數的使用)
補充 函數使用注意事項
補充 函數對象的方法call()與apply()
八、自定義對象
補充 對象的分類
1.object形式的自定義對象
2.花括號形式的自定義對象(對象字面量)
補充 對象的屬性名與屬性值
補充 in運算符
補充 利用for in枚舉對象中的屬性
補充 聲明提前
1.變量的聲明提前
2.函數的聲明提前
補充 作用域
1.全局作用域
2.函數作用域
補充 構造函數
構造函數的方法優化
補充 原型對象
????????原型的原型
? ? ? ? 原型鏈
補充 事件對象
補充 事件的綁定(addEventListener() )
補充 包裝類
補充 Date對象
常用Date對象方法?
補充 Math對象
補充 字符串對象
字符串的常用方法:
補充 this
補充 toString()“重寫”
補充 垃圾回收機制(GC)
九、js中的事件
1.事件的注冊(綁定)
2. onload事件
3. onclick事件
4. onblur事件
5.onchange事件
6.onsubmit事件
補充 7. 滾輪事件
補充 8.鍵盤事件
補充 事件的冒泡
補充? 事件的委派(冒泡的應用)
補充 事件的傳播
十、DOM模型
補充 節點
????????Document對象及其方法/屬性(document表示整個html頁面)
1.getElementById方法
2.getElementsByName方法
3.getElementsByTagName方法
? ? ? ? 補充getElementsByClassName()
?????????補充querySelector()
? ? ? ? 補充querySelectorAll()
4. createElement方法與appendChild方法
????????獲取元素節點的子節點
????????獲取元素節點的父節點和兄弟節點
? ? ? ? 補充 document的常用屬性
補充 for循環與事件綁定帶來的問題
使用DOM來操作樣式:
? ? ? ? 下面介紹其他樣式相關的屬性:
十一、BOM(瀏覽器對象模型)
11.1 基本介紹
11.2 BOM對象概況
11.2 History
11.3 Location
十二、定時器
一、JavaScript介紹
? ? ? ? JavaScript誕生主要是為了完成頁面的數據驗證,因此它運行在客戶端,需要運行瀏覽器來解析執行JavaScript代碼
- 首先,JavaScript是一門單獨的語言,與java無關
- 與java是一門強類型的語言不同的是,js(即JavaScript)是一門弱類型的語言
這里所提到的弱類型指的是類型可變,JavaScript不像java是強類型
強類型就是定義變量時,類型已確定且不可變
JavaScript特點:
交互性(它可以實現信息的動態交互)
安全性(它不允許直接訪問本地磁盤)
跨平臺性(只要是可以解釋js的瀏覽器都可以執行,與平臺無關)
二、JavaScript與html代碼的結合方式
2.1 第一種方式
只需要在head標簽或者是body標簽內使用script標簽書寫JavaScript代碼
效果如下:
2.2第二種方式
使用script標簽引入單獨的JavaScript標簽
效果如下
值得注意的是:
script標簽可以用來書寫JavaScript代碼,也可以用來引入JavaScript文件,但是注意這二者只能二選一,不能同時使用兩個功能
補充 三種常見輸出語句:
上圖是JavaScript的三種常用的輸出語句?
三、變量
變量是存放某些值的內存的命名
JavaScript的數據類型:
- 數值類型(number包含整數和浮點數):基本與java一樣有int,short,long,float,double等
- 字符串類型(string)
- 對象類型(object)
- 布爾類型(boolean)
- 函數類型(function):這里與java不同,JavaScript的變量可以指向一個函數
JavaScript的特殊值:
- undefined? ? ? ?未定義,所以JavaScript的變量在未賦值時,默認都是undefined
- null? ? ? ?空值
- NaN? ? ? 全稱是: Not a number? ? 即非數字、非數值
補充 Undefined 與 Null 與 NaN:
- Null(空值)類型的值只有一個,就是null,它專門用來表示一個為空的對象,使用 typeof 檢查一個null值時,會返回object
- Undefined(未定義)類型的值只有一個,就是undefined,當聲明一個變量,但是并不給變量賦值時,它的值就是undefined,使用 typeof 檢查一個undefined值時,會返回undefined
- NaN(非number)是 Not a Number 的簡寫,表示“非數值”,使用 typeof 檢查一個NaN值時,會返回number
JavaScript的定義變量格式
var 變量名; var 變量名 = 值; 復制代碼這里的typeof函數作用是得到參數的數據類型
補充 轉義字符
js中也與C語言或java語言一樣有轉義字符,如上圖常見的轉義字符?
補充 進制表示
與其他語言類似:
js中的十六進制數字 需要在數字前加上“0x”
八進制數字需要在數字前加上“0”
二進制數字需要在數字前加上“0b”(不常用)
補充 類型轉換
1. 其他數據類型轉成String
- 方式一
調用被轉換數據類型的toString()方法
該方法不會影響到原變量,它會將轉換的結果返回
但是注意:null和undefined這兩個值沒有toString()方法,如果調用toString則會報錯
- 方式二
調用String()函數,并且將被轉換的數據作為參數傳遞給函數
使用String()函數做類型轉換時:
對于Number和Boolean實際上就是調用的toString()方法
但是對于null和undefined,就不會調用toString()方法,它會將null和undefined直接轉換為“null”和“undefined”
方式二與方式一的區別即在于能否轉換null與undefined
2.其他數據類型轉成Number
- 方式一
使用 Number()函數進行轉換
---字符串--->>>----數字
1)如果是純數字的字符串,則直接將其轉換為數字
2)如果字符串中帶有非數字的內容,則轉換為 NaN
3)如果字符串是一個空串/一個全是空格的字符串 ,則會返回 0
布爾值--->數字
1)true轉成1
2)false轉成0
null轉成0
undefined轉成NaN
- 方式二
使用 parseInt()把一個字符串轉換為一個整數
使用parseFloat()把一個字符串轉換為一個浮點數
這種方式專門用于對付字符串,它們會將 到第一個非數字字符前的字符提取出來變成數字
如果對非字符串類型使用上述兩種方法
它會將其先轉換為String再進行操作
3.將其他數據類型轉換為Boolean
使用Boolean()函數進行轉換
1)數字-->布爾值? ?除了0和NaN,其余都是 true
2)字符串-->布爾值? 除了空串,其余都是true
3)null與undefined都會轉換為false
4)對象object也會轉換為true
補充 算術運算符
- 例如我們前面所使用的typeof就是運算符,它用來獲得一個值的類型,并且將該值的類型以字符串的形式返回
- 當對非Number類型的值進行運算時,會將這些值轉換為Number再進行運算,但是特殊的是:任何值與NaN做運算都得NaN
- 如果對存在字符串類型的元素進行運算時,會將兩個字符串拼接為一個字符串并返回,這點與java一樣
補充 一元運算符
+ 正號? ? ?正號不會對數字產生任何影響
- 負號 它可以對數字進行符號的取反
對于非Number類型的值使用該運算符,它會先將其轉換為Number然后再運算
借助這一點我們可以對一個其他的數據類型使用+來將其轉換為Number類型
原理與Number()一樣
補充 使用Unicode編碼
四、關系(比較)運算符
JavaScript的關系(比較)運算符與java基本一致,都有> >= < <= !=
需要注意的點是,關系運算符的比較中如果出現非數字的元素,則它會先將其轉換成Number再進行比較,特殊的是 任何值與 NaN作比較都是返回false
其次,如果符號兩側的值都是字符串時,不會再將其轉換成數字進行比較,而是直接比較字符串中字符的Unicode編碼
因此在比較字符串型的數字時一定要先進行轉型?
值得注意的是下面這兩個運算符
- 等于? ?==? ? ?等于是簡單地做字面值的比較
- 全等于? ===? ?全等于除了做字面值的比較外,還做數據類型的比較
同樣的,當使用== 或 !=?來比較兩個值時,如果值的類型不同,則會自動進行類型轉換,將其轉為相同的類型,然后再比較,一般是轉成Number
但是===不會進行類型轉換?
否定的全等是? !==
五、邏輯運算符
這里如果我們對非布爾值進行 取反運算 ,它會先將其轉換為布爾類型,然后再取反,因此我們可以利用該特點來將一個其他數據類型轉換為布爾類型,只需對其使用兩次取反!!
原理與Boolean()一樣
下面介紹的是非布爾類型的與或運算,這里是與之前所學的java不同的,要注意
補充 條件運算符(三元運算符)
與其他語言基本一致,這里不再贅述?
補充 代碼塊
補充 基本數據類型與引用數據類型
- 當我們比較兩個基本數據類型時,就是比較值
- 而比較兩個引用數據類型時,它是比較的對象的內存地址
- 如果兩個對象是一模一樣的,但是地址不同,它也會返回false
六、數組(Array)
1.構造函數創建數組
- 數組也是對象
- 它和普通對象功能類似也是用來存儲一些值的
- 不同的是普通對象是使用字符串作為屬性名的,而數組是使用數字作為索引操作元素
- 數組的存儲性能比普通對象要好,在開發中我們經常使用數組來存儲一些數據
也可以在創建數組時就初始化數組
?要注意的是,當傳入的參數只有一個的意思與上面不同時
與對象屬性的讀取一樣,如果讀取不存在的索引,不會報錯而是返回undefined,因為讀取的操作與創建的操作一樣,讀取相當于創建但是沒有賦值,所以返回undefined
對于連續的數組,我們可以使用length屬性來獲取數組長度
對于非連續的數組,使用length屬性會獲取到 最后一個元素的索引+1,因此盡量不要創建非連續數組
?此外,length屬性還可以被 設置/修改
2.數組字面量
這里只對JavaScript與java不同的地方進行強調
任意數據類型也包括 對象、函數?
- JavaScript的數組,只要我們通過數組下標進行賦值,那么最大的下標值,就會自動地給數組做擴容操作
- 數組的遍歷初始化時要使用var定義
? ? ? ? ?補充 forEach()遍歷
?通常來說,我們遍歷數組會采用for循環遍歷,除此之外,JS還為我們提供了一個forEach()用來遍歷數組(需要注意兼容性問題)
- forEach()方法需要一個函數作為參數(我們通常使用匿名函數作為參數)
- 傳入的參數/函數 會被瀏覽器自主調用,像這種由我們創建的,但是不由我們調用的函數我們稱為 回調函數
- 數組中有幾個元素,函數就會執行幾次,每次執行時,瀏覽器會將遍歷到的元素 以實參的形式傳遞進來,我們可以定義形參來讀取這些內容
瀏覽器會在回調函數中傳遞3個參數:
- 第一個參數,就是當前正在遍歷的元素
- 第二個參數,就是當前正在遍歷的元素索引
- 第三個參數就是當前正在遍歷的數組
3.Array對象常用方法
? ? ? ? 1)push?
? ? ? ? 2) pop
? ? ? ? 3) unshift
? ? ? ? 4) shift
? ? ? ? 5) 切片slice
傳遞負數時,-1代表倒數第一個,-2代表倒數第二個,以此類推
? ? ? ? 6)splice?
- 該方法可以用于刪除、替換、插入元素
- 使用splice()會影響到原數組,會將指定元素刪除、替換、插入,如果是刪除會將被刪除的元素返回
參數:
- 第一個參數,表示開始位置的索引
- 第二個參數,表示刪除的數量
- 第三個及以后,可以傳遞一些新的元素,這些元素將會自動插入到開始索引前面
? ? ? ? 7)concat
? ? ? ? ?8)? join
? ? ? ? 9) reverse?
? ? ? ? 10) sort
?
??
七、函數
補充 使用構成函數創建一個函數對象
1.使用function關鍵字定義函數
-
函數定義時如果有參數,我們無需寫類型,給出有多少個參數即可
-
函數若需要返回,直接使用return即可
-
JavaScript中不允許重載,如果寫了兩個一樣的函數那么第二個函數將覆蓋第一個函數的定義!!!
-
直接進行演示:
2.將函數賦給var
該種方式定義一個函數實際上就是 聲明了一個“匿名函數”同時將其賦給了一個變量?
3. 函數的隱形參數arguments(只在function函數內)
? ? ? ? 在調用函數時,瀏覽器每次都會傳遞進兩個隱含的參數:
隱形參數即 在function函數中不需要定義,但卻可以直接用來獲取所有參數的變量
- 隱形參數與java基礎的可變長參數一樣(public void fun(Object...args);),它實際上是一個類數組對象,因此對其操作類似操作數組
- arguments有一個屬性叫做 callee,這個屬性對應一個函數對象,就是當前正在執行的函數對象
下面進行演示(需求是編寫一個函數可以計算傳入參數之和)
這里沒有說明傳入有幾個參數,所以使用隱形參數
補充 立即執行函數(匿名函數的使用)
有時候我們會希望有一個函數在使用上只會被使用一次,使用過之后便不會再被使用,并且定義完后立即調用
這個時候我們就可以使用立即執行函數,實際上,我們如果直接將匿名函數寫出來的話,在語法上是無法通過的,我們需要給匿名函數加上一個括號括起來,這樣瀏覽器才會認為它是一個匿名函數,這樣我們便得到了匿名函數的對象,此時要想調用這個對象只需在這個對象的后面加上一個括號即可調用
補充 函數使用注意事項
- 在調用函數時解析器/瀏覽器不會檢查實參的類型與個數,因此我們通常需要在函數里檢查參數是否合法?
在開發中我們經常會使用到將一個匿名函數作為一個實參傳給一個函數如下
?此時我們需要注意以下兩種情況
補充 函數對象的方法call()與apply()
- call()和apply()這兩個方法都是函數對象的方法,都需要通過函數對象來調用
- 當對函數調用這兩個函數時,都會調用函數執行
- 在調用call()和apply()可以將一個對象指定為第一個參數,并且這個對象會成為函數執行時的this
- call()方法可以將實參在對象后依次傳遞(如果在指定完對象后,還需要傳參)
- apply()方法需要將實參封裝到一個數組中進行傳遞(如果在指定完對象后,還需要傳參)
八、自定義對象
對象屬于一種引用數據類型,在對象中可以保存多個不同數據類型的屬性
補充 對象的分類
1.object形式的自定義對象
值得注意的是,我們如果讀取對象中沒有的屬性,不會報錯而是會返回undefined?
2.花括號形式的自定義對象(對象字面量)
對象的刪除:?
??
注意冒號和逗號的使用
補充 對象的屬性名與屬性值
- 對象的屬性名不強制要求遵守標識符的規范,什么亂七八糟的名字都可以用,但是我們還是盡量遵守規范
這是訪問屬性的另外一種方式?
補充 in運算符
值得注意的是,使用in檢查對象中是否含有某個屬性時,如果對象中沒有但是原型中有,也會返回true
但是這樣的話我們使用in運算符就不能確定含有的屬性是不是在對象自身里面了
因此我們引出另外一個函數 hasOwnProperty("屬性名")? ?該方法只有在對象自身含有指定的屬性名時才會返回true
補充 利用for in枚舉對象中的屬性
補充 聲明提前
1.變量的聲明提前
如圖上面這段代碼中,我們在輸出a變量之前并沒有聲明a變量,此時理應代碼報錯,但是并沒有,就是因為變量的聲明提前機制簡單來說就是原來的代碼實際上相當于上圖這段代碼
2.函數的聲明提前
函數的聲明提前指的是函數的調用可以寫在函數的定義的前面
與變量的聲明提前同理?但是這里主要注意的是只有使用“函數聲明形式”創建的函數才會被聲明提前
而使用函數表達式創建的對象不會被函數聲明提前,而只會被變量聲明提前
補充 作用域
1.全局作用域
- 直接編寫在script標簽中的JS代碼,都在全局作用域內
- 全局作用域在頁面打開時創建,在頁面關閉時銷毀
- 在全局作用域中有一個全局對象window,它代表的是一個瀏覽器的窗口,它由瀏覽器創建,我們可以直接使用
- 在全局作用域內,創建的變量/函數都會作為window對象的屬性/方法保存
- 全局作用域中的變量都是全局變量,在頁面的任意部分都可以訪問得到
2.函數作用域
-
調用函數時創建函數作用域,函數執行完畢后,函數作用域銷毀
-
每調用一次函數都會創建一個新的函數作用域,它們之間是相互獨立的
-
在函數作用域中可以訪問到全局作用域的變量,反之不行
- 當在函數作用域中操作一個變量時,它會先在自身作用域中尋找,如果有就直接使用;如果沒有則向上一級作用域中尋找,直到找到全局作用域;如果全局作用域中依然沒有,則會報錯ReferenceError
- 在函數作用域中也有聲明提前的特性,即使用var關鍵字聲明的變量,會在函數中所有的代碼執行之前被聲明;函數聲明也會在函數中所有代碼執行之前執行(簡而言之就是函數作用域內同樣擁有變量聲明提前與函數聲明提前的機制)
- 在函數中,不使用var聲明的變量都會成為全局變量
- 定義形參就相當于在函數作用域用關鍵字var聲明了該形參
如上面兩圖的d實際上都是全局變量,效果一樣?
補充 構造函數
? ? ? ? ? 用于創建對象的函數我們稱之為構造函數
- 構造函數就是一個普通的函數,創建方式和普通函數沒有區別? ? ? ??
- 不同的是構造函數命名時 首字母習慣大寫
? ? ? ? ?構造函數的執行流程:
通常來說,使用同一個構造函數創建的對象,我們稱為一類對象,也將一個構造函數稱為一個類
我們將通過一個構造函數創建的對象,稱為是該類的實例
這里有一點值得注意的是,所有的對象都是Object的后代,所以任何對象和Object左instanceof檢查時都會返回true,這點與java相似
構造函數的方法優化
如上圖所示,我們創建了一個類里面含有一個方法sayName(),我們不難發現,每當我們創建一個新的實例的時候,它們其實都是不同的對象,也就是說構造函數每執行一次,都會創建新的sayName()方法,執行10000次就會有10000個新的方法,而且,這些方法所實現的內容其實是重復的,這樣來說其實是會比較占用我們的內存空間的
因此我們提出優化,我們將sayName()方法從“類”中提取出來,成為一個公共的函數
具體代碼實現如下:
但是,我們這么寫也存在一定的問題:
- 將函數定義在全局作用域內,污染了全局作用域的命名空間
- 函數定義在全局作用域內也不安全?
因此就引出我們下面學習的內容
補充 原型對象
? ? ? ? 我們所創建的每一個函數(任何函數),解析器都會向函數中添加一個屬性prototype,這個屬性對應著一個對象,這個對象就是我們所謂的原型對象
- 如果函數作為一個普通函數調用prototype沒有任何作用
- 當函數以構造函數的形式調用時,它所創建的實例/對象中都會有一個隱含的屬性,指向該構造函數的原型對象,我們可以通過__proto__來訪問該屬性
- 原型對象就相當于一個 公共區域,所有同一個“類”的實例都可以訪問到這個原型對象,我們可以將對象中 共有 的內容,統一設置到原型對象中(這里其實就類似其他語言的“繼承”)
- 當我們訪問對象的一個屬性或方法時,它會先在對象自身中尋找,如果有則直接使用;如果沒有則會去原型對象中尋找,如果找到則直接使用
以后我們創建構造函數時,可以將這些對象共有的屬性和方法,統一添加到構造函數的原型對象中,這樣不用分別為每個對象添加,也不會影響到全局作用域,就可以使得每個對象都具有這些屬性和方法了
下面是利用原型對象解決前面 構造函數方法優化 的問題
????????原型的原型
- 原型對象也是對象,因此它也有原型
- 當我們使用一個對象的屬性或方法時,會先在自身查找
- 自身中如果有,則直接使用
- 如果沒有則去原型對象中尋找,
- 如果原型對象中有則使用
- 如果沒有則去原型的原型中尋找,以此類推一直找到Object的原型對象,在通過Object的原型對象的原型最終指向的是null
__ proto __對象原型的意義是為對象成員查找機制提供一個方向,或者說是一條線路
優先使用對象身上的成員,就近原則
- Object對象的原型 沒有原型,如果Object原型中仍然沒有找到則返回undefined
? ? ? ?
? ? ? ? 原型鏈
prototype原型對象里面的__ proto __ 原型指向的是Object.prototype;
Object.prototype原型對象里面的__ proto __ 原型指向為null
- 只要是對象都會有一個原型__ proto __,指向原型對象prototype;
- 原型對象也有一個原型 __ proto __,指向Object原型對象prototype;
- Object的原型對象的原型 __ proto __指向為null
這里原型鏈的知識參考自?原型、原型對象和原型鏈_Mae_cpski的博客-CSDN博客?
補充 事件對象
- 當事件的響應函數被觸發時,瀏覽器每次都會把一個事件對象作為實參傳遞進響應函數,在事件對象中封裝了當前事件相關的一切信息,比如:鼠標的坐標、鍵盤哪個按鍵被按下、鼠標滾輪滾動的方向
要想得到某個事件的事件對象的話,我們只需定義形參將實參接收下即可使用
補充 事件的綁定(addEventListener() )
我們都知道當我們為同一個對象綁定同一個事件的多個響應函數時,如果我們使用對象.οnclick=function(){}會導致,最終綁定成功的只有我們最后定義的那個函數,前面的都被覆蓋了
通過addEventListener()這個方法也可以為事件綁定響應函數
參數
- 事件的字符串(注意不要"on")
- 回調函數,當事件觸發時該函數會被調用
- 是否在捕獲階段觸發事件(布爾值),通常傳false
使用addEventListener()可以同時為一個對象的相同事件綁定多個響應函數
這樣當事件被觸發時,響應函數將會按照函數的綁定順序執行
補充 包裝類
在JS中,JS為我們提供了三個包裝類,通過這三個包裝類可以將基本數據類型的數據轉化為對象
- String()
- 可以將基本數據類型字符串轉換為String對象
- Number()
- 可以將基本數據類型的數字轉換為Number對象
- Boolean()
- 可以將基本數據類型的布爾值轉換為Boolean對象
但是注意:
? ? ? ? 在實際開發中,我們并不會去使用基本數據類型的對象,如果使用基本數據類型的對象,在做一些比較時可能會帶來一些不可預期的結果(對象的比較 比較的是對象的地址)
????????那么它有什么用呢???
當我們對一些基本數據類型的值去調用屬性和方法時,瀏覽器會自動地 臨時使用包裝類將其轉換成對象,然后再調用對象的屬性和方法?,并且在調用完以后,再將其轉回基本數據類型
如圖,我們對基本數據類型的s變量調用了toString()方法,并沒有報錯
?如圖我們為基本數據類型的變量s添加了一個屬性hello,并且再訪問hello屬性,但是這里輸出的卻是undefined
這里的添加屬性hello 和 訪問屬性hello 實際上 瀏覽器臨時創建了兩個對象,因此在訪問屬性時和創建對象時的對象其實不是一個對象,因此返回undefined
補充 Date對象
- 在JS中我們經常使用Date對象來表示一個時間
- 如果我們直接使用構造函數創建一個Date對象,則會封裝為當前代碼執行的時間
- 我們也可以創建一個指定的時間對象,只需將我們要設定的時間作為參數傳遞給構造函數即可(注意格式)
常用Date對象方法?
????????1)getDate()
獲取當前日期對象是幾日
? ? ? ? 2)getDay()
獲取當前日期對象是星期幾(返回0~6的值,其中0表示周日)? ? ? ??
? ? ? ? 3)getMonth()
獲取當前日期對象是幾月(返回0~11的值,其中0表示1月)
? ? ? ? 4)getFullYear()
獲取當前日期對象的年份
? ? ? ? 5)各種get時分秒?
? ? ? ? 6)getTime()
- 獲取當前日期對象的時間戳
- 時間戳是指從格林威治標準時間的1970年1月1日,0時0分0秒到當前日期所花費的毫秒數
補充 Math對象
- ? Math和其他的對象不同,它不是一個構造函數,它是一個“工具類”,我們無需創建對象即可使用,它里面封裝了和數學運算相關的屬性和方法
屬性如下:
?常用方法如下:
? ? ? ? 1)abs()
可以用來計算一個數的絕對值
? ? ? ? 2)ceil()
可以對一個數進行向上取整
? ? ? ? 3)floor()
可以對一個數進行向下取整
? ? ? ? 4)round()
可以對一個數進行 四舍五入取整
? ? ? ? 5)random()
可以隨機生成一個0~1的隨機數(不包含0和1)
? ? ? ? 6)max()
可以獲取多個數中的最大值
? ? ? ? 7)min()
可以獲取多個數中的最小值
? ? ? 8)pow(x,y)
可以返回x的y次冪
? ? ?9)sqrt()
可以對一個數進行開方運算
補充 字符串對象
? ? ? ? 值得強調的是,字符串在底層是以 字符數組 的形式保存的,即類似[ 'H' , 'E' , 'L' , 'L' , 'O' ]這樣,那么既然字符串的底層是 數組 的話,字符串也擁有數組的屬性length用于得到 字符串長度,其次,也可以通過 數組名[下標] 來訪問字符串中的字符
字符串的常用方法:
? ? ? ? 1)charAt()
- 可以返回字符串中指定位置的字符
- 根據索引獲取指定的字符(效果與使用[ ]一樣)
? ? ? ? 2)charCodeAt()
- 獲取指定位置字符的字符編碼(Unicode編碼)
? ? ? ? 3)fromCharCode()
- 可以根據字符編碼去獲取字符,與上面的方法不同的是,該方法是屬于構造函數對象String的
? ? ? ? 4)concat()
- 可以用來連接兩個或多個字符串(作用和+號一樣)
? ? ? ? 5)indexOf()????????
- 該方法可以檢索一個字符串是否含有指定內容
- 如果字符串含有該內容,則會返回其第一次出現的索引
- 如果沒有找到則返回-1
- 除了傳入要查找的內容作為參數外,還可以傳入第二個參數代表從哪個字符開始往后找
? ? ? ? 6)lastIndexOf()
- 該方法的用法與indexOf()一樣,不同的是indexOf()是從前往后找,而lastIndexOf()是從后往前找,它也可以指定開始查找的位置? ? ? ? ?
? ? ? ? 7)slice()
- 該方法可以從字符串中截取指定的內容,并且不會影響原字符串,而是將截取內容返回
參數:
- ? ? ? ? 第一個,開始的索引(包括開始位置)
- ? ? ? ? 第二個,結束的索引(不包括結束位置,該參數可以省略,省略后則截取到開始索引后面全部)
- ? ? ? ? 也可以傳遞一個負數作為參數,負數的或會從后往前計算
? ? ? ? 8)substring()
該方法與slice()基本一樣,這里只強調它們的不同點:
- substring()不能接收負值作為參數,如果傳遞了一個負值給substring(),它會自動將其處理為0
- substring()會自動調整參數的位置使參數從小到大
? ? ? ? 9)split()
該方法與數組中的方法join()作用一樣
可以將一個字符串拆分為一個數組
? ? ? ? 參數:
需要一個字符串作為參數,將會根據該字符串去拆分數組(如果傳入一個空串,則將每個字符都拆分為數組中的一個元素)
? ? ? ? 10)toUpperCase()
將一個字符串全部字符轉換成大寫后返回
????????11)toLowerCase()
將一個字符串全部字符轉換成小寫后返回
補充 this
? ? 當解析器/瀏覽器在調用函數時,每次都會向函數內部傳遞進一個隱含的參數,這個隱含的參數就是this,this指向的是一個對象
- 這個對象我們稱為函數執行的 上下文對象
- 根據函數的調用方式不同,this會指向不同的對象
- ?以函數的形式調用時,this永遠都指向window對象
- ?以方法的形式調用時,this指向調用方法的那個對象
- 當以構造函數的形式調用時,this指向的就是構造函數那個新創建的對象
- 使用call和apply調用時,this是那個指定的對象
補充 toString()“重寫”
我們發現當我們直接對alert函數內傳入一個對象的時候,常常輸出的是“[object Object]”
- 實際上這是輸出了對象的toString()方法的返回值
- 如果我們希望在輸出對象時不輸出“[object Object]”,可以為對象添加一個toString方法
?細心的同學可能會注意到這不就是方法重寫嗎,實際上在js中并沒有重寫這個概念
補充 垃圾回收機制(GC)
-
實際上就像人的生活時間長了會產生垃圾一樣,程序在運行過程中也會產生垃圾,這些垃圾積攢過多之后,會導致程序運行的速度變慢,因此我們需要一個垃圾回收的機制,來處理程序運行過程中產生的垃圾
首先我們需要明確在程序中,什么樣的“東西”才算是垃圾
- 當一個對象沒有任何的變量/屬性對它進行引用,此時我們將永遠無法操作該對象,這種對象就是垃圾,這種對象過多就會占用大量的內存空間,導致程序運行變慢
?事實上,JS中擁有自動的垃圾回收機制,會自動的將這些垃圾對象從內存中銷毀,我們不需要也不能進行垃圾回收的操作,我們需要做的只是將不再使用的對象設置為null即可
九、js中的事件
什么是事件?事件是電腦輸入設備與頁面進行交互的響應,我們稱之為事件
常用的事件如下:
-
onload加載完成事件;? ? ? 頁面加載完成后,常用于做頁面js代碼初始化操作
-
onclick單擊事件;? ? ? ? ? ? ?常用于按鈕的點擊響應操作
-
onblur失去焦點事件;? ? ? ?常用于輸入框失去焦點后驗證其輸入內容是否合法
-
onchange內容發生改變事件;? ? ? 常用于下拉列表與輸入框內容發生改變后操作
-
onsubmit表單提交事件;? ? ?常用于表單提交前,驗證所有表單項是否合法
1.事件的注冊(綁定)
什么是事件的注冊(綁定)?
其實就是告訴瀏覽器,當事件響應后要執行哪些操作代碼,叫事件注冊或事件綁定
而事件的注冊(綁定)又分為靜態注冊或動態注冊
1.1事件的靜態注冊
- 通過HTML標簽的事件屬性直接賦予事件響應后的代碼,這種方式我們叫靜態注冊
1.2事件的動態注冊
- 是指先通過js代碼得到標簽的dom對象,然后再通過 對象.事件名 = function(){}
這種形式賦予事件響應后的代碼,叫動態注冊
動態注冊的基本步驟如下:
1)獲取標簽對象
2)標簽對象.對象名=function(){}
2. onload事件
- onload通常寫在body標簽上
3. onclick事件
4. onblur事件
效果如下:
5.onchange事件
6.onsubmit事件
值得注意的是在靜態注冊時我們在調用函數前需要有一個return
補充 7. 滾輪事件
滾輪事件 :根據MDN上給出的解釋就是:當滾動鼠標滾輪或操作其它類似輸入設備時會觸發滾輪事件。
也就是說滾輪事件不單單指鼠標滾輪,也包括其他可以出發滾輪事件的設備,比如說電腦觸控板等都是可以觸發滾輪事件的。所以這里的標題實際不是特別的正確,不應該只界定在鼠標觸發的滾輪事件。
在MDN上同樣還有對滾輪事件的注意事項:
滾輪事件的可使用場景(個人見解)
不同瀏覽器平臺滾輪事件的差異:
滾輪事件主要有三種類型,分別是:?wheel(各個廠商的高版本瀏覽器都支持),?mousewheel(不支持火狐),?DOMMouseScroll(該事件需要使用addEventListener綁定,可以特別地支持低版本火狐)?
雖然在MDN中也有說mousewheel已經被棄用了,主要使用的是wheel,但是為了兼容低版本瀏覽器,還是需要添加上去。在低版本的firefox瀏覽器中,其也不支持wheel,所以還需要添加DOMMouseScroll已達到兼容的目的。
同時,各個不同的瀏覽器平臺對于滾輪事件的上下移動的判定使用的參數是完全不同的,有的是使用wheelDelta,有的則是使用detail的,并通過他們的正負來判斷其滾動的方向的,下面是我在網上找到的一張圖,可以從這張圖上看出當前使用比較多的瀏覽器上是通過什么判斷的(可忽略IE)
從上表可以看出,deltaY一個可以判斷滾輪的方向是向上還是向下(正值向下滾動,負值向上滾動)。這里的H取得是document.body.clientHeight || window.innerHeight。n是滾動的行數。一般來說n默認的是3行。
通過分析可以得出以下結論:
上述有關滾輪事件的筆記來自鼠標滾輪事件的學習與總結 - 掘金 (juejin.cn)
補充:當滾輪滾動時,如果瀏覽器有滾動條,我們滾動事件觸發時可能導致滾動條隨之滾動,這是瀏覽器的默認行為,如果不希望發生,則需要取消默認行為
- return false
- 使用addEventListener()綁定的事件需要使用 事件對象.preventDefault() 來取消默認行為
????????
? ? ? ? 補充 onscroll Vs onwheel
onwheel 事件在鼠標滾輪在元素上下滾動時觸發。同樣可以在觸摸板上滾動或放大縮小區域時觸發(如筆記本上的觸摸板)。
onscroll 事件在元素滾動條在滾動時觸發。滾動條必須存在,否則不會觸發。無論以那種方式,只要滾動條滾動,事件都會觸發。觸發方式:鼠標滾輪,鼠標拖動,鍵盤上下鍵,或者設置的滾動函數,如 scrollTo,scrollBy,scrollByLines, scrollByPages。
當鼠標滾輪滾動時,onwheel事件先被觸發,若滾動條滾動,則onscroll事件會相繼被觸發。
?
補充 8.鍵盤事件
鍵盤事件主要有:onkeydown(按鍵被按下),onkeyup(按鍵被松開)
此外,鍵盤事件一般都會綁定給一些可以獲取到焦點的對象(例如文本框)或者是document
對于onkeydown來說:
- 如果一直按著一個鍵不放,則事件會一直觸發
- 當onkeydown事件連續觸發時,第一次和第二次之間的時間間隔會稍微長一點,其他時候會非常快,這種設計是為了防止誤操作
一般來說我們使用鍵盤事件重點是獲取用戶按下的是什么
可以通過keyCode()來獲取按鍵的編碼(可能未來會過時)
這里還有使用 事件對象.key來得到按下的內容
除此之外,鍵盤事件對象還提供了幾個屬性:
- altkey
- ctrlkey
- shiftkey
這些屬性可以用來判斷alt、ctrl、shift是否被按下,如果按下則返回true,反之返回false
值得注意的是,在文本框中輸入內容,屬于onkeydown的默認行為,如果取消了默認行為,則在文本框中不會出現輸入的內容
補充 事件的冒泡
? ? ? ? 所謂的事件的冒泡 指的就是事件的向上傳導,當后代元素上的事件被觸發時,其祖先上元素的相同事件也會被觸發
? ? ? ? 在開發中,大部分情況下冒泡都是有用的,如果不希望發生冒泡可以通過事件對象來取消冒泡
補充? 事件的委派(冒泡的應用)
有時候我們會希望為多個對象綁定同一種事件,前面的學習中,我們使用了for循環+this綁定事件 的方法來實現,但是這樣會存在一個問題:該方法只能為已有的對象綁定事件,而新添加的對象必須重新綁定
我們希望的是:只綁定一次事件,即可應用到多個元素上,即使元素是后添加的
這里我們可以 將其事件綁定給元素的共同祖先元素
這里我們便得到了事件的委托的概念:
- 指將事件統一綁定給元素共同的祖先元素,這樣當后代元素上的事件觸發時,會一直冒泡到祖先元素,從而將祖先元素的響應函數來處理了事件
- 事件委派是利用了事件冒泡,通過委派可以減少事件綁定的次數,提高程序的性能
不過事件委派也會帶來一定的問題,例如可能導致當 觸發事件的對象 與 我們期望的 不同時也會得到響應,此時我們需要在 響應函數內 對 觸發事件的對象 進行判斷(利用 事件對象中的target屬性,它表示觸發事件的對象)
補充 事件的傳播
事件的傳播分為三個階段:
- 捕獲階段
- 在捕獲階段時從最外層的祖先元素,向目標元素進行事件的捕獲,但是默認此時不會觸發事件
- 目標階段
- 事件捕獲到目標元素,捕獲結束開始在目標元素上觸發事件
- 冒泡階段
- 事件從目標元素向它的祖先元素傳遞,依次觸發祖先元素上的事件
如果希望在捕獲階段就觸發事件,可以將addEventListener()的第三個參數設置為true(則不會在冒泡階段觸發事件了)
一般情況下我們不會希望在捕獲階段觸發事件,所以這個參數一般都是false?
十、DOM模型
?DOM全稱 Document Object Model 文檔對象模型
提示:Document 對象是 Window 對象的一部分,可通過 window.document 屬性對其進行訪問
- ?[window對象]
- 它是一個頂層對象,而不是另一個對象的屬性,即瀏覽器的窗口
- [document 對象]
- 該對象是window和frames對象的一個屬性,是顯示于窗口或框架內的一個文檔
- 文檔——表示的就是整個html網頁頁面
- 對象——表示將網頁中的每一個部分都轉換為了一個對象
- 模型——表示對象之間的關系,這樣分別我們獲取對象
JS中通過DOM來對HTML文檔進行操作,只要理解了DOM就可以隨心所欲地操作WEB頁面
簡而言之就是 我們把文檔(即一個html頁面)中的標簽、屬性、文本轉換成對象來管理
補充 節點
????????Document對象及其方法/屬性(document表示整個html頁面)
理解:
- Document管理了所有的html文檔內容
- Document是一種樹狀結構的文檔,有層級關系
- 它讓我們把所有的標簽都 對象化
- 我們可以通過Document訪問所有的標簽對象
例如下面這個例子演示對象化:
1.getElementById方法
我們直接通過案例進行演示:
需求:當用戶點擊“校驗”按鈕時,獲取輸入框的內容,驗證其是否合法(規則是由字母或數字或下劃線組成且長度為5—12)
這里使用到了正則表達式(可參考JavaScript RegExp 對象)
下面是另外兩種常見的驗證提示
注意這里的innerHTML是我們所得到的dom對象的一個屬性,該屬性可讀可寫
2.getElementsByName方法
依舊直接看案例
我們這里希望實現如下三個功能:
這里的我們得到的dom對象同樣是可以操作對應標簽的屬性如checked屬性
且得到的集合的操作與數組一樣,集合中都是dom對象,元素順序是它們在html頁面中從上到下的順序
3.getElementsByTagName方法
該方法與方法3大同小異,只是該方法利用的是標簽名來確定得到哪些dom對象而已
????????.三種查詢方法的使用注意事項
? ? ? ? 補充getElementsByClassName()
?????????補充querySelector()
? ? ? ? 補充querySelectorAll()
4. createElement方法與appendChild方法
下面我們進行演示(需求是使用js為body標簽添加一個子節點div標簽)
注意:這里我們必須使用window.οnlοad=function(){}保證里面代碼在頁面加載完成后再執行,否則會出現body對象為空的錯誤
????????
????????獲取元素節點的子節點
注意分辨是 屬性 還是 方法?
如果獲取的是子節點的話,DOM標簽與標簽間空白也會被當做 節點
這里補充一下以下幾個屬性:
- children屬性可以獲取當前元素的所有子元素(注意這里是子元素而不是節點了)
- firstElementChild屬性可以獲取當前元素的第一個元素
- lastElementChild屬性可以獲取當前元素的最后一個元素
????????獲取元素節點的父節點和兄弟節點
?這里也是補充以下這些屬性:
- previousElementSibling獲取前一個兄弟元素(不包括空白文本)
- nextElementSibling獲取下一個兄弟元素(不包括空白文本)
? ? ? ? 補充 document的常用屬性
????????1)body?
? ? ? ? ?2)documentElement
????????
? ? ? ? DOM的增刪改
1)createElement()
2) createTextNode()
3) appendChild()
?4) insertBefore()
? 5) replaceChild()
?6) removeChild()
? 事實上,如果使用innerHTML屬性也可以 實現DOM的增刪改,但一般我們都是兩種方式結合著使用,例如在添加文本時直接使用innerText即可
補充 for循環與事件綁定帶來的問題
如圖我們希望為allA數組中的每一個元素綁定一個單擊事件,這時會帶來一個時間差的問題
我們的單擊事件是在用戶單擊時才會執行,但是for循環在頁面加載完成后就會執行了,則for循環的循環變量? i? ,在單擊事件響應時則已經變成了allA.length,所以我們此時在事件中最好不要再使用該循環變量,而是使用this?
??
? 前面我們都是利用DOM來操作文檔中的元素/標簽,下面我們介紹如何
使用DOM來操作樣式:
????????1)修改/查詢內聯樣式
注意這里的 樣式值 應該是一個 字符串類型?
?注意,上述通過style屬性操作的樣式 只是 內聯樣式,對樣式表中的樣式無效
? ? ? ? 2)獲取元素當前的樣式(查詢)
該方法只能用于查詢對象,而不能修改對象
該方法有個值得注意的問題是:
?如上:為什么我們不是直接return一個getComputedStyle(obj , null).name而是使用【name】呢?
? ? ? ? 因為如果.name此時形參傳入的值是一個字符串的話,那就寫死了,因為name是變量,使用中括號會更為嚴謹,不用如果,name可能就是關鍵字,有些元素有name這個屬性,.name肯定讀name這個屬性
? ? ? ? 下面介紹其他樣式相關的屬性:
1)clientWidth和clientHeight
2) offsetWidth和offsetHeight
3)offsetParent()
- 可以用來獲取當前元素的定位父元素
- 會獲取到離當前元素最近的開啟了定位的祖先元素(如果所有的祖先元素都沒有開啟定位,則返回body)
4)offsetLeft()與offsetTop()
- offsetLeft()獲取當前元素相對于其 定位父元素 的水平偏移量
- offsetTop()獲取當前元素相對于其 定位父元素 的垂直偏移量
值得注意的是該兩個屬性都是 只讀的 !
5)scrollWidth()與scrollHeight()
? ? ? ? 它們可以獲取元素整個滾動區域的寬度與高度
6) scrollLeft()與scrollTop()
? ? ? ? 它們可以分別獲取 水平滾動條滾動的距離 和 垂直滾動條滾動的距離
? ? ? ? 值得注意的兩個條件是:
- 當滿足scrollHeight(整個滾動頁面高度)-scrollTop(滾動條滾動上下距離) == clientHeight(當前可見高度) 時,說明滾動條滾動到底了
- 當滿足scrollWidth(整個滾動頁面寬度)- scrollLeft(滾動條滾動左右距離) == clientWidth(當前可見距離)時,說明滾動條滾動到底了
但是,在實際使用中,我發現 使用 scrollTop 屬性時存在問題:精度問題
即scrollTop的返回值經常是一個小數,此時會導致我們上面在判斷是否滾動到底時等式無法成立?
具體原因讀者可參考?為什么Chrome的document.body.scrollTop可以是小數 - JoyNop
最后的解決方案是使用式子?
box1obj.scrollHeight-box1obj.scrollTop-box1obj.clientHeight<1?代替原來的等式
十一、BOM(瀏覽器對象模型)
11.1 基本介紹
? ? ? ? BOM直譯過來即 瀏覽器對象模型,我們前面所學的DOM可以使我們通過JS來操作文檔/網頁,所以DOM叫做文檔對象模型,而BOM可以使我們通過JS來操作瀏覽器,所以叫做瀏覽器對象模型
? ? ? ? 在BOM中,它為我們提供了一組對象,用來完成對瀏覽器的操作
11.2 BOM對象概況
1)Window
- 代表的是整個瀏覽器的窗口,同時window也是網頁中的全局對象
2)Navigator
- 代表當前瀏覽器的信息,通過該對象可以識別不同的瀏覽器
3)Location
- 代表當前瀏覽器的地址欄信息,通過Location可以獲取地址欄信息,或者操作瀏覽器跳轉頁面
4)History
- 代表瀏覽器的歷史記錄,可以通過該對象來操作瀏覽器的歷史記錄(由于隱私原因,該對象不能獲取到具體的歷史記錄,只能操作瀏覽器向前或者向后翻頁,并且該操作只在當次有效)
5)Screen
- 代表用戶的屏幕信息,通過該對象可以獲取到用戶的顯示器的相關信息
注意: 這些BOM對象在瀏覽器中都是作為window對象的屬性保存的,因此可以通過window.BOM對象 來使用它們(由于window是全局的,也可以省略window)
11.1 Navigator
? ? ? ? 由于歷史原因,Navigator對象中的大部分屬性都已經不能幫助我們識別瀏覽器了
- 一般我們會使用userAgent屬性來判斷瀏覽器的信息
????????userAgent是一個字符串,這個字符串中包含有用來描述瀏覽器信息的內容,即不同的瀏覽器會有不同的userAgent
- 如果通過userAgent不能判斷,還可以通過一些瀏覽器中特有的對象,來判斷瀏覽器的信息
11.2 History
? 常用屬性/方法如下:
1)length
- 可以獲取到當前訪問的鏈接數量
2)back()
- 可以用來回退到上一個頁面,作用和瀏覽器的回退按鈕一樣
3)forward()
- 可以用來跳轉到下一個頁面,作用和瀏覽器的前進按鈕一樣
4)go()
? ? ? ? 它可以用來跳轉到指定的頁面
? ? ? ? 它需要一個整數作為參數
- 1:表示向前跳轉一個頁面,相當于一個forward
- 2:表示向前跳轉兩個頁面
- -1:表示向后跳轉一個頁面,相當于一個back
- -2:表示向后跳轉兩個頁面
11.3 Location
? ? ? ? 該對象中封裝了瀏覽器的地址欄信息
- ? ? ? ? 如果我們直接打印location,則可以獲取到地址欄的信息(當前頁面的完整的路徑)
- ? ? ? ? 如果我們直接將location屬性修改為一個完整的路徑/相對路徑,則我們頁面會自動跳轉到,且會生成相應的歷史記錄
? ? ? ? 常用方法如下:
????????1)assign()
用來跳轉到其他的頁面,作用和直接修改location的值一樣
????????2)reload()
用于重新加載當前頁面,作用與刷新按鈕一樣
如果在方法中傳遞一個true,作為參數,則會強制清空緩存刷新
????????3)replace()
?可以使用一個新的頁面替換當前頁面,調用完畢后也會跳轉頁面,但是與assign()和直接修改location的值 不同的是,replace()不會生成歷史記錄,即不能回退
十二、定時器
常用方法如下:
1)setInterval()(定時調用)
- 使用該方法可以實現 定時調用 的功能
- 可以將一個函數,每個一段時間調用一次
參數:
- 回調函數,該函數會每隔一段時間調用一次
- 每次調用間隔的時間,單位是毫秒
返回值:
- 返回一個Number類型的數據
- 該返回值是定時器的唯一標識(例如在一段代碼中,我們開啟了兩個定時器,則它們的返回值分別是1、2,即它們被稱為“1號定時器”、“2號定時器”)
值得注意的問題是:
我們在給一個元素開啟定時器之前,需要將當前元素上的其他定時器關閉
2)clearInterval()
- 該方法可以用來關閉一個定時器,方法中需要一個定時器的標識作為參數,這樣將關閉標識數 對應的定時器
- clearInterval()可以接收任意的參數,如果參數是一個有效的定時器的標識,則停止對應的定時器,反之什么都不做
3)setTimeout()(延時調用)
- 該方法的用法參考setInterval的用法
- 延時調用一個函數不會立馬執行,而是隔一段時間之后再執行,而且只會執行一次
4)clearTimeout()
- 該方法與clearInterval相似,與setTimeout是一對
- 可以使用該方法來關閉一個延時調用
十三、類的操作
1. 修改元素樣式
前面的學習中,我們學習了在JS代碼中,使用style屬性修改元素的樣式
實際上,利用這種方式修改元素的樣式,代碼執行的性能是比較差的,因為每當我們修改一個樣式,瀏覽器就需要重新渲染一次頁面,而且這種形式在我們需要修改多個樣式時也不太方便
我們可以通過修改元素的class屬性來間接地修改樣式
- 我們可以只修改一次,即可同時修改多個樣式
- 瀏覽器只需要重新渲染一次,性能較好
- 而且該種方式可以使表現(CSS)與行為(JS)進一步地分離
十四、JSON
我們在進行開發的時候,會有前端與后端交互的需求,此時JS如果需要將某些對象傳遞給服務器,就會出現語言識別的問題
- JS的對象只有JS自己認識,其他的語言都不認識
- JSON就是一個特殊格式的字符串,這個字符串可以被任意的語言所識別,并且可以轉換為任意語言的對象,JSON在開發中主要用于數據的交互? ??
?JSON全稱JavaScript Object Notation即JavaScript對象表示法
JSON和JS對象的格式一樣,只不過JSON字符串中的屬性名必須加雙引號,其他的和JS語法一致
JSON分類:
JSON中允許的值:
將JSON字符串轉換為JS中的對象
在JS中,JS為我們提供了一個工具類JSON?
這個工具類可以幫助我們將一個JSON轉換為JS對象,也可以將一個JS對象轉換為JSON
????????JSON工具類常用屬性及方法:
1)JSON.parse()
- 它可以將一個JSON字符串轉化為js對象
- 它需要一個JSON字符串作為參數,會將該字符串轉換為js對象后返回
2)JSON.stringify()
- 可以將一個JS對象轉換為JSON對象
- 需要一個JS對象作為參數,會返回一個JSON對象
總結
以上是生活随笔為你收集整理的万字长文详解JavaScript(JavaScript从入门到精通)(持续更新)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 硬件知识:电脑硬盘的数据保护与恢复,新手
- 下一篇: REST Assured 55 - JS