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;

<!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循环

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">&lt;</div>

        <div class="right" id="btn02">&gt;</div>

    </div>

    <div class="list_con" id="slide">

        <ul id="list">

        <li><a href=""><img src="data:images/goods001.jpg" alt="商品图片"></a></li>

        <li><a href=""><img src="data:images/goods002.jpg" alt="商品图片"></a></li>

        <li><a href=""><img src="data:images/goods003.jpg" alt="商品图片"></a></li>

        <li><a href=""><img src="data:images/goods004.jpg" alt="商品图片"></a></li>

        <li><a href=""><img src="data: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);  // 出错