备案控制台
开发者社区 开发与运维 文章 正文

Web前端开发笔记——第四章 JavaScript程序设计 第五节 数组

2022-10-30 61
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Web前端开发笔记——第四章 JavaScript程序设计 第五节 数组

一、数组的创建


JavaScript中数组和其它语言不一样，它的一个数组中可以存放多种类型的元素，即数组每一项可以是任何一种数据类型的数据，且数组的大小是可以动态调整的，即根据数据的增加而自动增长以容纳更多的数据。

有两种方式可以创建数组，分别是通过Array()构造函数和字面量方法创建，另外在数组中可以通过数组名.length的格式来返回数组的长度。


（一）Array()构造函数


通过Array()构造函数创建数组，这里的new是一个操作符，作用是通过构造函数来创建一个实例对象，如下：

var a1=new Array();//创建一个空数组
var a2=new Array(0);//创建一个空数组
var a3=new Array(5);//创建一个数组长度为5的数组，由于数组的特性，所以数组长度还是可以动态调整的
var a4=new Array(5,6,7);//创建一个数组，传入多个参数，作为初始化数据加到数组中
var a5=new Array("javascript",123,"语言");//数组每一项可以是任何一种数据类型的数据


例如下列html代码，在控制台输出两个数组：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>text1</title>
  </head>
  <body>
  <script>
    var number1 = new Array();
    console.log(number1);
    var number2 = new Array(10, "ada", 1.233);
    console.log(number2);
  </script>
  </body>
</html>


控制台中显示了number1[]和number2[]数组的长度大小以及数组中的每项：

1667130693518.jpg

展开后可看到length：0和length：3，即数组number1数组的长度为0，number2数组的长度为3如下：

1667130702413.jpg


（二）字面量方法


另一种方法是通过字面量法创建数组，和Array()构造函数一样，可以使用方括号“[ ]”创建空数组和向数组内传入初始化数据，但与不同的是无论传入几个参数，数组都会把传入的参数作为初始化内容，如下：

var a1=[];//创建一个空数组
var a2=[0];//创建一个数组，向数组内传入参数0，数组的长度为1，注意这里并不是空数组
var a3=[3];//创建一个数组，向数组内传入参数3，数组的长度为1
var a4=[2,3,4,5];//创建一个数组，向数组内传入参数2，3，4，5，数组的长度为4
var a4=[10, "ada", "数据段"];//传入不同数据类型的数据


例如下列html代码，在控制台中输出两个数组的长度和数组内的元素：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a1 = []
    var a2 = [100, "wwddw"]
    console.log(a1.length)
    console.log(a2.length)
    console.log(a1)
    console.log(a2)
  </script>
  </body>
</html>


运行结果如下：

1667130735206.jpg


二、数组元素的读写和遍历


JavaScript和c语言、c++以及java一样，数组的第一个元素的下标是0，例如创建一个数组长度为5的数组，即从第一个元素开始，依次的元素下标为0，1，2，3，4。

例如下列html代码：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a1 = new Array(3);
    a1[0] = 0.2;
    a1[1] = "wdwdwd";
    a1[2] = "数据结构";
    console.log(a1)
    var a2 = ["javascript", 123, "语言", 2.333];
    console.log(a2[2]); //在控制台中输出数组a2的元素下标为2的元素
  </script>
  </body>
</html>

运行结果如下：

1667130761962.jpg

例如下列html代码，在控制台通过for循环依次遍历输出数组a中每个元素，最后输出该数组的长度：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a = ["javascript", 123, "语言", 2.333];
    for (var i = 0; i <= a.length; i++)
    console.log(a[i])
    console.log(a.length)
  </script>
  </body>
</html>


运行结果如下，由于我们传入了四个参数，所以在i <= a.length时，进行了四次循环后退出循环，由于数组的第一个元素的下标是0，所以第四个元素为空即不含有值undefined：

1667130789716.jpg

所以一般遍历输出数组元素时，可以直接将number.length改为number.length-1，如下：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a = ["javascript", 123, "语言", 2.333];
    for (var i = 0; i <= a.length-1; i++)
    console.log(a[i])
    console.log(a.length)
  </script>
  </body>
</html>

输出结果：

1667130811895.jpg


三、添加和删除数组元素


（一）添加数组元素


1、若要在数组的首位添加元素，可通过设置一个变量等于数组的长度，即数组名称.length，然后通过数组赋值变量的方法将数组的第一个元素空出，将数组中的所有元素先后移一位。

例如下列html代码，循环遍历后将所有元素向后移一位，然后向数组的首位添加新的元素，并在控制台中输出添加后的数组：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a1 = ["javascript", 123, "语言", 2.333];
    for (var i = a1.length; i >= 0; i--)
    a1[i] = a1[i - 1];
    a1[0] = "第一个";
    console.log(a1);
  </script>
  </body>
</html>

运行结果如下：

1667130843826.jpg

另外还可以通过unshift()方法直接将元素插入数组的首位，可以一次插入一至多个元素。

例如下列html代码，通过unshift()方法向数组a1内一次性插入三个元素，然后输出添加后的数组：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a1 = ["javascript", 123, "语言", 2.333];
    a1.unshift(3, "sdd", "IWDJ");
    console.log(a1);
  </script>
  </body>
</html>

运行结果如下：

1667130865038.jpg

2、通过数组长度，即数组名称[数组名称.length]在数组的末尾添加新的元素。

例如下列html代码，向数组a2末尾添加一个元素，并在控制台中输出添加后的该数组：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a2 = ["javascript", 123, "语言", 2.333];
    a2[a2.length] = 122;
    console.log(a1)
  </script>
  </body>
</html>

运行结果如下：

1667130886586.jpg

另外还可以通过使用push()方法添加元素至数组末尾，该方法可在数组末尾添加一至多个元素。

例如下列html代码，通过push()方法在数组末尾添加两个元素，并在控制台中输出添加后的数组：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a2 = ["javascript", 123, "语言", 2.333];
    a2.push(0, "1+1");
    console.log(a2);
  </script>
  </body>
</html>

运行结果如下：

1667130906060.jpg


（二）删除数组元素


1、删除数组的首位元素和在首位添加一个元素一样，也是通过for循环，其中第二位元素把第一位的值覆盖，整体向前移动一位，但最后一位移动后为undefined，总的来说并没有真正的删除。

例如下列html代码，通过循环将数组的所有元素向前移动一位，并在控制台中输出数组，可见第一位元素被覆盖：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a1 = ["javascript", 123, "语言", 2.333];
    for (var i = 0; i < a1.length; i++)
    a1[i] = a1[i + 1];
    console.log(a1);
  </script>
  </body>
</html>


运行结果如下：

1667130930570.jpg

而通过shift()方法可以真正地删除数组的首位元素。

例如下列html代码，调用shift()方法，然后在控制台中输出删除后的数组：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a1 = ["javascript", 123, "语言", 2.333];
    a1.shift();
    console.log(a1);
  </script>
  </body>
</html>


运行结果如下：

1667130959757.jpg

2、通过pop()方法可以删除数组的最后一个元素。

例如下列html代码，调用pop()方法，然后在控制台中输出删除后的数组：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a1 = ["javascript", 123, "语言", 2.333];
    a1.pop();
    console.log(a1);
  </script>
  </body>
</html>


运行结果如下：

1667130984421.jpg


（三）splice()方法


当需要在数组的指定位置添加和删除元素时就要使用splice()方法，该方法格式如下：


splice(删除元素的开始位置,删除元素的个数,在删除元素的位置上所要插入的新元素)


例如下列html代码，删除从数组a1的下标1开始的2个元素，然后在控制台输出该数组：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a1 = ["javascript", 123, "语言", 2.333];
    a1.splice(1,2);
    console.log(a1);
  </script>
  </body>
</html>

运行结果如下，删除了元素123、“语言”：

1667131009787.jpg

例如下列html代码，从数组a1的下标3开始删除0个元素，添加3个元素，然后在控制台输出该数组：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a1 = ["javascript", 123, "语言", 2.333];
    a1.splice(3, 0, "wd", 6, "java");
    console.log(a1);
  </script>
  </body>
</html>

运行结果如下：

1667131077796.jpg

例如下列html代码，从数组a1的下标3开始删除3个元素，添加3个元素，然后在控制台输出该数组：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a1 = ["javascript", 123, "语言", 2.333];
    a1.splice(3, 3, "wd", 6, "java");
    console.log(a1);
  </script>
  </body>
</html>

运行结果如下：

1667131061886.jpg


四、二维数组及多维数组


在JavaScript中不能直接定义二维数组及多维数组，只能通过数组套数组的方式来实现矩阵、二维数组及多维数组。

例如下列html代码，创建了一个三维数组，一个数组内包含三个数组，通过其下标访问其元素并在控制台中输出：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var student = [
    ["xiaoming", 1, "男", 20],
    ["xiaohong", 2, "女", 19],
    ["xiaoxia", 3, "女", 18]
    ];
    console.log(student);
    console.log(student[0][0]);
    console.log(student[1][1]);
    console.log(student[2][2]);
  </script>
  </body>
</html>

运行结果如下：

1667131125573.jpg


五、数组的搜索和排序


（一）数组的排序


在JavaScript中，可以通过reverse()方法和sort()方法对数组进行排序，它们的返回值都是经过排序后的数组。

reverse()方法用于反转数组的所有元素，例如下列html代码：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a = [1, 10, 0, -9, 2, 96, 4, 3, -6, 8];
    a.reverse();
    console.log(a);
  </script>
  </body>
</html>


运行结果如下：

1667131154248.jpg


sort()方法用于升序排列数组，它会调用每个元素的toString()转型方法，即将元素转为字符串然后比较，但该方法不是最佳的方案，它可能会得到错误的排序结果，所以就需要定义一个函数来作为参数传递给sort()方法。

例如下列html代码，定义了两个函数作为参数传递给sort()方法，然后进行升序或降序排列后在控制台输出该数组：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    function asc(x, y) { //升序
    if (x < y)
      return -1;
    else if (x > y)
      return 1;
    else
      return 0;
    }
    function desc(x, y) { //降序
    if (x < y)
      return 1;
    else if (x > y)
      return -1;
    else
      return 0;
    }
    var a = [1, 10, 0, -9, 2, 96, 4, 3, -6, 8];
    a.sort(asc);
    console.log(a);
    a.sort(desc);
    console.log(a);
  </script>
  </body>
</html>


运行结果如下：

1667131181513.jpg


（二）数组的搜索


数组的搜索通过indexOf()和lastIndexOf()两个方法实现，indexOf()返回与参数匹配的第一个元素的索引，lastIndexOf()返回与参数匹配的最后一个元素的索引。

例如下列html代码，通过indexOf()和lastIndexOf()两个方法查找数组中元素为96的索引值：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a = [0, 96, 1, 4, 96, -6, 8];
    console.log(a.indexOf(96));
    console.log(a.lastIndexOf(96));
  </script>
  </body>
</html>

运行结果如下：

1667131210238.jpg


六、数组的截取和合并


（一）数组的合并通过slice()方法实现，slice()方法在无参时只是复制当前数组并返回，若传递的是元素，则元素会被添加到数组的末尾，而若传递的是数组时，则该方法会将该数组中的元素添加到结果数组中。

例如下列html代码：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a = [0, 96, 1, 2];
    var b = a.concat();
    console.log(b);
    var c = a.concat(2, 3, 4);
    console.log(a);
    console.log(c);
    var d = a.concat([1, 2, 3], [4, 5, 6]);
    console.log(d);
  </script>
  </body>
</html>

运行结果如下：

1667131247097.jpg


（二）通过concat()方法实现截取数组，要注意它不会影响原数组的值，它可以接收一个或多个参数，当为一个参数时，该方法截取返回从该参数开始到数组末尾的所有项；当为两个参数时，截取索引位置开始和结束之间的所有元素。

例如下列html代码：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
    var a = [0, 96, 1, 2];
    var b = a.slice(2);
    console.log(b);
    var c = a.slice(0, 2);
    console.log(c);
  </script>
  </body>
</html>

运行结果如下：

1667131268810.jpg


例题


例1、通过HTML语言和JavaScript程序编写一个一维数组长度为8，通过输入框输入文本或数字，实现整个数组的倒转和文本排序及数值排序。

代码如下：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <input type="text" id="txtNumbers" value="" />
  <input type="button" value="数组倒转" onclick="operateArray(1);" />
  <input type="button" value="数组排序(文本)" onclick="operateArray(2);" />
  <input type="button" value="数组排序(数值)" onclick="operateArray(3);" />
  <script>
    function operateArray(t) {
    var array = new Array(8);
    var array = document.getElementById("txtNumbers").value.split(",");
    switch (t) {
      case 1:
      array.reverse();
      break;
      case 2:
      array.sort();
      break;
      case 3:
      array.sort(sortFunc);
      break;
    }
    alert(array.toString());
    }
    function sortFunc(a, b) {
    return a - b;
    }
  </script>
  </body>
</html>

运行结果如下：

1667131300849.jpg

实现数组长度为8的数组内的文本倒转和排序：

1667131312188.jpg

1667131322380.jpg

实现数组长度为8的数组内的数字倒转和排序：

1667131333299.jpg

1667131341424.jpg


例2、用HTML语言和JavaScript程序编写一个一维数字数组，数组长度为7，通过输入框输入数组内的元素从而实现数组中所有数字的和与平均数。

代码如下：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <input type="text" id="Numbers" value="" />
  <input type="button" value="数组所有数字的和" onclick="operateArray(1);" />
  <input type="button" value="数组的平均数" onclick="operateArray(2);" />
  <script>
    function operateArray(t) {
    var sum = 0;
    var array = new Array(7);
    var array = document.getElementById("Numbers").value.split(",");
    switch (t) {
      case 1:
      for (var i = 0; i < 8; i++) {
        sum = sum + i;
      }
      alert(sum);
      break;
      case 2:
      for (var i = 0; i < 8; i++) {
        sum = sum + i;
      }
      alert(sum / 7);
      break;
    }
    }
  </script>
  </body>
</html>

运行结果如下：

1667131372301.jpg

1667131379999.jpg

文章标签：
Java
JavaScript
C++
C语言
前端开发
索引
关键词：
前端web
web前端
JavaScript数组
web笔记
web前端javascript
游客5pa3gelrqbo2g
目录
相关文章
北飞的山羊
|
3天前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
北飞的山羊
7 0
叫个什么名字
|
6天前
|
前端开发 JavaScript 开发者
新一代前端框架：革命性的Web开发利器
传统的前端框架在满足日益复杂的Web开发需求上逐渐显露出局限性，而新一代前端框架的出现，以其革命性的设计和功能，重新定义了Web开发的标准。本文将介绍这些新一代前端框架的特点和优势，并探讨它们在实际项目中的应用。
叫个什么名字
12 1
爱吃糖的范同学
|
10天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的？
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的？
爱吃糖的范同学
25 5
爱吃糖的范同学
|
10天前
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数？你是如何使用它的？
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数？你是如何使用它的？
爱吃糖的范同学
28 4
爱吃糖的范同学
|
10天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项？
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项？
爱吃糖的范同学
24 0
爱吃糖的范同学
|
10天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同？
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同？
爱吃糖的范同学
22 2
爱吃糖的范同学
|
10天前
|
前端开发 JavaScript
【Web 前端】$(document).ready() 是个什么函数？为什么要用它？
【5月更文挑战第2天】【Web 前端】$(document).ready() 是个什么函数？为什么要用它？
爱吃糖的范同学
22 4
爱吃糖的范同学
|
10天前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片？
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片？
爱吃糖的范同学
30 0
爱吃糖的范同学
|
11天前
|
JavaScript 前端开发
【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同？
【5月更文挑战第1天】【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同？
爱吃糖的范同学
33 5
爱吃糖的范同学
|
11天前
|
JavaScript 前端开发
【Web 前端】网页上有 5 个div元素，如何使用JQ来选择它们？
【5月更文挑战第1天】【Web 前端】网页上有 5 个div元素，如何使用JQ来选择它们？
爱吃糖的范同学
35 6

热门文章

最新文章

  • 1
    构建响应式Web界面：Flutter的跨界前端技术
  • 2
    如何在本地安装Flask并将其web界面发布到公网上远程访问协同开发
  • 3
    JAVA Web项目开发eclipse工具包配置（第一天）
  • 4
    探索现代Web应用中的微前端架构
  • 5
    JAVA Web项目开发SSM框架搭建（第一天）
  • 6
    JAVA Web项目开发创建Web项目（第一天）
  • 7
    构建响应式Web界面：Flexbox布局的力量
  • 8
    架构的未来：微前端与微服务的融合
  • 9
    调试前端时，在浏览器上修改参数并重新调用接口
  • 10
    前端开发新趋势：Web3、区块链和虚拟现实
  • 1
    监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
    145
  • 2
    Java Script 中的垃圾回收机制有哪些缺点
    18
  • 3
    描述 JavaScript 中的垃圾回收机制。
    21
  • 4
    如何使用 JavaScript 操作 DOM？
    20
  • 5
    解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
    22
  • 6
    JavaScript 中的数组方法有哪些？
    11
  • 7
    JS设置日期为0时0分0秒
    36
  • 8
    JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
    27
  • 9
    JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
    22
  • 10
    深入理解JavaScript中的闭包与作用域链
    10

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 使用SLB+2ECS+NAS，部署电商web网站的高可用架构
  • 1分钟SAE部署Web在线游戏
  • 前端开发基础3：CSS3常见显示属性
  • 语言入门-2：基本类型
  • 语言入门-1：环境构建
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）