JavaScript数组——操作数据列表js数组教程

JavaScript数组，操作数据列表js数组教程。

变量可以存储单个值，对象可以存储键值对。但如果我们需要存储一个有序的列表，比如一组成绩、一个商品清单、所有学生的姓名，该怎么办？这时，就需要用到数组。

1. 数组的概念

数组是一种用于存储有序集合的数据结构。数组中的每个值称为一个元素，每个元素都有一个数字索引（位置编号）。

• ​索引从0开始：​​ 第一个元素的索引是0，第二个是1，以此类推。
• ​长度：​​ 数组有一个 length属性，表示数组中元素的个数。

2. 创建数组

最简单的方式是使用数组字面量​ []。

// 创建一个空数组
let emptyArray = [];

// 创建一个包含一些元素的数组
let fruits = ["苹果", "香蕉", "橙子", "芒果"];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, "你好", true, null]; // 数组可以包含任何类型的元素

console.log(fruits); // 输出：["苹果", "香蕉", "橙子", "芒果"]

3. 访问和修改元素

通过元素的索引（放在方括号内）来访问和修改。

let fruits = ["苹果", "香蕉", "橙子"];

// 访问元素
console.log(fruits[0]); // 输出："苹果"（第一个元素）
console.log(fruits[2]); // 输出："橙子"（第三个元素）

// 修改元素
fruits[1] = "葡萄"; // 将第二个元素从"香蕉"改为"葡萄"
console.log(fruits); // 输出：["苹果", "葡萄", "橙子"]

// 获取数组长度
console.log(fruits.length); // 输出：3

4. 常用的数组方法和属性

数组提供了大量内置方法，使其非常强大。

​length属性​

获取数组长度。

​push() / pop()​

在数组的末尾添加/删除元素。

let arr = [1, 2, 3];
arr.push(4);        // 在末尾添加4，arr变为 [1, 2, 3, 4]
let lastElement = arr.pop(); // 删除并返回最后一个元素（4），arr变回 [1, 2, 3]
console.log(lastElement); // 输出：4

​unshift() / shift()​

在数组的开头添加/删除元素。

let arr = [2, 3];
arr.unshift(1);     // 在开头添加1，arr变为 [1, 2, 3]
let firstElement = arr.shift(); // 删除并返回第一个元素（1），arr变回 [2, 3]
console.log(firstElement); // 输出：1

​indexOf() / includes()​

查找元素。

let fruits = ["苹果", "香蕉", "橙子"];
console.log(fruits.indexOf("香蕉"));    // 输出：1（索引）
console.log(fruits.indexOf("西瓜"));    // 输出：-1（未找到）
console.log(fruits.includes("橙子"));   // 输出：true

​forEach()​

遍历数组，为每个元素执行一次函数。这是循环数组的现代方式。

let numbers = [10, 20, 30];
numbers.forEach(function(number) {
    console.log(number * 2);
});
// 输出：
// 20
// 40
// 60

​map()​

创建一个新数组，其内容是原数组每个元素调用提供函数后的返回值。它不会改变原数组。

let numbers = [1, 2, 3];
let doubled = numbers.map(function(num) {
    return num * 2;
});
console.log(doubled); // 输出：[2, 4, 6]
console.log(numbers); // 原数组不变：[1, 2, 3]

5. 实战练习

​练习：管理一个待办事项列表。​​

let todoList = ["学习HTML", "学习CSS"];

// 1. 添加一个新任务
todoList.push("学习JavaScript");
console.log(todoList); // ["学习HTML", "学习CSS", "学习JavaScript"]

// 2. 完成（删除）第一个任务
todoList.shift();
console.log(todoList); // ["学习CSS", "学习JavaScript"]

// 3. 遍历打印所有任务，前面加上序号
todoList.forEach(function(task, index) { // forEach的回调函数可以接收元素和索引
    console.log((index + 1) + ". " + task);
});
// 输出：
// 1. 学习CSS
// 2. 学习JavaScript

总结

数组是处理有序数据列表的利器。通过索引访问元素，并结合强大的内置方法（如 push, pop, forEach, map），我们可以轻松地对列表进行增删改查和遍历操作。数组和对象是JavaScript中最常用的两种数据结构。