JavaScript基础:内置对象

本期文章接上期关于JavaScript对象的基础整理,主要内容是JavaScript内置对象。

6.2 JavaScript内置对象

6.2.1 String对象

​ String在JavaScript中表示一个字符串。它是用单引号或双引号括起来的一个或者多个序列。可以使用直接赋值的方式定义字符串,也可以使用new关键字创建String对象。

​ 案例:定义字符串

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		// 使用直接赋值的方式定义一个字符串,存储学生姓名
		let stuName = "Tomson";
		alert("学生姓名 : "+stuName);
		// 使用new的方式创建字符串对象,存储学生爱好
		let stuHobby = new String("Football");
		alert("学生爱好 : "+stuHobby);
	</script>
</body>
</html>
6.2.1.1 获取字符串的长度

​ 使用String(字符串)的length属性获取字符串的长度。字符串的每个汉字,被计数为一个字符;字符串的每个字母,也被基数为一个字符。

​ 案例:获取字符串的长度

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		let word = "What is your name ? 张三";
		alert('字符串长度为:'+word.length);
	</script>
</body>
</html>
6.2.1.2 字符串的常用方法

字符串的常用方法如下:
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		let word = "How old are you? I am eleven";
		// 全部转换为大写字母
		let upperCase = word.toUpperCase();
		document.write("全部大写 "+upperCase);
		document.write("<br/>");
		// 全部转换为小写字母
		let lowerCase = word.toLowerCase();
		document.write("全部小写 "+lowerCase);
		document.write("<br/>");
		// 整数转换为字符串
		let num = 18;
		num = num.toString();
		document.write(typeof num);
		document.write("<br/>");
		document.write("整数转为字符串 "+num);
		document.write("<br/>");
		// 获取字符串的第一个字符
		let data = word.charAt(0);
		document.write(data);
	</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		let word = "How old are you? I am eleven";
		// 返回字符串word第一次出现子字符串a的位置
		let index = word.indexOf('a');
		document.write("index = "+index);
		document.write("<br/>");
		// 获取“角标”5后面的10个子字符串
		let subString = word.substr(5,10);
		document.write("子字符串 = "+subString);
		document.write("<br/>");
		// 拼接字符串
		let name = "Tom";
		let fullName = name.concat("son");
		document.write("全名 "+fullName);
	</script>
</body>
</html>
6.2.2 Array对象

​ Array对象表示数组,它是一个用于存储相同类型元素的一个序列。

序列可以理解为存储多个值的变量。数组变量能够存储多个值,提高存储效率。
数组由一个多个元素组成,数组中元素的个数称为数组大小(或称数组长度)。

如图所示:ElementData表示数组的元素,index表示数组的下标(角标)。通过下标能够访问数组中的元素。

在这里插入图片描述

注意: 数组下标从0开始。 因为第一个元素距离自己的偏移量为0,第二个元素距离第一个元素的偏移量是1,以此类推。

6.2.2.1数组的创建和赋值

1. 先创建数组,再对其赋值

语法如下: let 数组名 = new Array(长度);

案例:定义数组,使用下标为数组元素赋值

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		let books = new Array(4);
		books[0] = "红楼梦";
		books[1] = "西游记";
		books[2] = "水浒传";
		books[3] = "三国演义";
		document.write(books[0]+"-"+books[1]+"-"+books[2]+"-"+books[3]);
        // 数组长度
        document.write(books.length);
	</script>
</body>
</html>

2. 创建数组同时对其赋值

在创建数组的同时指定数组元素的值,语法如下:

let arrayName=new Array(array1[,array2,…arrayN]);
array1…arrayN表示数组元素的值

案例:创建数组并为数组赋值,最后输出数组的每个元素

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		let books = new Array("三国演义","水浒传","西游记","红楼梦");
		document.write(books[0]);
		document.write("<br/>");
		document.write(books[1]);
		document.write("<br/>");
		document.write(books[2]);
		document.write("<br/>");
		document.write(books[3]);
		document.write("<br/>");

	</script>
</body>
</html>
6.2.2 遍历数组元素

1. 使用for循环通过下标逐个访问数组中的每个元素。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		let books = new Array("三国演义","水浒传","西游记","红楼梦");
		for( let i = 0; i < books.length; i++) {
			document.write(books[i]);
			document.write("<br/>");
		}

	</script>
</body>
</html>

2. 使用for…in方式访问数组中的每个元素

for…in语法如下:

for(let 下标  in 数组名称) {

}
in的左边是数组,右边是下标
表示从数组里面逐个获取下标
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		document.write("使用for in方式遍历数组");
		document.write("<br/>");
		let books = new Array("三国演义","水浒传","西游记","红楼梦");
		// 使用循环获取每个数组元素对应的下标,index表示数组元素的下标
		for(let index in books) {
			document.write(books[index]);
			document.write("<br/>");
		}
	</script>
</body>
</html>

== 3. 使用for…of方式访问数组中的每个元素==

语法如下:

for(let 变量 of 数组){

}
逐个遍历数组里面的每个元素,每执行一次循环体将数组的下一个元素赋值给let后面的变量
for...of循环遍历数组忽略了下标
of表示从数组里面获取每一个元素
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		document.write("使用for of方式遍历数组");
		document.write("<br/>");
		let books = new Array("三国演义","水浒传","西游记","红楼梦","儒林外史");
		// 使用循环获取每个数组元素对应的下标,index表示数组元素的下标
		for(let book of books) {
			document.write(book);
			document.write("<br/>");
		}
	</script>
</body>
</html>
6.2.3 数组常用的方法

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		
		let books = new Array("三国演义","水浒传","西游记","红楼梦");
		document.write("数组长度 = "+books.length);
		let booksTwo = new Array("聊斋志异","儒林外史");
		document.write("<br/>");
		// 将参数中的数组连接到当前数组中
		books = books.concat(booksTwo);
		document.write("新的长度 = "+books.length);
		document.write("<br/>");
		books.reverse();
		document.write("反转数组 "+books);
		document.write("<br/>");
		// 定义数组存储学生成绩
		let scores = new Array(65,23,76,87,43,86);
		// 数组元素按照升序排序
		scores.sort();
		document.write("排序之后的数组元素:"+scores);
	</script>
</body>
</html>
6.2.3 Date对象

Date用来标识JavaScript的日期和时间。创建Date对象语法如下:

let 变量 = new Date();
创建表示系统当前日期和时间的Date对象

Date对象常用方法1:

在这里插入图片描述

Data对象常用方法2:

在这里插入图片描述

案例:创建Date对象,获取当前的年月日

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		let dt = new Date();
		let year = dt.getFullYear();
        // getMonth()方法只能获取0~11之间的月份
		let month = dt.getMonth()+1;
		let day = dt.getDate();
		document.write(year+"-"+month+"-"+day);
	</script>
</body>
</html>
6.2.4 Math对象

​ Math是对一个已创建好的对象的引用。不必使用new创建对象,可以直接使用。Math对象提供了数学计算的属性和方法。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		// 获取圆周率
		let pi = Math.PI;
		document.write("pi = "+pi);
		document.write("<br/>");
		// 获取0~1之间的随机数
		let random = Math.random();
		document.write("随机数 = "+random);
	</script>
</body>
</html>

summary

本期文章主要是关于JavaScript内置对象的基础知识整理,文章内容由本人结合学习笔记和相关资料总结得出,若有不足,请及时指出,予以指正,我会及时更正。下一期文章主要是对浏览器对象和DOM对象相关基础知识的总结,敬请期待!!

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Dorable_Wander

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值