JavaScript 数组基础

什么是数组？

数组是JavaScript中最常用的数据结构之一，它允许我们在单个变量中存储多个值。可以把数组想象成一个有序的列表，其中的每个值都有一个特定的位置（索引）。数组特别适合用来存储相关数据的集合，比如学生名单、产品列表或者一周的温度数据等。

备注

在JavaScript中，数组可以存储不同类型的数据（数字、字符串、布尔值、对象，甚至其他数组），这使它非常灵活。

创建数组

在JavaScript中，有多种方式可以创建数组：

使用数组字面量（推荐方式）

javascript

// 空数组
const emptyArray = [];

// 包含数字的数组
const numbers = [1, 2, 3, 4, 5];

// 包含不同数据类型的数组
const mixed = [42, 'Hello', true, { name: 'John' }, [1, 2]];

使用Array构造函数

javascript

// 空数组
const emptyArray = new Array();

// 指定长度的数组（所有元素初始为undefined）
const arrayWithLength = new Array(5);
console.log(arrayWithLength); // [empty × 5]

// 包含初始值的数组
const numbers = new Array(1, 2, 3, 4, 5);
console.log(numbers); // [1, 2, 3, 4, 5]

警告

使用Array()构造函数时要小心！如果只传递一个数字参数，它会创建一个具有该长度的空数组，而不是包含该数字的数组。

访问数组元素

JavaScript数组使用从0开始的索引来访问元素：

javascript

const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];

// 访问第一个元素（索引0）
console.log(fruits[0]); // 输出: Apple

// 访问第三个元素（索引2）
console.log(fruits[2]); // 输出: Orange

// 访问最后一个元素
console.log(fruits[fruits.length - 1]); // 输出: Mango

// 访问不存在的索引
console.log(fruits[10]); // 输出: undefined

修改数组元素

可以通过索引直接修改数组中的元素：

javascript

const colors = ['Red', 'Green', 'Blue'];
console.log(colors); // 输出: ['Red', 'Green', 'Blue']

// 修改第二个元素
colors[1] = 'Yellow';
console.log(colors); // 输出: ['Red', 'Yellow', 'Blue']

// 添加新元素（如果索引不存在）
colors[3] = 'Purple';
console.log(colors); // 输出: ['Red', 'Yellow', 'Blue', 'Purple']

// 跳过索引添加元素会创建空槽
colors[5] = 'Orange';
console.log(colors); // 输出: ['Red', 'Yellow', 'Blue', 'Purple', empty, 'Orange']

数组属性和基本方法

length属性

length属性返回或设置数组中元素的数量：

javascript

const numbers = [10, 20, 30, 40, 50];
console.log(numbers.length); // 输出: 5

// 通过设置length属性可以截断数组
numbers.length = 3;
console.log(numbers); // 输出: [10, 20, 30]

// 设置更大的length不会添加实际元素
numbers.length = 6;
console.log(numbers); // 输出: [10, 20, 30, empty × 3]

常用数组方法

添加和删除元素

1. push() - 在数组末尾添加一个或多个元素

javascript

const fruits = ['Apple', 'Banana'];
fruits.push('Orange', 'Mango');
console.log(fruits); // 输出: ['Apple', 'Banana', 'Orange', 'Mango']
// push()方法返回新数组的长度
const newLength = fruits.push('Kiwi');
console.log(newLength); // 输出: 5

2. pop() - 删除并返回数组的最后一个元素

javascript

const fruits = ['Apple', 'Banana', 'Orange'];
const lastFruit = fruits.pop();
console.log(lastFruit); // 输出: Orange
console.log(fruits); // 输出: ['Apple', 'Banana']

3. unshift() - 在数组开头添加一个或多个元素

javascript

const fruits = ['Banana', 'Orange'];
fruits.unshift('Apple', 'Mango');
console.log(fruits); // 输出: ['Apple', 'Mango', 'Banana', 'Orange']

4. shift() - 删除并返回数组的第一个元素

javascript

const fruits = ['Apple', 'Banana', 'Orange'];
const firstFruit = fruits.shift();
console.log(firstFruit); // 输出: Apple
console.log(fruits); // 输出: ['Banana', 'Orange']

查找元素

1. indexOf() - 返回指定元素在数组中第一次出现的索引

javascript

const fruits = ['Apple', 'Banana', 'Orange', 'Banana'];
console.log(fruits.indexOf('Banana')); // 输出: 1
console.log(fruits.indexOf('Mango')); // 输出: -1 (未找到)

2. includes() - 判断数组是否包含指定元素

javascript

const fruits = ['Apple', 'Banana', 'Orange'];
console.log(fruits.includes('Banana')); // 输出: true
console.log(fruits.includes('Mango')); // 输出: false

数组转换和操作

1. join() - 将数组所有元素连接成字符串

javascript

const fruits = ['Apple', 'Banana', 'Orange'];
console.log(fruits.join()); // 输出: Apple,Banana,Orange
console.log(fruits.join(' - ')); // 输出: Apple - Banana - Orange
console.log(fruits.join('')); // 输出: AppleBananaOrange

2. slice() - 返回数组的一部分，不修改原数组

javascript

const fruits = ['Apple', 'Banana', 'Orange', 'Mango', 'Kiwi'];
// slice(起始索引, 结束索引) - 不包含结束索引
const citrus = fruits.slice(1, 3);
console.log(citrus); // 输出: ['Banana', 'Orange']
console.log(fruits); // 原数组不变: ['Apple', 'Banana', 'Orange', 'Mango', 'Kiwi']

// 负索引从末尾计数
console.log(fruits.slice(-2)); // 输出: ['Mango', 'Kiwi']

3. splice() - 添加或删除数组中的元素，会修改原数组

javascript

const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];

// splice(起始位置, 删除数量, 添加的元素...)
// 删除元素
const removed = fruits.splice(1, 2);
console.log(removed); // 输出: ['Banana', 'Orange']
console.log(fruits); // 输出: ['Apple', 'Mango']

// 添加元素
fruits.splice(1, 0, 'Kiwi', 'Peach');
console.log(fruits); // 输出: ['Apple', 'Kiwi', 'Peach', 'Mango']

// 替换元素
fruits.splice(1, 2, 'Banana');
console.log(fruits); // 输出: ['Apple', 'Banana', 'Mango']

数组遍历

遍历数组是编程中非常常见的操作。JavaScript提供了多种方法来遍历数组：

for循环

javascript

const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];

for (let i = 0; i < fruits.length; i++) {
    console.log(`索引${i}: ${fruits[i]}`);
}
// 输出:
// 索引0: Apple
// 索引1: Banana
// 索引2: Orange
// 索引3: Mango

for...of循环（推荐用于简单遍历）

javascript

const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];

for (const fruit of fruits) {
    console.log(fruit);
}
// 输出:
// Apple
// Banana
// Orange
// Mango

forEach方法

javascript

const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];

fruits.forEach((fruit, index) => {
    console.log(`${index}: ${fruit}`);
});
// 输出:
// 0: Apple
// 1: Banana
// 2: Orange
// 3: Mango

多维数组

JavaScript支持多维数组，也就是数组的数组：

javascript

// 二维数组（3x3矩阵）
const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

// 访问元素
console.log(matrix[0][0]); // 输出: 1 (第一行第一列)
console.log(matrix[1][2]); // 输出: 6 (第二行第三列)

// 遍历二维数组
for (let row = 0; row < matrix.length; row++) {
    for (let col = 0; col < matrix[row].length; col++) {
        console.log(`位置 [${row},${col}] = ${matrix[row][col]}`);
    }
}

实际应用场景

案例1: 学生成绩管理

javascript

// 存储学生成绩并计算平均分
const studentScores = [
    {name: "Alice", scores: [85, 90, 92]},
    {name: "Bob", scores: [75, 80, 85]},
    {name: "Charlie", scores: [90, 95, 85]}
];

// 计算每个学生的平均分
studentScores.forEach(student => {
    // 计算总分
    let sum = 0;
    for (const score of student.scores) {
        sum += score;
    }
    
    // 计算并显示平均分
    const average = sum / student.scores.length;
    console.log(`${student.name}的平均分: ${average.toFixed(1)}`);
});

// 输出:
// Alice的平均分: 89.0
// Bob的平均分: 80.0
// Charlie的平均分: 90.0

案例2: 购物车功能

javascript

// 简单购物车实现
const shoppingCart = [];

// 添加商品到购物车
function addToCart(item) {
    shoppingCart.push(item);
    console.log(`已添加: ${item.name}`);
}

// 从购物车移除商品
function removeFromCart(productId) {
    const index = shoppingCart.findIndex(item => item.id === productId);
    if (index !== -1) {
        const removed = shoppingCart.splice(index, 1)[0];
        console.log(`已移除: ${removed.name}`);
    } else {
        console.log("未找到该商品");
    }
}

// 计算购物车总价
function calculateTotal() {
    return shoppingCart.reduce((total, item) => total + item.price, 0);
}

// 使用示例
addToCart({id: 1, name: "笔记本电脑", price: 5999});
addToCart({id: 2, name: "无线鼠标", price: 99});
addToCart({id: 3, name: "键盘", price: 199});

console.log("购物车中的商品:", shoppingCart);
console.log(`购物车总价: ¥${calculateTotal()}`);

removeFromCart(2); // 移除鼠标
console.log(`购物车总价: ¥${calculateTotal()}`);

案例3: 数据过滤和转换

javascript

// 一组产品数据
const products = [
    { id: 1, name: "iPhone 13", category: "电子产品", price: 5999, inStock: true },
    { id: 2, name: "书架", category: "家居", price: 299, inStock: true },
    { id: 3, name: "咖啡机", category: "家电", price: 799, inStock: false },
    { id: 4, name: "笔记本", category: "文具", price: 15, inStock: true },
    { id: 5, name: "平板电脑", category: "电子产品", price: 2999, inStock: true }
];

// 获取所有有货的电子产品
const availableElectronics = products.filter(product => 
    product.category === "电子产品" && product.inStock
);
console.log("有货的电子产品:", availableElectronics);

// 获取所有产品名称列表
const productNames = products.map(product => product.name);
console.log("产品名称列表:", productNames);

// 价格从高到低排序
const sortedByPrice = [...products].sort((a, b) => b.price - a.price);
console.log("价格从高到低排序:", sortedByPrice.map(p => `${p.name}: ¥${p.price}`));

总结

JavaScript数组是一种强大且灵活的数据结构，它提供了丰富的方法来满足各种数据操作需求。本文介绍了：

• 如何创建和访问数组
• 如何修改数组元素
• 常用的数组方法（push, pop, shift, unshift等）
• 数组遍历方式
• 多维数组
• 数组的实际应用场景

掌握这些基础知识将帮助你有效地处理和操作数据集合，是成为一名出色的JavaScript开发者的重要一步。

练习题

为了巩固所学知识，尝试完成以下练习：

1. 创建一个包含一周中所有天数名称的数组
2. 编写函数，接收一个数字数组，返回其中所有偶数的新数组
3. 创建一个函数，可以从数组中删除指定的值（所有出现的实例）
4. 实现一个简单的待办事项列表，支持添加、删除和标记完成的功能

附加资源

想要深入学习JavaScript数组，可以参考以下资源：

• MDN Web Docs - Array
• JavaScript.info - Arrays
• W3Schools - JavaScript Arrays

祝你学习愉快！