函数及其所有相关知识点详解及实例

一、JavaScript函数基础

在JavaScript中，函数是一等公民，这意味着函数可以像其他数据类型一样被传递和操作。函数可以封装代码块，提高代码的复用性和解耦性。

1. 函数声明

1. 定义函数:   function 自定义函数名() {}
2. 调用函数:   函数名()

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

add(2, 8);  // 10

函数中的参数

• 形参:  在函数名后面()中定义的变量。例：a，b就是形参。
• 实参:  调用函数的时候()中的值。例：2，8就是实参。

形参和实参之间的关系

• 形参本质上就是一个变量，实参就是用来给形参变量赋值的。
• 在赋值的过程中，赋值的顺序是对应的，第一个实参就会给第一个形参赋值，依次类推。

2. 箭头函数

• ES6引入了箭头函数，它提供了更为简洁的语法，特别适用于单一表达式的函数。
• 它们不绑定自己的this，arguments，super或new.target。 

const multiply = (a, b) => a * b;

ES6中函数的参数

• ES6引入了默认参数、剩余参数和展开运算符，使得函数参数的处理更加灵活。

1）默认参数

在ES6之前，如果函数的某个参数没有被传递，该参数将是undefined。ES6允许直接为函数参数设置默认值，这样即使参数没有被传递，函数也会使用默认值。

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

greet(); // 输出 "Hello, Anonymous!"
greet('Alice'); // 输出 "Hello, Alice!"

2）剩余参数

剩余参数语法允许函数接收不定数量的参数，这些参数会被收集到一个数组中。剩余参数必须是参数列表中的最后一个参数。剩余参数使用（...）语法，并且必须放置在参数列表的最后。

// 示例1：简单的剩余参数使用
function printAllValues(...values) {
    values.forEach(value => console.log(value));
}

printAllValues(1, 2, 3, 4, 5);
// 输出:
// 1
// 2
// 3
// 4
// 5

// 示例2：剩余参数与已定义参数的结合
function sum(firstArg, secondArg, ...remainingArgs) {
    remainingArgs.forEach(remainingArgs => console.log(remainingArgs));
}

sum(1, 2, 3, 4, 5);
// 输出:
// 3
// 4
// 5

3）展开运算符

展开运算符（...）可以用于函数调用时将一个数组或类数组对象展开为一系列参数。它与剩余参数一起工作，但方向相反。

// 在函数调用中的应用
function sum(x, y, z) {
    return x + y + z;
}
const numbers = [1, 2, 3, 4, 5];
console.log(sum(...numbers)); // 输出 6，等同于 sum(1, 2, 3)

// 快速拼接数组或复制数组
const fruits = ['apple', 'banana'];
const desserts = ['pie', 'cake'];
const allFoods = [...fruits, 'cherry', ...desserts];
console.log(allFoods) // 输出 ['apple', 'banana', 'cherry', 'pie', 'cake']

// 合并多个对象或创建对象的浅拷贝
const user = { name: 'Alice', age: 25 };
const settings = { job: 'Engineer', city: 'Seattle' };
const profile = { ...user, ...settings };
console.log(profile) // 输出 { name: 'Alice', age: 25, job: 'Engineer', city: 'Seattle' }

3. 函数的返回值

• 函数中的返回值不是必须要设置的。
• 如果在函数外部使用函数内部变量的值，函数必须加返回值。
• 一个函数中只能写一个 return。
• 当程序执行了return之后，return后面的代码不会执行，立即结束当前函数。
• 函数中的返回值可以是任何的一种数据类型，返回值是什么，得到的结果就是什么。
• 如果函数中只写了return，那么得到的结果是undefined。

function fn() {
    // 将变量a设置为返回值
    let a = 123;
    return a;
}
// 接收函数中的返回值
let b = fn();
console.log(b); // 123


function fn() {
    let a = 123;
    let b = 456;
    let c = 'abc';
    return;
}
let res = fn();
console.log(res); // undefined

4. 匿名函数

• 匿名函数: 没有名字的函数
• 具名函数: 有具体名字的函数

function () {
    console.log(123);
}

匿名函数调用方法

a) 将匿名函数赋值给一个变量, 通过变量() 调用执行。

let fn = function () {
    console.log(123);
}

fn();

b) 让匿名函数自己调用自己，自调用函数。

• 语法:  (函数体)();
• 注意: 自调用函数后面必须写分号!!!

(function() {
    console.log(123);
})();

5. 作用域

• 全局作用域: 函数外部的区域，都是全局作用域。
• 局部作用域: 只要是函数内部，那就是局部作用域。

• 程序在执行代码的时候，先从当前的作用域中找变量，如果当前作用域中没有变量，则要去全局作用域中找变量，找到就执行，否则报错。

// 变量a在全局作用域中
let a = 123;
// 函数fn在全局作用域中
function fn() {
    let a = 456;// 变量a在局部作用域中
    console.log(a);
} 
// 先在局部作用域中找变量a,如果没有再到全局作用域中找
fn(); // 456

6. 闭包

• 允许一个函数记住并访问其父函数作用域中的变量，即使该父函数已经执行完毕。
• 闭包的关键在于它能够形成一个函数与其外部作用域的引用关系，即使外部函数的执行上下文已经销毁，闭包内部依然可以访问这些变量。

function createCounter() {
    var count = 0;
    return function() {
        return count++;
    };
}

const counter = createCounter();
console.log(counter()); // 输出 0
console.log(counter()); // 输出 1

7. 回调函数

回调函数是作为参数传递给另一个函数的函数，通常用于处理异步操作的结果。

function asyncOperation(callback) {
    setTimeout(() => {
        callback("Operation completed");
    }, 1000);
}

asyncOperation(function(result) {
    console.log(result); // 输出 "Operation completed"
});