数组及操作方法
数组就是一组数据的集合，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;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 创建数组 // 第一种方式： var aList01 = new Array(1,2,3); // 第二种方式： var aList02 = ['a','b','c','d','e']; // 获取数组成员的个数 var iLen = aList02.length; //alert(iLen); // 操作数组的某个成员 // alert( aList02[2] ); // 在数组后面增加成员 //alert(aList02) aList02.push('f'); //alert(aList02); // 删除数组最后一个成员 aList02.pop(); //alert(aList02); // 获取某个成员在数组中第一次出现的索引值 var aList03 = ['a','b','c','d','a','b','c','d']; var iPos = aList03.indexOf('c'); // 如果成员不存在，得到的值是 -1 var iPos2 = aList03.indexOf('f'); // alert(iPos); // alert(iPos2); // 在数组中增加或者删除成员 alert(aList03); aList03.splice(4,2) alert(aList03); // a,b,c,d,c,d aList03.splice(4,2,'e','f','g'); alert(aList03); // 将数组通过某个字符拼接成一个大的字符串 var sTr = aList03.join('-'); var sTr2 = aList03.join(''); alert(sTr); alert(sTr2); </script> </head> <body> </body> </html>
批量操作数组中的数据，需要用到循环语句
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> var aList = ['a','b','c','d','e','f']; var iLen = aList.length; for(var i=0;i<iLen;i++){ alert( aList[i] ); } </script> </head> <body> </body> </html>
循环语句
程序中进行有规律的重复性操作，需要用到循环语句。
for循环
for(var i=0;i<len;i++) { ...... }
课堂练习
1、数组去重
var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1]; var aList2 = []; for(var i=0;i<aList.length;i++) { if(aList.indexOf(aList[i])==i) { aList2.push(aList[i]); } } alert(aList2);
2、将数组数据放入页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .list{ list-style:none; padding:0px; margin:50px auto 0px; width:300px; } .list li{ line-height:50px; border-bottom:1px dotted black; } </style> <script> window.onload = function(){ var aList = ['一部好戏','碟中谍6','蚁人2','熊出没','小猪佩奇','哆啦A梦'] var oUl = document.getElementById('list'); var sTr = ''; for(var i=0;i<aList.length;i++){ sTr += '<li>' +aList[i]+'</li>'; } //alert(sTr); oUl.innerHTML = sTr; } </script> </head> <body> <ul class="list" id="list"> <!-- <li>电影名称排行</li> <li>电影名称排行</li> <li>电影名称排行</li> <li>电影名称排行</li> <li>电影名称排行</li> <li>电影名称排行</li> --> </ul> </body> </html>
定时器
定时器在javascript中的作用
1、定时调用函数
2、制作动画
定时器类型及语法
/*
定时器：
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器
*/
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
alert('ok!');
}
课堂实例
1、定时器制作移动动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background:gold; position: fixed; left:0px; top:100px; } </style> <script> window.onload = function(){ var oBox = document.getElementById('box'); var iLeft = 0; var oTimer = setInterval(fnMove,30); function fnMove(){ iLeft += 3; if(iLeft>600){ clearInterval(oTimer); } oBox.style.left = iLeft + 'px'; } } </script> </head> <body> <div class="box" id="box"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ width:200px; height: 200px; background:gold; position:fixed; left:0px; top:100px; } </style> <script> window.onload = function(){ var oBox = document.getElementById('box'); var iLeft = 0; var iSpeed = 3; var oTimer = setInterval(fnMove,30); function fnMove(){ iLeft += iSpeed; // 到最右边的时候 if(iLeft>600){ iSpeed = -3; } // 到最左边的时候 if(iLeft<0){ iSpeed = 3; } oBox.style.left = iLeft + 'px'; } } </script> </head> <body> <div class="box" id="box"></div> </body> </html>
2、定时器制作无缝滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style type="text/css"> body,ul{ margin:0; padding:0; } .list_con{ width:1000px; height:200px; border:1px solid #000; margin:10px auto 0; background-color:#f0f0f0; position:relative; overflow:hidden; } .list_con ul{ list-style:none; width:2000px; height:200px; position:absolute; left:0; top:0; } .list_con li{ width:180px; height:180px; float:left; margin:10px; } .btns_con{ width:1000px; height:30px; margin:50px auto 0; position:relative; } .left,.right{ width:30px; height:30px; background-color:gold; position:absolute; left:-40px; top:124px; font-size:30px; line-height:30px; color:#000; font-family: 'Arial'; text-align:center; cursor:pointer; border-radius:15px; opacity:0.5; } .right{ left:1010px; top:124px; } </style> <script type="text/javascript"> window.onload = function(){ var oUl = document.getElementById('list'); var oBtn01 = document.getElementById('btn01'); var oBtn02 = document.getElementById('btn02'); var oSlide = document.getElementById('slide'); // 将ul中的5个li复制一份，成为10个li oUl.innerHTML = oUl.innerHTML + oUl.innerHTML; var iLeft = 0; var iSpeed = -3 // 定义一个变量来存iSpeed上一次的值 var iLastSpeed = -3; var oTimer = setInterval(fnMove,30); function fnMove(){ iLeft += iSpeed; // 当运动到最左边的时候 if(iLeft<-1000){ iLeft = 0; } // 当运动到最右边的时候(就是起始状态) if(iLeft>0){ iLeft = -1000; } oUl.style.left = iLeft + 'px'; } // 点击左边的按钮 oBtn01.onclick = function(){ iSpeed = -3; } // 点击右边的按钮 oBtn02.onclick = function(){ iSpeed = 3; } // 绑定幻灯片外面容器标签的移入移出事件 oSlide.onmouseover = function(){ //clearInterval(oTimer); iLastSpeed = iSpeed; iSpeed = 0; } oSlide.onmouseout = function(){ //oTimer = setInterval(fnMove,30); iSpeed = iLastSpeed; } } </script> </head> <body> <div class="btns_con"> <div class="left" id="btn01"><</div> <div class="right" id="btn02">></div> </div> <div class="list_con" id="slide"> <ul id="list"> <li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li> <li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li> <li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li> <li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li> <li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li> </ul> </div> </body> </html>
字符串处理方法
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);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> var iNum01 = 12; var sNum01 = '12'; var sNum02 = '12.45'; //alert(iNum01 + 10); //alert(sNum01 + 10);// '1210' //alert(parseInt(sNum01) +10 ); // 将整数的字符串转换为整数，用parseInt，如果是小数，会去掉小数位 //alert( parseInt(sNum02) +10); // 将小数的字符串转化为小数，用parseFloat //alert( parseFloat(sNum02) +10); // 将字符串分割，返回一个数组 var sTr = '2018-09-23'; var aList = sTr.split('-'); var aList2 = sTr.split(''); //alert(aList); //alert(aList2); // 返回某小段字符在大段字符里面出现的索引值 var sTr2 = 'abcdefgh123ijkl123mn'; var iPos = sTr2.indexOf('123'); var iPos2 = sTr2.indexOf('1234'); //alert(iPos); //alert(iPos2); // 字符串切片 var sTr3 = sTr2.substring(8,12); // 只写一个数字，表示从这个这个数字对应的字符一直切到结尾 var sTr4 = sTr2.substring(8); alert(sTr3); alert(sTr4); </script> </head> <body> </body> </html>
变量作用域
变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。
1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。
// 定义全局变量
var a = 12;
function myalert()
{
// 定义局部变量
var b = 23;
alert(a);
// 修改全局变量
a++;
alert(b);
}
myalert(); // 弹出12和23
alert(a); // 弹出13
alert(b); // 出错