超越编码技巧——JavaScript 30 天编码挑战第四日

2024-01-02 11:57:29

JavaScript 30 天编码挑战——第四日：探索数组的奥秘

欢迎来到 JavaScript 30 天编码挑战的第四天！今天，我们将踏入数组的奇妙世界，探索存储和操作数据的新方式。数组是 JavaScript 中一种强大的数据结构，允许我们存储有序的数据集合。无论是构建一个简单的购物清单还是开发复杂的数据处理应用程序，数组都是必不可少的工具。

一、效果展示

这一部分内容不算什么挑战，更像是一个知识的回顾总结。在初始化文档中，原作者给我们提供了几个 JavaScript 数组的例子。这些例子展示了如何使用数组来存储各种数据类型，如字符串、数字和布尔值。我们还可以使用数组来存储其他数组，从而创建多维数组。

二、数组的初始化

在 JavaScript 中，我们可以使用两种方法来初始化一个数组：

数组字面量： 这种方法是最简单的，使用方括号([])来创建一个数组。例如：

const fruits = ['apple', 'banana', 'orange'];

数组构造函数： 这种方法使用 new Array() 语法来创建一个数组。例如：

const numbers = new Array(1, 2, 3, 4, 5);

三、访问数组元素

要访问数组中的元素，我们可以使用方括号([])和索引号。索引号从 0 开始，表示数组的第一个元素。例如：

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits[0]); // 输出：apple
console.log(fruits[1]); // 输出：banana
console.log(fruits[2]); // 输出：orange

四、数组的常见操作

除了访问数组元素外，我们还可以对数组进行各种操作，包括：

添加元素： 使用 push() 方法可以向数组的末尾添加元素。例如：

const fruits = ['apple', 'banana', 'orange'];

fruits.push('grape');

console.log(fruits); // 输出：[ 'apple', 'banana', 'orange', 'grape' ]

删除元素： 使用 pop() 方法可以从数组的末尾删除元素。使用 shift() 方法可以从数组的开头删除元素。例如：

const fruits = ['apple', 'banana', 'orange'];

fruits.pop(); // 删除最后一个元素

console.log(fruits); // 输出：[ 'apple', 'banana' ]

fruits.shift(); // 删除第一个元素

console.log(fruits); // 输出：[ 'banana' ]

查找元素： 使用 indexOf() 方法可以查找元素在数组中的索引号。使用 lastIndexOf() 方法可以查找元素在数组中最后一次出现的索引号。例如：

const fruits = ['apple', 'banana', 'orange', 'apple'];

console.log(fruits.indexOf('apple')); // 输出：0
console.log(fruits.lastIndexOf('apple')); // 输出：3

循环数组： 使用 for 循环或 forEach() 方法可以循环数组中的元素。例如：

const fruits = ['apple', 'banana', 'orange'];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

fruits.forEach((fruit) => {
  console.log(fruit);
});

五、多维数组

多维数组是包含其他数组的数组。我们可以使用方括号([])来访问多维数组中的元素。例如：

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[0][0]); // 输出：1
console.log(matrix[1][2]); // 输出：6
console.log(matrix[2][1]); // 输出：8