铁岭市网站建设_网站建设公司_安全防护_seo优化

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