正文

轻松掌握JS函数：实战教学，从小白到高手，一招一式带你玩转JavaScript函数！

/0 浏览量
0606

JavaScript函数基础

什么是函数？

函数是JavaScript中用于执行特定任务的一组代码。它们是JavaScript的核心组成部分，允许开发者将代码封装成可重用的块，提高代码的可读性和可维护性。

函数的定义与调用

定义函数

在JavaScript中，可以通过两种方式定义函数：

  1. 函数声明

    function sayHello() {
   console.log("Hello, world!");
}

  2. 函数表达式

    const sayHello = function() {
   console.log("Hello, world!");
};

调用函数

定义函数后，可以通过以下方式调用：

sayHello(); // 输出：Hello, world!

函数参数与返回值

参数

函数参数是传递给函数的值，用于在函数内部使用。函数可以接受任意数量的参数。

传递参数

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

console.log(add(3, 4)); // 输出：7

默认参数

function greet(name = "Guest") {
    console.log(`Hello, ${name}!`);
}

greet(); // 输出：Hello, Guest!
greet("Alice"); // 输出：Hello, Alice!

返回值

函数可以通过return语句返回一个值。

function multiply(a, b) {
    return a * b;
}

console.log(multiply(3, 4)); // 输出：12

高级函数

高阶函数

高阶函数是接受函数作为参数或返回函数的函数。

函数作为参数

function greet(name) {
    return `Hello, ${name}!`;
}

function callFunction(func, name) {
    return func(name);
}

console.log(callFunction(greet, "Alice")); // 输出：Hello, Alice!

函数作为返回值

function createGreetFunction(name) {
    return function() {
        return `Hello, ${name}!`;
    };
}

const greetAlice = createGreetFunction("Alice");
console.log(greetAlice()); // 输出：Hello, Alice!

箭头函数

箭头函数是ES6引入的一种更简洁的函数声明方式。

const add = (a, b) => a + b;
console.log(add(3, 4)); // 输出：7

实战演练

实战1：计算阶乘

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

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

实战2：实现数组排序

function sortArray(arr) {
    return arr.sort((a, b) => a - b);
}

console.log(sortArray([3, 1, 4, 1, 5, 9])); // 输出：[1, 1, 3, 4, 5, 9]

实战3：实现深拷贝

function deepCopy(obj) {
    if (obj === null || typeof obj !== "object") {
        return obj;
    }
    let copy = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            copy[key] = deepCopy(obj[key]);
        }
    }
    return copy;
}

const original = { a: 1, b: { c: 2 } };
const copy = deepCopy(original);
console.log(copy); // 输出：{ a: 1, b: { c: 2 } }

总结

通过本文的学习，相信你已经对JavaScript函数有了更深入的了解。在实际开发中，函数是提高代码可读性和可维护性的关键。希望本文能帮助你轻松掌握JavaScript函数，成为编程高手！

-- 展开阅读全文 --