【前端学习之路】JavaScript语法——对象(三)

本文上接【前端学习之路】JavaScript语法(二),主要讲解JavaScript中对象的概念。

对象

JavaScript最重要的数据类型是对象,除了基本数据类型、undefined和null,其它一切都是对象。

对象属性(property)
JavaScript对象是属性的无序集合,每个属性可以是基本数据类型、对象或函数
JavaScript对象可以动态新增或者删除属性
对象原型(prototype):所有 JavaScript 对象都从原型继承属性和方法。
日期对象继承自 Date.prototype。数组对象继承自 Array.prototype。Person 对象继承自 Person.prototype。
Object.prototype 位于原型继承链的顶端:日期对象、数组对象和 Person 对象都继承自 Object.prototype。

这里我习惯将对象构造器叫做“类”,因为这和Java或者C++中的类和对象很相似,比如说Object是一个对象构造器,我也习惯将其称为Object类,在类的基础上实例化(new出来的)叫做对象,比如说在var obj=new Object();中,obj为对象。

我们可以为对象动态新增或者删除属性,比如var obj=new Object();然后 obj.userName="Carson",但是不能直接使用类名.userName="Carson"为类添加新属性。如果真的需要对类添加新属性,那么需要在其对象原型中添加新属性才可以,比如说这样类名.prototype.userName="Carson";,这样所有这个类的对象都有userName这个属性,我们可以用下面这个例子来举例:

<!DOCTYPE html>
<html>
<head>
	<title>Object对象</title>
</head>
<body>
	<script type="text/javascript">
		var obj=new Object();

		obj.userName="Carson";
		obj.getUserName=function(){
			return this.userName;
		};
		document.write("<h1>姓名:"+obj.getUserName()+"</h1>"); //输出"姓名:Carson"

		//使用对象原型prototype为对象构造器添加新的属性
		Object.university="Hohai";
		document.write("<h1>"+obj.university+"</h1>"); //输出undefined
		Object.prototype.university="Hohai";
		document.write("<h1>"+obj.university+"</h1>"); //输出Hohai
	</script>
</body>
</html>

浏览器支持的JavaScript对象分类

  • ECMAScript内置对象(String,Number,Boolean,Math,Date,Array,RegExp,Global)
  • 文档对象模型(DOM)
  • 浏览器对象模型(BOM)
  • 用户自定义的新对象
    本文只讲部分ECMAScript内置对象。

Object对象(根对象)

JavaScript对象都以Object对象为原型直接或者间接继承而来,Object对象中的所有属性和方法都会出现在其他对象中。
重要属性:
constructor:构造函数
prototype :原型
重要方法:
toString():格式化输出
toSouce():对象的源代码
valueOf() :对象对应的基本类型值
Object的例子:使用for in语句枚举对象属性

<!DOCTYPE html>
<html>
<head>
	<title>for in 枚举对象属性</title>
</head>
<body>
	<script type="text/javascript">
		var obj=new Object();
		obj.userName="lhy";
		obj.getUserName=function(){
			return this.userName;
		};
		obj.userSex="male";
		for(var prop in obj){
			document.write("<h1>"+prop+"="+obj[prop]+"</h1>");
		}
	</script>
</body>
</html>

结果:
在这里插入图片描述

日期对象Data:用于处理日期和时间

JavaScript内置的对象有:Array,Boolean,Date,Math,Number,String,RegExp,Global八个,Date对象属于内置对象。
使用new关键字定义Date对象,通过对象中的方法获得此时时间。
例如:var myDate=new Date();
常用的方法:
get系列
getYear(): 返回年数
getMonth():返回当月号数
getDate(): 返回当日号数
getDay():返回星期几
getHours():返回小时数
getMintes(:返回分钟数
getSeconds():返回秒数
getTime() : 返回毫秒数
set系列
setYear(value);设置年
setDate(value):设置当月号数
setMonth(value):设置当月份数
setHours(value):设置小时数
setMintes(value):设置分钟数
setSeconds(value):设置秒数
setTime (value):设置毫秒数

正则表达式对象RegExp

正则表达式(regular expression)是一个描述字符模式的对象,在很多语言(比如Java、Python等)中都存在正则表达式。
正则表达式主要用来验证客户端的输入数据。如果使用客户端验证,可以节约大量的服务器端的系统资源,并且提供更好的用户体验。

如何创建js中的正则表达式

创建正则表达式的方式有两种方法:一种是采用new运算符,另一种是采用字面常量的方式。
例子:
var reg=new RegExp(‘box’);//第一个参数字符串
var reg=new RegExp(‘box’,‘ig’);//第一个参数字符串,第二个参数模式修饰符(可选)
以上两个例子等价于:
var reg=/box/; //直接用两个斜杠
var reg=/box/ig;//在第二个斜杠后加上模式修饰符
模式修饰符如下:

修饰符 作用
i 执行对大小写不敏感的匹配
g 执行全局匹配(这个过程查找所有匹配,而并非第一个匹配),返回匹配结果数组
m 执行多行匹配(如果字符串带有换行符,则按照分行后的字符串进行逐行匹配,不按照整个字符串)

正则表达式的格式

方括号:用于查找某个范围内的单个字符

表达式 描述
[abc] 查找方括号之间的任何字符
[^abc] 查找任何不再方括号之间的字符
[0-9] 查找任何从0至9之间的数字
[a-z] 查找任何从小写a到z的字符
[A-Z] 查找任何从大写A到大写Z的字符
[A-z] 查找任何从大写A到小写z的字符
[adpk] 查找给定集合内的任何字符(与第一个相同)
[^adpk] 查找给定集合外的任何字符(与第二个相同)
(red|blue|green) 查找任何指定的选项

元字符:拥有特殊含义的字符

元字符 描述
. 查找单个字符,除了换行和行结束符
\w 查找单词字符
\W 查找非单词字符
\d 查找数字
\D 查找非数字字符
\s 查找空白字符
\S 查找非空白字符
\b 匹配单词边界
\B 匹配非单词边界
\0 查找NULL字符
\n 查找换行符
\f 查找换页符
\r 查找回车符
\t 查找制表符
\v 查找垂直制表符
\xxx 查找以八进制xxx规定的字符
\xdd 查找以十六进制数dd规定的字符
\uxxxx 查找以十六进制数xxxx规定的Unicode字符

量词:类似通配符的作用,用来描述数量

量词 描述
n+ 匹配任何包含至少一个n的字符串
n* 匹配任何包含0个或者多个n的字符串
n? 匹配任何包含另个或者一个n的字符串
n{X} 匹配包含X个n的序列的字符串
n{X,Y} 匹配包含X至Y个n的序列字符串
n{X,} 匹配包含至少X个n的序列的字符串
n$ 匹配任何结尾为n的字符串
^n 匹配任何开头为n的字符串
?=n 匹配任何其后紧接指定字符串n的字符串
?!n 匹配任何其后没有紧接指定字符串n的字符串

RegExp对象函数

test(str):在字符串中查找是否存在指定的正则表达式并返回布尔值,如果存在则返回true,不存在则返回false
exec(str):在字符串中查找指定正则表达式,如果方法执行成功,则返回包含该查找字符串的相关数组;如果执行失败,则返回null。而且在使用exec的时候,正则表达式中不能使用模式修饰符(igm三个),否则会返回null,所以不建议使用。

字符串使用正则表达式的方法

除了RegExp 对象,String 对象也提供了4 个使用正则表达式的方法。

方法 含义
match(pattern) 返回pattern中的子串或null
replace(pattern,replacement) 用replacement替换和pattern匹配的部分
search(pattern) 返回字符串中pattern开始位置
split(pattern) 返回字符串按指定pattern拆分的数组

例子(查找字符串中所有有效数字):

<script type="text/javascript">
	var str="3124hb 534 42h 0041131ll";
	var reg=/[1-9][0-9]*/g;
	var numbers=str.match(reg);
	//逐个输出数组元素
	for(var index in numbers){
		document.writeln("<h1>"+numbers[index]+"</h1>");
	}
	//格式化输出数组
	document.writeln("<h1>"+numbers.join(" ")+"</h1>");
</script>

输出结果:
在这里插入图片描述

发布了61 篇原创文章 · 获赞 16 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_41427568/article/details/103216242