【前端学习之路】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>

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值