JavaScript函数-函数案例

在JavaScript中，函数是构建程序逻辑的基本单元。通过定义和调用函数，我们可以将代码组织得更加模块化、提高代码的可读性和复用性。为了更好地理解如何有效地使用函数，本文将通过一系列实际案例来展示JavaScript函数的应用场景和技术细节。

一、简单数学运算函数

（一）加法函数

最基本的函数之一就是实现两个数相加的功能。这不仅是学习函数定义的好例子，也是后续复杂计算的基础。

function add(a, b) {
    return a + b;
}

console.log(add(5, 3)); // 输出: 8

（二）阶乘函数

阶乘是一个经典的递归问题，非常适合用来展示函数的递归调用特性。

function factorial(n) {
    if (n <= 1) return 1;
    return n * factorial(n - 1);
}

console.log(factorial(5)); // 输出: 120

二、字符串处理函数

（一）反转字符串

编写一个函数来反转给定的字符串，这是一个非常实用的例子，展示了如何操作字符串。

function reverseString(str) {
    return str.split('').reverse().join('');
}

console.log(reverseString("hello")); // 输出: olleh

（二）统计单词数量

另一个常见的字符串处理任务是统计一段文本中的单词数量。

function countWords(text) {
    return text.trim().split(/\s+/).length;
}

console.log(countWords("Hello, how are you?")); // 输出: 4

三、数组操作函数

（一）查找数组中的最大值

利用JavaScript内置的Math.max()方法结合扩展运算符可以轻松地找到数组中的最大值。

function findMax(arr) {
    return Math.max(...arr);
}

console.log(findMax([1, 3, 5, 7, 9])); // 输出: 9

（二）过滤数组元素

根据特定条件过滤数组中的元素也是一个常见需求。下面的例子演示了如何过滤掉所有小于10的数字。

function filterUnderTen(arr) {
    return arr.filter(num => num >= 10);
}

console.log(filterUnderTen([5, 10, 15, 20])); // 输出: [10, 15, 20]

四、对象操作函数

（一）合并多个对象

有时候我们需要将多个对象合并成一个新的对象。ES6提供了扩展运算符使得这个过程变得非常简单。

function mergeObjects(...objects) {
    return Object.assign({}, ...objects);
}

const obj1 = {a: 1};
const obj2 = {b: 2};
console.log(mergeObjects(obj1, obj2)); // 输出: {a: 1, b: 2}

（二）获取对象属性值

编写一个函数来安全地获取嵌套对象中的属性值，避免因为属性不存在而导致的错误。

function safeGet(obj, path, defaultValue = null) {
    return path.split('.').reduce((acc, key) => acc && acc[key] !== undefined ? acc[key] : defaultValue, obj);
}

const user = {address: {city: "Beijing"}};
console.log(safeGet(user, 'address.city')); // 输出: Beijing
console.log(safeGet(user, 'address.postalCode', 'Unknown')); // 输出: Unknown

五、异步编程函数

（一）模拟网络请求

在真实世界应用中，我们经常需要处理异步操作，比如网络请求。这里我们用setTimeout来模拟一个简单的异步请求。

function fetchData(callback) {
    setTimeout(() => {
        const data = {id: 1, name: 'John'};
        callback(data);
    }, 1000);
}

fetchData(data => console.log(data)); // 一秒后输出: {id: 1, name: 'John'}

（二）Promise与async/await

现代JavaScript提供了更优雅的方式来处理异步代码：Promise和async/await。

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => resolve({id: 1, name: 'Jane'}), 1000);
    });
}

async function displayData() {
    const data = await fetchData();
    console.log(data);
}

displayData(); // 一秒后输出: {id: 1, name: 'Jane'}

六、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！