HTML+CSS+JS-第12章 JavaScript数组

其他 2019-06-25 09:10:31 阅读次数: 0

HTML+CSS+JS-第11章 JavaScript条件和循环结构

 

第一阶段（A）（前端） 20天 120学时

第12章 JavaScript数组（12）

[学习课时] 本章共需要学习  6  课时

[目的要求] 

  1. 掌握JavaScript数组的申明和初始化
  2. 掌握JavaScript数组遍历的方法
  3. 掌握JavaScript数组增删改查的方法

[教学内容]

数组

  1. 什么是数组?

数组对象是使用单独的变量名来存储一系列的值。

如：可以用数组来保存一个会员用户的用户名、帐号、密码、电话号码等等。

  1. 创建数组

创建一个数组，有2种方法

使用new Array("张三","zhangshan")创建数组

<script type="text/javascript">

    //创建名字为user的数组，里面有四个值

    var user = new Array("张三","zhangshan","123456","13594876584");

    //或者

    var user = new Array();

    user[0] = "张三";

    user[1] = "zhangshan";

    user[2] = "123456";

    user[3] = "13594876584";

</script>

使用方括号var user = ["张三","zhangshan"]

<script type="text/javascript">

    //创建名字为user的数组，里面有四个值

    var user = ["张三","zhangshan","123456","13594876584"];

</script>

  1. 数组存储方式

栈内存

- 用于存储局部变量，数据使用完（程序退出局部变量作用域后），所占内存自动释放。

 

堆内存

- 用于存储数组和对象，通过new建立的实例都存放在堆内存中。

https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=f79ed6f1c3fdfc03e578e4beec04e0a9/242dd42a2834349b3c594e8ac9ea15ce36d3be65.jpg

普通变量和数组的保存方式不同，如下图：

  1. 访问数组元素

通过指定数组名以及索引号码，可以访问某个特定的元素

[0] 是数组的第一个元素。[1] 是数组的第二个元素

<script type="text/javascript">

    //创建名字为user的数组，里面有四个值

    var user = new Array("张三","zhangshan","123456","13594876584");

    //访问数组很简单，只需要使用方括号加下标

    alert(user[0]);//会弹窗输出“张三”

</script>

  1. 数组遍历

数组的遍历通常使用for循环，for循环 for / in简写的循环。

<script type="text/javascript">

    //创建名字为user的数组，里面有四个值

    var user = new Array("张三","zhangshan","123456","13594876584");

   

    for (var i in user) {

        document.write(user[i]+"<br/>");

    }

    //user.length:获取User数组的长度（个数）

    for (var i=0;i<user.length;i++) {

        document.write(user[i]+"<br/>");

    }

</script>

  1. 修改数组元素

修改数组元素的值就是给数组中的变量重新赋值：

<script type="text/javascript">

    //创建名字为user的数组，里面有四个值

    var user = new Array("张三","zhangshan","123456","13594876584");

    user[0] = "李四";//把数组中第1个元素的值修改为“李四”

    user[1] = "lisi";//把数组中第2个元素的值修改为“lisi”

    user[2] = "789";//把数组中第3个元素的值修改为“789”

    user[3] = "13569845684";//把数组中第4个元素的值修改为“13569845684”

</script>

  1. 删除数组元素

数组的长度在数组被初始化的时候确定，如需删除数组中的元素，应该把需要删除的元素移到数组的末尾，然后将数组的长度减1.

案例：demo01

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        //创建一个空的数组

        $num = new Array();

        //用循环给数组初始化10个数据（1···10）

        for ($i = 0;$i < 10;$i++) {

            $num[$i] = $i + 1;

        }

        //删除最后一个数

        $num.length = 9;

        //输出显示删除后的结果

        for($a in $num){

            document.write($num[$a]+"&nbsp;");

        }

    </script>

</html>

效果图

如需删除中间的元素，需要把该元素后面的所以元素往前移动一个位置，然后将数组长度减1。

实例：demo02

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        //创建一个空的数组

        $num = new Array();

        //用循环给数组初始化10个数据（1···10）

        for ($i = 0;$i < 10;$i++) {

            $num[$i] = $i + 1;

        }

        //删除第3个数，需要把第3个数后面的输全部往前移动一位

        for($i = 2,$temp = 0;$i < 10;$i++){

            $num[$i] = $num[$i+1];

        }

        $num.length = 9;

        //输出显示删除后的结果

        for($a in $num){

            document.write($num[$a]+"&nbsp;");

        }

    </script>

</html>

效果图

 

  1. 添加数组元素

如果是在数组末尾添加数组元素，操作很简单，只需要增加一个下标就可以了

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        //创建一个空的数组

        $num = new Array();

        //用循环给数组初始化10个数据（1···10）

        for ($i = 0;$i < 10;$i++) {

            $num[$i] = $i + 1;

        }

        //在数组末尾添加一个数据

        $num[10] = 100;

        //输出显示删除后的结果

        for($a in $num){

            document.write($num[$a]+"&nbsp;");

        }

    </script>

</html>

如果要在数组中间插入数据，那就需要使用循环，从需要加入数据的位置开始，讲后面的数据往后移动一位，然后在该位置上插入数据。

实例：demo04

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        //创建一个空的数组

        $num = new Array();

        //用循环给数组初始化10个数据（1···10）

        for ($i = 0;$i < 10;$i++) {

            $num[$i] = $i + 1;

        }

        //在数组第5个位置添加一个数据

        for ($i = 10;$i > 5;$i--) {

            $num[$i] = $i - 1;

        }

        $num[4] = 500;

        //输出显示删除后的结果

        for($a in $num){

            document.write($num[$a]+"&nbsp;");

        }

    </script>

</html>

效果图

 

数组的方法

  1. concat()连接两个或多个数组

array1.concat(array2,array3,...,arrayX)

实例：demo05

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        $arr1 = new Array("10","12");

        $arr2 = new Array("a","bb","ccc");

        $arr3 = new Array("哈哈","嘿嘿");

        $result = $arr1.concat($arr2,$arr3);

        document.write($result);

    </script>

</html>

效果图

  1. fill()用一个固定值替换数组的元素

array.fill(value, start, end)

注意: IE 11 及更早版本不支持 fill() 方法。

实例：demo06

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        $arr1 = new Array("10","12","哈哈");

        $arr1.fill('XXXX',1,5);

        document.write($arr1);

    </script>

</html>

效果图

  1. toString()数组变成字符串

实例：demo07

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        $arr1 = new Array("10","12","哈哈");

        $r = $arr1.join();

        $b = $arr1.toString();

        document.write($r);

        document.write("<br/>");

        document.write($b);

    </script>

</html>

效果图

把字符串分割为字符串数组【string.split(separator,limit)】

  1. push()向数组末尾添加一个或多个元素，并返回新的长度

array.push(item1, item2, ..., itemX)

实例：demo08

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        $arr1 = new Array("10","12","哈哈");

        $r = $arr1.push("你是谁");

        document.write($arr1);

        document.write("<br/>");

        document.write($r);

    </script>

</html>

效果图

  1. pop()删除数组的最后一个元素并返回删除的元素    

实例：demo09

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        $arr1 = new Array("10","12","哈哈");

        $r = $arr1.pop();

        document.write($arr1);

        document.write("<br/>");

        document.write($r);

    </script>

</html>

效果图

  1. unshift()向数组的开头添加一个或更多元素，并返回新的长度

array.unshift(item1,item2, ..., itemX)

实例：demo10

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        $arr1 = new Array("10","12","哈哈");

        $r = $arr1.unshift("多啦阿曼","分化");

        document.write($arr1);

        document.write("<br/>");

        document.write($r);

    </script>

</html>

效果图

  1. shift()删除并返回数组的第一个元素

实例：demo11

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        $arr1 = new Array("10","12","哈哈");

        $r = $arr1.shift();

        document.write($arr1);

        document.write("<br/>");

        document.write($r);

    </script>

</html>

效果图

  1. reverse()反转数组的元素顺序

实例：demo12

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        $arr1 = new Array("10","12","哈哈");

        $arr1.reverse();

        document.write($arr1);

    </script>

</html>

效果图

JavaScript 函数（高级）

  1. 函数参数

函数名后面的括号里面写的就是参数。参数的作用就是用于函数内部和函数外部数据的传递。也就是说：可以通过参数把函数外面的数据传入函数内部，并在内部使用，而且不会改变外部数据的值。

 

参数其实也就是变量。

 

语法：

functionName(parameter1, parameter2, parameter3) { // 要执行的代码…… }

 

参数的个数不限

function getNumber1($number){

    alert($number);

}

function getNumber2($n1,$n2){

    alert($n1 + $n2);

}

参数只能在函数内部使用，不可以在函数外使用函数内的参数和变量

如：

function getNumber3($number){

    $inner = $number;

}

document.write($inner);

会出现如下错误提示

表示未定义的变量

function getNumber3($number){

    $inner = $number;

}

document.write($number);

会出现如下错误提示

  1. 变量的作用域

变量的位置不同，分为全局变量和局部变量

  • 全局变量的作用范围是所有代码块，也就是说在任何一个位置都可以直接访问全局变量
  • 局部变量的作用范围是某一个代码块内部，也就是说只能在当前代码块内部使用。

实例：demo12  HTML

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/style.css"/>

    </head>

 

    <body>

        <table>

            <tr>

                <th colspan="4"><input type="text" id="show" /></th>

            </tr>

            <tr>

                <td><button onclick="getNumber(7)">7</button></td>

                <td><button onclick="getNumber(8)">8</button></td>

                <td><button onclick="getNumber(9)">9</button></td>

                <td><button onclick="getChar('*')">*</button></td>

            </tr>

            <tr>

                <td><button onclick="getNumber(4)">4</button></td>

                <td><button onclick="getNumber(5)">5</button></td>

                <td><button onclick="getNumber(6)">6</button></td>

                <td><button onclick="getChar('/')">/</button></td>

            </tr>

            <tr>

                <td><button onclick="getNumber(1)">1</button></td>

                <td><button onclick="getNumber(2)">2</button></td>

                <td><button onclick="getNumber(3)">3</button></td>

                <td><button onclick="getChar('+')">+</button></td>

            </tr>

            <tr>

                <td><button onclick="del()">c</button></td>

                <td><button onclick="getNumber(0)">0</button></td>

                <td><button onclick="compute('=')">=</button></td>

                <td><button onclick="getChar('-')">-</button></td>

            </tr>

        </table>

    </body>

    <script src="js/js.js" type="text/javascript" charset="utf-8"></script>

</html>

实例：demo12  CSS

table{

    border-collapse: collapse;

    margin: auto;

}

th,td{

    border: 6px solid gray;

    text-align: center;

    width: 60px;

    height: 60px;

}

th input{

    height: 35px;

    width: 90%;

    font-size: 20px;

    text-align: center;

}

td button{

    font-size: 20px;

    width: 60px;

    height: 60px;

    margin: 0;

    padding: 15px;

}

td:nth-child(4n) button{

    background-color: blueviolet;

    color: white;

}

实例：demo12  JS

$number = ''; //保存每次点击的数字（全局变量）

$up = ''; //保存上次点击的数字 （全局变量）

$char = '' //保存点击的运算符号（全局变量）

 

/**

 * 获取计算机按钮按下的数字

 */

function getNumber($n) {

    $number += '' + $n;

    document.getElementById('show').value += $n;

    console.log('数字：'+$number+'----上一个数字：'+$up);

}

 

/**

 * 获取计算机按钮按下的符号

 */

function getChar($c) {

    $char = $c;//把按下的符号键保存到char变量里面

    $up = $number;//把上一个数字保存到up变量里面

    $number = ''//把number变量重新变为空字符串，便于记录下一个数字

    console.log('符号：'+$char+'----上一个数字：'+$up);

    document.getElementById('show').value += $c;

}

 

/**

 * 计算结果

 */

function compute() {

    $up = parseInt($up);

    $number = parseInt($number);

    switch($char) {

        case '*':

            document.getElementById('show').value = ($up*$number);

            break;

        case '/':

            document.getElementById('show').value = ($up/$number);

            break;

        case '+':

            document.getElementById('show').value = ($up+$number);

            break;

        case '-':

            document.getElementById('show').value = ($up-$number);

            break;

        default:

            break;

    }

}

 

/**

 * 删除

 */

function del(){

    $up = '';

    $number = '';

    document.getElementById('show').value = '';

}

效果图

  1. 函数参数数组Arguments

实例：demo13

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

 

    <body>

    </body>

    <script type="text/javascript">

        x = sumAll(1, 123, 500, 115, 44, 88);

 

        function sumAll() {

            var sum = 0;

            for(var i = 0; i < arguments.length; i++) {

                sum += arguments[i];

            }

            return sum;

        }

       

        document.write(x)

    </script>

 

</html>

结果：871

  1. 函数返回值

有时，我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

<script type="text/javascript">

    //定义函数

    function myFunction() {

        var x = 5;

        return x;//在这里返回一个值，并且结束函数

        console.log(x);//这条语句不会执行

    }

   

    //使用函数

    var ret = myFunction()//使用函数的时候会获得函数的返回值，并保存在ret变量里

</script>

数组排序

  1. 冒泡排序

冒泡排序的基本思想是，对相邻的元素进行两两比较，顺序相反则进行交换，这样，每一趟会将最小或最大的元素“浮”到顶端，最终达到完全有序

实例：demo14

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

 

    <body>

    </body>

    <script type="text/javascript">

        var $nums = [12, 55, 4, 65,178,215,236,2,48,69,78,356,4];

        /**

         * 交换排序（冒泡排序）

         * 求：

         *     把数组从小到大排序

         * 思路：

         *      把数组中每一个数跟这个数后面的所有数进行比较

         *      如果后面的某一个数比这个数小

         *      就交换两个数的位置

         */

        for ($i = 0;$i < $nums.length;$i++) {

            for ($j = $i+1;$j < $nums.length;$j++) {

                if($nums[$i] > $nums[$j]){

                    temp = $nums[$i];

                    $nums[$i] = $nums[$j];

                    $nums[$j] = temp;

                }

            }

        }

       

        console.log($nums);

    </script>

 

</html>

效果图

  1. 选择排序

简单选择排序是最简单直观的一种算法，基本思想为每一趟从待排序的数据元素中选择最小（或最大）的一个元素作为首元素，直到所有元素排完为止，简单选择排序是不稳定排序。

 

实例：demo15

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

 

    <body>

    </body>

    <script type="text/javascript">

        $min = 7

        var $nums = [12, 55, 4, 65,178,215,236,2,48,69,78,356,4];

        /**

         * 交换排序（选择排序）

         * 求：

         *     把数组从小到大排序

         * 思路：

         *      把数组中每一个数跟这个数后面的所有数进行比较

         *      判断后面所有数中最小的数

         *      就交换两个数的位置

         */

        for ($i = 0;$i < $nums.length;$i++) {

            $min = $i;

            for ($j = $i+1;$j < $nums.length;$j++) {

                if($nums[$min] > $nums[$j]){

                    $min = $j;

                }

            }

            if($min != $j){

                $temp = $nums[$i];

                $nums[$i] = $nums[$min];

                $nums[$min] = $temp;

            }

        }

       

        console.log($nums);

    </script>

 

</html>

效果图

  1. 直接插入排序

直接插入排序基本思想是每一步将一个待排序的记录，插入到前面已经排好序的有序序列中去，直到插完所有元素为止。

实例：demo16

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

 

    <body>

    </body>

    <script type="text/javascript">

        $min = 7

        var $nums = [12, 55, 4, 65,178,215,236,2,48,69,78,356,4];

        /**

         * 直接插入排序（插入排序）

         * 求：

         *     把数组从小到大排序

         * 思路：

         *      从第二个数开始，把当前这个数和前面的所有数进行比较

         *      如果比前面的某个数小

         *      和交换前面那个数交换顺序

         */

        for ($i=0; $i<$nums.length;$i++) {

            for ($j=$i; $j>0;$j--) {

                if ($nums[$j] < $nums[$j-1]) {

                    $temp = $nums[$j];

                    $nums[$j] = $nums[$j-1];

                    $nums[$j-1] = $temp;

                }

            }

        }

       

        console.log($nums);

    </script>

 

</html>

效果图

[作业实验]

  1. 使用循环改变表格中单元格的样式：让奇数个单元格字体颜色变成红色

  1. 有如下数组，输出所以小于50的数

var $nums = [

   [12, 55, 4, 65, 178, 15, 33, 66, 594, 225],

   [56, 87, 225, 49, 124, 33],

   [59, 23, 26, 45, 48, 65, 987, 222],

   [33, 24, 5, 94, 1, 649, 616, 456, 21],

   [111, 222, 555, 378]

];

  1. 有如下数组，求所有两位数的数字的和

var $nums = [

   [12, 55, 4, 65, 178, 15, 33, 66, 594, 225],

   [56, 87, 225, 49, 124, 33],

   [59, 23, 26, 45, 48, 65, 987, 222],

   [33, 24, 5, 94, 1, 649, 616, 456, 21],

   [111, 222, 555, 378]

];

       结果：909

 

  1. 有如下数组，输出所有女生的除了性别之外的所有信息

var student = [

   ["张三","男","13594876584","美男"],

   ["李四","男","13594876555","美男"],

   ["范冰冰","女","13595468456","美女"],

   ["大桥","女","13595548569","美女"],

   ["吕布","男","13578945658","美男"],

   ["刘备","男","13576954874","美男"],

   ["哪咤","男","13579548455","美男"],

   ["甄姬","女","13587459548","美女"]

];

  1. 有如下数组，删除第二个数，并输出新的数组

  var $nums = [12, 55, 4, 65, 178, 15, 33, 66, 594, 225];

  1. 有如下数组，在第五个数据的位置插入999.

var $nums = [12, 55, 4, 65, 178, 15, 33, 66, 594, 225];

 

  1. 有如下两个数组

var $nums = [12, 55, 4, 65,178];

    var $chars = ['hello', 'hi', 'how are you'];

  1. 把$nums和$chars两个数组合并成一个数组
  2. 把保存后的结果保存到$new变量里面

  1. 有如下数组，将所有数据从小到大排序

var $nums = [12, 55, 4, 65,178,215,236,2,48,69,78,356,4];

 

 

HTML+CSS+JS-第13章 JavaScript对象

  1. HTML+CSS+JS精细化教程（新）适合学习和巩固基础（必掌握技能）
  2. JAVA语言（面向对象都不是事，重点是多线程、反射、网络编程、界面编程、设计模式、工程架构、文件系统）
  3. JAVA WEB（MySQL、JDBC、JSP、JSTL、EL、Servlet、Spring、Struts、MyBatis、SpringData等）
  4. Spring Boot2（新版2.X、底层原理深入剖析、更有点餐系统、大型博客系统、商铺平台等完整项目开始视频和源码）
  5. Python（小白基础语法、RESTfull API开发、爬虫、Django、Linux系统、制作小工具）
  6. Photoshop（CS5、CS6、CC2018视频教程、海量素材、酷炫特效制作、经典案例几百集）
  7. Unity2D/3D（手游开发、脚本开发、3D人物模型设计、3D动画、3D塔防游戏、第一人称游戏案例视频跟着做）
  8. Android原生开发（大型OA系统、游戏开发、物联网开发、3D模型显示、单机游戏开发）
  9. IOS原生开发（各种收费应用、游戏开发、工具开发、物联网开发）
  10. PHP（HTML+CSS+JS+PHP+MySQL+MVC+ThinkPHP+Linux+Nginx+Redis）

猜你喜欢

转载自blog.csdn.net/starzhangkiss/article/details/83000870
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022