五个你需要掌握的JavaScript函数实用示例-51CTO.COM

JavaScript是每个前端开发人员必备技能之一，如果你精通JavaScript会大大提升你的开发效率，而JavaScript中的函数又是它们的一等公民。如果我们能够学习好这些一等公民，我们就能够编写既强大又高效的代码。对于编码新手来说，掌握函数就像是获得了进入激动人心的编程世界的黄金门票。

因此，今天这篇文章，我们深入探讨5个实际示例，以帮助你更好的学习JavaScript 函数。每个示例都来自日常情况，让你亲身体验函数的强大功能。无论是自动计算折扣、转换温度还是生成随机颜色代码，你都将亲眼见证函数的魔力。

那我们现在就准备开始吧。

1.折扣计算器

在电子商务中，快速准确地计算折扣至关重要。想象一下，如果你正在经营和管理一家折扣在线商店，这个时候， JavaScript 折扣计算就派上用场了。

示例代码：

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




// Example function call
let initialPrice = 200; // Original price of the product
let discountPercentage = 15; // Discount percentage (15%)
// Calculate the final price
let finalPrice = getDiscountedPrice(initialPrice, discountPercentage);
// Print the result
console.log("Original price: ¥" + initialPrice + ", Discounted price: ¥" + finalPrice);

说明：

getDiscountedPrice 函数采用两个参数：原价 (originalPrice) 和折扣百分比 (discountRate)。
let discount = (originalPrice * discountRate) / 100; 计算实际折扣金额。
originalPrice - discount 从原价中减去折扣，得到最终的折扣价。

实际场景：

电子商务：在销售期间更新产品价格。
库存管理：计算库存商品的折扣价。
POS 系统：在实体店结账时应用折扣。

2.年龄验证

年龄验证对于在线零售、数字内容平台和其他年龄限制服务非常重要。确保用户符合年龄要求可确保遵守法律并促进社会责任。

示例代码：

function checkAge(age) {
    return age >= 18 ? "Adult" : "Minor";
}


// Example function call
let userAge = 21; // User's age
let result = checkAge(userAge);
// Output the result
console.log("The user is: " + result);

说明：

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

然后，它使用三元运算符检查年龄是否大于或等于 18 岁。如果为真，则返回“成人”；否则，返回“未成年人”。

实际场景：

限制购买酒精或烟草等受年龄限制的产品。
控制对电影或视频游戏等受年龄限制的内容的访问。
验证用户是否有资格获得具有最低年龄要求的服务，例如租车。

3.温度转换器

温度转换是一种常见的需求，我们在查看天气预报或者食物存储温度时。由于不同地区使用摄氏度或华氏度，因此在两者之间进行转换的函数非常方便。

示例代码：

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


// Example function call
let currentTempInCelsius = 25; // Celsius temperature
let tempInFahrenheit = convertCelsiusToFahrenheit(currentTempInCelsius);


// Output the result
console.log(currentTempInCelsius + "°C is equal to " + tempInFahrenheit + "°F");

说明：

convertCelsiusToFahrenheit 函数以摄氏温度 (celsiusTemp) 作为输入。
return (celsiusTemp * 1.8) + 32; 应用转换公式来获取等效的华氏温度。

实际场景：

天气预报
烹饪和烘焙食谱
科学研究

4.圆面积计算器

计算圆的面积是数学、工程和设计中的一项基本任务。

示例代码：

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


// Example function call
let circleRadius = 7; // Radius of the circle
let area = getCircleArea(circleRadius);
// Output the result
console.log("The area of the circle is: " + area + " square units");

说明：

getCircleArea 函数将圆的半径作为输入（radius）。
return Math.PI * Math.pow(radius, 2); 使用公式 πr² 计算面积，其中 π 是数学常数（JavaScript 中的 Math.PI），r 是半径。

实际场景：

解决几何问题
计算建筑和制造的尺寸
确定设计和艺术中圆形元素的面积

5.随机消息生成器

随机消息可以真正提升应用程序和网站的用户体验。它们可以显示励志名言、用户提示等！

示例代码：

function getRandomMessage() {
    const messages = [
        "Stay focused, and never give up!",
        "Believe in yourself!",
        "Every day is a new beginning.",
        "Push yourself because no one else is going to do it for you.",
        "You got this!"
    ];


    // Choose a random message
    let randomIndex = Math.floor(Math.random() * messages.length);
    return messages[randomIndex];
}


// Example function call
let randomMessage = getRandomMessage();
// Output the result
console.log("Random message: " + randomMessage);

说明：

getRandomMessage 函数不需要任何输入参数。
它包含一个包含激励性消息的数组 messages。
Math.random() * messages.length 生成一个在数组长度范围内的随机数。Math.floor 确保您获得一个整数作为索引。

然后，该函数返回位于 messages 数组中随机生成的索引处的消息。

实际场景：

网站和应用程序上的用户参与度
应用程序中的游戏化元素
在社交媒体平台上推荐随机内容

结论

今天这篇文章跟大家分享了5个 JavaScript 函数练习案例，每个练习都旨在强调函数如何为日常问题提供简单而强大的解决方案。我建议你可以多去尝试练习更多相关案例，从而更好的理解JavaScript中函数的使用。