数组及操作方法

数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。

定义数组的方法

  1. //对象的实例创建
  2. var aList = new Array(1,2,3);
  3.  
  4. //直接量创建
  5. var aList2 = [1,2,3,'asd'];

操作数组中数据的方法

1、获取数组的长度：aList.length;

  1. var aList = [1,2,3,4];
  2. alert(aList.length); // 弹出4

2、用下标操作数组的某个数据：aList[0];

  1. var aList = [1,2,3,4];
  2. alert(aList[0]); // 弹出1

3、join() 将数组成员通过一个分隔符合并成字符串

  1. var aList = [1,2,3,4];
  2. alert(aList.join('-')); // 弹出 1-2-3-4

4、push() 和 pop() 从数组最后增加成员或删除成员

  1. var aList = [1,2,3,4];
  2. aList.push(5);
  3. alert(aList); //弹出1,2,3,4,5
  4. aList.pop();
  5. alert(aList); // 弹出1,2,3,4

5、reverse() 将数组反转

  1. var aList = [1,2,3,4];
  2. aList.reverse();
  3. alert(aList);  // 弹出4,3,2,1

6、indexOf() 返回数组中元素第一次出现的索引值

  1. var aList = [1,2,3,4,1,3,4];
  2. alert(aList.indexOf(1));

7、splice() 在数组中增加或删除成员

  1. var aList = [1,2,3,4];
  2. aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
  3. alert(aList); //弹出 1,2,7,8,9,4

多维数组 
多维数组指的是数组的成员也是数组的数组。

  1. var aList = [[1,2,3],['a','b','c']];
  2. alert(aList[0][1]); //弹出2;
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script>
  9.         // 创建数组
  10.         // 第一种方式：
  11.         var aList01 = new Array(1,2,3);
  12.  
  13.         // 第二种方式：
  14.         var aList02 = ['a','b','c','d','e'];
  15.  
  16.         // 获取数组成员的个数
  17.         var iLen = aList02.length;
  18.         //alert(iLen);
  19.  
  20.         // 操作数组的某个成员
  21.         // alert( aList02[2] );
  22.  
  23.         // 在数组后面增加成员
  24.         //alert(aList02)
  25.         aList02.push('f');
  26.         //alert(aList02);
  27.  
  28.         // 删除数组最后一个成员
  29.         aList02.pop();
  30.         //alert(aList02);
  31.  
  32.         // 获取某个成员在数组中第一次出现的索引值
  33.         var aList03 = ['a','b','c','d','a','b','c','d'];
  34.         var iPos = aList03.indexOf('c');
  35.         // 如果成员不存在，得到的值是 -1
  36.         var iPos2 = aList03.indexOf('f');
  37.  
  38.         // alert(iPos);
  39.         // alert(iPos2);
  40.  
  41.         // 在数组中增加或者删除成员
  42.         alert(aList03);
  43.         aList03.splice(4,2)
  44.         alert(aList03); // a,b,c,d,c,d
  45.         aList03.splice(4,2,'e','f','g');
  46.         alert(aList03);
  47.  
  48.         // 将数组通过某个字符拼接成一个大的字符串
  49.         var sTr = aList03.join('-');
  50.         var sTr2 = aList03.join('');
  51.         alert(sTr);
  52.         alert(sTr2);
  53.  
  54.     </script>
  55.  
  56. </head>
  57. <body>
  58.  
  59. </body>
  60. </html>

数组操作

批量操作数组中的数据，需要用到循环语句

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script>
  9.         var aList = ['a','b','c','d','e','f'];
  10.         var iLen = aList.length;
  11.  
  12.         for(var i=0;i<iLen;i++){
  13.             alert( aList[i] );
  14.         }
  15.  
  16.     </script>
  17. </head>
  18. <body>
  19.  
  20. </body>
  21. </html>

for循环操作数组

循环语句

程序中进行有规律的重复性操作，需要用到循环语句。

for循环

  1. for(var i=0;i<len;i++)
  2. {
  3.     ......
  4. }

课堂练习 
1、数组去重

  1. var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];
  2.  
  3. var aList2 = [];
  4.  
  5. for(var i=0;i<aList.length;i++)
  6. {
  7.     if(aList.indexOf(aList[i])==i)
  8.     {
  9.         aList2.push(aList[i]);
  10.     }
  11. }
  12.  
  13. alert(aList2);

2、将数组数据放入页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         .list{
  10.             list-style:none;
  11.             padding:0px;
  12.             margin:50px auto 0px;
  13.             width:300px;
  14.         }
  15.  
  16.         .list li{
  17.             line-height:50px;
  18.             border-bottom:1px dotted black;
  19.         }
  20.  
  21.     </style>
  22.     <script>
  23.         window.onload = function(){
  24.             var aList = ['一部好戏','碟中谍6','蚁人2','熊出没','小猪佩奇','哆啦A梦']
  25.             var oUl = document.getElementById('list');
  26.             var sTr = '';
  27.  
  28.             for(var i=0;i<aList.length;i++){
  29.                 sTr += '<li>' +aList[i]+'</li>';
  30.             }
  31.  
  32.             //alert(sTr);
  33.             oUl.innerHTML = sTr;
  34.         }   
  35.  
  36.     </script>
  37. </head>
  38. <body>
  39.     <ul class="list" id="list">
  40.         <!-- <li>电影名称排行</li>
  41.         <li>电影名称排行</li>
  42.         <li>电影名称排行</li>
  43.         <li>电影名称排行</li>
  44.         <li>电影名称排行</li>
  45.         <li>电影名称排行</li> -->
  46.     </ul>
  47. </body>
  48. </html>

定时器

定时器在javascript中的作用
1、定时调用函数
2、制作动画

定时器类型及语法

  1. /*
  2.     定时器：
  3.     setTimeout  只执行一次的定时器
  4.     clearTimeout 关闭只执行一次的定时器
  5.     setInterval  反复执行的定时器
  6.     clearInterval 关闭反复执行的定时器
  7.  
  8. */
  9.  
  10. var time1 = setTimeout(myalert,2000);
  11. var time2 = setInterval(myalert,2000);
  12. /*
  13. clearTimeout(time1);
  14. clearInterval(time2);
  15. */
  16. function myalert(){
  17.     alert('ok!');
  18. }

课堂实例
1、定时器制作移动动画

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         .box{
  10.             width: 200px;
  11.             height: 200px;
  12.             background:gold;
  13.             position: fixed;
  14.             left:0px;
  15.             top:100px;
  16.         }
  17. </style>
  18. <script>
  19.     window.onload = function(){
  20.         var oBox = document.getElementById('box');
  21.  
  22.         var iLeft = 0;
  23.  
  24.         var oTimer = setInterval(fnMove,30);
  25.  
  26.         function fnMove(){
  27.             iLeft += 3;
  28.  
  29.             if(iLeft>600){
  30.                 clearInterval(oTimer);
  31.             }
  32.  
  33.             oBox.style.left = iLeft + 'px';
  34.         }      
  35.  
  36.     }
  37.  
  38. </script>
  39. </head>
  40. <body>
  41.     <div class="box" id="box"></div>
  42. </body>
  43. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         .box{
  10.             width:200px;
  11.             height: 200px;
  12.             background:gold;
  13.             position:fixed;
  14.             left:0px;
  15.             top:100px;
  16.         }   
  17.  
  18.     </style>
  19.     <script>
  20.         window.onload = function(){
  21.             var oBox = document.getElementById('box');
  22.  
  23.             var iLeft = 0;
  24.             var iSpeed = 3;
  25.  
  26.             var oTimer = setInterval(fnMove,30);
  27.  
  28.             function fnMove(){
  29.                 iLeft += iSpeed;
  30.  
  31.                 // 到最右边的时候
  32.                 if(iLeft>600){
  33.                     iSpeed = -3;
  34.                 }
  35.  
  36.                 // 到最左边的时候
  37.                 if(iLeft<0){
  38.                     iSpeed = 3;
  39.                 }
  40.  
  41.                 oBox.style.left = iLeft + 'px';
  42.             }
  43.  
  44.         } 
  45.  
  46.     </script>
  47. </head>
  48. <body>
  49.     <div class="box" id="box"></div>
  50. </body>
  51. </html>

定时器制作左右移动的动画

2、定时器制作无缝滚动

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>无缝滚动</title>
  6.     <style type="text/css">
  7.         body,ul{
  8.             margin:0;
  9.             padding:0;
  10.         }
  11.  
  12.         .list_con{
  13.  
  14.             width:1000px;
  15.             height:200px;
  16.             border:1px solid #000;
  17.             margin:10px auto 0;
  18.             background-color:#f0f0f0;
  19.             position:relative;
  20.             overflow:hidden;
  21.         }
  22.  
  23.         .list_con ul{
  24.             list-style:none;
  25.             width:2000px;
  26.             height:200px;
  27.             position:absolute;
  28.             left:0;
  29.             top:0;
  30.         }
  31.  
  32.         .list_con li{
  33.             width:180px;
  34.             height:180px;
  35.             float:left;
  36.             margin:10px;
  37.         }
  38.  
  39.         .btns_con{
  40.             width:1000px;
  41.             height:30px;
  42.             margin:50px auto 0;
  43.             position:relative;
  44.         }
  45.  
  46.         .left,.right{
  47.             width:30px;
  48.             height:30px;
  49.             background-color:gold;
  50.             position:absolute;
  51.             left:-40px;
  52.             top:124px;
  53.             font-size:30px;
  54.             line-height:30px;
  55.             color:#000;
  56.             font-family: 'Arial';
  57.             text-align:center;
  58.             cursor:pointer;
  59.             border-radius:15px;
  60.             opacity:0.5;
  61.         }
  62.         .right{
  63.             left:1010px;
  64.             top:124px;
  65.         }
  66.     </style>
  67.     <script type="text/javascript">
  68.         window.onload = function(){
  69.             var oUl = document.getElementById('list');
  70.             var oBtn01 = document.getElementById('btn01');
  71.             var oBtn02 = document.getElementById('btn02');
  72.             var oSlide = document.getElementById('slide');
  73.  
  74.             // 将ul中的5个li复制一份，成为10个li
  75.             oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
  76.  
  77.             var iLeft = 0;
  78.             var iSpeed = -3
  79.             // 定义一个变量来存iSpeed上一次的值
  80.             var iLastSpeed = -3;
  81.  
  82.             var oTimer = setInterval(fnMove,30);
  83.  
  84.             function fnMove(){
  85.                 iLeft += iSpeed;
  86.  
  87.                 // 当运动到最左边的时候
  88.                 if(iLeft<-1000){
  89.                     iLeft = 0;
  90.                 }
  91.                 // 当运动到最右边的时候(就是起始状态)
  92.                 if(iLeft>0){
  93.                     iLeft = -1000;
  94.                 }
  95.                 oUl.style.left = iLeft + 'px';
  96.             }
  97.             // 点击左边的按钮
  98.             oBtn01.onclick = function(){
  99.                 iSpeed = -3;
  100.             }
  101.             // 点击右边的按钮
  102.             oBtn02.onclick = function(){
  103.                 iSpeed = 3;
  104.             }
  105.  
  106.             // 绑定幻灯片外面容器标签的移入移出事件
  107.             oSlide.onmouseover = function(){
  108.                 //clearInterval(oTimer);
  109.                 iLastSpeed = iSpeed;
  110.                 iSpeed = 0;
  111.             }
  112.  
  113.             oSlide.onmouseout = function(){
  114.                 //oTimer = setInterval(fnMove,30);
  115.                 iSpeed = iLastSpeed;
  116.             }
  117.  
  118.         }
  119.  
  120.     </script>
  121. </head>
  122. <body>
  123.     <div class="btns_con">
  124.         <div class="left" id="btn01">&lt;</div>
  125.         <div class="right" id="btn02">&gt;</div>
  126.     </div>
  127.     <div class="list_con" id="slide">
  128.         <ul id="list">
  129.         <li><a href=""><img src="data:images/goods001.jpg" alt="商品图片"></a></li>
  130.         <li><a href=""><img src="data:images/goods002.jpg" alt="商品图片"></a></li>
  131.         <li><a href=""><img src="data:images/goods003.jpg" alt="商品图片"></a></li>
  132.         <li><a href=""><img src="data:images/goods004.jpg" alt="商品图片"></a></li>
  133.         <li><a href=""><img src="data:images/goods005.jpg" alt="商品图片"></a></li>
  134.         </ul>
  135.  
  136.     </div>
  137. </body>
  138. </html>

无缝滚动

字符串处理方法

1、字符串合并操作：“ + ”

  1. var iNum01 = 12;
  2. var iNum02 = 24;
  3. var sNum03 = '12';
  4. var sTr = 'abc';
  5. alert(iNum01+iNum02);  //弹出36
  6. alert(iNum01+sNum03);  //弹出1212 数字和字符串相加等同于字符串相加
  7. alert(sNum03+sTr);     // 弹出12abc

2、parseInt() 将数字字符串转化为整数

  1. var sNum01 = '12';
  2. var sNum02 = '24';
  3. var sNum03 = '12.32';
  4. alert(sNum01+sNum02);  //弹出1224
  5. alert(parseInt(sNum01)+parseInt(sNum02))  //弹出36
  6. alert(parseInt(sNum03))   //弹出数字12 将字符串小数转化为数字整数

3、parseFloat() 将数字字符串转化为小数

  1. var sNum03 = '12.32'
  2. alert(parseFloat(sNum03));  //弹出 12.32 将字符串小数转化为数字小数

4、split() 把一个字符串分隔成字符串组成的数组

  1. var sTr = '2017-4-22';
  2. var aRr = sTr.split("-");
  3. var aRr2= sTr.split("");
  4.  
  5. alert(aRr);  //弹出['2017','4','2']
  6. alert(aRr2);  //弹出['2','0','1','7','-','4','-','2','2']

5、indexOf() 查找字符串是否含有某字符

  1. var sTr = "abcdefgh";
  2. var iNum = sTr.indexOf("c");
  3. alert(iNum); //弹出2

6、substring() 截取字符串 用法： substring(start,end)（不包括end）

  1. var sTr = "abcdefghijkl";
  2. var sTr2 = sTr.substring(3,5);
  3. var sTr3 = sTr.substring(1);
  4.  
  5. alert(sTr2); //弹出 de
  6. alert(sTr3); //弹出 bcdefghijkl

字符串反转

  1. var str = 'asdfj12jlsdkf098';
  2. var str2 = str.split('').reverse().join('');
  3.  
  4. alert(str2);
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script>
  9.         var iNum01 = 12;
  10.         var sNum01 = '12';
  11.         var sNum02 = '12.45';
  12.  
  13.         //alert(iNum01 + 10);
  14.         //alert(sNum01 + 10);// '1210'
  15.  
  16.         //alert(parseInt(sNum01) +10 );
  17.         // 将整数的字符串转换为整数，用parseInt，如果是小数，会去掉小数位
  18.         //alert( parseInt(sNum02) +10);
  19.  
  20.         // 将小数的字符串转化为小数，用parseFloat
  21.         //alert( parseFloat(sNum02) +10);
  22.  
  23.         // 将字符串分割，返回一个数组
  24.         var sTr = '2018-09-23';
  25.  
  26.         var aList = sTr.split('-');
  27.         var aList2 = sTr.split('');
  28.  
  29.         //alert(aList);
  30.         //alert(aList2);
  31.  
  32.         // 返回某小段字符在大段字符里面出现的索引值
  33.         var sTr2 = 'abcdefgh123ijkl123mn';
  34.  
  35.         var iPos = sTr2.indexOf('123');
  36.         var iPos2 = sTr2.indexOf('1234');
  37.  
  38.         //alert(iPos);
  39.         //alert(iPos2);
  40.  
  41.         // 字符串切片
  42.         var sTr3 = sTr2.substring(8,12);
  43.         // 只写一个数字，表示从这个这个数字对应的字符一直切到结尾
  44.         var sTr4 = sTr2.substring(8);
  45.         alert(sTr3);
  46.         alert(sTr4);
  47.  
  48.     </script>
  49. </head>
  50. <body>
  51.  
  52. </body>
  53. </html>

字符串操作

变量作用域

变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。

1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。

  1. // 定义全局变量
  2. var a = 12;
  3. function myalert()
  4. {
  5.     // 定义局部变量
  6.     var b = 23;
  7.     alert(a);
  8.     // 修改全局变量
  9.     a++;
  10.     alert(b);
  11. }
  12. myalert(); // 弹出12和23
  13. alert(a);  // 弹出13
  14. 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. MB SD Connect 5 vs 2017 FVDI2 Commander

    Both MB SD C5 and FVDI II are diagnostic and Programmer tools for Mercedes Benz Cars & Trucks.Th ...

  2. linux使用vim打开乱码问题

    在windows中编辑好的汉字文本文档,上传到Linux下打开乱码. [root@localhost ~]# rpm -ivh /mnt/Packages/lrzsz-0.12.20-36.el7.x ...

  3. P4389 付公主的背包

    注意 初始化的时候要这样写 for(int i=1,x;i<=n;i++){ scanf("%d",&x); v[x]++; } for(int i=1;i<= ...

  4. Python游戏编程入门4

    Math和Graphics:Analog Clock示例程序本章介绍Python的math模块,该模块可以执行计算,如常见的三角正弦函数.余弦函数.正切函数等. 使用正弦和余弦函数绘制圆创建Anlog ...

  5. enum & json 之间的转换

    enum 转为 string:EnumMember & StringEnumConverter public enum CampaignStatus : Int32 { [EnumMember ...

  6. vue v-if:"TypeError: Cannot read property 'length' of undefined"

    在使用v-if判断一个数组大小为0时,会出现 length 是undefined的错误:[Vue warn]: Error in render: "TypeError: Cannot rea ...

  7. python程序—士兵出击

    class Gun: def __init__(self,gun_type): self.gun_type=gun_type self.bullet_count= def add_bullet(sel ...

  8. 【python3】 函数 装饰器

    第一步 : 了解装饰器 装饰器模式,重点在于装饰,装饰的核心仍是被装饰的对象. 举一个栗子:我今天穿了一件短袖,但是突然一阵风,短袖没办法为我御寒,我想到的办法是将短袖变得更厚更长,但是改造之后,它就 ...

  9. hbuilder + 夜神模拟器

    1. 安装hbuilder.夜神模拟器 2. 将夜神模拟器设为手机版,启用急速模式 3. 打开夜神模拟器设置,进入关于手机,点击版本号启用开发者模式 4. 进入开发者模式设置,启用usb调试 5. h ...

  10. Pycharm快捷键设置（鼠标滚动控制字体大小）

    一.pycharm字体放大的设置 File —> setting —> Keymap —>在搜寻框中输入:increase —> Increase Font Size(双击) ...