首页 > 编程笔记 > JavaScript笔记 阅读：11

JavaScript数组的创建和使用（非常详细）

开发者经常会在程序中对一批数据进行操作，例如，在微信运动中，对好友每天的运动步数进行排序，如果用 number 类型来表示每位好友每天的运动步数，有多少个好友就需要定义多少个变量，这样做不仅麻烦，而且容易出错。这时，可以使用数组来解决。

什么是数组呢？数组就是一组具有某种共同特性的数据组成的集合，相当于存储多个数据的容器。其中的每个数据被称作元素，在数组中可以存放任意类型的元素。

JavaScript创建数组

JavaScript 创建数组有两种方式，一种是使用方括号（[]）创建数组，一种是使用 new Array() 函数创建数组。

1) 使用“[]”创建数组

通过在方括号内指定元素给数组赋值，示例如下： 
var arr = []; // 创建一个长度为 0 的空数组，没有元素
var arr = [1, "篮球", true, undefined, null]; // 创建一个长度为 5 的数组，包含 5 个类型不同的元素
在上述代码中，arr 为数组名，方括号是数组的标志，元素类型可以是任意数据类型。

2) 使用new Array()函数创建数组

Array 是 JavaScript 标准内置数组对象，用于构造数组，示例如下： 
var arr = new Array(); // 创建一个空数组，没有元素
var arr = new Array(1, "篮球", true, undefined, null); // 创建一个数组，包含 5 个类型不同的元素

使用“[]”创建数组比较简洁，在项目开发中最常用。

JavaScript访问数组

访问数组有 3 种方式，分别是访问数组名、访问数组元素、遍历数组。

1) 访问数组名

直接访问数组名将返回数组中存储的所有元素值，示例如下： 
var arr = [1, 2, 3]; // 创建数组 arr
console.log(arr); // 直接访问数组名，输出: 1, 2, 3

2) 访问数组元素

数组中存储的每个元素都有一个位置索引，从 0 开始，到“数组长度-1”结束。开发者可以通过索引来访问、修改对应的数组元素的值。语法格式如下： 
数组名[索引]
示例如下： 
var arr = [1, 2, 3]; // 创建数组
console.log(arr[0]); // 获取数组中的第 1 个元素，输出：1
console.log(arr[1]); // 获取数组中的第 2 个元素，输出：2
console.log(arr[99]); // 获取数组中的第 100 个元素，输出：undefined
arr[0] = 8; // 修改数组中的第 1 个元素的值为 8
arr[3] = 5; // 修改数组中的第 4 个元素的值为 5
console.log(arr); // 输出数组中所有的元素值，输出：8, 2, 3, 5
如果数组中没有和索引值对应的元素，则得到的值是 undefined，上述代码中 arr[99] 并不存在，因此输出 undefined；如果修改数组中不存在的元素，则代表在数组的末尾插入新元素，此时数组长度自动增长为“索引值+1”，上述示例中 arr[3] 并不存在，“arr[3]=5”执行前，数组长度是 3，执行后，数组长度变为 4。

3) 遍历数组

遍历数组是对数组中的每一个元素依次进行访问。开发者可以使用 for 循环语句对数组进行遍历。

【实例】使用 for 语句遍历数组。 
var arr = ['red', 'green', 'blue'];
for (var i = 0; i < 3; i++) { // 3 代表数组长度
    console.log(arr[i]);
}
在 Chrome 浏览器控制台中的运行结果为：

red
green
blue

JavaScript数组的常用属性和方法

1) 数组的常用属性

属性 length 返回数组的长度，即数组中元素的个数。它是一个可读可写的属性，语法格式如下： 
数组名.length
修改 length 属性的值可以增加或减少数组元素：
示例如下： 
var arr = [1, 2, 3]; // 创建数组
console.log(arr.length); // 获取数组的长度，输出：3
arr.length = 2; // 修改 length 属性的值为 2，此时元素只剩 2 个
console.log(arr); // 输出：1, 2
arr.length = 0; // 修改 length 属性的值为 0，此时数组元素被清空
console.log(arr); // 输出空数组：[]
arr.length = 1; // 修改 length 属性的值为 1，此时数组增加 1 个元素，默认值是 undefined
console.log(arr[0]); // 输出：undefined

2) 数组的常用方法

JavaScript提供了丰富且功能强大的数组方法，主要包括遍历、元素操作、检索、排序、筛选、转换和类型判断等，如下表所示。

表：数组的常用方法
数组方法分类 方法名
遍历 forEach()
元素操作 push()、pop()、unshift()、shift()、splice()
检索 indexOf()、lastIndexOf()
排序 sort()、reverse()
筛选 every()、some()、filter()
转换 slice()、join()、concat()、map()、toString()
类型判断 isArray()

以 forEach() 方法为例： 
var arr = [1, 2, 3]; // 创建数组
arr.forEach(function(item) {
    console.log(item); // 输出数组中的每个元素，输出：1，2，3
});
执行结果为：

1
2
3

相关文章