一、数组的创建
- （一）Array()构造函数
- （二）字面量方法
二、数组元素的读写和遍历
三、添加和删除数组元素
- （一）添加数组元素
- （二）删除数组元素
- （三）splice()方法
四、二维数组及多维数组
五、数组的搜索和排序
- （一）数组的排序
- （二）数组的搜索
六、数组的截取和合并
例题

一、数组的创建

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[]数组的长度大小以及数组中的每项：

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

（二）字面量方法

另一种方法是通过字面量法创建数组，和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>

运行结果如下：

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

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>

运行结果如下：

例如下列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：

所以一般遍历输出数组元素时，可以直接将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>

输出结果：

三、添加和删除数组元素

（一）添加数组元素

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>

运行结果如下：

另外还可以通过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>

运行结果如下：

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>

运行结果如下：

另外还可以通过使用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>

运行结果如下：

（二）删除数组元素

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>

运行结果如下：

而通过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>

运行结果如下：
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>

运行结果如下：

（三）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、“语言”：

例如下列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>

运行结果如下：

例如下列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>

运行结果如下：

四、二维数组及多维数组

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

运行结果如下：

五、数组的搜索和排序

（一）数组的排序

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

运行结果如下：

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;elsereturn 0;}function desc(x, y) { //降序if (x < y)return 1;else if (x > y)return -1;elsereturn 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>

运行结果如下：

（二）数组的搜索

数组的搜索通过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>

运行结果如下：

六、数组的截取和合并

（一）数组的合并通过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>

运行结果如下：

（二）通过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>

运行结果如下：

例题

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

运行结果如下：

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

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

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

运行结果如下：

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

Web前端开发笔记——第四章 JavaScript程序设计第四节条件语句和循环语句
目录一.if条件语句二.while循环语句 (一)while()语句 (二)do--while语句三.for循环语句四.switch语句五.break语句和continue语句一.if条件 ...
Web前端开发笔记——第四章 JavaScript程序设计第三节数据类型
目录一.基本数据类型 (一)String类型 (二)Number类型 1.字面量 2.无穷大 3.非数值 (三)Boollean类型 (四)Undefined类型和Null类型二.引用数据类型 ( ...
Web前端开发笔记——第四章 JavaScript程序设计第二节变量
目录一.JavaScript中的注释二.变量的命名规则三.变量声明以及赋值四.变量作用域五.变量提升一.JavaScript中的注释 JavaScript中单行注释通过"//&q ...
Web前端开发笔记——第四章 JavaScript程序设计第一节 JavaScript的基础语法
目录一.JavaScript的定义二.代码的创建和使用 (一)内嵌JavaScript代码 (二)引用JavaScript文件三.代码的注释四.输出数据 (一)alert()弹出警告框 (二) ...
Web前端开发笔记——第三章 CSS语言第五节盒子模型
目录一.CSS布局与定位二.盒子模型三.盒子模型的组成四.设置边框的属性五.设置外.内边距的属性六.overflow 属性结语一.CSS布局与定位在CSS中对一个网页进行布局与定位, ...
Web前端开发笔记——第三章 CSS语言第六节 CSS定位
目录一.定义二.文档流定位 (一)block类型元素 (二)inline类型元素 (三)inline-block类型元素三.浮动定位 (一)左浮动和右浮动 (二)清除浮动四.层定位 (一)st ...
Web前端开发笔记——第三章 CSS语言第七节圆角边框、阴影
目录前言一.圆角边框 (一)border-×-×-radius (二)border-radius 二.阴影 (一)基本阴影设置 (二)内部阴影设置结语前言本节介绍仅在CSS3中的新内容,例如 ...
Web前端开发笔记——第三章 CSS语言第四节 CSS列表、表格样式
目录一.CSS列表样式 (一)设计列表项前标志类型 (二)设计列表项前标志位置 (三)设计列表项图片 (四)设计整体列表属性二.CSS表格样式 (一)设计表格大小 (二)设计表格边框 (三)奇偶选 ...
Web前端开发笔记——第三章 CSS语言第三节文本、字体、背景、超链接样式属性
目录一.CSS文本属性二.CSS字体属性 (一)常用文本字体样式属性 (二)设置整体font属性三.CSS背景属性 (一)背景颜色 (二)背景图片 (三)图片平铺方式 (四)图片位置 (五)设置 ...

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

目录

一、数组的创建

（一）Array()构造函数

（二）字面量方法

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

三、添加和删除数组元素

（一）添加数组元素

（二）删除数组元素

（三）splice()方法

四、二维数组及多维数组

五、数组的搜索和排序

（一）数组的排序

（二）数组的搜索

六、数组的截取和合并

例题

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

最新文章

热门文章

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

目录

一、数组的创建

（一）Array()构造函数

（二）字面量方法

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

三、添加和删除数组元素

（一）添加数组元素

（二）删除数组元素

（三）splice()方法

四、二维数组及多维数组

五、数组的搜索和排序

（一）数组的排序

（二）数组的搜索

六、数组的截取和合并

例题

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

最新文章

热门文章

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

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