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

简介: 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

相关文章
|
1月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
54 3
|
29天前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
23天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
21天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
29 6
|
25天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
39 5
|
24天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
60 1
|
28天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
33 4
|
28天前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
1月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
1月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。