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]
常用数组方法
添加和删除元素
- 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
- pop() - 删除并返回数组的最后一个元素
javascript
const fruits = ['Apple', 'Banana', 'Orange'];
const lastFruit = fruits.pop();
console.log(lastFruit); // 输出: Orange
console.log(fruits); // 输出: ['Apple', 'Banana']
- unshift() - 在数组开头添加一个或多个元素
javascript
const fruits = ['Banana', 'Orange'];
fruits.unshift('Apple', 'Mango');
console.log(fruits); // 输出: ['Apple', 'Mango', 'Banana', 'Orange']
- shift() - 删除并返回数组的第一个元素
javascript
const fruits = ['Apple', 'Banana', 'Orange'];
const firstFruit = fruits.shift();
console.log(firstFruit); // 输出: Apple
console.log(fruits); // 输出: ['Banana', 'Orange']
查找元素
- indexOf() - 返回指定元素在数组中第一次出现的索引
javascript
const fruits = ['Apple', 'Banana', 'Orange', 'Banana'];
console.log(fruits.indexOf('Banana')); // 输出: 1
console.log(fruits.indexOf('Mango')); // 输出: -1 (未找到)
- includes() - 判断数组是否包含指定元素
javascript
const fruits = ['Apple', 'Banana', 'Orange'];
console.log(fruits.includes('Banana')); // 输出: true
console.log(fruits.includes('Mango')); // 输出: false
数组转换和操作
- 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
- 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']
- 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开发者的重要一步。
练习题
为了巩固所学知识,尝试完成以下练习:
- 创建一个包含一周中所有天数名称的数组
- 编写函数,接收一个数字数组,返回其中所有偶数的新数组
- 创建一个函数,可以从数组中删除指定的值(所有出现的实例)
- 实现一个简单的待办事项列表,支持添加、删除和标记完成的功能
附加资源
想要深入学习JavaScript数组,可以参考以下资源:
祝你学习愉快!