12-前端核心技術-JavaScript對象

本文轉載自查看原文 2021-11-20 15:57 115 前端課件

第12章-前端核心技術-JavaScript對象

學習目標

掌握對象的定義
掌握對象在程序中使用和實現 重點
掌握系統自帶對象的使用方法 重點
掌握Math對象的內置函數 重點
掌握String對象的內置函數 重點 難點
掌握Date對象的內置函數 重點
掌握Array對象的內置函數 重點

JavaScript 對象

對象的單詞是object（目標；物體），對象抽象的理解就是顯示生活中的任何一個事物（可以是具體存在的，也可以是虛擬的），如：一個人、一架飛機、一個商品等等。

而在程序代碼中對象就表現為變量和函數。如：現實中的人和軟件中的會員

人	——>	會員
名字	張三	——>	真實姓名	張三	var $realname=“張三”
小名	小三	——>	昵稱	張大仙	var $nickname=“張大仙”
性別	男	——>	性別	女	var $sex=“女”
生日	1999/1/1	——>	生日	1996/12/12	var $birthday=“1996-12-12 \| \| 籍貫 \| 貴州貴陽 \| ——> \| 籍貫 \| 北京 \| var $location=”北京"

上面這種情況，會員對象在程序中就是多個變量組成的，而有些情況只有變量是無法表示一個對象的，需要使用函數來共同表示。如：

對話框對象Dialog
標題文字	溫馨提示	var $title=“溫馨提示”
內容文字	操作成功	var $content=“操作成功”
底部文字	感謝支持	var $thinks=“感謝支持”
確定按鈕	顯示	function show(){//代碼}
確定按鈕	隱藏	function hide(){//代碼}
確定按鈕	確定	function sure(){//代碼}
取消按鈕	取消	function cancel(){//代碼}

所以，在程序代碼中就是使用變量和函數共同來描述一個對象。

變量在對象中叫做屬性（成員變量）
函數在對象中叫做操作（成員函數）

創建對象

1、通過new Object()創建

案例01

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
</body>
<script type="text/javascript"> person=new Object(); person.realname="張三"; person.nickname="張大仙"; person.age=23; person.sex="男"; <span class="hljs-built_in">document</span>.write(person.realname);
 </script>
 </html>

輸出：張三

2、通過{‘attribute’:“張三”}創建

案例02

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript"> person = { 'realname':"張三", 'nickname':"張大仙", 'age':23, 'sex':"男", "toString":function(){ console.log("你好！") } };     <span class="hljs-built_in">document</span>.write(person.realname);
    person.toString();
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
 </html>

輸出：張三

3、構造函數創建

案例03

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript"> function Persion(realname, nickname, age, sex) { this.realname = realname; this.nickname = nickname; this.age = age; this.sex = sex; this.toString = function() { document.write(this.realname + "你好！") }; } 	person = <span class="hljs-keyword">new</span> Persion();
	person.toString();
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
 </html>

輸出：張三你好！

4、class方式創建

案例04

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript"> // 創建對象 class Persion { constructor(realname, nickname, age, sex) { this.realname = realname; this.nickname = nickname; this.age = age; this.sex = sex; } 		toString() {
			<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.realname + <span class="hljs-string">":"</span> + <span class="hljs-keyword">this</span>.sex;
		}
	}
	<span class="hljs-comment">// 使用</span>
	person = <span class="hljs-keyword">new</span> Persion(<span class="hljs-string">"張三"</span>, <span class="hljs-string">"張大仙"</span>, <span class="hljs-number">23</span>, <span class="hljs-string">"男"</span>);
	<span class="hljs-built_in">document</span>.write(person.toString())
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
 </html>

輸出：張三:男

5、刪除對象屬性

Object 本身沒有任何方法可以刪除它自己的屬性。必須使用刪除運算符 delete

1
2
3
4
5
6
7
8
9
10
11
12
13
const Employee = {
  firstname: 'John',
  lastname: 'Doe'
};
console.log(Employee.firstname);
 // expected output: "John"
delete Employee.firstname;
 delete Employee['lastname']
console.log(Employee.firstname);
 // expected output: undefined

6、總結

案例05

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript"> // 方法1:包含所有內容 //------------------------------------------------ var obj1 = new Object(); obj1.name = '張三'; // 字符串類型屬性 obj1.age = 45; // 數字類型屬性 obj1.lock = false; // 布爾類型屬性 obj1.hoby = ['籃球', '乒乓球'] // 數組類型屬性 obj1.child = obj1; // 對象類型屬性 obj1.test = function() { // 函數類型屬性 console.log('你好') } console.log(obj1) // 輸出整個對象 obj1.test() // 執行對象的函數 	<span class="hljs-comment">// 方法2：直接使用{}</span>
	<span class="hljs-comment">//------------------------------------------------</span>
	<span class="hljs-keyword">var</span> obj2 = {
		name: <span class="hljs-string">"李四"</span>, <span class="hljs-comment">// 字符串類型屬性</span>
		age: <span class="hljs-number">45</span>, <span class="hljs-comment">// 數字類型屬性</span>
		lock: <span class="hljs-literal">false</span>, <span class="hljs-comment">// 布爾類型屬性</span>
		hoby: [<span class="hljs-string">'籃球'</span>, <span class="hljs-string">'乒乓球'</span>], <span class="hljs-comment">// 數組類型屬性</span>
		child: { <span class="hljs-comment">// 對象類型屬性</span>
			name: <span class="hljs-string">'兒子'</span>
		},
		fun: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{ <span class="hljs-comment">// 函數類型屬性</span>
			<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"函數"</span>)
		}
	}
	<span class="hljs-built_in">console</span>.log(obj2) <span class="hljs-comment">// 輸出整個對象</span>
	obj2.fun() <span class="hljs-comment">// 執行對象的函數</span>


	<span class="hljs-comment">// 方法3：函數式（構造函數）</span>
	<span class="hljs-comment">//------------------------------------------------</span>
	<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">People</span><span class="hljs-params">(name, age, lock, hoby, child, string)</span> </span>{
		<span class="hljs-keyword">this</span>.name = name; <span class="hljs-comment">// 字符串類型屬性</span>
		<span class="hljs-keyword">this</span>.age = age; <span class="hljs-comment">// 數字類型屬性</span>
		<span class="hljs-keyword">this</span>.lock = lock; <span class="hljs-comment">// 布爾類型屬性</span>
		<span class="hljs-keyword">this</span>.hoby = hoby; <span class="hljs-comment">// 數組類型屬性</span>
		<span class="hljs-keyword">this</span>.child = child; <span class="hljs-comment">// 對象類型屬性</span>
		<span class="hljs-keyword">this</span>.string = string; <span class="hljs-comment">// 函數類型屬性</span>
	}

	<span class="hljs-keyword">var</span> obj3 = <span class="hljs-keyword">new</span> People(<span class="hljs-string">'王五'</span>, <span class="hljs-number">18</span>, <span class="hljs-literal">false</span>, [<span class="hljs-string">'籃球'</span>, <span class="hljs-string">'乒乓球'</span>], {
		name: <span class="hljs-string">'兒子'</span>
	}, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
		<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'string'</span>);
	});
	<span class="hljs-built_in">console</span>.log(obj3) <span class="hljs-comment">// 輸出整個對象</span>
	obj3.string() <span class="hljs-comment">// 執行對象的函數</span>


	<span class="hljs-comment">// 方法4：class寫法</span>
	<span class="hljs-comment">//------------------------------------------------</span>
	<span class="hljs-keyword">class</span> persion {
		constructor(name, age, lock, hoby, child, string) {
			<span class="hljs-keyword">this</span>.name = name; <span class="hljs-comment">// 字符串類型屬性</span>
			<span class="hljs-keyword">this</span>.age = age; <span class="hljs-comment">// 數字類型屬性</span>
			<span class="hljs-keyword">this</span>.lock = lock; <span class="hljs-comment">// 布爾類型屬性</span>
			<span class="hljs-keyword">this</span>.hoby = hoby; <span class="hljs-comment">// 數組類型屬性</span>
			<span class="hljs-keyword">this</span>.child = child; <span class="hljs-comment">// 對象類型屬性</span>
			<span class="hljs-keyword">this</span>.string = string; <span class="hljs-comment">// 函數類型屬性</span>
		}
	}

	<span class="hljs-keyword">var</span> obj4 = <span class="hljs-keyword">new</span> persion(<span class="hljs-string">'王五'</span>, <span class="hljs-number">18</span>, <span class="hljs-literal">false</span>, [<span class="hljs-string">'籃球'</span>, <span class="hljs-string">'乒乓球'</span>], {
		name: <span class="hljs-string">'兒子'</span>
	}, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
		<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'string'</span>);
	});
	<span class="hljs-built_in">console</span>.log(obj4) <span class="hljs-comment">// 輸出整個對象</span>
	obj4.string() <span class="hljs-comment">// 執行對象的函數</span>
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
 </html>

JacaScript 全局函數

函數	描述
decodeURI()	解碼某個編碼的 URI。
encodeURI()	把字符串編碼為 URI。
decodeURIComponent()	解碼一個編碼的 URI 組件。
encodeURIComponent()	把字符串編碼為 URI 組件。
escape()	對字符串進行編碼。
unescape()	對由 escape() 編碼的字符串進行解碼。
eval()	計算 JavaScript 字符串，並把它作為腳本代碼來執行。
getClass()	返回一個 JavaObject 的 JavaClass。
isFinite()	檢查某個值是否為有窮大的數。
isNaN()	檢查某個值是否是數字。
parseFloat()	解析一個字符串並返回一個浮點數。
parseInt()	解析一個字符串並返回一個整數。

decodeURI() 函數

decodeURI() 函數可對 encodeURI() 函數編碼過的 URI 進行解碼。

說明：該方法不會對 ASCII 字母和數字進行編碼，也不會對下面這些 ASCII 標點符號進行編碼： * @ - _ + . / 。其他所有的字符都會被轉義序列替換。

語法

decodeURI(URIstring)

參數	描述
URIstring	必需。一個字符串，含有要解碼的 URI 或其他要解碼的文本。

返回值

URIstring 的副本，其中的十六進制轉義序列將被它們表示的字符替換。

實例

在本例中，我們將使用 decodeURI() 對一個編碼后的 URI 進行解碼：

1
2
3
4
var url ="http://www.star.com/前端-核心技術/a-b c?"
encodeurl = encodeURI(url)
console.log(encodeURI(url))
console.log(decodeURI(encodeurl))

輸出：

1
2
http://www.star.com/%E5%89%8D%E7%AB%AF-%E6%A0%B8%E5%BF%83%E6%8A%80%E6%9C%AF/a-b%20c?
http://www.star.com/前端-核心技術/a-b c?

decodeURIComponent() 函數

decodeURIComponent() 函數可對 encodeURIComponent() 函數編碼的 URI 進行解碼。

注意：不會對 ASCII 字母和數字進行編碼，也不會對這些 ASCII 標點符號進行編碼： - _ . ! ~ * ’ ( ) 。

注意：其他字符（比如：;/?:@&=+$,# 這些用於分隔 URI 組件的標點符號），都是由一個或多個十六進制的轉義序列替換的。

語法

decodeURIComponent(URIstring)

參數	描述
URIstring	必需。一個字符串，含有編碼 URI 組件或其他要解碼的文本。

返回值

URIstring 的副本，其中的十六進制轉義序列將被它們表示的字符替換。

實例

使用 decodeURIComponent() 對編碼后的 URI 進行解碼：

1
2
3
4
var url ="http://www.star.com/前端-核心技術/a-b c?+_*/"
encodeurl = encodeURI(url)
console.log(encodeURIComponent(url))
console.log(decodeURIComponent(encodeurl))

輸出：

1
2
http%3A%2F%2Fwww.star.com%2F%E5%89%8D%E7%AB%AF-%E6%A0%B8%E5%BF%83%E6%8A%80%E6%9C%AF%2Fa-b%20c%3F%2B_*%2F
http://www.star.com/前端-核心技術/a-b c?+_*/

escape() 函數

escape() 函數可對字符串進行編碼，這樣就可以在所有的計算機上讀取該字符串。

語法

escape(string)

參數	描述
string	必需。要被轉義或編碼的字符串。

返回值

已編碼的 string 的副本。其中某些字符被替換成了十六進制的轉義序列。

說明：該方法不會對 ASCII 字母和數字進行編碼，也不會對下面這些 ASCII 標點符號進行編碼： * @ - _ + . / 。其他所有的字符都會被轉義序列替換。

實例

使用 escape() 來編碼字符串：

1
2
3
4
var text ="安靜的！@#￥%……&*（）——+654/*-+"
encodetext = escape(text)
console.log(encodetext)
console.log(unescape(text))

輸出：

1
2
%u5B89%u9759%u7684%uFF01@%23%uFFE5%25%u2026%u2026%26*%uFF08%uFF09%u2014%u2014+654/*-+ 安靜的！@#￥%……&*（）——+654/*-+

eval() 函數

eval() 函數可計算某個字符串，並執行其中的的 JavaScript 代碼。

語法

eval(string)

參數	描述
string	必需。要計算的字符串，其中含有要計算的 JavaScript 表達式或要執行的語句。

返回值

通過計算 string 得到的值（如果有的話）。

說明：該方法只接受原始字符串作為參數，如果 string 參數不是原始字符串，那么該方法將不作任何改變地返回。因此請不要為 eval() 函數傳遞 String 對象來作為參數。

提示：雖然 eval() 的功能非常強大，但在實際使用中用到它的情況並不多。

實例

1
2
3
4
5
6
eval("x=10;y=20;console.log(x*y)")
console.log(eval("2+2"))
var x=10
 console.log(eval(x+17))

輸出：

JacaScript Number 對象

Number 對象是原始數值的包裝對象。

語法：

1
2
var myNum = new Number(value);
var myNum = Number(value);

參數：

參數 value 是要創建的 Number 對象的數值，或是要轉換成數字的值。

Number 靜態屬性

屬性	描述
MAX_VALUE	可表示的最大的數。
MIN_VALUE	可表示的最小的數。
NaN	非數字值。
NEGATIVE_INFINITY	負無窮大，溢出時返回該值。
POSITIVE_INFINITY	正無窮大，溢出時返回該值。
prototype	使您有能力向對象添加屬性和方法。

比如這樣使用屬性 MAX_VALUE 是正確的：

var big = Number.MAX_VALUE

但是這樣是錯誤的：

1
2
var n= new Number(2);
var big = n.MAX_VALUE

Number 對象方法

方法	描述
toString	把數字轉換為字符串，使用指定的基數。
toLocaleString	把數字轉換為字符串，使用本地數字格式順序。
toFixed	把數字轉換為字符串，結果的小數點后有指定位數的數字。
toExponential	把對象的值轉換為指數計數法。
toPrecision	把數字格式化為指定的長度。

toString() 方法

toString() 方法可把一個 Number 對象轉換為一個字符串，並返回結果。

語法

NumberObject.toString(radix)

參數	描述
radix	可選。進制，規定表示數字的基數，使 2 ~ 36 之間的整數。若省略該參數，則使用基數 10。但是要注意，如果該參數是 10 以外的其他值，則 ECMAScript 標准允許實現返回任意值。

返回值

數字的字符串表示。例如，當 radix 為 2 時，NumberObject 會被轉換為二進制值表示的字符串。

實例

1
2
3
var number = new Number(154653.356467);
console.log(number.toString()) // // 相當於10進制
console.log(number.toString(16)) // 相當於16進制

輸出：

1
2
154653.356467
25c1d.5b416bdb2

toLocaleString() 方法

toLocaleString() 方法可把一個 Number 對象轉換為本地格式的字符串。

語法

NumberObject.toLocaleString()

返回值

數字的字符串表示，由實現決定，根據本地規范進行格式化，可能影響到小數點或千分位分隔符采用的標點符號。

實例

1
2
var number = new Number(154653.356467);
console.log(number.toLocaleString())

輸出：

154,653.356

toFixed() 方法

toFixed() 方法可把 Number 四舍五入為指定小數位數的數字。

語法

NumberObject.toFixed(num)

參數	描述
num	必需。規定小數的位數，是 0 ~ 20 之間的值，包括 0 和 20，有些實現可以支持更大的數值范圍。如果省略了該參數，將用 0 代替。

返回值

返回 NumberObject 的字符串表示，不采用指數計數法，小數點后有固定的 num 位數字。如果必要，該數字會被舍入，也可以用 0 補足，以便它達到指定的長度。如果 num 大於 le+21，則該方法只調用 NumberObject.toString()，返回采用指數計數法表示的字符串。

實例

將把數字舍入為僅有一位小數的數字：

1
2
var num = new Number(13.37);
document.write (num.toFixed(1))

輸出：

13.4

toExponential() 方法

toExponential() 方法可把對象的值轉換成指數計數法。

語法

NumberObject.toExponential(num)

參數	描述
num	必需。規定指數計數法中的小數位數，是 0 ~ 20 之間的值，包括 0 和 20，有些實現可以支持更大的數值范圍。如果省略了該參數，將使用盡可能多的數字。

返回值

返回 NumberObject 的字符串表示，采用指數計數法，即小數點之前有一位數字，小數點之后有 num 位數字。該數字的小數部分將被舍入，必要時用 0 補足，以便它達到指定的長度。

實例

把一個數字轉換為指數計數法：

1
2
var number = new Number(123456);
console.log(number.toExponential(2))

輸出：

1.23e+5

JavaScript Math 對象

Math 對象方法

方法	描述
abs(x)	返回 x 的絕對值。
acos(x)	返回 x 的反余弦值。
asin(x)	返回 x 的反正弦值。
atan(x)	以介於 -PI/2 與 PI/2 弧度之間的數值來返回 x 的反正切值。
atan2(y,x)	返回從 x 軸到點 (x,y) 的角度（介於 -PI/2 與 PI/2 弧度之間）。
ceil(x)	對數進行上舍入（Math.ceil(1.4) = 2）。
cos(x)	返回數的余弦。
exp(x)	返回 Ex 的指數。
floor(x)	對 x 進行下舍入（Math.floor(1.6) = 1）。
log(x)	返回數的自然對數（底為e）。
max(x,y,z,…,n)	返回 x,y,z,…,n 中的最高值（Math.max(n1,n2,n3,…,nX)）。
min(x,y,z,…,n)	返回 x,y,z,…,n中的最低值（Math.min(n1,n2,n3,…,nX)）。
pow(x,y)	返回 x 的 y 次冪（Math.pow(4,3) = 64）。
random()	返回 (0 ~ 1) 之間的隨機數。
round(x)	把數四舍五入為最接近的整數。
sin(x)	返回數的正弦。
sqrt(x)	返回數的平方根。
tan(x)	返回角的正切。

random() 方法

random() 方法可返回介於 0 ~ 1 之間的一個隨機數。

語法

Math.random()

返回值

0.0 ~ 1.0 之間的一個偽隨機數。

實例

1
2
3
4
5
6
// 生成 [n,m]之間的隨機數
function getRandom(n,m){
	num = Math.floor(Math.random() * (m-n+1) + n)
	console.log(num)
}
getRandom(1,3)

輸出：

JavaScript RegExp 對象

RegExp 對象表示正則表達式，它是對字符串執行模式匹配的強大工具。

語法

/pattern/attributes

創建 RegExp 對象的語法：

new RegExp(pattern, attributes);

參數

pattern 是一個字符串，指定了正則表達式的模式或其他正則表達式。
attributes 是一個可選的字符串，包含屬性 “g”、“i” 和 “m”，分別用於指定全局匹配、區分大小寫的匹配和多行匹配。ECMAScript 標准化之前，不支持 m 屬性。如果 pattern 是正則表達式，而不是字符串，則必須省略該參數。

返回值

一個新的 RegExp 對象，具有指定的模式和標志。如果參數 pattern 是正則表達式而不是字符串，那么 RegExp() 構造函數將用與指定的 RegExp 相同的模式和標志創建一個新的 RegExp 對象。

如果不用 new 運算符，而將 RegExp() 作為函數調用，那么它的行為與用 new 運算符調用時一樣，只是當 pattern 是正則表達式時，它只返回 pattern，而不再創建一個新的 RegExp 對象。

修飾符

修飾符	描述
i	執行對大小寫不敏感的匹配。
g	執行全局匹配（查找所有匹配而非在找到第一個匹配后停止）。
m	執行多行匹配。

方括號

方括號用於查找某個范圍內的字符：

表達式	描述
[abc]	查找方括號之間的任何字符。
[^abc]	查找任何不在方括號之間的字符。
[0-9]	查找任何從 0 至 9 的數字。
[a-z]	查找任何從小寫 a 到小寫 z 的字符。
[A-Z]	查找任何從大寫 A 到大寫 Z 的字符。
[A-z]	查找任何從大寫 A 到小寫 z 的字符。
[adgk]	查找給定集合內的任何字符。
[^adgk]	查找給定集合外的任何字符。
(red\|blue\|green)	查找任何指定的選項。

元字符

元字符（Metacharacter）是擁有特殊含義的字符：

元字符	描述
.	查找單個字符，除了換行和行結束符。
\w	查找單詞字符。
\W	查找非單詞字符。
\d	查找數字。
\D	查找非數字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配單詞邊界。
\B	匹配非單詞邊界。
\0	查找 NUL 字符。
\n	查找換行符。
\f	查找換頁符。
\r	查找回車符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八進制數 xxx 規定的字符。
\xdd	查找以十六進制數 dd 規定的字符。
\uxxxx	查找以十六進制數 xxxx 規定的 Unicode 字符。

量詞

量詞	描述
+	匹配任何包含至少一個 n 的字符串。
*	匹配任何包含零個或多個 n 的字符串。
?	匹配任何包含零個或一個 n 的字符串。
{X}	匹配包含 X 個 n 的序列的字符串。
{X,Y}	匹配包含 X 至 Y 個 n 的序列的字符串。
{X,}	匹配包含至少 X 個 n 的序列的字符串。
$	匹配任何結尾為 n 的字符串。
^	匹配任何開頭為 n 的字符串。
?=n	匹配任何其后緊接指定字符串 n 的字符串。
?!n	匹配任何其后沒有緊接指定字符串 n 的字符串。

RegExp 對象方法

方法	描述
compile	編譯正則表達式。用於現有正則表達式改變表達式語法，可以不用
exec	檢索字符串中指定的值。返回找到的值，並確定其位置。
test	檢索字符串中指定的值。返回 true 或 false。

exec() 方法

exec() 方法用於檢索字符串中的正則表達式的匹配。

語法

RegExpObject.exec(string)

參數	描述
string	必需。要檢索的字符串。

返回值

返回一個數組，其中存放匹配的結果。如果未找到匹配，則返回值為 null。

實例

1
2
3
4
5
6
7
8
9
var str = "sdh2012-12akd都2012-9拉黑的2015-2-12文里"; 
// var patt = new RegExp(`\\d{4}-\\d{1,2}`,"g"); // 可以
// var patt = new RegExp('\\d{4}-\\d{1,2}',"g"); // 可以
// var patt = new RegExp("\\d{4}-\\d{1,2}","g"); // 可以
var patt = /\d{4}-\d{1,2}/g // 可以
var result;
while ((result = patt.exec(str)) != null)  {
  console.log(result,patt.lastIndex);
}

輸出：

1
2
3
["2012-12", index: 3, input: "sdh2012-12akd都2012-9拉黑的2015-2-12文里"] 10
["2012-9", index: 14, input: "sdh2012-12akd都2012-9拉黑的2015-2-12文里"] 20
["2015-2", index: 23, input: "sdh2012-12akd都2012-9拉黑的2015-2-12文里"] 29

支持正則表達式的 String 對象的方法

方法	描述
search	檢索與正則表達式相匹配的值。
match	找到一個或多個正則表達式的匹配。
replace	替換與正則表達式匹配的子串。
split	把字符串分割為字符串數組。

test() 方法

test() 方法用於檢測一個字符串是否匹配某個模式.

語法

RegExpObject.test(string)

參數	描述
string	必需。要檢測的字符串。

返回值

如果字符串 string 中含有與 RegExpObject 匹配的文本，則返回 true，否則返回 false。

實例

1
2
3
4
5
6
var str = "sdh2012-12akd都2012-9拉黑的2015-2-12文里"; 
// var patt = new RegExp(`\\d{4}-\\d{1,2}`,"g"); // 可以
// var patt = new RegExp('\\d{4}-\\d{1,2}',"g"); // 可以
// var patt = new RegExp("\\d{4}-\\d{1,2}","g"); // 可以
var patt = /\d{4}-\d{1,2}/g // 可以
console.log(patt.test(str))

輸出：

true

JavaScript String 對象

String 對象方法

方法	描述
charAt(x)	返回在指定位置的字符【“HELLO WORLD”.charAt(2) = L）】
charCodeAt(x)	返回在指定的位置的字符的 Unicode 編碼【“HELLO”.charCodeAt(0)=72）】
concat(x)	連接兩個或更多字符串，並返回新的字符串【“Hello ”.concat(“world!”)= Hello world!）】
fromCharCode(x)	將 Unicode 編碼轉為字符【String.fromCharCode(65) = A】。
indexOf(‘xx’)	返回某個指定的字符串值在字符串中首次出現的位置。
lastIndexOf(‘xx’)	從后向前搜索字符串，並從起始位置（0）開始計算返回字符串最后出現的位置。
match()	查找找到一個或多個正則表達式的匹配。
replace(‘xx’,’yy’)	在字符串中查找匹配的子串(第一個)，並替換【string.replace(searchvalue,newvalue)】
search()	查找與正則表達式相匹配的值。
slice(‘xx’)	提取字符串的片斷，並在新的字符串中返回被提取的部分。
split(‘,’,x)	把字符串分割為字符串數組【string.split(separator,limit)】
substr(x,y)	從起始索引號提取字符串中指定數目的字符【“Hello world!”.substr(2,3) = llo】
substring(x,y)	提取字符串中兩個指定的索引號之間的字符。
toLowerCase()	把字符串轉換為小寫。
toUpperCase()	把字符串轉換為大寫。
trim()	去除字符串兩邊的空白

match() 方法

match() 方法可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。

該方法類似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。

語法

1
2
stringObject.match(searchvalue)
stringObject.match(regexp)

參數	描述
searchvalue	必需。規定要檢索的字符串值。
regexp	必需。規定要匹配的模式的 RegExp 對象。如果該參數不是 RegExp 對象，則需要首先把它傳遞給 RegExp 構造函數，將其轉換為 RegExp 對象。

返回值

存放匹配結果的數組。該數組的內容依賴於 regexp 是否具有全局標志 g。

說明

match() 方法將檢索字符串 stringObject，以找到一個或多個與 regexp 匹配的文本。這個方法的行為在很大程度上有賴於 regexp 是否具有標志 g。

如果 regexp 沒有標志 g，那么 match() 方法就只能在 stringObject 中執行一次匹配。。

如果 regexp 具有標志 g，則 match() 方法將執行全局檢索，找到 stringObject 中的所有匹配子字符串。若沒有找到任何匹配的子串，則返回 null。如果找到了一個或多個匹配子串，則返回一個數組。

注意：在全局檢索模式下，match() 即不提供與子表達式匹配的文本的信息，也不聲明每個匹配子串的位置。如果您需要這些全局檢索的信息，可以使用 RegExp.exec()。

實例

1
2
3
4
5
var str="Hello world!"
console.log(str.match("world")") console.log(str.match("World")")
console.log(str.match("worlld")") console.log(str.match("world!"))

輸出：

1
2
3
4
world
null
null
world!

例子 2

使用全局匹配的正則表達式來檢索字符串中的所有數字：

1
2
var str="1 plus 2 equal 3"
document.write(str.match(/\d+/g))

輸出：

1,2,3

JavaScript Date 對象

以下四種方法同樣可以創建 Date 對象：

1
2
3
4
5
6
7
var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, date, hours, minutes, seconds, milliseconds);

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 日至今的毫秒數。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒數。時間戳
setDate()	設置 Date 對象中月的某一天 (1 ~ 31)。
setFullYear()	設置 Date 對象中的年份（四位數字）。
setHours()	設置 Date 對象中的小時 (0 ~ 23)。
setMilliseconds()	設置 Date 對象中的毫秒 (0 ~ 999)。
setMinutes()	設置 Date 對象中的分鍾 (0 ~ 59)。
setMonth()	設置 Date 對象中月份 (0 ~ 11)。
setSeconds()	設置 Date 對象中的秒鍾 (0 ~ 59)。
setTime()	setTime() 方法以毫秒設置 Date 對象。
toDateString()	把 Date 對象的日期部分轉換為字符串。
toJSON()	以 JSON 數據格式返回日期字符串。
toString()	把 Date 對象轉換為字符串。
toTimeString()	把 Date 對象的時間部分轉換為字符串。

案例06

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript"> var $date = new Date(); document.body.innerHTML += new Date() + "<br/>"; document.body.innerHTML += new Date("July 21, 1983 01:15:00") + "<br/>"; document.body.innerHTML += new Date('2012-11-12 01:15:32') + "<br/>"; document.body.innerHTML += new Date('2014/01/12 11:35:30') + "<br/>"; document.body.innerHTML += new Date(1524241260431) + "<br/>"; 	<span class="hljs-built_in">document</span>.body.innerHTML += <span class="hljs-string">"年："</span> + $date.getFullYear() + <span class="hljs-string">"&lt;br/&gt;"</span>;
	<span class="hljs-built_in">document</span>.body.innerHTML += <span class="hljs-string">"月："</span> + $date.getMonth() + <span class="hljs-string">"&lt;br/&gt;"</span>;
	<span class="hljs-built_in">document</span>.body.innerHTML += <span class="hljs-string">"日："</span> + $date.getDay() + <span class="hljs-string">"&lt;br/&gt;"</span>;
	<span class="hljs-built_in">document</span>.body.innerHTML += <span class="hljs-string">"小時："</span> + $date.getHours() + <span class="hljs-string">"&lt;br/&gt;"</span>;
	<span class="hljs-built_in">document</span>.body.innerHTML += <span class="hljs-string">"分："</span> + $date.getMinutes() + <span class="hljs-string">"&lt;br/&gt;"</span>;
	<span class="hljs-built_in">document</span>.body.innerHTML += <span class="hljs-string">"秒："</span> + $date.getSeconds() + <span class="hljs-string">"&lt;br/&gt;"</span>;
	<span class="hljs-built_in">document</span>.body.innerHTML += <span class="hljs-string">"毫秒："</span> + $date.getMilliseconds() + <span class="hljs-string">"&lt;br/&gt;"</span>;
	<span class="hljs-built_in">document</span>.body.innerHTML += <span class="hljs-string">"時間戳："</span> + $date.getTime() + <span class="hljs-string">"&lt;br/&gt;"</span>;
	<span class="hljs-built_in">document</span>.body.innerHTML += <span class="hljs-string">"時間戳："</span> + <span class="hljs-built_in">Date</span>.parse(<span class="hljs-string">'2014/01/12 11:35:30'</span>) + <span class="hljs-string">"&lt;br/&gt;"</span>;
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
 </html>

效果展示

作業

    </article>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 11-前端核心技術-JavaScript 09-前端核心技術-JavaScript基礎語法 10-前端核心技術-JavaScript條件和循環結構 Web前端三大核心技術之HTML 面向對象核心技術（java） nodejs核心技術 Spring 核心技術（4） Spring 核心技術（3） Spring 核心技術（1） Spring 核心技術（5）