JS中关于数组的操作，-，wenxuehai，-，博客园

在 JavaScript 中，数组是一种非常重要的数据类型。它们可以存储任意数量的数据，并提供了许多有用的方法来增删改查数组中的元素。本文将详细介绍 JS 中数组的常用操作，包括数组的创建、增删改查、常用方法等，同时提供实际案例说明。

## 1. 创建数组

在 JS 中，创建数组有多种方式。最常见的是使用方括号中逗号分隔的数据列表，如下所示：

```javascript

let arr1 = [1, 2, 3, 4, 5];

let arr2 = ['apple', 'banana', 'orange'];

let arr3 = [true, false, true];

```

除了上述方式，还可以使用 `Array` 构造器来创建数组。例如：

```javascript

let arr4 = new Array(2, 4, 6);

let arr5 = new Array(3); // 创建一个长度为 3 的空数组

```

需要注意的是：使用单个参数调用 `Array` 构造器时，该参数将被视为数组的长度而不是数组中的元素。例如：

```javascript

let arr6 = new Array(4); // 建立一个长度为 4 的空数组

```

如果要创建包含单个元素 4 的数组，可以使用下面的代码：

```javascript

let arr7 = [4];

```

## 2. 增加元素

向数组中添加元素可以使用 `push()` 方法或者直接给数组赋值。例如：

```javascript

let arr8 = [1, 2, 3];

arr8.push(4); // 向数组后面添加一个元素

arr8[4] = 5; // 直接给第 5 个位置赋值

console.log(arr8); // [1, 2, 3, 4, 5]

```

需要注意的是：直接给数组中不存在的位置赋值也是可以的，但此时数组的长度会自动增加。

## 3. 删除元素

从数组中删除元素可以使用 `pop()` 方法或者 `delete` 操作符。例如：

```javascript

let arr9 = [1, 2, 3, 4, 5];

arr9.pop(); // 从数组末尾删除一个元素

delete arr9[0]; // 删除数组中第一个元素

console.log(arr9); // [empty, 2, 3, 4]

```

需要注意的是：使用 `delete` 操作符删除数组元素时，数组中对应的位置将会成为空元素（`undefined` 或 `empty`）。如果想要完全删除某个元素，可以使用 `splice()` 方法，例如：

```javascript

let arr10 = [1, 2, 3, 4, 5];

arr10.splice(2, 1); // 从数组的第 3 个位置开始删除一个元素

console.log(arr10); // [1, 2, 4, 5]

```

## 4. 修改元素

要修改数组中的元素，可以直接对其赋值，例如：

```javascript

let arr11 = [1, 2, 3, 4, 5];

arr11[2] = 6; // 将数组中第 3 个元素修改为 6

console.log(arr11); // [1, 2, 6, 4, 5]

```

## 5. 查询元素

有多种方式可以查询数组中的元素，常用的有 `indexOf()` 和 `includes()` 方法。例如：

```javascript

let arr12 = [1, 2, 3, 4, 5];

console.log(arr12.indexOf(4)); // 输出结果为 3

console.log(arr12.includes(6)); // 输出结果为 false

```

需要注意的是：如果使用 `indexOf()` 方法查询的元素在数组中不存在，则返回值为 -1。

## 6. 常用方法

JS 中数组提供了许多实用的方法，包括但不限于以下几种。

### 6.1 `concat()`

`concat()` 方法用于将两个或多个数组合并成一个新数组。例如：

```javascript

let arr13 = [1, 2];

let arr14 = [3, 4];

let arr15 = arr13.concat(arr14);

console.log(arr15); // [1, 2, 3, 4]

```

### 6.2 `join()`

`join()` 方法用于将数组中的所有元素连接成一个字符串。例如：

```javascript

let arr16 = ['apple', 'banana', 'orange'];

let s1 = arr16.join(); // 没有参数，默认使用逗号分隔

let s2 = arr16.join('-'); // 使用 - 号分隔

console.log(s1); // 'apple,banana,orange'

console.log(s2); // 'apple-banana-orange'

```

### 6.3 `slice()`

`slice()` 方法用于从数组中选取指定的元素，然后将其作为一个新数组返回。例如：

```javascript

let arr17 = [1, 2, 3, 4, 5];

let arr18 = arr17.slice(1, 3); // 选取第 2 和第 3 个元素

console.log(arr18); // [2, 3]

```

需要注意的是：`slice()` 方法不会修改原数组。

### 6.4 `sort()`

`sort()` 方法用于对数组中的元素进行排序，默认是按照 Unicode 顺序进行排序。例如：

```javascript

let arr19 = [4, 2, 1, 3, 5];

arr19.sort();

console.log(arr19); // [1, 2, 3, 4, 5]

```

如果想按照其他方式进行排序，可以使用自定义比较函数。例如：

```javascript

let arr20 = ['apple', 'banana', 'orange'];

arr20.sort(function(a, b) {

return a.length - b.length;

});

console.log(arr20); // ['apple', 'orange', 'banana']

```

### 6.5 `reverse()`

`reverse()` 方法用于颠倒数组中元素的顺序。例如：

```javascript

let arr21 = [1, 2, 3, 4, 5];

arr21.reverse();

console.log(arr21); // [5, 4, 3, 2, 1]

```

### 6.6 `forEach()`

`forEach()` 方法用于遍历数组中的元素，对每个元素执行指定的操作。例如：

```javascript

let arr22 = [1, 2, 3, 4, 5];

arr22.forEach(function(item, index) {

console.log(index, item);

});

```

### 6.7 `filter()`

`filter()` 方法用于从数组中过滤出符合条件的元素，然后将其作为一个新数组返回。例如：

```javascript

let arr23 = [1, 2, 3, 4, 5];

let arr24 = arr23.filter(function(item) {

return item % 2 === 0;

});

console.log(arr24); // [2, 4]

```

### 6.8 `map()`

`map()` 方法用于将数组中的每个元素经过处理后得到一个新数组。例如：

```javascript

let arr25 = [1, 2, 3, 4, 5];

let arr26 = arr25.map(function(item) {

return item * item; // 将每个元素乘以自身后得到新的数组

});

console.log(arr26); // [1, 4, 9, 16, 25]

```

## 7. 实际案例说明

下面通过一个实际案例来说明数组的常用操作。

假设有一个数组 `data` 包含了 100 个数值类型的元素。现在需要进行以下操作：

1. 将数组中每个元素乘以 2。

2. 将数组中所有大于 50 的元素过滤出来，并将它们作为一个新数组返回。

可以使用下面的代码来实现：

```javascript

let data = [];

for (let i = 1; i <= 100; i++) {

data.push(i);

}

// 将数组中每个元素乘以 2

let arr27 = data.map(function(item) {

return item * 2;

});

// 将数组中所有大于 50 的元素过滤出来，并将它们作为一个新数组返回

let arr28 = arr27.filter(function(item) {

return item > 50;

});

console.log(arr28); // [ 51, 52, 53, 54, 55, 56, 57, 58, 59, 60,

// 61, 62, 63, 64, 65, 66, 67, 68, 69, 70,

// 71, 72, 73, 74, 75, 76, 77, 78, 79, 80,

// 81, 82, 83, 84, 85, 86, 87, 88, 89, 90,

// 91, 92, 93, 94, 95, 96, 97, 98, 99, 100 ]

```

从上面的代码可以看到，数组的常用操作可以帮助我们更方便地处理数据，特别是在处理大量数据时，可以大大提高编程效率。

## 总结

本文介绍了 JS 中数组的常用操作，包括数组的创建、增删改查、常用方法等，并提供了实际案例说明。在实际项目开发中，掌握这些数组操作技巧可以帮助我们更快、更准确地处理数据，提升编程效率。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/