数组及操作方法

数组就是一组数据的集合，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);  // 出错

javascript高级的更多相关文章

  1. 《JavaScript高级程序设计（第3版）》笔记-序

    很少看书,不喜欢看书,主要是上学时总坐不住,没有多大定性,一本书可以两天看完,随便翻翻,也可以丢在角落里几个月不去动一下. 上次碰到了<JavaScript高级程序设计(第3版)>感觉真的 ...

  2. 《JavaScript高级程序设计（第3版）》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

  3. 【javascript学习——《javascript高级程序设计》笔记】DOM操作

    DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...

  4. 读javascript高级程序设计00-目录

    javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...

  5. 《JavaScript高级程序设计》读书笔记--前言

    起因 web编程过程使用javascript时感觉很吃力,效率很低.根本原因在于对javascript整个知识体系不熟,看来需要找些书脑补一下,同时欢迎众网友监督. 大神推荐书籍 看了博客大神们推荐的 ...

  6. 阅读摘录《javascript 高级程序设计》01

    前言: 因为工作需要,所以开始主攻前台JS方面的技术.在以前的工作中,使用过这门脚本语言.但是都是比较凌乱的,用到什么学什么,只是为了实现业务,而去使用. 不会考虑到代码优化,封装对象等.今次特意借了 ...

  7. 《JavaScript高级程序设计》学习笔记(5)——面向对象编程

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第六章内容. 1.面向对象(Object ...

  8. 《JavaScript高级程序设计》学习笔记(4)——引用类型

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第五章内容. 在ECMAScript中, ...

  9. 《JavaScript高级程序设计》学习笔记(3)——变量、作用域和内存问题

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第四章内容. 1.函数:通过函数可以封装 ...

  10. 1 《JavaScript高级程序设计》学习笔记(1)

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 首先,我将从<JavaScript高级程序设计>这本JavaScript学习者必看的经典教 ...

随机推荐

  1. Java多线程编程的常见陷阱

    .在构造函数中启动线程 我在很多代码中都看到这样的问题,在构造函数中启动一个线程,类似这样: public class A{ public A(){ ; ; this.thread=new MyThr ...

  2. 用iPhone查看pc电脑上写的html(Mac电脑Charles)简单版

    对于客户端同学开发来说,写一段代码想在真机上看看,是非常容易的. 那么在这么一个大前端的环境下,客户端开发想写点html和js代码,又想在手机上看看效果,怎么办呢? 需要以下几个步骤: 大体流程:1. ...

  3. windows 系统验证是否为正版

    博客园里边写这种帖子,足以证明我有多无聊.话不多说,上干货. 一台计算器如果没有操作系统,就是一块大的板砖,拿起来抡人太重,放地上做床又太小. 如何查看自己操作系统呢?windows7 桌面找到我的电 ...

  4. centos6删除mysql安装

    1.查看已经安装了的mysql包: 2.卸载mysql: 3.查看剩下的mysql安装包: 4.逐个删除剩下的mysql安装包: 5.删除完后再次查看,以确保已删除干净: 6.删除自己安装的mysql ...

  5. oracle 表空间管理相关（原创）

    通过以下几步基本可以查看表空间情况以及处理表空间不足问题. ASM相关 查看asm空间 select group_number,name,total_mb,free_mb from v$asm_dis ...

  6. 解决docker主机配置了DaoCloud.io的加速后重启失败问题Failed to start Docker Application Container Engine

    问题说明 正常运行的docker主机配置了DaoCloud.io加速后重启报如下错 解决过程 问题原因: 重新配置加速器后发现,daocloud的配置信息是写在/etc/docker/daemon.j ...

  7. .babelrc和babel.config.js的相同配置不能合并

    项目内部已经有了babel的配置文件babel.config.js module.exports = { presets: ["@vue/app"], }; 然后由于要按需引入el ...

  8. vs2013突然打不开项目，项目全部不兼容

    转载:https://forum.cocos.com/t/vs2013/40931 转载:https://jingyan.baidu.com/article/cdddd41c7c6b5353cb00e ...

  9. [CodeForce 450A] Jzzhu and Children

    题目链接:http://codeforces.com/problemset/problem/450/A /* * 计算一个人要是拿足够离开需要排多少次队,选排的次数多的那个人,如果两个人排的次数相同, ...

  10. Mac OS 挂载 EFI 引导分区

    正如Windows下的EFI分区一样在资源管理器中默认不显示EFI引导分区(即ESP分区),Mac OS也是如此,为了安全嘛,不让用户随意操作. 那么怎么挂载显示出来呢? 命令转自 https://b ...