初识数组

1.数组的定义：数组是储存一系列值的变量集合，它由一个或多个数组元素组成，各元素之间使用英文逗号分隔，每个数组元素由“下标（索引）”和“值”构成；
2.“下标（索引）”和“值”：
·“值”为元素的内容，可以为任意类型的数据，也可以是数组；

var example = ['abc', 2333, ['efg','WuHan'], ''];

·“下标（索引）”以数字表示，**默认情况下它都是自0开始从左向右依次递增，**用于识别元素；

3.数组的分类：

• 一维数组：“值”非数组类型的数据；
• 二维数组：“值”是一个一维数组；
• 多维数组：数组间的套娃；

创建数组

使用Array对象创建数组

实例化Array对象创建数组是通过new关键字实现的；

var mix = new Array(123, 'abc', true, null);
var arr1 = new Array();	//创建空数组

直接使用“[ ]”创建数组

var mix = [123, 'abc', true, null,];	//数组最后一个元素后面的逗号可有可无
var arr1 = ['23333', , , 'China'];
//使用“[]”可以创建含义空存储位置的数组，而实例化Array对象不能

数组的基本操作

获取数组长度

1.Array对象提供的length属性可以获取数组长度，其长度等于最大下标加1；

var arr1 = [1, 2, 3];
var arr2 = ['abc', , , 'e'];
console.log(arr1.length);	//输出结果：3
console.log(arr2.length);	//输出结果：4，空存储位置也会占用长度

2.在使用Array对象创建数组时，可以指定数组长度；

var arr = new Array(4);
console.log(arr);	//输出结果：[empty*4]

3.数组的length属性不仅能获取其长度，还能修改数组长度；

var arr1 = [];
arr1.length = 5;
console.log(arr1);	//输出结果：[empty*5]
var arr2 = [1, 2, 3];
arr1.length = 4;
console.log(arr2);	//输出结果：[1,2,3,empty]
var arr3 = ['a', 'b'];
arr1.length = 2;
console.log(arr3);	//输出结果：["a","b"]
var arr4 = ['a', 'b', 'c', 'd'];
arr1.length = 3;
console.log(arr4);	//输出结果：["a","b","c"]

• 若length的值大于数组中原本存在的元素个数，那么没有值的数组元素将占据空存储位置；
• 若length的值等于数组中原本存在的元素个数，那么其长度不变；
• 若length的值小于数组中原本存在的元素个数，那么多余的数组元素会被舍弃；

数组的访问与遍历

访问数组元素

通过“数组名[下标]”的方法，可以获取指定下标的值；

var arr = ['a', 'b', 'c', 'd'];
console.log(arr[0]);	//输出结果：a
console.log(arr[3]);	//输出结果：d

遍历数组元素

遍历数组即依次访问数组中的所有元素的操作，通常情况下使用for或for…in语句。for…in语句的语法如下：

for (variable in object) {...}
//其中variable表示数组下标，object表示数组的变量名称，在其他情况下也可以是一个对象

下面，以生成网站导航栏为例，演示如何遍历数组：

<div class="nav" id="navlist"></div>
<!--div用于显示生成的导航栏-->
<script>
	var navlist = ['|', '首页', '|', '学习中心', '|',  '学术论坛', '|',  '共享资源', '|',  '线上练习', '|',  '考试中心', '|',  '联系我们', '|'];
	var str = '<ul>';	
	for (var i in navlist) {
		str += '<li><a>' + navlist[i] +'</a></li>';
		//遍历并拼接数组元素
	}
	str += '</ul>';
	document.getElementById('navlist').innerHTML = str;
	//使导航栏显示在id为navlist的<div>中
</script>

在CSS中设置样式：

@charset "utf-8";
/* CSS Document */
#navlist{width:100%;height:100px;background-color:white;float: left;}
ul{list-style: none;font-size: 16px;height: 40px;margin: 0;padding: 0 0 0 50px;}
li{float: left;font-size: 25px;}
a:hover{color:red;}
a{line-height: 40px;font-weight: bold;margin: 0 10px;text-decoration: none;}

效果图如下：

扩展：for…of语法

var arr = [1, 2, 3];
for (var value of arr) {
	console.log(value);	//依次输出1、2、3
}
//变量value表示每次遍历时所对应的数组元素的值，arr是待遍历的数组

元素的添加与修改

“数组名[下标]”不仅可以访问数组中的元素，还能完成数组的添加与修改

添加元素

1.为空数组添加元素

var height = [];
height[3] = 155;
height[5] = 180;
height[0] = 165;
console.log(height);	//输出结果：[165, '', '', 155, '', 180]

通过“数组名[下标] = 值”的方式添加数组元素时，允许下标不按照数字顺序连续添加，其他没有提到且未添加元素的地方会变成空存储位置；

修改元素

与添加元素用法类似，不同点是修改元素是在为已含有值的元素重新赋值；

var arr = ['a', 'b', 'c', 'd'];
arr[1] = 123;
arr[2] = 456;
console.log(arr);	//输出结果：["a", 123, 456, "d"]

元素的删除

可以利用delete关键字删除数组中的一个元素，但是它只能删掉元素值，删除操作执行后，该元素依然会占用一个空存储位置；

var arr = ['a', 'b', 'c', 'd'];
delete.arr[1];
console.log(arr);	//输出结果：["a", '', "c", "d"]

利用数组解构赋值

实现方式：

[a, b, c] = [1, 2, 3];
arr = [123, 456]
[c, d] = arr;
//传统方式则需要一个个的声明

期待你的点赞与评论！

最后

以上就是多情纸飞机为你收集整理的JavaScript——数组入门初识数组创建数组数组的基本操作的全部内容，希望文章能够帮你解决JavaScript——数组入门初识数组创建数组数组的基本操作所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。