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、数组去重
第一种方法：
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);
第二种方法：
<!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>
window.onload = function(){
var aList01 = ["a","b","c","d","d","b","c"];
// 使用双层for 循环进行去重,不能在定义一个空数组
// 主要的思路是用外层循环的成员和内层循环的成员进行对比;如果重复则删除该成员
for(var i =0;i<aList01.length;i++){
for( var j=0;j<i;j++){
if(aList01[i]==aList01[j]){
// aList01.pop(aList01);
aList01.splice(i,1);
i--; //最关键的是在遍历数组的同时删除数组会导致数组成员的索引值发生改变,会导致不能保证正确的去重
}
}
}
alert(aList01)
}
</script>
</head>
<body>
</body>
</html>
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>
window.onload = function(){
// 获取元素
var oUl = document.getElementById("ul01");
// 模拟从数据库或者网络上爬取出来的数据
var oSpi = "";
var aList01 = ["starwars","头号玩家","复仇者联盟","晓松奇谈","世界杯","英雄联盟"];
for(var i =0;i<aList01.length;i++){
oSpi+="<li>"+aList01[i]+"<li>"; //这个地方是理解的重点
}
oUl.innerHTML = oSpi;
}
</script>
<style>
ul{
width: 500px;
margin: 40px auto;
position: relative;
left: 0;
top: 0px;
list-style: none;
line-height: 40px;
}
li{
border-bottom: 1px dotted pink;
text-indent: 10px;
}
</style>
</head>
<body>
<ul id="ul01">
<!-- <li>电影名称</li>
<li>电影名称</li>
<li>电影名称</li>
<li>电影名称</li>
<li>电影名称</li>
<li>电影名称</li> -->
</ul>
</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);
调试程序的方法
输出变量和对象的方法：
1、alert 2、console.log
3、document.title
断点调试
通过chrome浏览器调试工具的sources窗口，可以对外链的js文件进行断点调试
定时器
定时器在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>
<script>
window.onload = function(){
// 获取元素
var oDiv01 = document.getElementById("div01");
var opadleft =0;
var oStep=5;
var oTimer01 =setInterval(fnMove,20);
// 关键点是动态的改变div的padding-left
function fnMove(){
opadleft+=oStep;
oDiv01.style.left=opadleft+"px";
oDiv01.style.top=opadleft+"px";
if(opadleft>500){
oStep=-5; //在js中，可以直接在局部修改全局变量
}
if(opadleft<0){
oStep=5;
}
}
}
function weakup(){
alert("get up......");
}
// 只执行一次的定时器，第一个参数为函数名，注意不能在函数名后面加括号，第二个为定时时间，默认单位为毫秒ms
var oTimer01 = setTimeout(weakup,1000);
// 要注意的一点------->关闭定时器时要将定时器用变量存储起来
clearTimeout(oTimer01);
// 可以重复执行的定时器
var oTimer02 = setInterval(weakup,100);
clearInterval(oTimer02);
</script>
<style>
body{
margin: 0px;
position: relative;
}
.div01{
position: absolute;
width: 200px;
height: 200px;
background: lightpink;
margin-top: 100px;
/* border: 1px solid red; */
left:0;
}
</style>
</head>
<body>
<div class="div01" id="div01">ddddiiiivvvv</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>
window.onload = function(){
// 获取元素
var oBtn01 =document.getElementById("btn01"),
oBtn02 =document.getElementById("btn02"),
oSlide=document.getElementById("slide"),
oList=document.getElementById("list");
//将ul中的li全部复制一份，然后塞入ul中
oList.innerHTML =oList.innerHTML+oList.innerHTML;
var oLeft =0;
var oStep=-3;
var oTimer01= setInterval(fnMove,30);
function fnMove(){
oLeft+=oStep;
oList.style.left =oLeft+"px";
if(oLeft<-1000){
oLeft=0;
}
if(oLeft>0){
oLeft=-1000;
}
}
oBtn01.onclick=function(){
oStep=-3;
}
oBtn02.onclick=function(){
oStep=3;
}
oSlide.onmouseover=function(){
clearInterval(oTimer01);
}
oSlide.onmouseout=function(){
oTimer01= setInterval(fnMove,30);
}
}
</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>
变量作用域
要点：变量的寻找总会找最近的一次声明，不加var的声明都会变成全局变量。
变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。
1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。
<script type="text/javascript">
// 定义全局变量
var a = 12;
function myalert()
{
// 定义局部变量
var b = 23;
alert(a);
// 修改全局变量
a++;
alert(b);
}
myalert(); // 弹出12和23
alert(a); // 弹出13
alert(b); // 出错
</script>
封闭函数
封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。
一般定义的函数和执行函数：
function myalert(){
alert('hello!');
};
myalert();
封闭函数：
(function(){
alert('hello!');
})();
还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
!function(){
alert('hello!');
}()
封闭函数的作用
封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全，比如：
var iNum01 = 12;
function myalert(){
alert('hello!');
}
(function(){
var iNum01 = 24;
function myalert(){
alert('hello!world');
}
alert(iNum01);
myalert()
})()
alert(iNum01);
myalert(); 
浙公网安备 33010602011771号