【JavaScript】：数组初体验

翼同学
49 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

1、写在前面

大家好，我是翼同学。今天文章的内容是：

  • 数组

2、内容

2.1、数组概念

(1) 什么是数组？

数组 (Array) 是一个有序的数据集合，我们可以通过数组名称 (name) 和索引 (index) 来访问数组元素，数组可存储任意数据类型的值。

Array是ECMAScript中最常用的类型之一。与其他编程语言类似，ECMAScript数组也是用于存储一组有序的数据。不同的是，ECMAScript数组的元素可以是任意类型的数据，比如数字、字符串、函数或其他对象等。另外，数组的长度是非固定的，随数据的添加而动态增大。

因此总结来说，数组对象的作用就是使用单独的变量名来存储一系列的值。

(2) 如何判断数组？

利用instanceof操作符，我们可以判断一个对象是不是数组。如下所示：

if (value instanceof Array) {
    statements;
    ...
}

但需要注意，如果网页中不止一个全局执行上下文，比如有多个框架，那么instanceof操作符就不够用。此时我们可以利用另一个方法来判断一个值是不是数组，即Array.isArray()方法。

如下所示：

if (Array.isArray(value)) {
    statements;
    ...
}

2.2、创建数组

(1) 构造函数

我们可以使用Array()构造函数来创建数组。

举个例子：

let arr = new Array();

上述语句就定义了一个长度为0的数组arr。

如果已知数组长度（即元素数量），则创建数组时可以这样：

let arr = new Array(10);

上述语句定义了一个长度为10的数组arr。这是因为当我们给构造函数传入一个数值时，那么该数组的length属性会被自动创建，并设置为10，表示数组长度为10.

另外，我们也可以调用构造函数时传入要存储的元素值。比如：

let arr = new Array("value1","value2", "value3");

上述语句创建了一个包含3个字符串值的数组arr。

(2) 数组字面量

我们可以使用数组字面量（array literal）来创建数组。

举个例子：

let arr = ["value1","value2", "value3"];

上述语句创建了一个包含三个字符串值的数组arr。

(3) 注意事项

如果我们想创建一个指定长度并且没有任何元素的数组，此时有两种方法：

let arr1 = new Array(curLength);
// 或者
let arr2 = [];
arr.length = curLength;

另外，如果我们希望创建一个数组，并且该数组只有一个元素，该元素又是数字Number，那么此时需要利用数组字面量来创建数组。

let arr1 = [10];        // 创建只有一个元素的数组，并且该元素是数字 10
let arr2 = Array(10);   // 注意，这种方法创建了一个没有元素的数组，并且数组长度为10

还有一点需要注意，如果调用构造函数时，传入的值不是一个整数，此时会报错。

let arr = Array(2.8);   // RangeError: Invalid array length

2.3、数组索引

数组索引的使用，就是在数组变量前加上中括号[]并提供对应数值来设置或者取得元素的值。

根据索引提供的值，我们可以访问数组元素、修改数组元素、或者添加数组元素。

举个例子：

let arr = ["Hello", "world"];
alert(arr[0]);      // 显示出数组第一个元素的值
arr[1] = "World";   // 修改了数组第二个元素的值
arr[2] = "!!!";     // 添加了数组第三个元素的值

因此对于索引来说，需要注意的是取值范围，即[0, length-1]。换句话说，[0]是数组的第一个元素，[1]是数组的第二个元素，以此类推。

2.4、数组长度

数组元素的数量值保存在length属性中。该属性的范围是大于等于零。

举个例子：

let arr1 = [100, 200, 300];  //  创建数组，存储三个值
let arr2 = []                //  创建一个空数组
alert(arr1.length);          //=> 3
alert(arr2.length);          //=> 0

需要注意的是，length属性不是只读的。这意味着我们可以通过length属性来删除或添加元素。

举个例子：

let arr = [100, 200, 300];  // 创建一个数组，长度为 3
arr.length = 2;             // 修改数组长度为 2
alert(arr[2]);              // 此时访问第三个元素，值为 undefined

上述例子，数组原来的长度为3，将长度属性修改为2后，就相当于删除了最后一个元素，此时数组就没有第三个值，即arr[2] === undefined.

再举个例子：

let arr = [111, 222, 333];  // 创建一个数组，长度为 3
arr[arr.length] = 4;        // 设置数组长度为 4
alert(arr[3]);              // 此时访问第4个元素，值为 undefined

在这个例子中，我们创建了一个长度为3的数组，此时如果将长度属性设置为4，则新添加的元素将以undefined填充。

2.4、遍历数组

对于数组的操作，更多的是遍历数组，对数组中的每一个元素都进行某种处理。

(1) 循环遍历

一般的，我们可以用循环语句来遍历数组。

举个例子：

let arr = [100, 200, 300, 400, 500];
for(var i = 0; i<arr.length; i++) {
    console.log(arr[i]);
}
// 打印结果：
// 100
// 200
// 300
// 400
// 500

(2) forEach遍历

另外，JS也提供了遍历数组元素的方法：forEach()。

举个例子：

let arr = [100, 200, 300, 400, 500];
arr.forEach(function (value) {
    console.log(value);
})

在上述例子中，传递给forEach()方法的函数会在数组的每个元素上都会执行一次操作，数组元素作为参数传递给该函数。

小结：

  • forEach()方法没有返回值，本质上等同于for循环，对每一项元素执行相同操作。
  • forEach()方法并不改变原数组。

3、写在最后

好了，今天文章的内容就到这里。

avatar
文章
阅读
粉丝