JavaScript 是现代网页的灵魂，而函数就是这门语言的魔法工具，让我们能写出酷炫又高效的代码。对于编程初学者来说，掌握函数的用法就像拿到了一把开启编程世界大门的钥匙。

这篇文章不会和你讲枯燥的理论，而是通过五个简单实用的例子，带你一步步玩转 JavaScript 函数。每个例子都来源于我们的日常生活场景，让你在实战中体会函数的强大。无论是自动计算折扣、进行温度转换，还是生成随机颜色代码，这些例子都会让你感受到函数的魔力。

如果你是一个编程小白，这些练习会帮你打好基础；如果你已经有了一些经验，这些练习能帮你温故而知新。总之，通过这些练习，你会发现编程不再是高高在上的技术活，而是充满趣味和成就感的探索之旅。

准备好了吗？让我们一起踏上这段奇妙的 JavaScript 函数之旅吧！

练习一：折扣计算器

场景描述：

在快节奏的商业世界中，快速高效地计算折扣至关重要。想象一下，你正在管理一家在线商店，价格和折扣不断变化。在这种情况下，自动化折扣计算不仅方便，而且必要。这正是 JavaScript 函数大显身手的地方。

练习代码：

function getDiscountedPrice(originalPrice, discountRate) {
    let discount = (originalPrice * discountRate) / 100;
    return originalPrice - discount;
}

// 示例函数调用
let initialPrice = 200; // 商品的原价
let discountPercentage = 15; // 折扣百分比 (15%)

// 计算折后价格
let finalPrice = getDiscountedPrice(initialPrice, discountPercentage);

// 打印结果
console.log("原价: ¥" + initialPrice + ", 折后价: ¥" + finalPrice);

详细说明：

getDiscountedPrice 函数设计用于接受两个参数：商品的原价（originalPrice）和折扣百分比（discountRate）。

• let discount = (originalPrice * discountRate) / 100; 计算实际的折扣金额。例如，若商品价格为200元，折扣为15%，则折扣金额为30元。
• originalPrice - discount 从原价中减去折扣金额，得到折后的最终价格。

在示例中，我们定义了两个变量，initialPrice 和 discountPercentage，分别表示商品的原价和折扣百分比。然后调用 getDiscountedPrice 函数并传入这些值，计算出的折后价格存储在 finalPrice 变量中。最后，我们使用 console.log 输出原价和折后价，清晰地展示了函数的计算结果。

实际应用：

这个函数可以有效地应用于各种场景，例如：

• 电子商务：在促销或活动期间更新商品价格。
• 库存管理应用：快速计算库存商品的折后价格。
• POS（销售点）系统：在实体店结账时应用折扣。

在每种情况下，getDiscountedPrice 函数都简化了定价过程，减少了人工错误，提高了操作效率。将此函数集成到网页应用或管理系统中，确保快速准确地计算折扣价格，从而改善客户的购物体验和商家的数据管理。

代码分析：

function getDiscountedPrice(originalPrice, discountRate) {
    let discount = (originalPrice * discountRate) / 100;
    return originalPrice - discount;
}

• 函数定义：
  • function getDiscountedPrice：这里定义了一个名为 getDiscountedPrice 的函数。
  • (originalPrice, discountRate)：函数接受两个参数——originalPrice 是商品的原价，discountRate 是折扣百分比。
• 返回语句：
  • let discount = (originalPrice * discountRate) / 100;：函数计算折扣金额，即用商品原价乘以折扣百分比再除以100，将结果存储在 discount 变量中。
  • return originalPrice - discount;：从原价中减去折扣金额，得到最终的折后价格。

函数调用和结果：

let initialPrice = 200; // 商品的原价
let discountPercentage = 15; // 折扣百分比 (15%)

let finalPrice = getDiscountedPrice(initialPrice, discountPercentage);

console.log("原价: ¥" + initialPrice + ", 折后价: ¥" + finalPrice);

• 设置变量：
  • let initialPrice = 200;：声明一个变量 initialPrice，初始化为200，表示商品的原价。
  • let discountPercentage = 15;：类似地，将 discountPercentage 设置为15，表示15%的折扣。
• 计算折后价格：
  • let finalPrice = getDiscountedPrice(initialPrice, discountPercentage);：调用 getDiscountedPrice 函数，传入 initialPrice 和 discountPercentage 作为参数。计算结果，即折后价格，存储在 finalPrice 变量中。
• 打印结果：
  • console.log("原价: ¥" + initialPrice + ", 折后价: ¥" + finalPrice);：最后，我们打印出原价和折后价格，展示函数在计算折扣价格方面的有效性。

练习二：年龄验证

场景描述：

年龄验证在在线零售、数字内容平台和年龄限制服务等多个领域中都是至关重要的一环。确保用户或客户符合年龄要求不仅是法律合规问题，更是一种社会责任。在这些情况下，使用 JavaScript 进行自动化的年龄验证系统可以提高检查的效率和准确性。

练习代码：

function checkAge(age) {
    return age >= 18 ? "成年" : "未成年";
}

// 示例函数调用
let userAge = 21; // 用户年龄
let result = checkAge(userAge);

// 输出结果
console.log("用户是: " + result);

详细说明：

checkAge 函数接受一个参数 age，表示用户的年龄。

• return age >= 18 ? "成年" : "未成年"; 使用三元运算符来检查年龄是否大于或等于 18。如果条件为真，返回 "成年"；否则返回 "未成年"。

在示例中，我们定义了一个变量 userAge，代表用户的年龄。然后调用 checkAge 函数并传入这个值，函数的返回结果存储在 result 变量中。最后，我们使用 console.log 输出验证结果，展示用户是否为成年人。

实际应用：

这个函数可以有效地应用于各种场景，例如：

• 在线零售和电子商务：限制购买酒类或烟草等年龄限制商品。
• 数字内容平台：控制访问特定评级的电影或电子游戏等年龄限制内容。
• 年龄限制服务：验证用户是否符合租车等服务的最低年龄要求。

在这些应用中，checkAge 函数可以集成到用户注册或结账流程中，自动判断用户是否符合年龄要求。此自动化过程不仅简化了操作，还帮助遵守法律法规和道德标准。

代码分析：

function checkAge(age) {
    return age >= 18 ? "成年" : "未成年";
}

• 函数定义：
  • function checkAge：定义了一个名为 checkAge 的新函数。
  • (age)：函数接受一个参数 age，表示要验证年龄的用户年龄。
• 返回语句：
  • return age >= 18 ? "成年" : "未成年";：这是函数的核心逻辑，使用三元运算符实现。三元运算符是一种简洁的条件语句写法，它检查一个条件，并在条件为真时返回一个值，条件为假时返回另一个值。
  • age >= 18：此条件检查年龄是否大于或等于 18。
  • "成年" : "未成年"：如果条件为真（年龄大于或等于 18），函数返回 "成年"；如果条件为假（年龄小于 18），函数返回 "未成年"。

函数调用和结果：

let userAge = 21; // 用户年龄
let result = checkAge(userAge);

console.log("用户是: " + result);

• 变量初始化和函数调用：
  • let userAge = 21;：声明一个变量 userAge，值为 21，表示用户的年龄。
  • let result = checkAge(userAge);：调用 checkAge 函数，传入 userAge 作为参数。函数返回值（"成年" 或 "未成年"）存储在 result 变量中。
• 输出结果：
  • console.log("用户是: " + result);：最后，打印出验证结果。在本例中，由于 userAge 是 21，输出将是 "用户是: 成年"。

练习三：温度转换器

场景描述：

温度转换在天气预报、烹饪等多个领域都是一个常见需求。不同的地区和行业可能使用不同的温度计量单位，因此编写一个可以在摄氏度和华氏度之间转换温度的函数非常实用。这个函数可以帮助标准化全球应用、科学研究和日常生活中的温度数据。

练习代码：

function convertCelsiusToFahrenheit(celsiusTemp) {
    return (celsiusTemp * 1.8) + 32;
}

// 示例函数调用
let currentTempInCelsius = 25; // 摄氏温度
let tempInFahrenheit = convertCelsiusToFahrenheit(currentTempInCelsius);

// 输出结果
console.log(currentTempInCelsius + "°C 等于 " + tempInFahrenheit + "°F");

详细说明：

convertCelsiusToFahrenheit 函数接受一个参数 celsiusTemp，表示需要转换的摄氏温度。

• return (celsiusTemp * 1.8) + 32; 是转换公式。该公式首先将摄氏温度乘以 1.8，然后加上 32，转换为华氏温度。
• 函数返回转换后的华氏温度。

在示例中，我们定义了一个变量 currentTempInCelsius，表示当前的摄氏温度。然后调用 convertCelsiusToFahrenheit 函数并传入这个值，函数返回的华氏温度存储在 tempInFahrenheit 变量中。最后，我们使用 console.log 输出结果，展示温度转换的效果。

实际应用：

这个函数可以有效地应用于各种场景，例如：

• 天气预报：在国际天气报告中转换不同国家使用的温度计量单位。
• 烹饪和烘焙：食谱通常使用摄氏度或华氏度，用户可以根据自己的偏好或当地标准进行转换。
• 科学研究：在涉及国际合作的科学研究中，温度数据可能需要转换以确保一致性和理解。

这个函数简化了温度转换的过程，使其成为在任何需要统一或标准化温度数据的场景中非常有价值的工具。

代码分析：

function convertCelsiusToFahrenheit(celsiusTemp) {
    return (celsiusTemp * 1.8) + 32;
}

• 函数定义：
  • function convertCelsiusToFahrenheit：定义了一个名为 convertCelsiusToFahrenheit 的新函数。
  • (celsiusTemp)：函数接受一个参数 celsiusTemp，表示需要转换为华氏度的摄氏温度。
• 返回语句和转换公式：
  • return (celsiusTemp * 1.8) + 32;：这是将摄氏度转换为华氏度的公式。函数将摄氏温度乘以 1.8，然后加上 32。

函数调用和结果：

let currentTempInCelsius = 25; // 摄氏温度
let tempInFahrenheit = convertCelsiusToFahrenheit(currentTempInCelsius);

console.log(currentTempInCelsius + "°C 等于 " + tempInFahrenheit + "°F");

• 变量初始化和函数调用：
  • let currentTempInCelsius = 25;：声明一个变量 currentTempInCelsius，值为 25，表示摄氏温度。
  • let tempInFahrenheit = convertCelsiusToFahrenheit(currentTempInCelsius);：调用 convertCelsiusToFahrenheit 函数，传入 currentTempInCelsius 作为参数。函数返回值（华氏温度）存储在 tempInFahrenheit 变量中。
• 输出结果：
  • console.log(currentTempInCelsius + "°C 等于 " + tempInFahrenheit + "°F");：最后，打印出转换结果。在本例中，由于 currentTempInCelsius 为 25，输出将是 "25°C 等于 77°F"。

练习四：圆面积计算器

场景描述：

计算圆的面积是数学、工程和设计等多个领域中的基础任务。无论是设计一个圆形花园，计算圆桌所需的材料，还是解决几何问题，快速准确地确定圆的面积都是非常有价值的。在这些场景中，使用 JavaScript 函数来进行此计算可以节省时间并减少错误。

练习代码：

function getCircleArea(radius) {
    return Math.PI * Math.pow(radius, 2);
}

// 示例函数调用
let circleRadius = 7; // 圆的半径
let area = getCircleArea(circleRadius);

// 输出结果
console.log("圆的面积是: " + area + " 平方单位");

详细说明：

getCircleArea 函数接受一个参数 radius，表示需要计算面积的圆的半径。

• return Math.PI * Math.pow(radius, 2); 是计算面积的公式。该公式将半径的平方乘以圆周率 π（π是数学常数，Math.PI 是 JavaScript 内置属性）。
• 函数返回圆的面积，单位为平方单位。

在示例中，我们定义了一个变量 circleRadius，表示圆的半径。然后调用 getCircleArea 函数并传入这个值，函数返回的面积存储在 area 变量中。最后，我们使用 console.log 输出结果，展示圆的面积计算效果。

实际应用：

这个函数可以有效地应用于各种场景，例如：

• 数学和教育：帮助学生和教育者解决几何问题。
• 工程项目：计算施工和制造中的圆形部件的尺寸。
• 设计和艺术：帮助艺术家和设计师确定他们作品中圆形元素的面积，例如平面设计或建筑图纸。

这个函数 getCircleArea 简化了计算圆面积的过程，使其成为专业人士和学生在各种需要计算圆面积的场景中的便捷工具。

代码分析：

function getCircleArea(radius) {
    return Math.PI * Math.pow(radius, 2);
}

• 函数定义：
  • function getCircleArea：定义了一个名为 getCircleArea 的新函数。
  • (radius)：函数接受一个参数 radius，表示需要计算面积的圆的半径。
• 返回语句和面积计算公式：
  • return Math.PI * Math.pow(radius, 2);：这是计算圆面积的公式。函数将 Math.PI（数学常数 π）乘以半径的平方（Math.pow(radius, 2)）。

函数调用和结果：

let circleRadius = 7; // 圆的半径
let area = getCircleArea(circleRadius);

console.log("圆的面积是: " + area + " 平方单位");

• 变量初始化和函数调用：
  • let circleRadius = 7;：声明一个变量 circleRadius，值为 7，表示圆的半径。
  • let area = getCircleArea(circleRadius);：调用 getCircleArea 函数，传入 circleRadius 作为参数。函数返回值（圆的面积）存储在 area 变量中。
• 输出结果：
  • console.log("圆的面积是: " + area + " 平方单位");：最后，打印出圆的面积计算结果。在本例中，由于 circleRadius 为 7，输出将是 "圆的面积是: 153.93804002589985 平方单位"。

练习五：随机消息生成器

场景描述：

随机消息在增强应用和网站的用户体验中起着重要作用。它们可以用于多种用途，从显示每日的励志名言到生成随机的用户提示，增加了惊喜和个性化的元素。在JavaScript中实现一个随机消息生成器，可以提供动态内容，让用户体验保持新鲜和吸引人。

练习代码：

function getRandomMessage() {
    const messages = [
        "保持专注，永不放弃！",
        "相信你自己！",
        "每天都是一个新的开始。",
        "推动自己，因为没有人会替你努力。",
        "你可以做到的！"
    ];
    
    // 选择一个随机消息
    let randomIndex = Math.floor(Math.random() * messages.length);
    return messages[randomIndex];
}

// 示例函数调用
let randomMessage = getRandomMessage();

// 输出结果
console.log("随机消息: " + randomMessage);

详细说明：

getRandomMessage 函数不接受任何参数。

• 函数内部定义了一个包含各种励志名言或短语的数组 messages。
• Math.random() * messages.length 生成一个 0 到 messages 数组长度之间的随机小数。 Math.floor 用于将这个小数向下取整，得到一个数组的有效索引。
• 函数返回在 messages 数组中随机索引位置的消息。

在示例中，我们调用了 getRandomMessage 函数，函数返回的随机消息存储在 randomMessage 变量中。最后，我们使用 console.log 输出结果，展示随机消息。

实际应用：

这个函数可以有效地应用于各种场景，例如：

• 用户互动：网站和应用可以使用此函数在每次用户访问或刷新页面时显示不同的励志名言或提示，增强用户互动。
• 游戏化：在游戏应用中，随机消息可以用于给玩家提供即兴挑战或奖励。
• 社交媒体平台：平台可以使用该函数向用户推荐随机帖子或话题，鼓励探索和互动。

这个简单而有效的 getRandomMessage 函数，是为提供动态内容的网页或移动应用程序的宝贵工具，旨在创造更具互动性和个性化的用户体验。

代码分析：

function getRandomMessage() {
    const messages = [
        "保持专注，永不放弃！",
        "相信你自己！",
        "每天都是一个新的开始。",
        "推动自己，因为没有人会替你努力。",
        "你可以做到的！"
    ];
    
    let randomIndex = Math.floor(Math.random() * messages.length);
    return messages[randomIndex];
}

• 函数定义：
  • function getRandomMessage：定义了一个名为 getRandomMessage 的新函数。
  • 不接受任何参数。
• 消息数组：
  • const messages = [...]：在函数内部定义了一个包含励志消息的数组 messages。
• 生成随机索引：
  • Math.random() * messages.length：Math.random() 生成一个 0 到 1 之间的随机小数。这个值乘以 messages 数组的长度，得到一个有效的数组索引范围。
  • Math.floor(...)：将结果向下取整得到一个有效的数组索引。
• 选择并返回随机消息：
  • return messages[randomIndex]：函数返回 messages 数组中 randomIndex 位置的消息。

函数调用和结果：

let randomMessage = getRandomMessage();

console.log("随机消息: " + randomMessage);

• 函数调用和显示结果：
  • let randomMessage = getRandomMessage();：调用 getRandomMessage 函数，返回值（随机选择的消息）存储在 randomMessage 变量中。
  • console.log("随机消息: " + randomMessage);：最后，打印出随机选择的消息。在本例中，输出将是 messages 数组中的一条随机消息。

结束

在这篇文章中，我们探索了五个 JavaScript 练习，每一个都旨在展示函数如何以简单而有效的方式解决实际问题。虽然这些例子看似基础，但对于理解 JavaScript 编程的基本原理至关重要。通过这些实用练习进行学习，不仅能让你立即看到代码在现实场景中的应用，还能强化你的编程技能和对这门语言的理解。

阿森 前端达人