函数定义与调用
JavaScript 中的函数是构建复杂程序的基础。首先,让我们从最基础的函数定义开始。
1. 函数声明
function sayHello() {
console.log('Hello, World!');
}
在这个例子中,我们使用 function 关键字声明了一个名为 sayHello 的函数。当你调用这个函数时,它会打印出 “Hello, World!“。
2. 函数表达式
const sayHello = function() {
console.log('Hello, World!');
};
函数表达式与函数声明类似,但它可以存储在变量中,这使得它在某些情况下更加灵活。
3. 箭头函数
ES6 引入了箭头函数,这是一种更简洁的函数声明方式。
const sayHello = () => {
console.log('Hello, World!');
};
箭头函数没有自己的 this,它继承自其所在上下文的 this。
参数与返回值
函数可以接受参数,并返回值。
1. 参数
function add(a, b) {
return a + b;
}
在这个例子中,add 函数接受两个参数 a 和 b,并返回它们的和。
2. 默认参数
如果你想让函数的某个参数有默认值,可以使用默认参数。
function greet(name = 'Guest') {
console.log(`Hello, ${name}!`);
}
如果没有提供 name 参数,它将默认为 'Guest'。
3. 剩余参数
如果你不知道会有多少参数传递给函数,可以使用剩余参数。
function sum(...numbers) {
return numbers.reduce((total, number) => total + number, 0);
}
在这个例子中,numbers 是一个数组,包含所有传递给 sum 的参数。
高阶函数
高阶函数是接受函数作为参数或返回函数的函数。
1. 函数作为参数
function doSomething(fn) {
fn();
}
doSomething(() => console.log('This is a callback function!'));
在这个例子中,doSomething 函数接受一个函数作为参数,并调用它。
2. 函数作为返回值
function createGreeting(name) {
return (greeting) => {
console.log(`${greeting}, ${name}!`);
};
}
const greetAlice = createGreeting('Alice');
greetAlice('Hello');
在这个例子中,createGreeting 函数返回一个箭头函数,它接受一个 greeting 参数。
实战案例
现在,让我们通过一个实际的案例来应用这些技巧。
1. 创建一个计算器
const calculator = {
add: (a, b) => a + b,
subtract: (a, b) => a - b,
multiply: (a, b) => a * b,
divide: (a, b) => a / b
};
console.log(calculator.add(5, 3)); // 8
console.log(calculator.subtract(5, 3)); // 2
console.log(calculator.multiply(5, 3)); // 15
console.log(calculator.divide(5, 3)); // 1.666...
2. 创建一个函数,返回另一个函数
function createCounter() {
let count = 0;
return function() {
return count++;
};
}
const counter = createCounter();
console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2
通过这些技巧,你可以编写更高效、更灵活的 JavaScript 代码。希望这篇文章能帮助你更好地理解 JavaScript 函数的编写。
