使用 JavaScript 数组方法操作数组

CSSCSSBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在本实验中,学生将通过全面的动手学习体验,探索 JavaScript 数组操作的核心技术。实验涵盖了关键的数组方法,如 slice()unshift()shift()、排序和数组转换,提供了管理和修改数组数据结构的实用技能。

参与者将学习如何使用 slice() 提取数组元素,使用 unshift() 在数组开头添加元素,使用 shift() 移除第一个元素,以及执行数组排序和反转。通过实际的编码示例,学习者将深入理解如何在 JavaScript 中有效地操作数组,从而提升编程能力和问题解决技巧。

提取数组元素

在这一步中,你将学习如何使用 slice() 方法在 JavaScript 中提取数组的一部分。slice() 方法允许你通过从现有数组中选择元素来创建一个新数组,而不会修改原始数组。

让我们从创建一个示例数组开始,并练习如何提取其元素。打开 WebIDE,在 ~/project 目录下创建一个名为 array-slice.js 的新文件。

// 创建一个水果数组
const fruits = ["apple", "banana", "cherry", "date", "elderberry"];

// 提取前三个元素
const slicedFruits1 = fruits.slice(0, 3);
console.log("前三个水果:", slicedFruits1);

// 从索引 2 提取到末尾
const slicedFruits2 = fruits.slice(2);
console.log("从索引 2 开始的水果:", slicedFruits2);

// 使用负索引提取最后两个元素
const slicedFruits3 = fruits.slice(-2);
console.log("最后两个水果:", slicedFruits3);

现在,运行脚本来查看结果:

node ~/project/array-slice.js

示例输出:

前三个水果: [ 'apple', 'banana', 'cherry' ]
从索引 2 开始的水果: [ 'cherry', 'date', 'elderberry' ]
最后两个水果: [ 'date', 'elderberry' ]

关于 slice() 的关键点:

  • 第一个参数是起始索引(包含)
  • 第二个参数是结束索引(不包含)
  • 如果没有提供结束索引,则提取到数组末尾
  • 负索引从数组末尾开始计数
  • 原始数组保持不变

使用 unshift() 向数组头部添加元素

在这一步中,你将学习如何使用 unshift() 方法在 JavaScript 中向数组的开头添加一个或多个元素。unshift() 方法通过在数组开头插入元素来修改原始数组,并返回数组的新长度。

~/project 目录下创建一个名为 array-unshift.js 的新文件,并添加以下代码:

// 创建一个初始的水果数组
let fruits = ["banana", "cherry", "date"];
console.log("原始数组:", fruits);

// 向数组开头添加一个元素
fruits.unshift("apple");
console.log("添加一个元素后:", fruits);

// 向数组开头添加多个元素
fruits.unshift("grape", "kiwi");
console.log("添加多个元素后:", fruits);

// 存储数组的新长度
let newLength = fruits.unshift("orange");
console.log("新数组长度:", newLength);
console.log("最终数组:", fruits);

现在,运行脚本来查看结果:

node ~/project/array-unshift.js

示例输出:

原始数组: [ 'banana', 'cherry', 'date' ]
添加一个元素后: [ 'apple', 'banana', 'cherry', 'date' ]
添加多个元素后: [ 'grape', 'kiwi', 'apple', 'banana', 'cherry', 'date' ]
新数组长度: 7
最终数组: [ 'orange', 'grape', 'kiwi', 'apple', 'banana', 'cherry', 'date' ]

关于 unshift() 的关键点:

  • 向数组开头添加一个或多个元素
  • 修改原始数组
  • 返回数组的新长度
  • 可以一次性添加多个元素
  • 将现有元素移动到更高的索引位置

使用 shift() 移除数组的第一个元素

在这一步中,你将学习如何使用 shift() 方法在 JavaScript 中移除数组的第一个元素。shift() 方法通过移除数组的第一个元素来修改原始数组,并返回被移除的元素。

~/project 目录下创建一个名为 array-shift.js 的新文件,并添加以下代码:

// 创建一个初始的编程语言数组
let languages = ["JavaScript", "Python", "Java", "C++", "Ruby"];
console.log("原始数组:", languages);

// 移除并存储第一个元素
let removedLanguage = languages.shift();
console.log("被移除的语言:", removedLanguage);
console.log("shift() 后的数组:", languages);

// 通过多次调用 shift() 移除多个元素
let secondRemovedLanguage = languages.shift();
console.log("第二个被移除的语言:", secondRemovedLanguage);
console.log("第二次 shift() 后的数组:", languages);

// 演示空数组的情况
let emptyArray = [];
let result = emptyArray.shift();
console.log("从空数组中 shift() 的结果:", result);
console.log("空数组保持不变:", emptyArray);

现在,运行脚本来查看结果:

node ~/project/array-shift.js

示例输出:

原始数组: [ 'JavaScript', 'Python', 'Java', 'C++', 'Ruby' ]
被移除的语言: JavaScript
shift() 后的数组: [ 'Python', 'Java', 'C++', 'Ruby' ]
第二个被移除的语言: Python
第二次 shift() 后的数组: [ 'Java', 'C++', 'Ruby' ]
从空数组中 shift() 的结果: undefined
空数组保持不变: []

关于 shift() 的关键点:

  • 移除数组的第一个元素
  • 修改原始数组
  • 返回被移除的元素
  • 如果数组为空,则返回 undefined
  • 将数组长度减 1

排序和反转数组元素

在这一步中,你将学习如何使用 sort()reverse() 方法在 JavaScript 中操作数组元素。这些方法提供了简单的方式来组织和重新排列数组内容。

~/project 目录下创建一个名为 array-sort-reverse.js 的新文件,并添加以下代码:

// 创建用于排序演示的数组
let numbers = [5, 2, 9, 1, 7];
let fruits = ["banana", "apple", "cherry", "date"];

// 默认排序(字符串按字典顺序,数字按升序)
console.log("原始数字数组:", numbers);
numbers.sort();
console.log("默认排序:", numbers);

// 数字排序需要比较函数
numbers = [5, 2, 9, 1, 7];
numbers.sort((a, b) => a - b);
console.log("数字排序:", numbers);

// 反转排序
console.log("\n原始水果数组:", fruits);
fruits.sort().reverse();
console.log("排序并反转:", fruits);

// 不排序直接反转数组
let colors = ["red", "green", "blue", "yellow"];
console.log("\n原始颜色数组:", colors);
colors.reverse();
console.log("反转后的颜色数组:", colors);

现在,运行脚本来查看结果:

node ~/project/array-sort-reverse.js

示例输出:

原始数字数组: [ 5, 2, 9, 1, 7 ]
默认排序: [ 1, 2, 5, 7, 9 ]
数字排序: [ 1, 2, 5, 7, 9 ]

原始水果数组: [ 'banana', 'apple', 'cherry', 'date' ]
排序并反转: [ 'date', 'cherry', 'banana', 'apple' ]

原始颜色数组: [ 'red', 'green', 'blue', 'yellow' ]
反转后的颜色数组: [ 'yellow', 'blue', 'green', 'red' ]

关于 sort()reverse() 的关键点:

  • sort() 会修改原始数组
  • 默认的 sort() 将元素转换为字符串并按字典顺序排序
  • 使用比较函数进行数字或自定义排序
  • reverse() 反转数组中元素的顺序
  • 这两种方法都是原地操作,会修改原始数组

转换和分析数组

在这一步中,你将探索强大的数组方法,如 map()filter()reduce(),以在 JavaScript 中转换和分析数组元素。这些方法提供了优雅的方式来操作和提取数组中的信息。

~/project 目录下创建一个名为 array-transform.js 的新文件,并添加以下代码:

// 学生分数的示例数组
const scores = [85, 92, 78, 65, 90, 55, 88];

// 使用 map() 创建一个包含修改值的新数组
const adjustedScores = scores.map((score) => score + 5);
console.log("原始分数:", scores);
console.log("调整后的分数:", adjustedScores);

// 使用 filter() 创建一个包含及格分数(70 分以上)的数组
const passingScores = scores.filter((score) => score >= 70);
console.log("及格分数:", passingScores);

// 使用 reduce() 计算分数的总和
const totalScore = scores.reduce((sum, score) => sum + score, 0);
const averageScore = totalScore / scores.length;
console.log("总分:", totalScore);
console.log("平均分:", averageScore.toFixed(2));

// 组合方法:计算及格分数的平均分
const averagePassingScore =
  passingScores.reduce((sum, score) => sum + score, 0) / passingScores.length;
console.log("及格分数的平均分:", averagePassingScore.toFixed(2));

// 转换名称数组
const names = ["alice", "bob", "charlie"];
const capitalizedNames = names.map(
  (name) => name.charAt(0).toUpperCase() + name.slice(1)
);
console.log("原始名称:", names);
console.log("首字母大写的名称:", capitalizedNames);

现在,运行脚本来查看结果:

node ~/project/array-transform.js

示例输出:

原始分数: [ 85, 92, 78, 65, 90, 55, 88 ]
调整后的分数: [ 90, 97, 83, 70, 95, 60, 93 ]
及格分数: [ 85, 92, 78, 90, 88 ]
总分: 553
平均分: 79.00
及格分数的平均分: 86.60
原始名称: [ 'alice', 'bob', 'charlie' ]
首字母大写的名称: [ 'Alice', 'Bob', 'Charlie' ]

关于数组转换方法的关键点:

  • map():通过转换每个元素创建一个新数组
  • filter():创建一个包含通过测试的元素的新数组
  • reduce():通过回调函数将数组缩减为单个值
  • 这些方法不会修改原始数组
  • 可以链接在一起以实现复杂的转换

总结

在本实验中,参与者探索了使用内置方法进行 JavaScript 数组操作的各种技术。实验的重点是学习如何使用 slice() 方法对数组元素进行切片,该方法允许在不修改原始数组的情况下提取数组的特定部分。参与者通过使用不同的索引范围(包括正索引和负索引)选择元素来创建新数组,并进行了实践。

实验还介绍了诸如 unshift() 用于向数组开头添加元素、shift() 用于移除第一个元素,以及排序和反转数组元素的技术。通过动手编码练习,学习者获得了转换和分析数组的实践经验,理解了这些方法如何高效地修改和从 JavaScript 的数组结构中提取数据。

您可能感兴趣的其他 CSS 教程