【Web前端】数组：灵活的数据容器高效操作的工具

一条晒干的咸鱼

发布于 2024-11-19 19:46:23

9000

代码可运行

文章被收录于专栏：learnlearn

运行总次数：0

代码可运行

数组通常被描述为“像列表一样的对象”；它们的特殊之处在于它们是一种可以存储多个值的容器。这些值可以是任何类型的数据，如数字、字符串、布尔，甚至是对象或其他数组，与其他数据类型一样，数组对象可以存储在变量中，像处理普通变量一样进行操作——可以传递给函数、赋值给其他变量或用作表达式的一部分。

数组的关键优势在于它允许独立地访问每个存储的值。数组可以整体存储多个值，每个值都可以通过索引（即元素的位置）单独访问和修改。例如，第一个元素的索引是0，第二个元素的索引是1。这种基于索引的访问方式使得数组特别适合用于批量操作，如遍历每个元素并对其进行某种处理。

数组还提供了一系列高效且功能强大的操作方法。最常见的用法之一是循环（如for循环或forEach方法），能够对数组中的每个元素执行相同的操作。循环的使用能够快速处理数组中的每个值，无论是简单的打印输出，还是复杂的数学运算。例如，可以轻松地通过循环将数组中所有数值加倍，或将每个字符串转换为大写。

一、什么是数组？

数组是一种特殊的对象，它是一个有序的数据集合，可以存储任意类型的数据，包括基本类型（如数字、字符串）和引用类型（如对象、数组）。在JavaScript中，数组的元素是可变的，支持动态添加和删除。

1.1 数组的特点

有序性：数组中的每个元素都有一个位置（索引），可以通过索引进行访问。
动态性：数组的大小可以随时变化，没有固定的大小限制。
混合数据类型：同一个数组可以包含不同类型的元素。

1.2 数组与对象的关系

在JavaScript中，数组实际上是一个特殊的对象，数组的索引就是对象的属性名。数组的长度由length属性表示，这个属性会自动更新。

let arr = [1, 2, 3];
console.log(arr.length); // 输出: 3

二、创建数组

创建数组的方式有很多，这里我们将详细介绍几种常见的方法。

2.1 使用数组字面量

这是最常用的方法，通过方括号[]来创建数组。

let fruits = ['Apple', 'Banana', 'Orange'];

2.2 使用`Array`构造函数

可以使用new Array()构造函数来创建数组。注意，这种方式在某些情况下可能导致意外行为。

let numbers = new Array(3); // 创建一个长度为3的空数组
let moreFruits = new Array('Apple', 'Banana', 'Orange'); // 创建并初始化数组

2.3 通过`Array.of()`

Array.of()是ES6引入的新方法，用于创建数组，避免了Array构造函数的某些问题。

let arr1 = Array.of(5); // 创建数组 [5]
let arr2 = Array.of(1, 2, 3); // 创建数组 [1, 2, 3]

2.4 通过`Array.from()`

Array.from()用于将类数组对象或可迭代对象转化为数组。

let str = 'Hello';
let charArray = Array.from(str); // ['H', 'e', 'l', 'l', 'o']

三、访问和修改数组元素

3.1 访问元素

数组中的元素通过索引访问，索引从0开始。

let fruits = ['Apple', 'Banana', 'Orange'];
console.log(fruits[0]); // 输出: Apple

3.2 修改元素

可以通过指定索引来修改数组中的元素。

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

3.3 获取数组长度

使用length属性可以获取数组的长度。

console.log(fruits.length); // 输出: 3

四、常用的数组方法

JavaScript提供了许多实用的数组方法，能帮助我们轻松处理数组。

4.1 添加元素

push()：在数组末尾添加一个或多个元素。

fruits.push('Pineapple');
console.log(fruits); // 输出: ['Apple', 'Mango', 'Orange', 'Pineapple']

unshift()：在数组开头添加一个或多个元素。

fruits.unshift('Grapes');
console.log(fruits); // 输出: ['Grapes', 'Apple', 'Mango', 'Orange', 'Pineapple']

4.2 删除元素

pop()：从数组末尾删除并返回最后一个元素。

let removedFruit = fruits.pop();
console.log(fruits); // 输出: ['Grapes', 'Apple', 'Mango', 'Orange']
console.log(removedFruit); // 输出: 'Pineapple'

shift()：从数组开头删除并返回第一个元素。

let firstRemoved = fruits.shift();
console.log(fruits); // 输出: ['Apple', 'Mango', 'Orange']
console.log(firstRemoved); // 输出: 'Grapes'

4.3 添加与删除元素（指定位置）

splice()：用于添加和删除数组中的元素。

// 删除元素
fruits.splice(1, 1); // 从索引1开始删除1个元素
console.log(fruits); // 输出: ['Apple', 'Orange']

// 添加元素
fruits.splice(1, 0, 'Mango'); // 在索引1的位置添加'Mango'
console.log(fruits); // 输出: ['Apple', 'Mango', 'Orange']

4.4 遍历数组

forEach()：对数组中的每个元素执行指定的函数。

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

map()：返回一个新数组，每个元素是调用函数返回的结果。

let upperCaseFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(upperCaseFruits); // 输出: ['APPLE', 'MANGO', 'ORANGE']

4.5 数组与字符串的转换

join()：将数组中的所有元素转换为字符串。

let fruitString = fruits.join(', ');
console.log(fruitString); // 输出: 'Apple, Mango, Orange'

split()：将字符串拆分为数组。

let str = 'Apple, Mango, Orange';
let fruitArray = str.split(', ');
console.log(fruitArray); // 输出: ['Apple', 'Mango', 'Orange']

4.6 其他有用的数组方法

find()：返回数组中满足条件的第一个元素。

let numbers = [1, 5, 10, 15];
let firstOverTen = numbers.find(num => num > 10);
console.log(firstOverTen); // 输出: 15

filter()：返回数组中所有满足条件的元素。

let overTen = numbers.filter(num => num > 10);
console.log(overTen); // 输出: [15]

reduce()：对数组中的每个元素执行一个函数，最终计算出一个值。

let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出: 31

sort()：对数组进行排序。

let unsorted = [4, 2, 7, 1];
unsorted.sort((a, b) => a - b); // 升序排序
console.log(unsorted); // 输出: [1, 2, 4, 7]

reverse()：反转数组的顺序。

unsorted.reverse();
console.log(unsorted); // 输出: [7, 4, 2, 1]

五、实例分析

5.1 示例一：简单购物车应用

创建一个简单的购物车应用，用户可以在其中添加商品、查看商品列表以及移除商品。这里会使用到我们之前学到的数组操作。

let shoppingCart = [];

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

// 查看购物车
function viewCart() {
    if (shoppingCart.length === 0) {
        console.log('购物车是空的。');
        return;
    }
    console.log('购物车中的商品：');
    shoppingCart.forEach((item, index) => {
        console.log(`${index + 1}: ${item}`);
    });
}

// 移除商品
function removeFromCart(item) {
    let index = shoppingCart.indexOf(item);
    if (index !== -1) {
        shoppingCart.splice(index, 1);
        console.log(`${item} 已从购物车移除`);
    } else {
        console.log(`${item} 不在购物车中`);
    }
}

// 测试
addToCart('Apple');
addToCart('Banana');
viewCart(); // 查看购物车
removeFromCart('Banana'); // 移除Banana
viewCart(); // 再次查看购物车
removeFromCart('Orange'); // 尝试移除不存在的商品

解释：

shoppingCart数组用于存储购物车中的商品。
addToCart(item)函数将商品名添加到数组中，并打印出相应的提示。
viewCart()函数遍历数组并打印出当前购物车中的商品。如果购物车为空，给出相应提示。
removeFromCart(item)函数用于移除指定商品，使用indexOf()查找商品索引，通过splice()将其从数组中删除。

5.2 示例二：学生成绩管理

通过一个学生成绩管理系统来展示数组的应用，用户可以添加成绩、计算平均分、获取最高分等。

let scores = [];

// 添加成绩
function addScore(score) {
    if (typeof score === 'number' && score >= 0 && score <= 100) {
        scores.push(score);
        console.log(`成绩 ${score} 已添加。`);
    } else {
        console.log('请输入有效的成绩（0 - 100）。');
    }
}

// 计算平均分
function calculateAverage() {
    if (scores.length === 0) return 0;
    let total = scores.reduce((sum, score) => sum + score, 0);
    return total / scores.length;
}

// 获取最高分
function getHighestScore() {
    return Math.max(...scores);
}

// 测试
addScore(85);
addScore(92);
addScore(78);
addScore(94);
addScore(88);

console.log(`平均分: ${calculateAverage()}`); // 输出: 平均分
console.log(`最高分: ${getHighestScore()}`); // 输出: 最高分

// 添加无效成绩
addScore(105); // 提示无效成绩
addScore(-10); // 提示无效成绩

解释：

scores数组用于存储所有学生的成绩。
addScore(score)函数用于添加成绩，检查成绩是否在有效范围内（0 - 100）。
calculateAverage()函数计算并返回平均成绩，使用reduce()方法计算总分。
getHighestScore()函数利用Math.max()返回最高分，使用扩展运算符...将数组展平。

如有表述欠缺之处敬请各位佬指正补充。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-10-23，如有侵权请联系 cloudcommunity@tencent.com 删除

容器

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度