js高阶教程

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