JS
javascript进阶
数组及操作方法
javascript中，数组中的元素可以是不同类型的数据
定义数组的方法
//对象的实例创建
var aList = new Array(1,2,3);
//直接量创建
var aList2 = [1,2,3,'asd'];
操作数组中数据的方法
1、获取数组的长度：aList.length;
var aList = [1,2,3,4];
alert(aList.length); // 弹出4
2、用下标操作数组的某个数据：aList[0];
var aList = [1,2,3,4];
alert(aList[0]); // 弹出1
3、join() 将数组成员通过一个分隔符合并成字符串
var aList = [1,2,3,4];
alert(aList.join('-')); // 弹出 1-2-3-4
4、push() 和 pop() 从数组最后增加成员或删除成员
var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4
5、reverse() 将数组反转
var aList = [1,2,3,4];
aList.reverse();
alert(aList); // 弹出4,3,2,1
6、indexOf() 返回数组中元素第一次出现的索引值
var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));
7、splice() 在数组中增加或删除成员
var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4
多维数组
var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //弹出2;
批量操作数组中的数据，需要用到循环语句
循环语句
for循环
for(var i=0;i<len;i++)
{
......
}
实例
1.数组去重
window.onload=function(){
//数组去重
var aList01=[1,2,3,,6,7,8,6,7,8,4,5,7,9,0,0,0]
var aList02=[]
for (var i=0;i<aList01.length;i++)
{
//通过aList01.indexOf()返回数组中元素第一次出现的索引值
if ( aList01.indexOf(aList01[i])==i )
{
aList02.push(aList01[i])
}
}
alert(aList02)
}
字符串处理方法
1、字符串合并操作：“ + ”
var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';
alert(iNum01+iNum02); //弹出36
alert(iNum01+sNum03); //弹出1212 数字和字符串相加等同于字符串相加
alert(sNum03+sTr); // 弹出12abc
2、parseInt() 将数字字符串转化为整数
var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02); //弹出1224
alert(parseInt(sNum01)+parseInt(sNum02)) //弹出36
alert(parseInt(sNum03)) //弹出数字12 将字符串小数转化为数字整数
3、parseFloat() 将数字字符串转化为小数
var sNum03 = '12.32'
alert(parseFloat(sNum03)); //弹出 12.32 将字符串小数转化为数字小数
4、split() 把一个字符串分隔成字符串组成的数组
var sTr = '2017-4-22';
var aRr = sTr.split("-");
var aRr2= sTr.split("");
alert(aRr); //弹出['2017','4','2']
alert(aRr2); //弹出['2','0','1','7','-','4','-','2','2']
5、indexOf() 查找字符串是否含有某字符，返回该字符串第一次出现的索引值
var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //弹出2
6、substring() 截取字符串 用法： substring(start,end)（不包括end）
var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);
alert(sTr2); //弹出 de
alert(sTr3); //弹出 bcdefghijkl
字符串反转
var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');
alert(str2);
定时器
定时器在javascript中的作用
- 定时调用函数
- 制作动画
定时器类型及语法
/*
定时器：
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器
*/
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
alert('ok!');
}
实际应用01:定时器制作移动动画
<script>
window.onload=function(){
var oMove=document.getElementById('movediv');
var oStop=document.getElementById('stopdiv');
var oBox=document.getElementById('box');
var iLeft=0;
var iTop=0;
var iSpeedl=3;
var iSpeedt=3;
oMove.onclick=function(){
var oTime=setInterval(fnMove,30)
function fnMove(){
iLeft+=iSpeedl;
iTop+=iSpeedt;
oStop.onclick=function(){
clearInterval(oTime);
}
if (iLeft>1280){
iSpeedl=-3;
}
if(iLeft<-100){
iSpeedl=3;
}
if (iTop<0){
iSpeedt=3;
}
if (iTop>600){
iSpeedt=-3;
}
oBox.style.left=iLeft+'px';
oBox.style.top=iTop+'px';
}
}
}
</script>
</head>
<body>
<div class="box" id="box">
<!-- <img src="/Users/cola/Desktop/gouzi.jpg" alt=""> -->
</div>
<input type="button" value="动起来" id="movediv">
<input type="button" value="停下来" id="stopdiv">
变量作用域
变量的作用域是指变量的作用范围，javascript中的变量分为全局变量和局部变量
- 全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问
- 局部变量：在函数内部定义的变量，只能在定义该变量的函数内部使用，外部无法访问
// 定义全局变量
var a = 12;
function myalert()
{
// 定义局部变量
var b = 23;
alert(a);
// 修改全局变量
a++;
alert(b);
}
myalert(); // 弹出12和23
alert(a); // 弹出13 全局变量的值可以在任何一个地方被修改
alert(b); // 出错