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对象相关基础知识的总结,敬请期待!!