如何巧用 JavaScript 函数来提高代码可重用性和可读性
2023-09-30 08:56:52
JavaScript 函数基础
JavaScript 函数是一种将代码块封装成一个单元的机制，它允许我们在程序中重复使用相同的代码块，提高代码的可重用性，让代码更加简洁易读。
函数声明
函数声明是定义函数的最基本方式。它的语法如下：
function functionName(parameter1, parameter2, ...) {
// 函数体
}
其中，functionName 是函数的名称，parameter1, parameter2 等是函数的参数，{ 和 } 之间是函数体，也就是函数要执行的代码块。
例如，以下代码声明了一个名为 sum 的函数，该函数接受两个数字作为参数，返回这两个数字的和：
function sum(a, b) {
return a + b;
}
函数调用
函数声明之后，可以通过调用函数来执行它。函数调用的语法如下：
functionName(argument1, argument2, ...);
其中，functionName 是函数的名称，argument1, argument2 等是函数的参数，这些参数与函数声明中的参数一一对应。
例如，以下代码调用了 sum 函数，并把两个数字 1 和 2 作为参数传递给了函数：
sum(1, 2);
这样，sum 函数就会执行，并且返回这两个数字的和 3。
JavaScript 函数表达式
函数表达式允许我们在 JavaScript 中动态地定义函数。函数表达式的语法如下：
const functionName = (parameter1, parameter2, ...) => {
// 函数体
};
其中，functionName 是函数的名称，parameter1, parameter2 等是函数的参数，=> 是箭头符号，{ 和 } 之间是函数体。
例如，以下代码定义了一个名为 multiply 的函数，该函数接受两个数字作为参数，返回这两个数字的积：
const multiply = (a, b) => {
return a * b;
};
函数表达式可以匿名（没有名称）或命名。例如，以下代码定义了一个匿名的函数表达式：
const multiply = (a, b) => a * b;
JavaScript 箭头函数
箭头函数是 ES6 中引入的一种新的函数语法。箭头函数的语法如下：
const functionName = (parameter1, parameter2, ...) => expression;
其中，functionName 是函数的名称，parameter1, parameter2 等是函数的参数，=> 是箭头符号，expression 是函数体。
箭头函数与函数表达式相似，但它们有一些关键的区别。首先，箭头函数没有函数体大括号 {}，也没有 return 。其次，箭头函数不能使用 arguments 对象。
例如，以下代码将 multiply 函数重写为箭头函数：
const multiply = (a, b) => a * b;
JavaScript 高阶函数
高阶函数是指可以接收函数作为参数或返回值的函数。高阶函数可以帮助我们抽象出代码的公共模式，使代码更加简洁易读。
JavaScript 中有一些内置的高阶函数，例如 map, filter 和 reduce。这些函数可以帮助我们对数组进行各种操作。
例如，以下代码使用 map 函数将一个数组中的每个元素都乘以 2：
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
JavaScript 回调函数
回调函数是指在另一个函数中调用的函数。回调函数通常用于异步操作，比如事件处理和网络请求。
例如，以下代码使用 setTimeout 函数设置一个定时器，在 1 秒后调用 callback 函数：
setTimeout(() => {
console.log('Hello world!');
}, 1000);
JavaScript 闭包
闭包是指可以访问其父函数作用域中的变量的函数。闭包可以帮助我们在函数内部访问外部作用域中的变量，即使这些变量已经超出了它们的范围。
例如，以下代码定义了一个名为 counter 的闭包，该闭包可以访问其父函数作用域中的变量 count：
function outerFunction() {
let count = 0;
function counter() {
count++;
console.log(count);
}
return counter;
}
const counter = outerFunction();
counter(); // 1
counter(); // 2
counter(); // 3
JavaScript 作用域链
作用域链是指函数在查找变量时会依次搜索的函数作用域列表。作用域链从当前函数的作用域开始，然后向上搜索到全局作用域。
例如，以下代码定义了一个名为 innerFunction 的函数，该函数嵌套在一个名为 outerFunction 的函数中：
function outerFunction() {
let count = 0;
function innerFunction() {
console.log(count);
}
innerFunction();
}
outerFunction();
当 innerFunction 函数执行时，它会在其父函数 outerFunction 的作用域中查找 count 变量。由于 count 变量在 outerFunction 函数的作用域中定义，因此 innerFunction 函数可以访问它。
总结
函数是 JavaScript 中的基础构建块，掌握函数的使用技巧，可以帮助我们编写出更简洁、更易读、更高效的代码。函数的基础知识包括函数声明、函数调用、函数表达式、箭头函数、高阶函数、回调函数、闭包和作用域链。
