JavaScript 数组练习

2025年3月2日 | 阅读 12 分钟

JavaScript 数组是语言的一个重要组成部分，它提供了一种灵活而强大的管理数据集的方法。对于任何 JavaScript 开发者来说，能够操作数组至关重要。

JavaScript 数组概述

JavaScript 数组是一种必不可少且适应性强的数据结构，对于 Web 开发至关重要。JavaScript 是一种高级、解释型编程语言，常用于创建动态、交互式网站。开发者用来有效组织、存储和处理数据集的主要工具之一就是数组。

JavaScript 数组基础知识

在 JavaScript 中，数组是由按线性方式排列的元素组成，这些元素由键或索引唯一标识。任何数据类型，包括对象、字符串、数字，甚至是其他数组，都可以由这些元素表示。JavaScript 数组能够适应各种数据类型，因此对于各种用例都非常通用。

声明与初始化

在 JavaScript 中创建数组很简单。方括号可用于声明和初始化数组

这种简洁的语法创建了一个名为 fruits 的四元素数组。JavaScript 数组是零索引的，这意味着第一个元素通过索引 0 访问，第二个元素通过索引 1 访问，依此类推。这是一个需要牢记的关键点。

数组的变量性质

JavaScript 数组的动态特性是其独特的特性之一。运行时对数组的修改包括添加或删除元素、更改其值以及调整其长度。由于这种动态行为，开发者拥有强大的工具来修改程序以适应不断变化的数据需求。

常用数组方法

JavaScript 数组包含大量内置方法，可实现各种操作。这些方法可以用于排序、添加或删除数组中的元素，从而简化了数组操作。Map()、filter()、reduce()、push()、pop()、shift()、unshift() 和 forEach() 是一些常用的数组方法。

应用场景与示例

在 Web 开发的上下文中，数组在许多不同的情况下都有应用。创建动态界面、处理来自 API 的数据、处理表单数据以及管理项目列表都离不开它们。数组与其他 JavaScript 功能一起，在构建动态和适应性强的网站方面发挥着重要作用。

访问和修改数组元素

JavaScript 的一个关键特性是能够访问和修改数组项，这使得开发者能够处理和编辑数组内容。在这个子主题中，我们将探讨获取和更改 JavaScript 数组元素的方法和策略。

1. 查找数组中的元素

要检索存储在特定索引处的值，首先必须访问数组元素。JavaScript 中的零索引数组将第一个元素指定为索引 0，第二个为索引 1，依此类推。您可以通过多种方法访问数组元素，如下所示

使用索引

let fruits = ['apple', 'orange', 'banana', 'grape'];
console.log(fruits[0]); // Output: 'apple'
console.log(fruits[2]); // Output: 'banana'

使用循环（例如：'forEach'）

fruits.forEach((fruit, index) => {
    console.log(`Element at index ${index}: ${fruit}`);
});

2. 修改数组元素

JavaScript 数组的一个特性是能够修改已创建的数组的项。更改数组中元素的典型方法如下

使用索引

let fruits = ['apple', 'orange', 'banana', 'grape'];
fruits[1] = 'pear'; // Modifying the element at index 1
console.log(fruits); // Output: ['apple', 'pear', 'banana', 'grape']

使用 'Splice()'

fruits.splice(2, 1, 'kiwi'); // Removing 1 element at index 2 and adding 'kiwi'
console.log(fruits); // Output: ['apple', 'pear', 'kiwi', 'grape']

使用 'map()'

let updatedFruits = fruits.map(fruit => (fruit === 'banana' ? 'pineapple' : fruit));
console.log(updatedFruits); // Output: ['apple', 'pear', 'kiwi', 'grape']

3. 定位元素的索引

indexOf() 方法可用于确定数组中特定元素的索引

let index = fruits.indexOf('kiwi');
console.log(index); // Output: 2

4. 检查数组是否包含

includes() 方法可用于了解数组是否包含特定元素

let hasBanana = fruits.includes ('banana');
console.log (hasBanana); // Output: false

数组的迭代与转换

JavaScript 开发者可以通过像数组迭代和转换这样的强大方法有效地处理和操作数组。迭代是指遍历数组中的每个元素的过程，而转换是指更改数组的元素或从现有数组构建新数组的行为。在本节中，我们将研究数组转换和迭代的方法和策略。

1. 使用 forEach() 方法

一种简单且流行的遍历数组中每个元素的方法是使用 forEach() 方法。它将一个回调函数作为参数，该函数用于数组中的每个条目。

let numbers = [1, 2, 3, 4, 5];
numbers.forEach((num) => {
  console.log(num * 2); // Transform: Multiply each element by 2
});

2. map() 方法

通过将提供的函数应用于当前数组的每个元素，map() 方法会生成一个新数组。它不会更改原始数组，而是返回一个修改后的数组。

let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

3. 使用 filter() 方法

filter() 方法用于创建包含仅满足特定条件的新数组。它用于将特定元素包含在已修改的数组中。

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

let evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

4. 使用 reduce() 方法

reduce() 方法可用于将数组中的值组合成一个单一结果。它需要一个初始值和一个回调函数。当前元素和累加器被传递给回调函数，结果会传递到下一次迭代。

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // Output: 15

5. for... of 循环

遍历数组元素的旧方法是使用 for...of 循环。与传统 for 循环相比，它的语法更简洁。

let fruits = ['apple', 'banana', 'orange'];
for (let fruit of fruits) {
  console.log(fruit.toUpperCase()); // Transform: Convert each element to uppercase
}

数组的排序和搜索

在 JavaScript 中使用数组时，常见的操作包括排序和搜索。构建响应式和优化的应用程序需要有效地组织和检索数组中的数据。在本节中，我们将研究搜索和排序数组的多种策略和方法。

1. 数组排序

JavaScript 提供了 sort() 方法来按升序或降序排列数组中的元素。排序数组是一项基本活动。默认情况下，sort() 方法执行字典序（字典）排序，并将数组的元素转换为字符串。

简单排序

let fruits = ['apple', 'orange', 'banana', 'grape'];
fruits.sort();
console.log(fruits); // Output: ['apple', 'banana', 'grape', 'orange']

数字排序

也可以为数字排序提供一个独特的比较函数

let numbers = [10, 5, 8, 2, 7];
numbers.sort((a, b) => a - b);

console.log(numbers); // Output: [2, 5, 7, 8, 10]

数字降序排序

要按降序排列项，只需在比较函数中交换减法顺序即可。

let numbers = [10, 5, 8, 2, 7];
numbers.sort((a, b) => b - a);
console.log(numbers); // Output: [10, 8, 7, 5, 2]

搜索数组

定位元素的哪个位置是数组搜索的关键组成部分。JavaScript 提供了适用于各种搜索场景的方法，例如 indexOf()、find() 和 includes()。

indexOf() 用法： indexOf() 函数返回数组中找到指定元素的第一个索引。如果元素不存在，该函数将返回 -1。

let fruits = ['apple', 'orange', 'banana', 'grape'];
let bananaIndex = fruits.indexOf('banana');
console.log(bananaIndex); // Output: 2

使用 'find()'

find() 方法在用于时，返回数组中满足特定测试函数的第一个元素。

let numbers = [10, 5, 8, 2, 7];
let found = numbers.find((num) => num > 5);
console.log(found); // Output: 10

使用 'includes()'

includes() 函数根据数组是否包含给定元素返回 true 或 false。

let fruits = ['apple', 'orange', 'banana', 'grape'];
let hasBanana = fruits.includes('banana');
console.log(hasBanana); // Output: true

二分查找（适用于已排序数组）

如果数组已排序，则二分查找是查找元素的更有效方法。但首先，需要对数组进行排序。

let sortedNumbers = [2, 5, 7, 8, 10];
let target = 7;

function binarySearch(arr, target) {
  let low = 0;
  let high = arr.length - 1;

  while (low <= high) {
    let mid = Math.floor((low + high) / 2);
    if (arr[mid] === target) return mid;
    else if (arr[mid] < target) low = mid + 1;
    else high = mid - 1;
  }

  return -1;
}

console.log(binarySearch(sortedNumbers, target)); // Output: 2

数组的连接与分割

开发者可以通过诸如数组连接和分割之类的关键操作来合并数组或将它们分成更小的部分。处理数组数据的方法更加灵活和可控。本节将介绍用于分割和连接 JavaScript 数组的方法和技术。

1. 数组连接

连接数组是指将两个或多个数组的元素连接起来形成一个单一的新数组。为此，JavaScript 具有 concat() 函数。

连接数组： concat() 方法将一个数组的元素与其他数组或值连接起来，形成一个新数组。

let fruits = ['apple', 'banana'];
let vegetables = ['carrot', 'broccoli'];

let combinedArray = fruits.concat(vegetables);
console.log(combinedArray);
// Output: ['apple', 'banana', 'carrot', 'broccoli']

为了简洁地连接数组，您还可以使用扩展运算符 (...)。

let combinedArray = [...fruits, ...vegetables];
console.log(combinedArray);
// Output: ['apple', 'banana', 'carrot', 'broccoli']

2. 分割数组

使用数组分割，您可以提取特定部分或将单个数组分解成更小的数组。对于类似的操作，JavaScript 提供了 slice() 等函数。

您可以使用 slice() 函数创建一个新数组，该数组仅包含从原始数组中提取的部分，而不会更改原始数组。

let fruits = ['apple', 'banana', 'orange', 'grape'];

let slicedArray = fruits.slice(1, 3); // Extract elements from index 1 to 2
console.log(slicedArray);
// Output: ['banana', 'orange']

Splice()： Splice() 是一个可用于分割和修改数组的方法。它通过添加新成员、删除或更改现有成员或两者兼而有之来修改数组的内容。

let fruits = ['apple', 'banana', 'orange', 'grape'];

let removedElements = fruits.splice(1, 2); // Remove elements from index 1 to 2
console.log(fruits);
// Output: ['apple', 'grape']
console.log(removedElements);
// Output: ['banana', 'orange']

处理多维数组

开发者可以通过利用多维数组（通常称为数组的数组）来表示和处理更复杂的数据结构。可以认为这些数组是嵌套结构、网格或矩阵。在本节中，我们将研究多维数组的一般创建、操作和使用方法。

1. 创建多维数组

通过使用数组嵌套，JavaScript 可以方便地创建多维数组。根据您想要表示的数据结构的复杂程度，您可以根据需要进行任意深度的嵌套。

二维数组的示例为

// Creating a 2D array (matrix)
let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

三维数组的示例为

// Creating a 3D array
let cube = [
  [
    [1, 2, 3],
    [4, 5, 6]
  ],
  [
    [7, 8, 9],
    [10, 11, 12]
  ]
];

2. 访问多维数组中的元素

要访问多维数组中的元素，必须为每个嵌套级别指定索引。

如何访问二维数组

let value = matrix[1][2];
console.log(value); // Output: 6

如何访问三维数组

let value = cube[1][0][2];
console.log(value); // Output: 9

3. 遍历多维数组

大多数情况下，需要使用嵌套循环来遍历多维数组，以便访问每个嵌套级别。

遍历二维数组

for (let row = 0; row < matrix.length; row++) {
  for (let col = 0; col < matrix[row].length; col++) {
    console.log(matrix[row][col]);
  }
}

遍历三维数组

for (let x = 0; x < cube.length; x++) {
  for (let y = 0; y < cube[x].length; y++) {
    for (let z = 0; z < cube[x][y].length; z++) {
      console. log(cube [x] [y][z]);
    }
  }
}

4. 操作多维数组

可以在多维数组上更改值、添加或删除元素，以及执行各种嵌套级别的操作。

更改元素

matrix[0][1] = 99;
console.log(matrix);
// Output: [[1, 99, 3], [4, 5, 6], [7, 8, 9]]

向数组添加新行

matrix.push([10, 11, 12]);
console.log(matrix);
// Output: [[1, 99, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12]]

删除数组中的列

for (let i = 0; i < matrix.length; i++) {
  matrix[i].pop();
}
console.log(matrix);
// Output: [[1, 99], [4, 5], [7, 8], [10, 11]]

处理多维数组提供了一种强大的组织和处理更复杂数据的方法。无论您是表示矩阵、网格还是嵌套结构，能够创建、读取、迭代和修改多维数组对于管理应用程序中的各种数据结构至关重要。在选择要使用哪种多维数组时，请考虑您拥有的数据类型以及您必须执行的操作。

用于堆栈和队列操作的数组方法

可以使用数组函数模拟 JavaScript 中的基本堆栈和队列操作。在数据结构中，堆栈和队列是基本结构，它们根据“后进先出”(LIFO) 或“先进先出”(FIFO) 原理工作。尽管 JavaScript 没有内置的类来表示堆栈和队列，但可以使用数组来模拟它们的行为。如下所示，可以使用数组方法执行堆栈和队列操作。

1. 堆栈操作

Push() 将元素添加到数组末尾，而 pop() 删除最后一个元素。这些是可用的方法。

let stack = [];

stack.push(1); // push operation
stack.push(2);
stack.push(3);

console.log(stack.pop()); // pop operation: removes and returns 3
console.log(stack);
// Output: [1, 2]

2. 队列操作

通过使用 push() 和 shift()，您可以将元素添加到数组末尾并从中删除第一个元素。

let queue = [];

queue.push(1); // enqueue operation
queue.push(2);
queue.push(3);

console.log(queue.shift()); // dequeue operation: removes and returns 1
console.log(queue);
// Output: [2, 3]

3. 其他队列管理方法

使用 pop() 和 unshift()

可以通过使用 unshift() 将元素添加到数组开头并使用 pop() 删除最后一个成员来模拟队列活动，尽管这些操作不太受欢迎。

let queueAlternative = [];

queueAlternative.unshift(1); // enqueue operation
queueAlternative.unshift(2);
queueAlternative.unshift(3);

console.log(queueAlternative.pop()); // dequeue operation: removes and returns 1
console.log(queueAlternative);
// Output: [3, 2]

4. 检查队列或空堆栈。

通过查看堆栈或队列的 length 属性，您可以确定它是否为空。

console.log(stack.length === 0); // Check if stack is empty
console.log(queue.length === 0); // Check if queue is empty

5. 查看（Peek）

使用数组索引：您可以使用数组索引来查看队列顶部或堆栈顶部。

console.log(stack[stack.length - 1]); // Peek at the top of the stack
console.log(queue[0]); // Peek at the front of the queue

使用数组方法在 JavaScript 中模拟基本堆栈和队列操作是一种简单的方法。开发者可以使用普通的 JavaScript 数组和 push()、pop()、shift() 和 unshift() 来实现基本的堆栈和队列功能。当您需要在代码中轻量级地实现队列或堆栈时，了解这些策略很有帮助。

处理稀疏数组

在 JavaScript 中，带有间隙或未定义元素的数组称为稀疏数组。稀疏数组会跳过某些索引，而密集数组则包含第一个和最后一个条目之间的每个索引。这可能发生在移除元素时，或在数组中故意添加间隙时。必须理解 JavaScript 如何处理未定义和空槽，才能处理稀疏数组以及可能出现的任何潜在问题。

如何创建稀疏数组

可能意外或故意创建稀疏数组。故意通过在特定索引处放置未定义值

let sparseArray = [];
sparseArray[2] = 'apple';
sparseArray[5] = 'banana';

console.log(sparseArray);
// Output: [ , , 'apple', , , 'banana']

了解稀疏数组元素

在稀疏数组中，访问未定义条目会返回 undefined。区分故意分配的未定义值和空槽至关重要。

console.log(sparseArray[0]); // Output: undefined (empty slot)
console.log(sparseArray[2]); // Output: 'apple'
console.log(sparseArray[3]); // Output: undefined (never assigned)

查找数组中的稀疏元素

in 运算符和 hasOwnProperty() 方法可用于确定数组中的元素是显式分配的还是由于空槽而未定义的

console.log(2 in sparseArray); // Output: true
console.log(0 in sparseArray); // Output: false
console.log(sparseArray.hasOwnProperty(0)); // Output: false

下一主题Javascript-null

JavaScript 数组练习

JavaScript 数组概述

访问和修改数组元素

数组的迭代与转换

数组的排序和搜索

二分查找（适用于已排序数组）

数组的连接与分割

处理多维数组

用于堆栈和队列操作的数组方法

处理稀疏数组

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 数组练习

JavaScript 数组概述

访问和修改数组元素

数组的迭代与转换

数组的排序和搜索

二分查找（适用于已排序数组）

数组的连接与分割

处理多维数组

用于堆栈和队列操作的数组方法

处理稀疏数组

相关帖子

JavaScript RegExp Dotall 和 Flags 属性

JQuery AJAX Complete 回调

如何使用 JavaScript 将数字转换为字符串

JavaScript 图像源

如何免费学习 JavaScript

Push 和 Pop 在 JavaScript 中的用法

JavaScript 库是什么？

在 JavaScript 中将字符串转换为数字