前端之javascript1

程序员文章站 2022-08-09 22:33:54

前端之javascript1，内容包括 js介绍和js引入页面，JavaScript变量和操作元素,JavaScript函数，分支语句，数组和循环语句。其中，js介绍和js引入页面包括 JavaScript介绍，JavaScript嵌入页面的方式，javascript语句与注释;JavaScript... ......

js介绍和js引入页面

javascript介绍

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

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

javascript嵌入页面的方式

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

<input type="button" name="" onclick="alert('ok！');">

2、页面script标签嵌入

<script type="text/javascript">        
    var a = '你好！';
    alert(a);
</script>

3、外部引入

<script type="text/javascript" src="js/index.js"></script>

引入js示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>

    <!-- 第三种嵌入js的方式：外链js   -->
    <script type="text/javascript" src="js/hello.js"></script>
    
    <!-- 第二种嵌入js的方式：内嵌js   -->
    <script type="text/javascript">        
        alert("hello world too!");
    </script>

</head>
<body>

    <!-- 第一种嵌入js的方式：行间事件   -->
    <input type="button" name="" value="点击" onclick="alert('hello world!')">
</body>
</html>

javascript语句与注释

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

<script type="text/javascript">    
var a = 123;
var b = 'str';
function fn(){
    alert(a);
};
fn();
</script>

2、javascript注释

<script type="text/javascript">    
// 单行注释
var a = 123;

/*  
    多行注释
    1、...
    2、...
*/
var b = 'str';
</script>

javascript变量和操作元素

变量

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

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

变量类型

5种基本数据类型：
number、string、boolean、undefined、null

1种复合类型：
object

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

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

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

js变量声明和类型实例

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

获取元素方法一

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

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

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

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

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

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

<script type="text/javascript">
    window.onload = function(){
        var odiv = document.getelementbyid('div1');
    }
</script>
....
<div id="div1">这是一个div元素</div>

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

js获取元素改变样式实例

<!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>
<!--<script type="text/javascript">-->
    <!--var odiv = document.getelementbyid('div1');-->
    <!--odiv.style.color = 'red';-->
    <!--odiv.style.fontsize = '30px';-->
<!--</script>-->
</html>

操作元素属性

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

操作属性的方法 ：

“.” 操作
“[ ]”操作

属性写法

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

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

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

通过“[ ]”操作属性：

<!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 示例

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

javascript函数

函数的定义和调用

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

函数定义与执行

<script type="text/javascript">
    // 函数定义
    function aa(){
        alert('hello!');
    }
    // 函数执行
    aa();
</script>

函数的定义和调用示例

<!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。

<script type="text/javascript">    
    aa();       // 弹出 hello！
    alert(bb);  // 弹出 undefined
    function aa(){
        alert('hello!');
    }
    var bb = 123;
</script>

变量和函数预解析示例

<!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">

提取行间事件示例

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

匿名函数

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

<script type="text/javascript">
window.onload = function(){
    var obtn = document.getelementbyid('btn1');
    /*
    obtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
    */

    // 直接将匿名函数赋值给绑定的事件
    obtn.onclick = function (){
        alert('ok!');
    }
}
</script>

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

js匿名函数示例

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

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

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>

函数传参

<script type="text/javascript">
    function myalert(a){
        alert(a);
    }
    myalert(12345);
</script>

函数传参示例

<!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'关键字的作用：

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

return关键字使用示例

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

分支语句

条件语句

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

运算符

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

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 点击按钮隐藏显示示例

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

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

<!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语句网页换肤示例

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

运算符

加法运算练习

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

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

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

求余运算符
求余示例

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

赋值运算符

赋值运算符示例

<!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，所以我们需要用到===；

条件运算符示例

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

数组及操作方法示例

<!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;

多维数组示例

<!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循环简单示例

<!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循环将数据放入页面列表中

<!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">
    <!-- <li>美人鱼</li>
    <li>美人鱼</li>
    <li>美人鱼</li>
    <li>美人鱼</li>
    <li>美人鱼</li> -->
</ul>
</body>
</html>

while循环

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

数组去重

数组去重示例

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

上一篇： ES6迭代器

下一篇： JavaScript 基础