30 个 JavaScript 核心知识点解析代码
1. 变量声明与作用域
// var 存在变量提升，let/const 具有块级作用域 var a = 1; let b = 2; const c = 3;
2. 数据类型检测
typeof 42; // "number" typeof "hello"; // "string" typeof true; // "boolean" typeof undefined; // "undefined" typeof null; // "object" (历史遗留问题)
3. 深拷贝与浅拷贝
// 浅拷贝 const obj = { a: 1 }; const shallowCopy = Object.assign({}, obj); // 深拷贝 const deepCopy = JSON.parse(JSON.stringify(obj));
4. 闭包
function outer() { let count = 0; return function inner() { return ++count; }; } const counter = outer(); counter(); // 1
5. 原型链
function Person(name) { this.name = name; } Person.prototype.sayName = function() { console.log(this.name); }; const person = new Person("Alice"); person.sayName(); // "Alice"
6. Promise
const promise = new Promise((resolve, reject) => { setTimeout(() => resolve("done"), 1000); }); promise.then(result => console.log(result)); // "done"
7. async/await
async function fetchData() { const response = await fetch('https://api.example.com/data'); const data = await response.json(); return data; }
8. 事件循环
console.log("start"); setTimeout(() => console.log("timeout"), 0); Promise.resolve().then(() => console.log("promise")); console.log("end"); // 输出顺序: start, end, promise, timeout
9. 防抖与节流
// 防抖 function debounce(fn, delay) { let timer; return function() { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, arguments), delay); }; } // 节流 function throttle(fn, delay) { let lastCall = 0; return function() { const now = Date.now(); if (now - lastCall >= delay) { fn.apply(this, arguments); lastCall = now; } }; }
10. this 指向
const obj = { name: "obj", getName: function() { return this.name; } }; obj.getName(); // "obj" const getName = obj.getName; getName(); // undefined (严格模式下)
11. 箭头函数
const obj = { name: "obj", getName: () => { return this.name; // 箭头函数没有自己的this } }; obj.getName(); // undefined
12. 数组方法
const arr = [1, 2, 3]; arr.map(x => x * 2); // [2, 4, 6] arr.filter(x => x > 1); // [2, 3] arr.reduce((acc, x) => acc + x, 0); // 6
13. 对象解构
const obj = { a: 1, b: 2 }; const { a, b } = obj; console.log(a, b); // 1 2
14. 数组解构
const arr = [1, 2, 3]; const [first, second] = arr; console.log(first, second); // 1 2
15. 模板字符串
const name = "Alice"; const greeting = `Hello, ${name}!`; console.log(greeting); // "Hello, Alice!"
16. 默认参数
function greet(name = "Guest") { return `Hello, ${name}!`; } greet(); // "Hello, Guest!"
17. 剩余参数
function sum(...numbers) { return numbers.reduce((acc, x) => acc + x, 0); } sum(1, 2, 3); // 6
18. 扩展运算符
const arr1 = [1, 2]; const arr2 = [3, 4]; const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]
19. 模块化
// module.js export const PI = 3.14; export function circleArea(r) { return PI * r * r; } // main.js import { PI, circleArea } from './module.js'; console.log(circleArea(2)); // 12.56
20. 类
class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} makes a noise.`); } } class Dog extends Animal { speak() { console.log(`${this.name} barks.`); } } const dog = new Dog("Rex"); dog.speak(); // "Rex barks."
21. 生成器函数
function* idGenerator() { let id = 1; while (true) { yield id++; } } const gen = idGenerator(); console.log(gen.next().value); // 1 console.log(gen.next().value); // 2
22. Symbol
const sym1 = Symbol("key"); const sym2 = Symbol("key"); console.log(sym1 === sym2); // false
23. Proxy
const target = {}; const handler = { get: function(target, prop) { return prop in target ? target[prop] : "default"; } }; const proxy = new Proxy(target, handler); console.log(proxy.test); // "default"
24. Reflect
const obj = { a: 1 }; Reflect.set(obj, "b", 2); console.log(obj.b); // 2
25. Map
const map = new Map(); map.set("a", 1); map.set("b", 2); console.log(map.get("a")); // 1
26. Set
const set = new Set([1, 2, 3, 3]); console.log(set.size); // 3
27. WeakMap
const weakMap = new WeakMap(); const obj = {}; weakMap.set(obj, "value"); console.log(weakMap.get(obj)); // "value"
28. WeakSet
const weakSet = new WeakSet(); const obj = {}; weakSet.add(obj); console.log(weakSet.has(obj)); // true
29. BigInt
const bigInt = 9007199254740991n; console.log(bigInt + 1n); // 9007199254740992n
30. 可选链操作符
const obj = { a: { b: 1 } }; console.log(obj?.a?.b); // 1 console.log(obj?.c?.d); // undefined
