JavaScript 数组

最新推荐文章于 2025-07-01 11:46:14 发布

原创最新推荐文章于 2025-07-01 11:46:14 发布 · 779 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

代码可运行

在前端开发中，JavaScript 数组是一种非常重要的数据结构，它允许我们存储和操作一系列的值。无论是简单的数据列表，还是复杂的对象集合，数组都能为我们提供灵活且高效的处理方式。本文将深入探讨 JavaScript 数组的特性、常用方法以及在实际前端开发中的应用。

一、JavaScript 数组的基本特性

JavaScript 数组是一种特殊的对象，用于存储有序的元素集合。每个元素都有一个特定的索引，通过索引可以访问或修改元素的值。数组的长度是动态的，可以根据需要自动增长或缩短。

在 JavaScript 中，可以使用方括号 [] 来创建数组，也可以使用 Array 构造函数来创建。例如：

// 使用方括号创建数组  
let array1 = [1, 2, 3, 4, 5];  
  
// 使用 Array 构造函数创建数组  
let array2 = new Array(1, 2, 3, 4, 5);  
  
// 访问数组元素  
console.log(array1[0]); // 输出：1  
  
// 修改数组元素  
array1[0] = 10;  
console.log(array1[0]); // 输出：10

二、JavaScript 数组的常用方法

JavaScript 数组提供了许多内置方法，用于执行各种常见的操作。以下是一些常用的数组方法：

push() 和 pop()：push() 方法用于在数组末尾添加元素，pop() 方法用于删除并返回数组的最后一个元素。

let array = [1, 2, 3];  
array.push(4); // 数组变为 [1, 2, 3, 4]  
console.log(array.pop()); // 输出：4，数组变为 [1, 2, 3]

shift() 和 unshift()：shift() 方法用于删除并返回数组的第一个元素，unshift() 方法用于在数组开头添加元素。

let array = [1, 2, 3];  
array.unshift(0); // 数组变为 [0, 1, 2, 3]  
console.log(array.shift()); // 输出：0，数组变为 [1, 2, 3]

splice()：splice() 方法用于在数组中添加/删除元素，并返回被删除的元素。它可以接收多个参数，用于指定添加/删除元素的起始位置、要删除的元素数量以及要添加的元素（可选）。

let array = [1, 2, 3, 4, 5];  
let removed = array.splice(2, 2, 'a', 'b'); // 数组变为 [1, 2, 'a', 'b', 5]，removed 为 [3, 4]  
console.log(removed); // 输出：[3, 4]

slice()：slice() 方法用于返回数组的一个子数组，不改变原数组。它接收两个参数，指定子数组的起始位置和结束位置（不包括结束位置）。

let array = [1, 2, 3, 4, 5];  
let subArray = array.slice(1, 3); // subArray 为 [2, 3]  
console.log(subArray); // 输出：[2, 3]

map()、filter() 和 reduce()：这三个方法都是高阶函数，用于对数组中的每个元素执行某种操作，并返回一个新的数组或单个值。
- map() 方法将数组中的每个元素都调用一个提供的函数，并创建一个新的数组，其结果是该函数在调用数组的每个元素时返回的结果。
- filter() 方法创建一个新数组，新数组中的元素是通过检查指定函数实现的测试的所有元素。
- reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个输出值。