【你也能从零基础学会网站开发】Web建站之javascript入门篇 Array数组

极客小俊

已于 2024-03-12 09:50:32 修改

阅读量1.1k

点赞数 33

CC 4.0 BY-SA版权

分类专栏：编程开发免费教程文章标签： JavaScript 数组数组方法数组操作遍历数组免费教程 Array数组对象

于 2024-03-11 19:13:11 首次发布

本文链接：https://blog.youkuaiyun.com/windowsxp2018/article/details/136631295

编程开发免费教程专栏收录该内容

82 篇文章

订阅专栏

本文详细介绍了JavaScript中的数组概念、创建方式（包括空数组、指定长度和元素、直接创建），以及数组的分类（单维和多维）。涵盖了数组元素的操作，如读取、添加、删除、排序和常见方法的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

数组概述

实际开发中，总是面临大量数据存储的问题。JavaScript语言不像C/C++那样合适用于数据结构的设计，因此需要系统内部提供针对大量数据存储的工具，数组因此而产生。

JavaScript数组的目标是能组织存储各种各样的数据，并且访问方式和其它语言一样，特点是能混合存储类型不相同的数据。

数组的概念
JavaScript数组是指将多个数据对象编码存储、提供一致的存取方式的集合。
与其它程序语言不同的是，JavaScript的数组元素的数据类型可以不相同。

数组元素：是指存储在数组中并赋予唯一索引号的数据段 ,各元素的数据类型可以是任意有效的JavaScript数据类型，元素按添加进数组的顺序存储于数组中。

创建数组

在JavaScript中创建数组有以下几种方式:

1. 创建一个空数组 
2. 通过指定数组长度创建数组 
3. 通过指定数组元素创建数组 
4. 直接创建数组

数组的分类

数组目前我们经常使用到的就是单维数组/一维数组 和 多维数组的形式

单维数组/一维数组

如图

多维数组

如图

`创建一个空数组`

数组在创建时可以不包含任何元素数据，即空数组。

创建后返回一个数组对象，使用该对象可以往数组中添加元素。

语法如下

var Obj = new Array();

上述语句将创建一个空数组。

变量Obj引用创建后的数组对象，通过此变量可以操作数组，Array()为数组对象的构造函数!

`通过指定数组长度创建数组`

在创建数组时可以指定数组的元素长度，通过这种方式可以创建一个有指定元素个数的数组对象。

语法如下

var Obj = new Array( Size );

Size指明新建的数组有多少个元素。
数组对象的length将被设置为Size，仅指定长度但没有实际填充元素及其数据的数组将得不到数据存储空间 !

`通过指定数组元素创建数组`

新建的数组将包含创建时指定的元素，通常用在数据已经准备就绪的场合。

语法如下

var 变量 = new Array(值,值….值);

创建数组演示：数组善于将每个独立的数据组织起来，提供一致的访问方式。
现在创建一个数组用于保存“Peter”、“Tom”、“Vicky”和“Jet”这几个学生的名字

// 通过指定元素创建数组
var students = new Array("Peter", "Tom", "Vicky", "Jet");
// 逐个输出数组中的名字
for (n in students) {
    // 将名字写入当前文档流中
    document.write(students[n] + " ");
}

`创建二维数组`

通过指定数组中的元素为数组的方式可以创建二维甚至多维数组

举个栗子

var cnweek=new Array(7);
for (var i=0;i<=6;i++){
	cnweek[i]=new Array(2);
}
cnweek[0][0]="星期日";
cnweek[0][1]="Sunday";
cnweek[1][0]="星期一";
cnweek[1][1]="Monday";
cnweek[6][0]="星期六";
cnweek[6][1]="Saturday";

`直接创建数组`

JavaScript创建数组的另一种简便的方式是使用[]运算符直接创建，数组的元素也是创建时被指定。这种方法的目标也是创建数组，与前面的方法相比仅仅是语法上的不同。

例如:

var Obj = [ 元素1, 元素2, 元素3, …, 元素N ];

数组元素的基本操作

在JavaScript中, 我们主要操作数组元素的形式基本有如下几种:

读取数组元素
添加数组元素
删除数组元素
数组元素的个数(指数组的长度)

小提示: 尽管有很多种创建和操作，但通常使用其中一种就足够。

`读取数组元素`

读取数组元素最简单的方法就是使用[]运算符，使用[]运算符可以一次读取一个数组元素

语法如下

数组名[索引号/下标];

目标元素通常由下标索引号决定

例如: 读取第一个元素为数组名[0]，依此类推

下面的代码从一个填有商品名字数组中读出第二种商品的名字。

var products = new Array( “洗衣粉”, “香皂”, “洗洁精” ); 	// 商品列表
var product = products[ 1 ];						   // 取出第二种商品

`添加数组元素`

JavaScript的数组可以动态添加新元素，也可以动态删除原有的元素

添加新元素通常使用Array对象的push方法，push方法是将新元素添加到数组的尾部。

使用unshift可以将指定个数的新元素插入数组的开始位置，形成新的数组 ,

添加元素的一般形式:

例如

var students = new Array();		    // 创建一个没有任何元素的数组
students.push( “Lily” );			// 将Lily的名字添加到数组中

也可以使用[]运算符指定一个新下标来添加新元素，新元素添加到指定的下标处。

如果指定的下标超过数组的长度，数组将被扩展为新下标指定的长度。

`删除数组元素`

通常使用delete运算符删除一个指定的元素，如果需要删除全部元素只需要删除数组对象即可。

使用语法

Delete  数组名[下标];

例如: 使用数组作为学生名单，现要删除数组中第一个元素

代码如下

var names = Array( “李莉”, “杨杨” );	// 有两个名字的名单
delete names[0];			       // 删除第一名字“莉莉”

`移除数组顶端的元素`

pop方法是移除数组末端的一个元素，而shift方法正好相反，其移除数组的第一个元素并将其返回。

该方法执行后数组剩下的元素向前移动，下标索引号重新调整从0开始按顺序赋予所有元素。

语法如下

数组名.shift( );

在大家所熟知的基本数据结构中，队列非常有用，其遵循选进先出（FIFO）的规则，与堆栈不同。

shift和push方法结合使用，可以将数组当成队列使用!

`在数组顶端插入元素`

unshift是将元素插入数组的首部。一次可以插入单个或多个元素，所有元素按顺序插入，操作完成后返回新数组的引用。

语法如下

数组名.unshift( [元素1, [ 元素2, [ 元素3, […, [元素N ] ] ] ] ] );

unshift方法的使用与前面讲过的各方法一样。
如果不计较元素插入的位置，则推荐使用push方法。
因为unshift方法将引发所有下标的改动，可能会影响依靠下标才能准确进行的计算

`删除、替换或插入数组元素`

splice方法的作用是，从一个数组中移除一个或多个元素。
剩下的元素组成一个数组，移除的元素组成另一个数组并返回它的引用。
同时，原数组可以在移除的开始位置处顺带插入一个或多个新元素，达到修改替换数组元素的目的。

数组名. splice( start, deleteCount, [ item1 [, item2 [ , . . . [ , itemN ] ] ] ] );

参数解释
start：必选项，表示从数组中剪切的起始位置下标索引号。
deleteCount：必选项，表示将从数组中切取的元素的个数。
item：可选项，表示切取时插入原数组切入点开始处的一个或多个元素，要求为有效的JavaScript

颠倒数组元素的顺序

可以使用reverse方法将一个Array对象中所有元素的次序反转，
然后返回元素顺序反转后的Array对象的引用

例如

数组名.reverse( );

`对数组元素进行排序`

Array对象的sort方法可以将一个数组中的所有元素排序。

执行时先将调用该方法的数组中的元素按用户指定的方法进行排序，排序后的所有元素构成一个新数组并返回之。

语法如下

数组名.sort( [ sortfunction ] )

`数组元素的个数`

数组对象的length（长度）属性指示了数组元素的个数。
通过设定length属性可以指定数组的长度。
在得知长度情况下可以方便的遍历整个数组!

读取数组元素个数信息的方法如下代码所示：

var Obj = new Array( 1, 2, 3 );
var count = Obj.length;

尽管指定了数组的length属性，真正的有效元素只包含已经存入数据的元素，其它没有真正填充数据的元素仍然为空。

数组常见操作方法

JavaScript中还为数组提供了很多常用的一些数组方法，让我们可以更好的去操作数组

如下表:

类别	方法	说明
连接数组	join(bystr)	返回由bystr连接数组元素组成的字符串
toString()	返回由逗号(,)连接数组元素组成的字符串
concat(value,…)	返回添加参数中元素后的数组
数组排序	reverse()	返回反向的数组
sort()	返回排序后的数组

类别	方法	说明
获取子数组	slice(start,end)	通过数组元素起始和结束索引号获取子数组
splice(start, deleteCount, value)	对数组指定位置进行删除和插入
进出栈操作	push(value, …)	数组末端入栈操作
pop()	数组末端出栈操作
unshift(value,…)	数组首端入栈操作
shift()	数组首端出栈操作