JavaScript編程基礎2
1，數據類型相關操作
使用typeof x函數查看變量的數據類型：
typeof "John" // 返回 string typeof 3.14 // 返回 number typeof false // 返回 boolean typeof [1,2,3,4] // 返回 object，數組是一種特殊的對象類型 typeof {name:‘John‘, age:34} // 返回 object， 因此 typeof [1,2,3,4] 返回 object
null：
null表示什麽都沒有，它自己是一種類型，表示一個空對象引用。所以可以把變量設置為null來清空對象。
undefined：
在 JavaScript 中, undefined 是一個沒有設置值的變量。typeof 一個沒有值的變量會返回 undefined。
null和undefined區別：
typeof undefined // undefined typeof null // object null === undefined // false null == undefined // true
2，類型轉換
在 JavaScript 中有 5 種不同的數據類型：
- string
- number
- boolean
- object
- function
3 種對象類型：
- Object
- Date
- Array
2 個不包含任何值的數據類型：
- null
- undefined
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] }
在我看來，js中的數組：var mycar=new Array("hello","i am","fine")是對象的實例，而[1,2,4]這種，更接近真正意義上的數組。
isArray()和isDate()用法，第一個為例
//看isArray()的用法， var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = isArray(fruits); //返回true //true直接會寫到id=demo的元素中
數據類型轉換：變成字符串
String(x) 把數字轉換為字符串
String(x) // 將變量 x 轉換為字符串並返回 String(123) // 將數字 123 轉換為字符串並返回 String(100 + 23) // 將數字表達式轉換為字符串並返回，先算，後轉換，轉換以後是，字符串123，當然了輸出的時候並不會表明自己的類型
toString()也是這樣的作用：(123).toString()
其他的數字變字符串方法簡介：留後再學，趕進度
| 方法 | 描述 |
|---|---|
| toExponential() | 把對象的值轉換為指數計數法。 |
| toFixed() | 把數字轉換為字符串，結果的小數點後有指定位數的數字。 |
| toPrecision() | 把數字格式化為指定的長度。 |
布爾值轉換為字符串：
String(false) // 返回 字符串false false.toString() // 返回 字符串false，兩個方法都可以
日期變成字符串：
String(new Date()) //返回當前日期的字符串格式 obj.toString() //同上
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("3.14") // 返回 3.14 空字符串轉換為0，其他字符串轉換為NaN
Number("99 88") // 返回 NaN
var x="5";
var y=+5; //y將是數字5，一元運算符可以把變量轉化為數字，如果不能轉化，那就得到NaN，仍舊是數字類型
其他字符串轉換為數字的方法：
| 方法 | 描述 |
|---|---|
| parseFloat() | 解析一個字符串，並返回一個浮點數。 |
| parseInt() | 解析一個字符串，並返回一個整數 |
布爾值轉化為數字：
Number(false) // 返回 0 Number(true) // 返回 1
日期轉化為數字：
d = new Date(); Number(d) //我得到的是15多少多少的一個數，估計是時間戳
//用d.getTime()也是可以的。
數據類型轉換：自動轉換類型
當 JavaScript 嘗試操作一個 "錯誤" 的數據類型時，會自動轉換為 "正確" 的數據類型
5 + null // 返回 5 null 轉換為 0 "5" + null // 返回"5null" null 轉換為 "null" "5" + 1 // 返回 "51" 1 轉換為 "1" "5" - 1 // 返回 4 "5" 轉換為 5
當你嘗試輸出一個對象或一個變量時 JavaScript 會自動調用變量的 toString() 方法：
document.getElementById("demo").innerHTML = myVar;
myVar = {name:"Fjohn"} // toString 轉換為 "[object Object]" myVar = [1,2,3,4] // toString 轉換為 "1,2,3,4" myVar = new Date() // toString 轉換為 "Fri Jul 18 2014 09:08:55 GMT+0200"
數字和布爾值也經常相互轉換：
myVar = 123 // toString 轉換為 "123" 為什麽數字123會轉換成字符串123呢，我估計可能是因為html需要輸出統一的字符給用戶看 myVar = true // toString 轉換為 "true" myVar = false // toString 轉換為 "false"
3，正則表達式
語法實例：
var patt = /runoob/i //聲明變量patt等於rundoob，i表示不區分大小寫；這語法和sed，awk有點像
正則的修飾符：
| 修飾符 | 描述 |
|---|---|
| i | 執行對大小寫不敏感的匹配。 |
| g | 執行全局匹配（查找所有匹配而非在找到第一個匹配後停止）。 |
| m | 執行多行匹配。 |
search() 方法
用於檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串，並返回子串的起始位置。
var str = "Visit Runoob!"; var n = str.search(/Runoob/i); //返回6
replace() 方法
用於在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。
<body> <button onclick="myFunction()">點我</button> //按鈕激發事件 <p id="demo">請訪問 Microsoft!</p> <script> function myFunction() { var str = document.getElementById("demo").innerHTML; //得到id=demo的元素的內容，賦值給str var txt = str.replace(/microsoft/i,"Runoob"); //聲明變量txt等於在str的基礎上把microsoft換成runoob。 document.getElementById("demo").innerHTML = txt; //重寫id=demo的元素 } </script> </body>
js中的正則表達式簡介：
| 表達式 | 描述 |
|---|---|
| [abc] | 查找方括號之間的任何字符。 |
| [0-9] | 查找任何從 0 至 9 的數字。 |
| (x|y) | 查找任何以 | 分隔的選項。 |
| 元字符 | 描述 |
|---|---|
| \d | 查找數字。 |
| \s | 查找空白字符。 |
| \b | 匹配單詞邊界。 |
| \uxxxx | 查找以十六進制數 xxxx 規定的 Unicode 字符。 |
| 量詞 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一個 n 的字符串。 |
| n* | 匹配任何包含零個或多個 n 的字符串。 |
| n? | 匹配任何包含零個或一個 n 的字符串。 |
使用 RegExp 對象
在 JavaScript 中，RegExp 對象是一個預定義了屬性和方法的正則表達式對象
調用var xxx=new RegExp(‘patton‘)就可以使用以下命令：
使用test（）：
test() 方法用於檢測一個字符串是否匹配某個模式，如果字符串中含有匹配的文本，則返回 true，否則返回 false。
<script> var patt1=new RegExp("e"); //實例化 document.write(patt1.test("The best things in life are free")); // 返回true，註意格式，是patt.test()，作用是查找字符串中有沒有e。
</script>
//簡寫：/e/.test("The best things in life are free!") 厲害了，還有這種操作，但是好像不支持正則修飾符
使用exec（）：
exec() 方法用於檢索字符串中的正則表達式的匹配。該函數返回一個數組，其中存放匹配的結果。如果未找到匹配，則返回值為 null。
<script> var patt1=new RegExp("be|es"); document.write(patt1.exec("The best things in life are free")); </script> //返回的是be，所以我覺得它實際上只是返回匹配到的第一個值
4，javascript錯誤
try 語句測試代碼塊的錯誤。它允許我們定義在執行時進行錯誤測試的代碼塊。
catch 語句處理錯誤。catch 語句允許我們定義當 try 代碼塊發生錯誤時，所執行的代碼塊。
throw 語句創建自定義錯誤。當錯誤發生時，JavaScript 引擎通常會停止，並生成一個錯誤消息。
try...catch...
<script> var txt=""; function message(){ try { adddlert("Welcome guest!"); //特意寫錯了alert，如果try語句有錯誤，那就執行catch語句 } catch(err) { //catch 塊會捕捉到 try 塊中的錯誤，並執行代碼來處理它。 txt="本頁有一個錯誤。\n\n"; txt+="錯誤描述：" + err.message + "\n\n"; //捕捉錯誤用err.message txt+="點擊確定繼續。\n\n"; alert(txt); } } </script> </head> <body> <input type="button" value="查看消息" onclick="message()" /> //激發事件 </body>
throw語句
<body> <p>請輸出一個 5 到 10 之間的數字:</p> <input id="demo" type="text"> //定義了一個文本框，用於收集用戶端的信息 <button type="button" onclick="myFunction()">測試輸入</button> //按鈕激發事件 <p id="message"></p> //結果會更新在這個段落中，盡管現在是空的 <script> function myFunction() { var message, x; //兩個變量 message = document.getElementById("message"); //message相當於獲取元素了 message.innerHTML = ""; //元素的用空填充的 x = document.getElementById("demo").value; //x用於獲取用戶的輸入 try { if(x == "") throw "值為空"; //如果用戶的輸入是空的話，直接引發錯誤，下面的代碼不執行了，調到catch語句，打印出錯誤.err指代的是什麽呢？其實就是throw後面的部分。 if(isNaN(x)) throw "不是數字"; x = Number(x); if(x < 5) throw "太小"; if(x > 10) throw "太大"; } catch(err) { message.innerHTML = "錯誤: " + err; //向帶id=message的元素中輸出錯誤 } } </script> </body> </html>
JavaScript編程基礎2