Java学习笔记-Day47 JavaScript（二）

最新推荐文章于 2022-02-19 23:13:51 发布

金海湖底有宝藏

最新推荐文章于 2022-02-19 23:13:51 发布

阅读量507

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_42141141/article/details/111086678

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

一、JavaScript 对象

在这里插入图片描述

1、宿主对象

宿主：JavaScript需要插入或运行在浏览器内，因此可以称JavaScript宿主在浏览器提供的环境内，浏览器是JavaScript的宿主环境。

宿主对象：由 ECMAScript 实现的宿主环境提供的对象。通俗的讲就是浏览器依据w3c制定的规范（DOM、html DOM）开发出来的对外接口，而这些接口是JavaScript对象（符合ECMAscript标准）。

宿主对象分类：
① DOM：用于操作网页内元素的接口。
② BOM：用于操作浏览器窗口的接口。

2、内置对象

内置对象：独立于宿主环境的 ECMAScript 对象，是浏览器开发商依据标准（ECMA-262）使用原生JavaScrip开发的对象。

内置对象与浏览器、网页上的元素无关。内置对象包含Object、Function、Array、String、Boolean、Number、Date、RexExp。内置对象在网页加载前就已经可以使用。

内置对象分类：
① 本地对象：JavaScript 开发的引用类型，如String、Function、Boolean等等。
② 内置对象：已经被实例化的对象，如Math，内置对象都是Object。

二、内置对象

1、基本类型的封装类型

基本类型的封装类型：JavaScript 的内置对象，提供了对字符、数字、布尔三个基本类型的封装。封装类型中的属性和函数可以协助完成对基本类型数据的操作，例如截取字符串等。

（1）String：字符类型的封装类型。
（2）Number：数值类型的封装类型。
（3）Boolean：布尔类型的封装类型。

1.1、String对象

String对象用于处理字符串。

（1）创建 String 对象的语法：

① var str = new String(s);
当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 s 。

参数 s 是要存储在 String 对象中的值。

	var s = new String("str");//s是String对象

② var str = String(s);
当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值。

参数 s 是要转换成原始字符串的值。

	var s1 = String(123456);//s1是string类型
	var s2 = String("str");//s2是string类型

（2）String 对象属性：

① constructor：对创建该对象的函数的引用。
② length：字符串的长度。
③ prototype：允许您向对象添加属性和方法。

（3）String 对象属性：

① split()：把字符串分割为字符串数组。

② sub()：把字符串显示为下标。

③ substr()：从起始索引号提取字符串中指定数目的字符。

④ substring()：提取字符串中两个指定的索引号之间的字符。

⑥ sup()：把字符串显示为上标。

⑦ toLowerCase()：把字符串转换为小写。

⑧ toUpperCase()：把字符串转换为大写。

⑨ toString()：返回字符串。

⑩ valueOf()：返回某个字符串对象的原始值。

⑪ match()：找到一个或多个正则表达式的匹配。

⑫ replace()：替换与正则表达式匹配的子串。

1.2、Number对象

Number 对象是原始数值的包装对象。

（1）创建 Number 对象的语法：

① var num = new Number(value);
当 Number() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 Number 对象。

参数 value 是要创建的 Number 对象的数值。

② var num = Number(value);
如果不用 new 运算符，把 Number() 作为一个函数来调用，它将把自己的参数转换成一个原始的数值，并且返回这个值（如果转换失败，则返回 NaN）。

参数 value 是要转换成数字的值。

（2）Number 对象属性：

① constructor 返回对创建此对象的 Number 函数的引用。
② MAX_VALUE：可表示的最大的数。
③ MIN_VALUE：可表示的最小的数。
④ NaN：非数字值。
⑤ NEGATIVE_INFINITY：负无穷大，溢出时返回该值。
⑥ POSITIVE_INFINITY：正无穷大，溢出时返回该值。

（3）Number 对象方法：

① toString：把数字转换为字符串，使用指定的基数。

② toLocaleString：把数字转换为字符串，使用本地数字格式顺序。

③ toFixed：把数字转换为字符串，结果的小数点后有指定位数的数字。

④ toExponential：把对象的值转换为指数计数法。

⑤ toPrecision：把数字格式化为指定的长度。

⑥ valueOf：返回一个 Number 对象的基本数字值。

1.3、Boolean对象

Boolean 对象表示两个值：true 或 false。

（1）创建 Boolean 对象的语法：

① var boolean = new Boolean(value); //构造函数
当作为一个构造函数（带有运算符 new）调用时，Boolean() 将把它的参数转换成一个布尔值，并且返回一个包含该值的 Boolean 对象。

参数 value 是要布尔对象存放的值。

② var boolean = Boolean(value); //转换函数
如果作为一个函数（不带有运算符 new）调用时，Boolean() 只将把它的参数转换成一个原始的布尔值，并且返回这个值。

参数 value 是要转换成布尔值的值。

注意：如果省略 value 参数，或者设置为 0、-0、null、""、false、undefined 或 NaN，则该对象设置为 false。否则设置为 true（即使 value 参数是字符串 “false”）。

2、Math对象

Math对象用来执行常见的数学运算。Math对象在网页加载时已经由JavaScript引擎创建Math的实例对象。

（1）获取Math对象的方式：window.Math;(window可以省略)

（2）Math 对象属性：

① PI ：返回圆周率（约等于3.14159）。

	Math.PI;

② E ：返回算术常量 e，即自然对数的底数（约等于2.718）。

	Math.E;

（3）Math 对象方法：

① ceil(x)：返回大于或等于x的最小正整数。

② floor(x)：返回小于或等于x的最小正整数。

③ max(x,y)：返回最大值。

④ min(x,y) ：返回最小值。

⑤ random()：返回0-1之间的随机数。

⑥ sin/cos()：其他数学计算公式。

3、Date对象

Date对象：提供用于处理日期和时间的属性及方法。使用时先获取该某一时刻的Date对象的引用，然后通过该引用获取详细的时间信息。

Date对象的内部组成：

（1）构造函数：初始化Date对象实例的构造函数。
（2）静态方法：不需要创建Date实例，直接使用Date调用的方法。
（3）实例方法：Date对象可以直接调用的方法，又包含set、get两种不同的功能。

3.1、构造函数

Date的构造函数有四种。

（1）无参构造函数：返回的日期对象为当前系统时间。

	var dt = new Date();

（2）参数为number类型的构造函数：number为格林威治时间及当前与1970年1月1日0点的毫秒数，可以为负值。

	var dt = new Date(1000);

（3）参数为字符串的构造函数。

	var dt = new Date('2012/12/01 16:07:32');

（4）多参数构造函数：参数顺序为年、月（0-11）、日、时、分、秒、毫秒。

	var dt = new Date(2011,10,10,14,36,25,300);

3.2、静态方法

静态方法不需要实例化就可以直接使用日期来调用，Date有两个主要的静态方法。

① Number Date.now();

返回值为系统当前时间的格林威治时间，类型为number。

② Number Date.parse(‘2012/12/01 16:07:32’);

参数：代表时间的字符串，格式为yyyy/mm/dd hh:mm:ss。
返回值为所代表时间的格林威治时间，类型为number。

3.3、实例方法

Date的实例对象有三类方法。

（1）以set开头的方法是为实例对象设定时间，
（2）以get开头的方法为获取当前实例对象的时间，以下列出常用的实例方法。
（3）其他方法：包含将日期对象转换为字符串，以及将字符串转换为时间的方法。

3.3.1、get方法

（1）getDate()：返回日期对象中的天数，如超过了改月份应有的天数，则增加月份

（2）getDay()：返回日期对象中星期的星期几（0-6）

（3）getMonth()：返回日期对象的月份（0-11）

（4）getFullYear()：从日期对象中返回四位数字表示的年份

（5）getYear()：返回日期对象的年份（真实年份减去1900）

（6）getHours()：返回日期对象中的小时（0-23）

（7）getMinutes()：返回日期对象中的分钟（0-59）

（8）getSeconds()：返回日期对象中的秒（0-59）

（9）getMilliseconds()：返回日期对象中的毫秒（0-999）

（10）getTime()：返回1970年1月1日至今的毫秒数

3.3.2、set方法

（1）setDate()：设置日期对象中的天数，如超过了改月份应有的天数，则增加月份。

（2）setDay()：设置日期对象中星期的星期几（0-6）

（3）setMonth()：设置日期对象的月份（0-11）

（4）setFullYear()：设置日期对象中年份（四位数字）

（5）setHours()：设置日期对象中的小时（0-23）

（6）setMinutes()：设置日期对象中的分钟（0-59）

（7）setSeconds()：设置日期对象中的秒（0-59）

（8）setMilliseconds()：设置日期对象中的毫秒（0-999）

（9）setTime()：以毫秒数设置日期对象

3.3.3、其他方法

（1）toString()：返回日期对象对应的字符串（包含年月日时分秒）

（2）toLocaleString()：返回日期对象对应的本地时区的字符串（包含年月日时分秒）

（2）toDateString()：返回日期对象对应的字符串包含（年月日）

（4）toLocaleDateString()：返回日期对象对应的本地时区的字符串（包含年月日）

（5）toTimeString()：返回日期对象对应的时间字符串（包含时分秒）

（6）toLocaleTimeString()：返回日期对象对应的本地时区的时间字符串（包含时分秒）

（7）valueOf()：返回日期对象对应的格林威治时间与getTime（）相同，在程序中使用getTime();

4、RegExp对象

RegExp对象是用于执行或预编译正则表达式的对象。

4.1、创建 RegExp 对象的语法

（1） /pattern/attributes

	let reg = /^\d{6}$/;

（2） new RegExp(pattern, attributes);

	let reg = new RegExp("^\\d{6}$");

参数：
① 参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。
② 参数 attributes 是一个可选的字符串，包含属性 “g”、“i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。
返回值
① 一个新的 RegExp 对象，具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串，那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。
② 如果不用 new 运算符，而将 RegExp() 作为函数调用，那么它的行为与用 new 运算符调用时一样，只是当 pattern 是正则表达式时，它只返回 pattern，而不再创建一个新的 RegExp 对象。
抛出
① SyntaxError - 如果 pattern 不是合法的正则表达式，或 attributes 含有 “g”、“i” 和 “m” 之外的字符，抛出该异常。
② TypeError - 如果 pattern 是 RegExp 对象，但没有省略 attributes 参数，抛出该异常。

4.2、修饰符

（1）i：执行对大小写不敏感的匹配。
（2）g：执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
（3）m：执行多行匹配。

4.3、RegExp 对象方法

（1）compile：编译正则表达式。
（2）exec：检索字符串中指定的值。返回找到的值，并确定其位置。
（3）test：检索字符串中指定的值。返回 true 或 false。

4.4、支持正则表达式的 String 对象的方法

（1）search：检索与正则表达式相匹配的值。
（2）match：找到一个或多个正则表达式的匹配。
（3）replace：替换与正则表达式匹配的子串。
（4）split：把字符串分割为字符串数组。

三、级联

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select id="pro" name="pro">
			<option value="请选择">--请选择--</option>
		</select>
		
		<select id="city" name="city">
			<option value="请选择">--请选择--</option>
		</select>
		
		<script>
			
			let pro = new Array("福建省","安徽省","江苏省");
			
			pro["福建省"]=["厦门市","福州市"];
			
			pro["安徽省"]=["合肥市","黄山市"];		
			
			pro["江苏省"]=["南京市","徐州市"];	
			
			window.onload = function (){
				pro.forEach(function(v,k){
					let option = new Option(v,v);
					document.getElementById("pro").options.add(option);
				})
			}
			
			document.getElementById("pro").onchange = function(){
				document.getElementById("city").options.length=1;
				pro[this.value].forEach(function(v,k){	
					let option = new Option(v,v);
					document.getElementById("city").options.add(option);
				})
			}			
		</script>
		
	</body>
</html>