目錄：

　　?typeof,?null, undefined, valueOf()

　　類型轉換

　　正則表達式

　　錯誤： try, catch, throw

　　調試工具

　　變量提升

　　strict 嚴格模式

　　使用誤區

　　表單 & 表單驗證

　　JavaScript void

?

?typeof,?null, undefined, valueOf()

• typeof：用于檢測變量的數據類型，eg： typeof "John"; // 返回 string
  在 JavaScript 中有 5 種不同的數據類型：string, number, boolean, object, function
  3 種對象類型： Object, Date, Array
  2 個不包含任何值的數據類型：null, undefined
  
  強調:
  • NaN 的數據類型是 number
  • 數組(Array)的數據類型是 object，?在JavaScript中，數組是一種特殊的對象類型。因此 typeof [1,2,3,4] 返回 object。
  • 日期(Date)的數據類型為 object
  • null 的數據類型是 object
  • 未定義變量的數據類型為 undefined
  • 如果對象是 JavaScript Array 或 JavaScript Date ，我們就無法通過?typeof?來判斷他們的類型，因為都是 返回 Object。此時需用使用 constructor ?屬性

constructor 屬性：返回所有 JavaScript 變量的構造函數。實例：

"John".constructor // 返回函數 String() { [native code] }
(3.14).constructor // 返回函數 Number() { [native code] }
false.constructor // 返回函數 Boolean() { [native code] }
[1,2,3,4].constructor // 返回函數 Array() { [native code] }
{name:'John', age:34}.constructor // 返回函數 Object() { [native code] }
new Date().constructor // 返回函數 Date() { [native code] }
function () {}.constructor // 返回函數 Function(){ [native code] }

可以使用 constructor 屬性來查看是對象是否為數組 (包含字符串 "Array") ，日期 (包含字符串 "Date"):

function isArray(myArray) { # 是否為數組 (包含字符串 "Array")return myArray.constructor.toString().indexOf("Array") > -1; }
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(isArray(fruits)); # true
function isDate(myDate) { # 是否為日期 (包含字符串 "Date")return myDate.constructor.toString().indexOf("Date") > -1; }
isDate(new Date()); # true

?

• null：在 JavaScript 中表示 "什么都沒有"。null 是一個只有一個值的特殊類型，表示一個空對象（Object）引用。eg： var person; // 值為 null(空), 但仍然是一個對象。 用 typeof 檢測 null 返回是object。

可用于清空對象，eg：

var person = null; // 值為 null(空), 但類型為對象 # 對比 使用 undefined 來清空對象: var person = undefined; // 值為 undefined, 類型為 undefined

• undefined：在 JavaScript 中,?undefined?是一個沒有設置值的變量。?一個沒有值的變量會返回?undefined。任何變量都可以通過設置值為?undefined?來清空。 類型為?undefined.
• Undefined 和 Null 的區別 typeof undefined // undefined typeof null // object null === undefined // false null == undefined // true
• valueOf()：是數組對象的默認方法，返回 Array 對象的原始值，該原始值由 Array 對象派生的所有對象繼承。eg： var fruits = ["Banana", "Orange", "Apple", "Mango"]; var v=fruits.valueOf();# fruits.valueOf() 與 fruits 返回值一樣。 # 輸出結果為： Banana,Orange,Apple,Mango

  valueOf() 方法通常由 JavaScript 在后臺自動調用，并不顯式地出現在代碼中。?

　　 ?注意：valueOf() 方法不會改變原數組。

類型轉換：

• 通過使用 JavaScript 函數 5 + null // 返回 5 null 轉換為 0 "5" + null // 返回"5null" null 轉換為 "null" "5" + 1 // 返回 "51" 1 轉換為 "1" "5" - 1 // 返回 4 "5" 轉換為 5
  .........
• 通過 JavaScript 自身自動轉換 String(): 可將 數字/布爾值/時間... 轉換為字符串，eg：String(123); String(false); //返回 "false" toString(): Number/Boolean/Date() 方法 toString() 也是有同樣的效果。eg: (123).toString; false.toString(); ? ? Number 方法中，其他可將數字轉換為字符串的方法：

  toExponential()	把對象的值轉換為指數計數法。
  toFixed()	把數字轉換為字符串，結果的小數點后有指定位數的數字。
  toPrecision()	把數字格式化為指定的長度。

  　　Date 方法中，其他可將日期轉換為字符串的函數：

  getDate()	從 Date 對象返回一個月中的某一天 (1 ~ 31)。
  getDay()	從 Date 對象返回一周中的某一天 (0 ~ 6)。
  getFullYear()	從 Date 對象以四位數字返回年份。
  getHours()	返回 Date 對象的小時 (0 ~ 23)。
  getMilliseconds()	返回 Date 對象的毫秒(0 ~ 999)。
  getMinutes()	返回 Date 對象的分鐘 (0 ~ 59)。
  getMonth()	從 Date 對象返回月份 (0 ~ 11)。
  getSeconds()	返回 Date 對象的秒數 (0 ~ 59)。
  getTime()	返回 1970 年 1 月 1 日至今的毫秒數。

  Number(): 可將字符串/布爾值/日期/...轉換為數字，eg：Number(false); //返回0 ?

  ? ? eg2: Number(new Date()); //返回 Unix 時間戳,?日期方法?getTime()?也有相同的效果,使用 (new Date()).getTime();

  ? ? ?Number 方法中，其他字符串轉換為數字的方法：

  parseFloat()	解析一個字符串，并返回一個浮點數。
  parseInt()	解析一個字符串，并返回一個整數。

  Operator +：?可用于將變量轉換為數字， eg：var?x = +"5";??????// x 是一個數字

正則表達式：使用單個字符串來描述、匹配一系列符合某個句法規則的字符串搜索模式，用于文本搜索search()和文本替換replace()。

• search() 方法：用于檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串，并返回子串的起始位置。

• replace() 方法：用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。

正則表達式表單驗證實例：

/*是否帶有小數*/
function isDecimal(strValue ) {
　　var objRegExp= /^\d+\.\d+$/；
　　return objRegExp.test(strValue);
}

/*校驗是否中文名稱組成 */
function ischina(str) {
　　var reg=/^[\u4E00-\u9FA5]{2,4}$/; /*定義驗證表達式*/
　　return reg.test(str); /*進行驗證*/
} /*校驗是否全由8位數字組成 */ function isStudentNo(str) {var reg=/^[0-9]{8}$/; /*定義驗證表達式*/return reg.test(str); /*進行驗證*/ }/*校驗電話碼格式 */ function isTelCode(str) {var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;return reg.test(str); }/*校驗郵件地址是否合法 */ function IsEmail(str) {var reg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;return reg.test(str); }

?

錯誤：throw, try, catch

• try?語句測試代碼塊的錯誤。

• catch?語句處理錯誤。?JavaScript 語句?try?和?catch?是成對出現的，catch 塊會捕捉到 try 塊中的錯誤，并執行代碼來處理它。

  var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err) { txt="本頁有一個錯誤。\n\n"; txt+="錯誤描述：" + err.message + "\n\n"; txt+="點擊確定繼續。\n\n"; alert(txt); } } message();

• throw?語句創建或拋出異常(exception)。

?

?調試工具：

• 瀏覽器啟用調試工具一般是按下 F12 鍵，并在調試菜單中選擇 "Console" 。
• console.log();
• IDE 設置斷點 或者 代碼設置(使用 Debugger 關鍵字,用于停止執行 JavaScript，并調用調試函數),eg: var x = 15 * 5; debugger; document.getElementbyId("demo").innerHTML = x; # 代碼在該行前停止執行

  ?

變量提升：函數聲明和變量聲明總是會被解釋器悄悄地被"提升"到方法體的最頂部。

• JavaScript 中，函數及變量的聲明都將被提升到函數的最頂部。

• JavaScript 中，變量可以在使用后聲明，也就是變量可以先使用再聲明。
• JavaScript 只有聲明的變量會提升，初始化的不會。eg： var x = 5; // 初始化 xelem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x + " " + y; // 顯示 x 和 y， 結果為： 5 undefined； y 輸出了 undefined var y = 7; // 初始化 y

  實例結果：y 輸出了?undefined，這是因為變量聲明 (var y) 提升了，但是初始化(y = 7) 并不會提升，所以 y 變量是一個未定義的變量。其類似以下代碼：

  var x = 5; // 聲明 并 初始化 x var y; // 聲明 yelem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x + " " + y; // 顯示 x 和 yy = 7; // 設置 y 為 7
• 為了避免這些問題，通常我們在每個作用域開始前聲明這些變量，這也是正常的 JavaScript 解析步驟，易于我們理解。JavaScript 嚴格模式(strict mode)不允許使用未聲明的變量。

?

JavaScript 嚴格模式(use strict)：

• 嚴格模式通過在腳本 或 函數的頭部添加?"use strict";?表達式來聲明。eg： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><h1>使用 "use strict":</h1> <h3>不允許使用未定義的變量。</h3> <p>瀏覽器按下 F12 開啟調試模式，查看報錯信息。</p> <script>"use strict";x = 3.14; // 報錯 (x 未定義) </script></body> </html> use strict
• 在函數內部聲明是局部作用域 (只在函數內使用嚴格模式)，eg: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p>在函數內使用 "use strict" 只在函數內報錯。 </p> <p>瀏覽器按下 F12 開啟調試模式，查看報錯信息。</p> <script>x = 3.14; // 不報錯 myFunction();function myFunction() {"use strict";y = 3.14; // 報錯 (y 未定義) } </script></body> </html> 局部 use strict
• 嚴格模式的限制
  • 不允許使用未聲明的變量（對象也是一個變量）；
  • 不允許刪除變量或對象；
  • 不允許刪除函數；
  • 不允許變量重名；
  • 不允許使用八進制；
  • 不允許使用轉義字符；
  • 不允許對只讀屬性賦值，eg： "use strict"; var obj = {}; Object.defineProperty(obj, "x", {value:0, writable:false});obj.x = 3.14; // 報錯
  • 不允許對一個使用 getter方法 讀取的屬性進行賦值，eg： "use strict"; var obj = {get x() {return 0} };obj.x = 3.14; // 報錯
  • 不允許刪除一個不允許刪除的屬性；
  • 變量名不能使用 "eval" 字符串；
  • 變量名不能使用 "arguments" 字符串；
  • 不允許使用以下這種語句，eg: "use strict"; with (Math){x = cos(2)}; // 報錯
  • 由于一些安全原因，在作用域 eval() 創建的變量不能被調用，eg： "use strict"; eval ("var x = 2"); alert (x); // 報錯
  • 禁止this關鍵字指向全局對象，eg： function f(){return !this; } // 返回false，因為"this"指向全局對象，"!this"就是falsefunction f(){ "use strict";return !this; } // 返回true，因為嚴格模式下，this的值為undefined，所以"!this"為true。

    因此，使用構造函數時，如果忘了加new，this不再指向全局對象，而是報錯。

    function f(){"use strict";this.a = 1; }; f(); // 報錯，this未定義
  • 為了向將來Javascript的新版本過渡，嚴格模式新增了一些保留關鍵字： implements，interface，let，package，private，protected，public，static，yield

    提醒："use strict" 指令只運行出現在腳本或函數的開頭。

?

?JavaScript 的使用誤區：

• 賦值運算符應用錯誤：?if 條件語句中使用賦值運算符的等號 (=) 將會產生一個錯誤結果, 正確的方法是使用比較運算符的兩個等號 (==)。
• 比較運算符常見錯誤：在常規的比較中，數據類型是被忽略的，以下 if 條件語句返回 true： var x = 10; var y = "10"; if (x == y) # 返回 true

  在嚴格的比較運算中，=== 為恒等計算符，同時檢查表達式的值與類型。這種錯誤經常會在 switch 語句中出現，switch 語句會使用恒等計算符(===)進行比較，如下，由于類型不一致不會執行 alert 彈窗：

  var x = 10; switch(x) {case "10": alert("Hello"); # 不會執行該彈窗 }
• 加法連接注意事項：JavaScript 的加法和連接都使用 + 運算符。如下，查看兩個數字相加及數字與字符串連接的區別： var x = 10 + 5; // x 的結果為 15 var x = 10 + "5"; // x 的結果為 "105"
• 浮點型數據使用注意事項：JavaScript 中的所有數據都是以 64 位浮點型數據(float)?來存儲。所有的編程語言，包括 JavaScript，對浮點型數據的精確度都很難確定，如下： var x = 0.1; var y = 0.2; var z = x + y // z 的結果為 0.3 if (z == 0.3) // 返回 false

  解決以上問題，可以用整數的乘除法來解決：

  var x = 0.1; var y = 0.2; var z = (x * 10 + y *10) / 10; document.getElementById("demo").innerHTML = z;
• 字符串分行：在字符串中直接使用回車換行是會報錯的，字符串斷行需要使用反斜杠(\)，如下所示： var x = "Hello \ World!";
• 錯誤的使用分號
• return 語句使用注意事項：JavaScript 默認是在代碼的最后一行自動結束。但，以下實例結果會返回 undefined： function myFunction(a) { varpower = 10; returna * power; }

  其等價于：

  function myFunction(a) {varpower = 10; return; // 分號結束，返回 undefineda * power; }

原因：如果是一個不完整的語句，如下所示:

var

JavaScript 將嘗試讀取第二行的語句：

power = 10;

但是由于這樣的語句是完整的:

return

JavaScript 將自動關閉語句:

return;

　　在 JavaScript 中，分號是可選的 。由于 return 是一個完整的語句，所以 JavaScript 將關閉 return 語句。

　　注意：不用對 return 語句進行斷行。

• 數組中使用名字來索引：許多程序語言都允許使用名字來作為數組的索引，使用名字來作為索引的數組稱為關聯數組(或哈希)。
  • JavaScript 不支持使用名字來索引數組，只允許使用數字索引。正確使用，如下： var person = []; person[0] = "John"; person[1] = "Doe"; person[2] = 46; var x = person.length; // person.length 返回 3 var y = person[0]; // person[0] 返回 "John"
  • 在 JavaScript 中,?對象?使用?名字作為索引。如果你使用名字作為索引，當訪問數組時，JavaScript 會把數組重新定義為標準對象。執行這樣操作后，數組的方法及屬性將不能再使用，否則會產生錯誤: var person = []; person["firstName"] = "John"; person["lastName"] = "Doe"; person["age"] = 46; var x = person.length; // person.length 返回 0 var y = person[0]; // person[0] 返回 undefined

• 定義數組元素/對象，最后不能添加逗號

• Undefined 不是 Null

  • null?用于對象,?undefined?用于變量，屬性和方法。
  • 對象只有被定義才有可能為 null，否則為 undefined。
  • 如果我們想測試對象是否存在，在對象還沒定義時將會拋出一個錯誤。錯誤使用： if (myObj !== null && typeof myObj !== "undefined")

    正確的方式：是我們需要先使用 typeof 來檢測對象是否已定義：

    if (typeof myObj !== "undefined" && myObj !== null)
• 程序塊作用域：在每個代碼塊中 JavaScript 不會創建一個新的作用域，一般各個代碼塊的作用域都是全局的。如下，以下代碼的的變量 i 返回 10，而不是 undefined： for (var i = 0; i < 10; i++) { // some code } return i; # 返回 i 為 10，而不是 undefined

  ?

JavaScript 表單驗證：HTML 表單驗證可以通過 JavaScript 來完成。

• 數據驗證用于確保用戶輸入的數據是有效的。典型的數據驗證有：
  • 必需字段是否有輸入?
  • 用戶是否輸入了合法的數據?
  • 在數字字段是否輸入了文本?

　　　　數據驗證可以使用不同方法來定義，并通過多種方式來調用:

• • 服務端數據驗證是在數據提交到服務器上后再驗證
  • 客戶端數據驗證 side validation是在數據發送到服務器前，在瀏覽器上完成驗證
• HTML 約束驗證：HTML5 新增了 HTML 表單的驗證方式：約束驗證（constraint validation）。約束驗證是表單被提交時瀏覽器用來實現驗證的一種算法。HTML 約束驗證基于：
  • HTML 輸入屬性
  • CSS 偽類選擇器
  • DOM 屬性和方法 屬性 描述 disabled 規定輸入的元素不可用 max 規定輸入元素的最大值 min 規定輸入元素的最小值 pattern 規定輸入元素值的模式 required 規定輸入元素字段是必需的 type 規則輸入元素的類型 完成列表，請查看 HTML 輸入屬性
    約束驗證 CSS 偽類選擇器 選擇器 描述 :disabled 選取屬性為 "disabled" 屬性的 input 元素 :invalid 選取無效的 input 元素 :optional 選擇沒有"required"屬性的 input 元素 :required 選擇有"required"屬性的 input 元素 :valid 選取有效值的 input 元素
    完整列表，請查看?CSS 偽類
• JavaScript 表單驗證：JavaScript 可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。

  表單數據經常需要使用 JavaScript 來驗證其正確性：

  • 驗證表單數據是否為空？
  • 驗證輸入是否是一個正確的email地址？
  • 驗證日期是否輸入正確？
  • 驗證表單輸入內容是否為數字型？ # 下面的函數用來檢查用戶是否已填寫表單中的必填（或必選）項目。假如必填或必選項為空，那么警告框會彈出，并且函數的返回值為 false，否則函數的返回值則為 true（意味著數據沒有問題）： function validateForm(){var x=document.forms["myForm"]["fname"].value;if (x==null || x==""){alert("姓必須填寫"); return false;} } # 下面的函數檢查輸入的數據是否符合電子郵件地址的基本語法。意思就是說，輸入的數據必須包含 @ 符號和點號(.)。同時，@ 不可以是郵件地址的首字符，并且 @ 之后需有至少一個點號： function validateForm(){var x=document.forms["myForm"]["email"].value;var atpos=x.indexOf("@");var dotpos=x.lastIndexOf(".");if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){alert("不是一個有效的 e-mail 地址"); return false; } }

    .........

?javaScript void：

javascript:void(0)?含義：?void 是 JavaScript 中非常重要的關鍵字，該操作符指定要計算一個表達式但是不返回值。語法格式：

<head> <script type="text/javascript"> <!-- void func() javascript:void func()//或者void(func()) javascript:void(func()) //--> </script> </head>

實例1：下面的代碼創建了一個超級鏈接，當用戶點擊以后不會發生任何事。

<a href="javascript:void(0)">單擊此處什么也不會發生</a> // 當用戶鏈接時，void(0) 計算為 0，但 Javascript 上沒有任何效果。

?實例2：以下實例中，在用戶點擊鏈接后顯示警告信息：

<a href="javascript:void(alert('Warning!!!'))">點我!</a> // 在用戶點擊鏈接后顯示警告信息

實例3：以下實例中參數 a 將返回 undefined :

<script type="text/javascript"> function getValue(){var a,b,c;a = void ( b = 5, c = 7 );document.write('a = ' + a + ' b = ' + b +' c = ' + c ); } // </script> </head> <body><p>點擊以下按鈕查看結果：</p> <form><input type="button" value="點我" οnclick="getValue();" /> // 運行結果：a = undefined b = 5 c = 7 </form></body>

• ?href="#"與href="javascript:void(0)"的區別： （1）# 包含了一個位置信息，默認的錨是#top 也就是網頁的上端；而javascript:void(0), 僅僅表示一個死鏈接；
  （2）在頁面很長的時候會使用?#?來定位頁面的具體位置，格式為：# + id；
  （3）如果你要定義一個死鏈接請使用 javascript:void(0)?；

  實例：

  <a href="javascript:void(0);">點我沒有反應的!</a> <a href="#pos">點我定位到指定位置!</a> <br> ... <br> <p id="pos">尾部定位點</p>

  ?

在以下兩條語句執行后，變量 carname 的值依然是 "Volvo"：

轉載于:https://www.cnblogs.com/ostrich-sunshine/p/6782997.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的JavaScript 笔记(2) -- 类型转换 正则表达 变量提升 表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。