1. 函数式编程
JavaScript 支持函数式编程风格,允许你将函数视为一等公民。
- 高阶函数:接受函数作为参数或返回函数的函数。
function higherOrderFunction(callback) {
callback();
}
function sayHello() {
console.log("Hello!");
}
higherOrderFunction(sayHello);
- 闭包:函数可以“记住”其外部作用域的变量。
function makeCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
2. Promise 和异步编程
Promise 是处理异步操作的强大工具。
- 创建 Promise:
const myPromise = new Promise((resolve, reject) => {
// 异步操作
const success = true; // 模拟成功或失败
if (success) {
resolve("Operation succeeded!");
} else {
reject("Operation failed!");
}
});
myPromise
.then(result => console.log(result))
.catch(error => console.error(error));
- async/await:更简洁的异步代码写法。
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 fetching data:", error);
}
}
3. 模块化
使用 ES6 模块化语法来组织代码。
- 导出和导入模块:
// module.js
export const PI = 3.14;
export function calculateArea(radius) {
return PI * radius * radius;
}
// main.js
import { PI, calculateArea } from './module.js';
console.log(calculateArea(5)); // 78.5
4. 原型和继承
JavaScript 使用原型链实现继承。
- 原型链:
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(`${this.name} makes a noise.`);
};
function Dog(name) {
Animal.call(this, name); // 继承属性
}
Dog.prototype = Object.create(Animal.prototype); // 继承方法
Dog.prototype.constructor = Dog;
const dog = new Dog('Rex');
dog.speak(); // Rex makes a noise.
5. 事件循环和异步执行
理解 JavaScript 的事件循环机制对于处理异步代码至关重要。
- 事件循环:JavaScript 是单线程的,使用事件循环来处理异步操作。
console.log("Start");
setTimeout(() => {
console.log("Timeout");
}, 0);
Promise.resolve().then(() => {
console.log("Promise resolved");
});
console.log("End");
// 输出顺序:Start -> End -> Promise resolved -> Timeout
6. ES6+ 新特性
了解 ES6 及更高版本的新特性。
- 解构赋值:
const person = { name: 'Alice', age: 25 };
const { name, age } = person;
console.log(name); // Alice
- 箭头函数:
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
- 模板字符串:
const name = 'World';
console.log(`Hello, ${name}!`); // Hello, World!
7. 设计模式
学习常见的设计模式,如单例模式、观察者模式等。
- 单例模式:
const Singleton = (function() {
let instance;
function createInstance() {
const object = new Object("I am the instance");
return object;
}
return {
getInstance: function() {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
})();
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true
8. 性能优化
了解如何优化 JavaScript 代码的性能。
- 避免全局变量:使用局部变量和模块化来减少全局变量的使用。
- 使用节流和防抖:优化事件处理。
function debounce(func, delay) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), delay);
};
}
9. 测试和调试
学习如何使用工具和框架进行测试和调试。
- 使用 Jest 进行单元测试:
test('adds 1 + 2 to equal 3', () => {
expect(add(1, 2)).toBe(3);
});
10. TypeScript
了解 TypeScript 的基本概念,增强 JavaScript 的类型安全。
function greet(name: string): string {
return `Hello, ${name}`;
}