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）