JavaScript函数 – BuildCodePro

JavaScript函数知识点大全

专为编程小白设计的通俗易懂的函数指南，用大白话解释核心概念

函数是什么？

函数就像一台多功能机器：

给它输入（参数），它进行处理，然后输出结果（返回值）
一段可以重复使用的代码块
实现”一次编写，多次使用”的理念

函数的好处：

复用避免重复写相同代码
模块化把大问题分解为小函数
清晰让代码更容易理解

创建函数的方法

1. 函数声明

最常用的方式，像正式宣布一个函数的存在：

                    function sum(a, b) {

                      return a + b;

                    }

2. 函数表达式

把函数赋值给变量，就像给机器贴标签：

                    const sum = function(a, b) {

                      return a + b;

                    };

3. 箭头函数 (ES6)

更简洁的写法，特别适合简单函数：

                    // 完整写法

                    const sum = (a, b) => {

                      return a + b;

                    };

                    // 简写（当只有一行代码时）

                    const sum = (a, b) => a + b;

函数参数详解

基本参数

函数定义时的变量叫形参(parameters)，调用时传入的值叫实参(arguments)

                    // a, b 是形参

                    function greet(name, message) {

                      console.log(`${message}, ${name}!`);

                    }

                    // “小明”, “你好” 是实参

                    greet(“小明”, “你好”);

默认参数 (ES6)

当调用者忘记传参数时，使用默认值：

                    function greet(name = “朋友”, message = “你好”) {

                      console.log(`${message}, ${name}!`);

                    }

                    greet(); // 输出: 你好, 朋友!

剩余参数 (ES6)

处理不确定数量的参数，像收集所有剩余的东西：

                    function sum(…numbers) {

                      let total = 0;

                      for (let num of numbers) {

                        total += num;

                      }

                      return total;

                    }

                    sum(1, 2); // 3

                    sum(1, 2, 3, 4); // 10

函数的输出和作用域

返回值

函数使用 return 语句输出结果：

                    function getFullName(firstName, lastName) {

                      return firstName + ‘ ‘ + lastName;

                    }

                    const name = getFullName(‘张’, ‘三’);

                    console.log(name); // 输出: 张 三

作用域

变量在哪里可以被访问：

全局作用域在任何地方都能访问
函数作用域只能在函数内部访问
块级作用域在 {} 内部访问（let/const）

                    const globalVar = ‘全局变量’; // 全局作用域

                    function scopeDemo() {

                      const functionVar = ‘函数内部变量’; // 函数作用域

                      console.log(functionVar); // 可以访问

                      console.log(globalVar); // 可以访问

                    }

                    console.log(functionVar); // 报错：外部访问不了

特殊函数类型

回调函数

把函数作为参数传给另一个函数，在需要时调用它：

                    // 模拟点餐：下单后，完成后通知你

                    function orderFood(callback) {

                      console.log(“正在准备食物…”);

                      setTimeout(() => {

                        console.log(“食物准备好了!”);

                        callback(); // 完成后调用回调函数

                      }, 2000);

                    }

                    // 回调函数：食物准备好后做的事

                    function eatFood() {

                      console.log(“开始享用美食!”);

                    }

                    orderFood(eatFood);

立即执行函数(IIFE)

定义后立即执行，避免污染全局作用域：

                    (function() {

                      const secret = ‘只有这里能访问’;

                      console.log(‘这个函数立即执行了’);

                    })();

                    console.log(secret); // 报错：secret不在全局作用域

箭头函数

ES6新特性，更简洁的函数写法：

没有自己的this、arguments、super
不能作为构造函数
没有prototype属性

                    // 传统函数

                    const add = function(a, b) {

                      return a + b;

                    };

                    // 箭头函数

                    const add = (a, b) => a + b;

                    // 单个参数可省略括号

                    const square = x => x * x;

高级函数概念

闭包

函数记住并访问其创建时的作用域，即使该作用域已经结束：

                    function createCounter() {

                      let count = 0; // 闭包保护这个变量

                      return function() {

                        count++;

                        return count;

                      };

                    }

                    const counter = createCounter();

                    console.log(counter()); // 1

                    console.log(counter()); // 2

                    console.log(counter()); // 3

高阶函数

要么接受函数作为参数，要么返回一个函数：

                    // 1. 接收函数作为参数

                    function calculate(a, b, operation) {

                      return operation(a, b);

                    }

                    const add = (x, y) => x + y;

                    const multiply = (x, y) => x * y;

                    console.log(calculate(3, 4, add)); // 7

                    console.log(calculate(3, 4, multiply)); // 12

                    // 2. 返回一个新函数

                    function multiplyBy(factor) {

                      return function(number) {

                        return number * factor;

                      };

                    }

                    const double = multiplyBy(2);

                    console.log(double(5)); // 10