前端之javascript1

我就是我 2021-12-23 06:11 217阅读 0赞

## js介绍和js引入页面 ##

学习前端脚本语言javascript的基本概念、页面引入方式、获取页面元素及操作元素属性的技巧，学习函数的基本定义方法和使用方法。

### JavaScript介绍 ###

JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。

前端三大块  
1、HTML：页面结构  
2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果  
3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能

### JavaScript嵌入页面的方式 ###

1、行间事件（主要用于事件）

2、页面script标签嵌入

3、外部引入

引入js示例

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    
        
        <script type="text/javascript" src="js/hello.js"></script>
        
        
        <script type="text/javascript">        
            alert("hello world too!");
        </script>
    
    </head>
    <body>
    
        
        <input type="button" name="" value="点击" onclick="alert('hello world!')">
    </body>
    </html>

引入js示例

### javascript语句与注释 ###

1、一条javascript语句应该以“;”结尾

2、javascript注释

## JavaScript变量和操作元素 ##

### 变量 ###

JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 'var'：

var a = 123;
     var b = 'asd';
     //同时定义多个变量可以用","隔开，公用一个‘var’关键字
     var c = 45,d='qwe',f='68';

**变量类型**

5种基本数据类型：  
1、number 数字类型  
2、string 字符串类型  
3、boolean 布尔类型 true 或 false  
4、undefined undefined类型，变量声明未初始化，它的值就是undefined  
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null

1种复合类型：  
object

**变量、函数、属性、函数参数命名规范**

1.  区分大小写
2.  第一个字符必须是字母、下划线（\_）或者美元符号（$）
3.  其他字符可以是字母、下划线、美元符或数字

js定义变量使用var定义，可以一行定义一个，也可以一个var定义多个变量；

**匈牙利命名风格：**

对象o Object 比如：oDiv  
数组a Array 比如：aItems  
字符串s String 比如：sUserName  
整数i Integer 比如：iItemCount  
布尔值b Boolean 比如：bIsComplete  
浮点数f Float 比如：fPrice  
函数fn Function 比如：fnHandler  
正则表达式re RegExp 比如：reEmailCheck

js变量声明和类型实例

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            // 单行注释
    
            /*
                多行注释
                下面将两个变量申明合成一句
            */
    
            //var iNum = 12;
            //var sTr = 'abc';
            var iNum = 12, sTr = 'abc';
            var iNum02;
            //alert(iNum);
            //alert(sTr);
            alert(iNum02);
        </script>
    </head>
    <body>
    
    </body>
    </html>

js变量声明和类型实例

### 获取元素方法一 ###

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：

上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：

第一种方法：将javascript放到页面最下边

....
    <div id="div1">这是一个div元素</div>
    ....
    <script type="text/javascript">
        var oDiv = document.getElementById('div1');
    </script>
    </body>

第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。

如果我们要通过js给元素添加样式，比如设置font-size=30px；注意要将-的书写方式改为驼峰式的书写方式，比如fontSize，否则会报错；

js获取元素改变样式实例

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            window.onload = function () {
                /*
                document.getElementById('div1').style.color = 'red';
                document.getElementById('div1').style.fontSize = '30px'
                用变量简化代码：
                */
                var oDiv = document.getElementById('div1');
    
                oDiv.style.color = 'red';
                oDiv.style.fontSize = '30px';
            }
        </script>
    </head>
    <body>
    <div id="div1">这是一个div元素</div>
    </body>
    
        
        
        
    
    </html>

js获取元素改变样式实例

### 操作元素属性 ###

获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。

**操作属性的方法** ：

1.  “.” 操作
2.  “\[ \]”操作

**属性写法**

1.  html的属性和js里面属性写法一样
2.  “class” 属性写成 “className”
3.  “style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

通过“.”操作属性：  
操作元素属性实例

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            window.onload = function(){
                var oDiv = document.getElementById('div1');
                var oA = document.getElementById('link');
                var oDiv2 = document.getElementById('div2');
    
                // 读取属性
                var sId = oDiv.id;
                alert(sId);
                
                // 写属性
                oDiv.style.color = "red";
                oA.href = "http://www.baidu.com";
                oA.title = "这是去到百度网的链接";
                
                // 操作class属性需要写成 className
                oDiv2.className = "box2";
            }
        </script>
    
        <style type="text/css">
            .box{
          
                font-size:20px;
                color:gold;
            }
            .box2{
          
                font-size:30px;
                color:pink;
            }
        </style>
    </head>
    <body>
        <div id="div1">这是一个div元素</div>
        <a href="#" id="link">这个一个链接</a>
        <div class="box" id="div2">这是第二个div</div>
    </body>
    </html>

操作元素属性实例

通过“\[ \]”操作属性：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            window.onload = function(){
                var oDiv = document.getElementById('div1');
                var sMystyle = 'fontSize';
                var sValue = '30px';
                // oDiv.style.fontSize = sValue;  //这句话有效
                /*    
                    这一句没有作用：变量sMystyle被认为是一个属性
                    oDiv.style.sMystyle = sValue;
                */
                /* 属性用变量来代替的话需要用[]来操作*/
                oDiv.style[sMystyle] = sValue;
            }
        </script>
    </head>
    <body>
        <div id="div1">这是一个div元素</div>
    </body>
    </html>

通过“\[ \]”操作属性示例

改变元素内容

**innerHTML**  
innerHTML可以读取或者写入标签包裹的内容  
常用于从数据库读取内容，然后塞入标签内；

innerHTML只能修改标签内包裹的元素，不能修改已有的标签，但你可以向标签内再塞入标签。

innerHTML 示例

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            window.onload = function(){
                var oDiv = document.getElementById('div1');
                // 读取元素里面的内容
                var sTr = oDiv.innerHTML;
                alert(sTr);
                // 写元素里面的内容
                //oDiv.innerHTML = "修改的文字";
                oDiv.innerHTML = "<a href='http://www.baidu.com'>百度一下</a>"
            }
        </script>
    </head>
    <body>
        <div id="div1">这是一个div元素</div>
    </body>
    </html>

innerHTML 示例

## JavaScript函数 ##

### 函数的定义和调用 ###

函数  
函数就是可以重复执行的代码片。

函数定义与执行

函数的定义和调用示例

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
    
    
            //函数的定义
            function fnMyalert()
            {
                alert('hello world!');    
            }
            //函数调用执行
            // fnMyalert();
    
            function fnChange(){
                var oDiv = document.getElementById('div1');
                oDiv.style.color = "red";
                oDiv.style.fontSize = "30px";
            }
    
        </script>
    </head>
    <body>
        
        <div id="div1" onclick="fnMyalert()">这是一个div元素</div>
        <input type="button" name="" value="改变div" onclick="fnChange()">
    </body>
    </html>

函数的定义和调用示例

### 变量与函数预解析 ###

JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。

变量和函数预解析示例

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            // 预解析会让变量的声明提前
            alert(iNum);  //弹出undefined
            
            // 使用一个未声明的变量，出错！
            //alert(iNum02);
            var iNum = 12;
            
            // 预解析会让函数的声明和定义提前
            myalert();
            
            function myalert(){
                alert('hello world!');
            }
        </script>
    </head>
    <body>
        
    </body>
    </html>

变量和函数预解析示例

### 提取行间事件 ###

在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离。

为什么要提取行间事件？  
原来我们是将函数事件直接放在html代码里面，这样的话，在维护时容易误删导致函数不能正确执行；还有就是应该将js相关的放在一起，实现代码分离，方便观看和维护；

<script type="text/javascript">        
        function myalert(){
            alert('ok!');
        }
    </script>
    ......
    <input type="button" name="" value="弹出" onclick="myalert()">
    
    
    <script type="text/javascript">
    
    window.onload = function(){
        var oBtn = document.getElementById('btn1');
        oBtn.onclick = myalert;
        function myalert(){
            alert('ok!');
        }
    }    
    </script>
    ......
    <input type="button" name="" value="弹出" id="btn1">

提取行间事件示例

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            window.onload = function(){
                var oBtn = document.getElementById('btn01');
    
                // 将事件属性和一个函数关联，函数不能写小括号，写了会马上执行
                oBtn.onclick = fnChange;
    
                function fnChange(){
                    var oDiv = document.getElementById('div1');
                    oDiv.style.color = "red";
                    oDiv.style.fontSize = "30px";
                }
            }
        </script>
    </head>
    <body>
        <div id="div1">这是一个div元素</div>
        <input type="button" name="" value="改变div" id="btn01">
    </body>
    </html>

提取行间事件示例

注意：

在行间调用函数时函数后面要写小括号；

提取行间事件时 oBtn.onclick = fnChange(); 是错误的，不能加括号，否则会不用点击，直接执行，正确的应该是oBtn.onclick = fnChange;

### 匿名函数 ###

定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。  
匿名函数适合是给某个元素做一件事情的情况，如果要为多个元素做事，就需要将函数命名，不能使用匿名函数了。

实际上实现提取行间事件并不是函数的最终写法，我们用的比较多的是 匿名函数的写法，如下。

js匿名函数示例

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            window.onload = function(){
                var oBtn = document.getElementById('btn01');
                /* 提取行间事件写法
                oBtn.onclick = fnChange;
                function fnChange(){
                    var oDiv = document.getElementById('div1');
                    oDiv.style.color = "red";
                    oDiv.style.fontSize = "30px";
                }            
                */
                
                // 最终写法-转化成匿名函数的写法：
                oBtn.onclick = function(){
                    var oDiv = document.getElementById('div1');
                    oDiv.style.color = "red";
                    oDiv.style.fontSize = "30px";
                };
            }
        </script>
    </head>
    <body>
        <div id="div1">这是一个div元素</div>
        <input type="button" name="" value="改变div" id="btn01">
    </body>
    </html>

js匿名函数示例

匿名函数综合示例-网页换肤

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

skin01.css
    body{
        background-color:green;
    }
    
    input{
        width:200px;
        height:50px;
        background-color:gold;
        border:0;
    }
    
    skin02.css
    body{
        background-color:#ddd;
    }
    
    input{
        width:200px;
        height:50px;
        border-radius:25px;
        background-color:pink;
        border:0;
    }
    
    网页换肤.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="css/skin01.css" id="link01">
        <script type="text/javascript">
            window.onload = function(){
                var oBtn01 = document.getElementById('btn01');
                var oBtn02 = document.getElementById('btn02');
                var oLink = document.getElementById('link01');
    
                oBtn01.onclick = function(){
                    oLink.href = "css/skin01.css";
                };
                oBtn02.onclick = function(){
                    oLink.href = "css/skin02.css";
                }
            }
        </script>
    </head>
    <body>
        <input type="button" name="" value="皮肤一" id="btn01">
        <input type="button" name="" value="皮肤二" id="btn02">
    </body>
    </html>

匿名函数综合示例-网页换肤

### 函数传参 ###

函数传参示例

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            window.onload = function(){
                function fnMyalert(a){
                    alert(a);
                }
                //fnMyalert('hello world!');
                
                function fnChangestyle(mystyle,val){
                    var oDiv = document.getElementById('div1');
                    oDiv.style[mystyle] = val;
                }
                fnChangestyle('fontSize','30px');
                fnChangestyle('color','red');
                fnChangestyle('backgroundColor','pink');
            }
        </script>
    </head>
    <body>
        <div id="div1">这是一个div元素</div>
    </body>
    </html>

函数传参示例

### 函数'return'关键字 ###

函数中'return'关键字的作用：

1.  返回函数执行的结果
2.  结束函数的运行
3.  阻止默认行为

return关键字使用示例

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            
            function fnAdd(a,b) {
                var c = a + b;
                // 返回c的值，然后结束函数的运行
                return c;
    
                alert("函数内部的c="+c);
            }
    
            var iResult = fnAdd(2,5);
            alert(iResult);
        </script>
    </head>
    <body>
        
    </body>
    </html>

return关键字使用示例

## 分支语句 ##

### 条件语句 ###

通过条件来控制程序的走向，就需要用到条件语句。

**运算符**

*  算术运算符： +(加)、 -(减)、 \*(乘)、 /(除)、 %(求余)
 *  赋值运算符：=、 +=、 -=、 \*=、 /=、 %=
 *  条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

### if else ###

if else 的简单使用示例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            var iNum01 = 12;
            var iNum02 = 24;
    
            if(iNum01>iNum02){
                alert('iNum01大于iNum02');
            }
            else{
                alert('iNum01不大于iNum02');    
            }
        </script>
    </head>
    <body>
        
    </body>
    </html>

if else 点击按钮隐藏显示示例

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            window.onload = function(){
                var oBtn = document.getElementById('btn01');
                var oDiv = document.getElementById('box01');
                // oDiv.style.display 是读取的标签里写的display属性值，如果没有写，这个值为空
                oBtn.onclick = function(){
                    if(oDiv.style.display=='block'||oDiv.style.display=='')
                    {
                        oDiv.style.display = 'none';
                    }
                    else
                    {
                        oDiv.style.display = 'block';
                    }                
                }
            }
        </script>
        <style type="text/css">        
            .box{
          
                width:200px;
                height:400px;
                background-color:gold;
            }
        </style>
    </head>
    <body>
        <input type="button" name="" value="切换" id="btn01">
        <div class="box" id="box01"></div>
    </body>
    </html>

if else 点击按钮隐藏显示示例

else if 多重条件判读语句  
多重条件判读语句示例

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            window.onload = function () {
                var iWeek = 5;
                var oBody = document.getElementById('body01');
    
                if (iWeek == 1) {
                    oBody.style.backgroundColor = 'gold';
                } else if (iWeek == 2) {
                    oBody.style.backgroundColor = 'green';
                } else if (iWeek == 3) {
                    oBody.style.backgroundColor = 'pink';
                } else if (iWeek == 4) {
                    oBody.style.backgroundColor = 'yellowgreen';
                } else if (iWeek == 5) {
                    oBody.style.backgroundColor = 'lightblue';
                } else {
                    oBody.style.backgroundColor = 'lightgreen';
                }
            }
        </script>
    </head>
    <body id="body01">
    
    </body>
    </html>

多重条件判读语句示例

### switch ###

switch语句的性能比else if语句的性能高；  
switch语句网页换肤示例

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            window.onload = function(){
                var iWeek = 3;
                var oBody = document.getElementById('body01');
    
                /*if(iWeek==1){
                    oBody.style.backgroundColor = 'gold';
                }
                else if(iWeek==2)
                {
                    oBody.style.backgroundColor = 'green';
                }
                else if(iWeek==3){
                    oBody.style.backgroundColor = 'pink';
                }
                else if(iWeek==4){
                    oBody.style.backgroundColor = 'yellowgreen';
                }
                else if(iWeek==5){
                    oBody.style.backgroundColor = 'lightblue';
                }
                else{
                    oBody.style.backgroundColor = 'lightgreen';
                }*/
    
                switch (iWeek){
                    case 1:
                        oBody.style.backgroundColor = 'gold';
                        break;
                    case 2:
                        oBody.style.backgroundColor = 'green';
                        break;
                    case 3:
                        oBody.style.backgroundColor = 'pink';
                        break;
                    case 4:
                        oBody.style.backgroundColor = 'yellowgreen';
                        break;
                    case 5:
                        oBody.style.backgroundColor = 'lightblue';
                        break;
                    default:
                        oBody.style.backgroundColor = 'lightgreen';
                }
            }
        </script>
    </head>
    <body id="body01">
        
    </body>
    </html>

switch语句网页换肤示例

### 运算符 ###

加法运算练习

用.value()获取input输入的两个数字，提交后弹出加法结果

注意，从input框中输入的都是字符串，在js中需要使用 parseInt 转换成int类型；

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            window.onload =function(){
                var oInput01 = document.getElementById('input01');
                var oInput02 = document.getElementById('input02');
                var oBtn = document.getElementById('btn');
    
                oBtn.onclick = function(){
                    var iVal01 = parseInt(oInput01.value);
                    var iVal02 = parseInt(oInput02.value);
    
                    alert(iVal01+iVal02);
                }
            }
        </script>
    </head>
    <body>
        <input type="text" name="" id="input01"> ＋
        <input type="text" name="" id="input02">
    
        <input type="button" name="" value="相加" id="btn">
    </body>
    </html>

加法运算练习示例

**求余运算符**  
求余示例

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            var iNum01 = 11;
            var iNum02 = 2;
            //alert(iNum01%iNum02);  // 弹出1
            
            var iNum03 = 0;
            var iNum04 = 10;
            alert(iNum03%iNum04);  // 弹出0
        </script>
    </head>
    <body>
        
    </body>
    </html>

求余示例

**赋值运算符**

赋值运算符示例

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            var iNum01 = 12;
    
            // iNum01 = iNum01 + 2; 可以简写成下面的写法：
            iNum01 += 2;
            alert(iNum01); // 弹出14
            
            // iNum01 = iNum01 - 5;  可以简写成下面的写法：
            iNum01 -= 5;
            alert(iNum01);
            
            //iNum01 = iNum01*2; 可以简写成下面的写法：
            iNum01 *= 2;
            alert(iNum01);
            
            //iNum01 = iNum01/2;
            iNum01 /= 2;
            alert(iNum01);
            
            //iNum01 = iNum01%2;
            iNum01 %= 2;
            alert(iNum01);
    
            iNum01++;  // 等同于 iNum01 += 1 ;
            alert(iNum01);
        </script>
    </head>
    <body>
        
    </body>
    </html>

赋值运算符示例

**条件运算符**

在js中，==判断是否相等存在一个bug，就是数字的2和字符串的2使用==判断其实是True，所以我们需要用到===；

条件运算符示例

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            var iNum01 = 2;
            var sNum01 = '2';
            /*
            用“==” 弹出相等
            if(iNum01==sNum01){
                alert('相等');
            }
            else{
                alert('不相等');
            }
            */
    
            if (iNum01 === sNum01) {
                alert('相等');
            } else {
                alert('不相等');
            }
    
            if (3 != 4) {
                alert(true);
            } else {
                alert(false);
            }
    
            // 将逻辑运算的结果取反，比如运算是true，取反后就是false
            if (!4 > 3) {
                alert('大于')
            } else {
                alert('不大于')
            }
            // 多个条件运算，都是true，最终结果才是true
            if (4 > 3 && 5 > 6) {
                alert('都是大于')
            } else {
                alert('不是都大于')
            }
    
            // 多个条件运算中只要有一个是true，最终结果就是true
            if (4 > 3 || 5 > 6) {
                alert('只有部分大于')
            } else {
                alert('都不大于')
            }
        </script>
    </head>
    <body>
    
    </body>
    </html>

条件运算符示例

## 数组和循环语句 ##

### 数组及操作方法 ###

数组就是一组数据的集合，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、unshift()和 shift() 从数组前面增加成员或删除成员

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

6、reverse() 将数组反转

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

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

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

8、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

数组及操作方法示例

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            // 通过类实例化来创建数组
            var aList01 = new Array(1, 2, 3);
            
            // 通过直接量的方式创建数组
            var aList02 = ['a', 2, 3];
            
            // 通过length来获取数组成员的个数
            //alert(aList02.length);
    
            // 通过下标操作数组的某个成员
            //alert(aList02[0]);
            
            // 通过push方法在数组的后面增加成员
            aList02.push('b');
            //alert(aList02); // 弹出a,2,3,b
    
            aList02.pop();
            //alert(aList02); // 弹出a,2,3
    
            aList02.unshift('b');
            //alert(aList02);  // 弹出b,a,2,3
    
            aList02.shift();
            //alert(aList02); // 弹出a,2,3
            
            aList02.reverse();
            //alert(aList02); // 弹出3,2,a
            
            var aList03 = ['a', 'b', 'c', 'd', 'a', 'b'];
            //alert(aList03.indexOf('b')); //弹出1
            
            // 第一个参数是开始的位置，第二个参是从起始位置删除多少个成员，第三个（包括第三个）之后是要增加的成员的值
            aList03.splice(1, 0, 'e');
            //alert(aList03); // 弹出 a,e,b,c,d,a,b
            
            aList03.splice(1, 2, 'f', 'g');
            //alert(aList03); // 弹出 a,f,g,c,d,a,b
            
            var sTr = aList03.join("-");  // 数组执行方法后返回一个字符串
            alert(sTr);
            
            var sTr2 = aList03.join("");
            alert(sTr2);
        </script>
    </head>
    <body>
    
    </body>
    </html>

数组及操作方法示例

### 多维数组 ###

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

var aList = [[1,2,3],['a','b','c']];
    alert(aList[0][1]); //弹出2;

多维数组示例

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
          var aList = [[1,2,3,4],['a','b','c'],[6,7,8]];
          //alert(aList.length);
          alert(aList[0].length);
          
          alert(aList[1][0]);
        </script>
    </head>
    <body>
        
    </body>
    </html>

多维数组示例

### 循环语句 ###

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

#### for循环 ####

for(var i=0;i<len;i++)
    {
        ......
    }

for循环简单示例

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            /* for(var i=0;i<5;i++)
             {
                  alert('ok!');
             }*/
            
            var aList = ['a', 'b', 'c', 'd'];
            var iLen = aList.length;
    
            for (var i = 0; i < iLen; i++) {
                alert(aList[i]);
            }
        </script>
    </head>
    <body>
    
    </body>
    </html>

for循环简单示例

for循环将数据放入页面列表中

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            window.onload = function () {
                var oUl = document.getElementById('list');
                var aList = ['美人鱼', '疯狂动物城', '魔兽', '美国队长3', '湄公河行动'];
                var iLen = aList.length;
                var sTr = '';
    
                for (var i = 0; i < iLen; i++) {
                    sTr += '<li>' + aList[i] + '</li>';
                }
                oUl.innerHTML = sTr;
            }
        </script>
    
        <style type="text/css">
            .list {
          
                list-style: none;
                margin: 50px auto 0;
                padding: 0;
                width: 300px;
                height: 305px;
            }
            .list li {
          
                height: 60px;
                border-bottom: 1px dotted #000;
                line-height: 60px;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
    <ul class="list" id="list">
        
    </ul>
    </body>
    </html>

for循环将数据放入页面列表中

#### while循环 ####

var i=0;
    while(i<8){
        ......
        i++;
    }

#### 数组去重 ####

数组去重示例

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            var aList = [2, 3, 4, 3, 5, 6, 7, 8, 3, 4, 5, 2, 7, 8, 9, 3, 4, 5, 6, 3, 4, 8, 9];
            var iLen = aList.length;
            var aList2 = [];
    
            for (var i = 0; i < iLen; i++) {
                if (aList.indexOf(aList[i]) == i) {
                    aList2.push(aList[i]);
                }
            }
            alert(aList2);
        </script>
    </head>
    <body>
    
    </body>
    </html>

数组去重示例

转载于:https://www.cnblogs.com/yifchan/p/html-1-7.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211223/19e518500a7f455eb5d5908e2341e0ec.png