JavaScript 高阶教程
1. 闭包(Closures)
闭包是指在一个函数内部定义的函数可以访问其外部函数的变量。闭包使得这些变量的生命周期延长,直到闭包不再被引用。
function outerFunction() { let outerVariable = 'I am outside!'; function innerFunction() { console.log(outerVariable); } return innerFunction; } const myClosure = outerFunction(); myClosure(); // 输出: I am outside!
2. 高阶函数(Higher-Order Functions)
高阶函数是指可以接受其他函数作为参数或返回一个函数的函数。常见的高阶函数包括 map
、filter
和 reduce
。
const numbers = [1, 2, 3, 4, 5];
// map
const doubled = numbers.map(num => num * 2);
console.log(doubled); // 输出: [2, 4, 6, 8, 10]
// filter
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // 输出: [2, 4]
// reduce
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 输出: 15
3. 柯里化(Currying)
柯里化是将一个多参数函数转换成一系列单参数函数的技术。
function add(a) {
return function(b) {
return a + b;
};
}
const addFive = add(5);
console.log(addFive(3)); // 输出: 8
4. 递归(Recursion)
递归是指函数调用自身的技术。递归通常用于解决分治问题。
function factorial(n) {
if (n === 0) {
return 1;
}
return n * factorial(n - 1);
}
console.log(factorial(5)); // 输出: 120
5. Promise 和异步编程
Promise 是用于处理异步操作的一种方式。它代表一个在未来某个时间点可能完成或失败的操作。
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Success!');
}, 1000);
});
myPromise.then(result => {
console.log(result); // 输出: Success!
}).catch(error => {
console.error(error);
});
6. async/await
async
和 await
是基于 Promise 的语法糖,使得异步代码看起来更像同步代码。
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}
fetchData();
7. 模块化(Modules)
模块化是指将代码分割成独立的、可重用的模块。ES6 引入了 import
和 export
语法来支持模块化。
// math.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
// main.js
import { add, subtract } from './math.js';
console.log(add(5, 3)); // 输出: 8
console.log(subtract(5, 3)); // 输出: 2
8. 代理(Proxy)
Proxy 对象用于定义基本操作(如属性查找、赋值、枚举、函数调用等)的自定义行为。
const handler = {
get: function(target, prop, receiver) {
if (prop in target) {
return target[prop];
} else {
return `Property ${prop} does not exist.`;
}
}
};
const person = {
name: 'John',
age: 30
};
const proxyPerson = new Proxy(person, handler);
console.log(proxyPerson.name); // 输出: John
console.log(proxyPerson.gender); // 输出: Property gender does not exist.
9. 生成器(Generators)
生成器是可以在执行过程中暂停和恢复的函数。生成器函数使用 function*
语法定义,yield
关键字用于暂停函数执行。
function* generatorFunction() {
yield 'Hello';
yield 'World';
return '!';
}
const generator = generatorFunction();
console.log(generator.next().value); // 输出: Hello
console.log(generator.next().value); // 输出: World
console.log(generator.next().value); // 输出: !
10. 元编程(Metaprogramming)
元编程是指编写能够操作其他代码的代码。JavaScript 提供了 Reflect
和 Proxy
对象来支持元编程。
const target = {
message1: "hello",
message2: "everyone"
};
const handler = {
get: function(target, prop, receiver) {
if (prop === "message2") {
return "world";
}
return Reflect.get(...arguments);
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.message1); // 输出: hello
console.log(proxy.message2); // 输出: world