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

JavaScript数组的创建和操作方法（非常详细）

JavaScript 中的数组与其他语言的数组大相径庭，以 Java 语言为例，Java 中的数组只能存储相同类型的数据，而 JavaScript 中的数组可以存储任意类型的数据。

数组是一系列有序数据的集合，数组中的每个数据都称作元素。元素可以是 JS 支持的任意类型。数组示例代码如下：
var arr = [1,"atguigu",true];
这行代码定义了一个数组 arr，它的内部分别存储了三个数据：“1”、“atguigu” 和 “true”。

数组也是对象，可以使用 typeof 和 instanceof 进行检测： 
console.log(typeof arr); // object
console.log(arr instanceof Object) // true

但是数组是一种特别的对象，它拥有自己的特性。数组中每个元素都有一个下标（也被称作索引），从 0 开始依次递增。每定义一个数组，在该数组中都会有一个默认属性为 length，它代表着数组中元素的个数，也被称作数组的长度，示例代码如下：
console.log(arr.length);  // 3
console.log(arr[0]);  // 1
console.log(arr[1]);  // atguigu
console.log(arr[2]);  // true
下面介绍如何创建数组，以及对于数组元素的增删改查等操作。

JavaScript数组的创建

数组的创建方式与对象数据类型的创建相似，包括两种方式：一种是使用数组字面量创建；另一种是使用 Array 构造函数创建。

以数组字面量的方式创建数组是直接使用中括号来包裹数据，中括号内以逗号间隔元素，而且数组字面量创建方式是使用频率较高的。示例代码如下： 
var arr1 = [1, "atguigu", 3];
var arr2 = [];
var arr3 = [3];

console.log(arr1);    // [1, "atguigu", 3]
console.log(arr2);    // []
console.log(arr3);    // [3]
在这段代码中，使用数组字面量的方式定义了三个数组：arr1、arr2、arr3：
运行代码后，查看控制台，结果为： 
[ 1, 'atguigu', 3 ]
[]
[ 3 ]

另一种使用 Array 构造函数创建数组，它是创建数组的本质。其实字面量创建数组的方式的底层原理就是使用该方法进行创建的，示例代码如下： 
var arr1 = new Array(1, 2, 3);
var arr2 = new Array("atguigu");
var arr3 = new Array(3);
var arr4 = new Array();

console.log(arr1);    // [1, 2, 3]
console.log(arr2);    // ["atguigu"]
console.log(arr3);    // [empty × 3]
console.log(arr4);    // []
使用构造函数创建数组可以省略 new 关键字，与使用构造函数的方式结果相同。需要注意的是，当参数为一个数字时，该参数代表着数组的长度。

需要特别注意的是，使用构造函数创建数组可以省略 new 关键字，与使用 new 的方式结果相同，示例代码如下：
var arr1 = Array(1, 2, 3);
var arr2 = Array("atguigu");
var arr3 = Array(3);
var arr4 = Array();

console.log(arr1);    // [1, 2, 3]
console.log(arr2);    // ["atguigu"]
console.log(arr3);    // [empty × 3]
console.log(arr4);    // []
这段代码使用 Array() 的方式定义了 arr1、arr2、arr3、arr4 四个数组：
运行代码后，查看控制台，结果为： 
[ 1, 2, 3 ]
[ 'atguigu' ]
[ <3 empty items> ]
[]

JavaScript添加数组元素

创建完数组后，我们就可以对其元素进行增删改查操作了。

我们可以通过索引读取数组中对应位置的元素，同样也可以通过索引添加新元素，示例代码如下： 
// 创建数组
const arr = new Array();
console.log(arr);    // []

// 以下标的方式添加元素
arr[0] = 1;
arr[1] = "atguigu";

console.log(arr);    // [1, "atguigu"]
console.log(arr[0], arr[1]);    // 1 "atguigu"
这段代码定义了一个空数组 arr，使用下标的方式向数组中添加了元素“1”和“atguigu”。此时数组中 arr[0] 的值为“1”，arr[1] 的值为“atguigu”。运行代码后，查看控制台，结果为：

[]
[ 1, 'atguigu' ]
1 atguigu

上述案例主要演示了向空数组中增加元素的情况，当数组内部有值时，可以通过 length 属性向数组的末尾增加元素，示例代码如下： 
var arr = [1, 2, 3];
arr[3] = 1000;
arr[arr.length] = 1000;
console.log(arr);
这段代码定义了数组 arr，里面包含三个元素：“1”、“2”、“3”。通过“arr[3]”的方式将 1000 赋值给 arr 数组中下标为 5 的元素，再通过“arr.length”得到 arr 数组的末尾（arr 数组中下标为 6），然后赋值为 1000。此时输出数组 arr，结果为：
[ 1, 2, 3, 1000, 1000 ]

另外，添加元素还可以借助 push() 方法和 unshift() 方法。

push() 方法用于实现在数组末尾添加一个或多个元素，其返回值为添加元素后的新数组的长度，语法格式如下： 
push(item1, item2, ..., itemX);
其中，item 分别表示添加到数组的元素。

示例代码如下： 
var arr = [1, 2, 3];
console.log(arr.push("tom", "jerry"));    // [1, 2, 3, "tom", "jerry"]

unshift() 方法可以向数组第一位新增一个或多个元素，语法格式如下： 
unshift(item1, item2, ..., itemX);
示例代码如下： 
const arr = new Array();
console.log(arr);    // []

arr.unshift(1);
console.log(arr);    // [1]
arr.unshift("atguigu", 3);
console.log(arr);    // ["atguigu", 3, 1]

JavaScript遍历数组

访问数组每个元素的过程叫作遍历。数组遍历有 for、for...in、forEach、for...of 四种方法。下面介绍两种常见的遍历数组的方式，即 for 循环语句和 for...in 循环语句。

使用 for 循环语句来遍历数组，是利用数组的 length 属性来控制 for 循环的执行次数，示例代码如下： 
var arr = [1, 2, 3];
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
这段代码数组的第一个下标“0”作为起始循环值，在循环体内依次对数组中的每项值依次遍历。运行代码后，查看控制台，结果为：

1
2
3


for...in 循环是一种特殊类型的循环，它是普通 for 循环的变体，其语法格式如下： 
for (variable in object) {
    // 循环体代码
}
使用该方法需要传入两个参数，其中变量 variable 表示数组的下标，object 表示需要遍历的对象，在这里指的是数组。示例代码如下： 
var arr = [1, 2, 3];
// 遍历 arr 数组
for (var i in arr) {
    console.log(arr[i]);
}
运行结果同普通 for 循环结果。因为 for 语句需要配合 length 属性和数组下标来实现，所以执行效率没有 for...in 语句高。另外，for...in 语句会跳过空元素。对于超长数组来说，建议使用 for...in 语句进行迭代。

JavaScript更新元素

通过前面的学习可以得知，可以使用下标更新对应的元素。如果想要更新多个元素要怎么操作呢？

请思考这个问题，将数组 [1, 3, 5] 每个元素值都增加 10，如何实现？

此时可以通过循环语句的方式对数组中每个元素进行遍历，再进行更新操作，如下代码所示： 
function addTen(arr) {
    for (var element = 0; element < arr.length; element++) {
        arr[element] = arr[element] + 10;
    }
    return arr;
}

var arr1 = [1, 2, 3];
var arrOver = addTen(arr1);
console.log(arrOver);    // [11, 12, 13]
这段代码封装了函数 addTen，函数内部遍历了形参 arr，对每项元素加 10 并返回。从而实现了数组内元素的更新。运行代码后，查看控制台，结果为：

[ 11, 12, 13 ]

JavaScript删除数组元素

删除数组元素其实与数组添加元素的方式类似，可以在数组的头部、中间和尾部进行操作。

对数组尾部进行操作可以利用数组的属性 length 来实现，示例代码如下： 
var arr = [1, 2, 3, 4, 5];

// 第一次删除
arr.length = 1;

// 第二次删除
arr.length = arr.length - 1;

// 第三次删除
arr.length--;
console.log(arr);    // [1, 2]
console.log(arr[4]);    // undefined
这段代码通过操作 length 属性，在数组的末尾进行了三次删除。因为在前面的操作中删除了 arr[4]，所以最后输出 arr[4]返回的结果为 undefined。运行代码后，查看控制台，结果为：

[1, 2]
undefined


删除数组头部元素与在头部添加元素原理相同，都是利用 for 循环来实现，只不过删除头部元素是将数组中的整体元素前移，再删除一个元素，示例代码如下： 
var arr = [1, 2, 3, 4, 5];
for (var i = 1; i <= arr.length - 1; i++) {
    arr[i - 1] = arr[i];
}
arr.length--;
console.log(arr);    // [2, 3, 4, 5]
这段代码使用 for 循环，将数组中索引大于 0 的元素全部向前移动一位。通过 arr.length-- 删除 arr 数组的末尾，实现将数组的头部第一个数删除。运行代码后查看控制台，结果为：

[2, 3, 4, 5]


对于删除数组元素，JavaScript 也提供了三种简洁的方式：
下面将分别讲解这三种方法的使用。

pop() 方法可以在数组末尾删除一个元素，该方法是没有参数的，其方法的返回值为删除的元素，这个方法会影响原数组，示例代码如下： 
var arr = [1, 2, 3, 4];
var result = arr.pop();
console.log(arr);    // [ 1, 2, 3 ]
console.log(result);    // 4
这段代码使用 pop() 方法将 arr 数组的最后一位删除，返回结果为删除的数组元素“4”。运行代码后，查看控制台，结果为：

[ 1, 2, 3 ]
4


需要注意的是，如果操作数组为空数组，则返回结果为 undefined： 
var arr = [];
var result = arr.pop();
console.log(arr);    // []
console.log(result);    // undefined
此时数组 arr 为空数组，运行代码后查看控制台，结果为：

[]
undefined


shift() 方法可以在数组头部删除一个元素，该方法是没有参数的，其方法返回值为返回删除的元素，同样这个方法也会影响原数组，示例代码如下： 
var arr = [1, 2, 3, 4];
const result = arr.shift();
console.log(arr);    // [ 2, 3, 4 ]
console.log(result);    // 1
运行代码后查看控制台，结果为：

[ 2, 3, 4 ]
1


另外，如果操作数组为空数组，shift() 方法与 pop() 方法相同，返回结果也为 undefined。

splice() 方法可以删除数组中指定位置的元素，该方法有两个参数，第一个是索引位置，第二个是删除数据个数。示例代码如下： 
var arr=[1,2,3,4,5,6,7,8,9,10];
console.log(arr);    // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
// 语法：arr.splice(n,m) n是开始的索引位置，m是个数
// splice(2,2)，表示从索引位置为2的位置开始删除，删除两个
arr.splice(2,2);
console.log(arr);    // [ 1, 2, 5, 6, 7, 8, 9, 10 ]
运行代码后查看控制台，结果为：

[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]
[
  1, 2, 5,  6,
  7, 8, 9, 10
]

相关文章