第三章 JavaScript常用内置对象
01.JavaScript数组常用属性与方法
1.1 数组定义
数组(Array)是一组数据的集合,使用单独的变量名来存储一系列的值,JavaScript中数组其实是一个对象变量,它保存了数组对象的引用地址,因此,数组的定义和初始化与变量相似。JS创建数组有多种方法。
1>单纯创建数组
var a = new Array()
2>创建数组的同时规定数组大小
var a = new Array(3) //创建一个长度为4的数组
3>直接初始化
var a = new Array("aa","bb","cc")
4>字面量,就是直接初始化数组
var a = ["aa","bb","cc"]
二维数组是在以为数组基础上定义的,即当以为数组的元素又都是以为数组时,就形成了二维数组。
var b = new Array();
b[0] = [];
b[1] = ["aa","bb","cc"]
b[2] = ["dd","ee","ff"]
//等价于
var b = new Array(
new Array(),
new Array("aa","bb","cc"),
new Array("dd","ee","ff")
)
//等价于
var b = [[],["aa","bb","cc"],["dd","ee","ff"]];
1.2 数组常用属性与方法
- 数组属性
数组Array只有一个属性,就是length,length表示的是数组所占内存空间的数目。而不仅仅是数组中元素的个数,改变数组的长度可以扩展或者截取所占内存空间的数目。
语法
myarray.length; //获得数组myarray的长度
注意:因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1,且JavaScript数组的length属性是可变的,数组随元素的增加,长度也会改变
- 数组方法
方法名称 | 意义 | 示例 |
---|---|---|
toString() | 把数组转换成一个字符串 | var s=a1.toString() 结果s为a,b,c |
join(分隔符) | 把数组转换成一个用符号连接的字符串 | var s=a1.join("+") 结果s为a+b+c |
shift() | 将数组头部的第一个元素移出 | var s=a1.shift() 结果s为a |
unshift() | 在数组的头部插入一个元素 | a1.unshift(“m”,“n”) 结果a1中为m,n,a,b,c |
pop() | 从数组尾部删除一个元素,返回移除的项 | var s=a1.pop() 结果s为c |
push() | 把一个元素添加到数组的尾部,返回修改后数组的长度 | var s=a1.push(“m”,“n”)结果a1为a,b,c,m,n同时s为5 |
concat() | 合并数组 | a1.concat(a2) 结果a1为数组a,b,c,y,x,z |
slice() | 返回数组的部分 | var s=a1.slice (1,3) 结果s为b,c |
splice() | 插入、删除或者替换一个数组元素 | a1.splice(1,2)结果a1为a |
sort() | 对数组进行排序操作(默认按字母升序) | a2.sort()结果为 x,y,z |
reverse() | 将数组反向排序 | a2. reverse()结果为z,y, x |
示例数组为
var a1=new Array("a","b","c");
var a2=new Array("y "," x ","z");
1.3 定时器函数
JavaScript定时器有以下两个方法,分别是setInterval()和setTimeout()
setInterval()
方法。按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。用法如下。
setInterval() ("调用函数","周期性执行或调用code之间的时间间隔"),
function hello(){ alert("hello"); }
//重复执行某个方法:
var t1= window.setInterval("hello()",3000);
去掉定时器的方法
window.clearInterval(t1);
setTimeout()
方法。在指定的毫秒数后调用函数或计算表达式。setTimeout()函数用法如下。
setTimeout("调用函数","在执行代码前需等待的毫秒数。")
var t=setTimeout(function(){alert("Hello")},3000) //只执行一次,3 秒后显示一个弹窗
// 实现循环调用需要把setTimeout定时器函数写在被调用函数里面。如下:
function show(){
alert("Hello");
var myTime = setTimeout("show()",1000);
}
关闭定时器的用法:clearTimeout(myTime); //myTime为setTimeout()函数返回的定时器对象。
1.4 动态时钟
用JavaScript编写一个动态时钟。
<html>
<head>
<meta charset="utf-8">
<title>正在运行的时钟</title>
<style type="text/css">
/*设置样式:无边框的文本框*/
input,
#clock {
width: 390;
font-size: 30px;
font-weight: 900;
color: #FFFFFF;
background-color: #930;
border: 8px double #900;
}
</style>
</head>
<body onLoad="disptime( ) ">
<form name="myform">
<input name="myclock" type="text" value="" size="20">
</form>
<span id="clock"></span>
<script language="JavaScript">
function disptime() {
var time = new Date(); //获得当前时间
var year = time.getFullYear(); //获得年月日
var month = time.getMonth(); //获得年月日
var date = time.getDate(); //获得年月日
var hour = time.getHours(); //获得小时、分钟、秒
var minute = time.getMinutes();
var second = time.getSeconds();
if (minute < 10) //如果分钟只有1位,补0显示
minute = "0" + minute;
if (second < 10) //如果秒数只有1位,补0显示
second = "0" + second;
/*设置文本框的内容为当前时间*/
document.getElementById('clock').innerHTML = year + "年" + month + "月" + date + "日" + hour + ":" + minute + ":" +
second
document.myform.myclock.value = year + "年" + month + "月" + date + "日" + hour + ":" + minute + ":" + second
/*设置定时器每隔1秒(1000毫秒),调用函数disptime()执行,刷新时钟显示*/
var myTime = setTimeout("disptime()", 1000);
}
</script>
</body>
</html>
效果如图:
后续持续更新……
原创不易,如果觉得不错,就点个赞吧!