20个超实用的JavaScript高级技巧

1.Intersection Observer:

用途： 监听元素与其父元素或视口的交叉情况。使用场景： 懒加载图片、实现无限滚动。 const callback = (entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { console.log('Element is in the viewport!'); } }); }; const options = { root: null, // use the viewport as the root threshold: 0.5 // trigger when 50% of the element is visible }; const observer = new IntersectionObserver(callback, options); observer.observe(myElement);

2.Promise 和 异步/await:

用途： 更优雅地处理异步操作。使用场景： 异步数据请求、避免回调地狱。 function fetchData() { return new Promise(resolve => { // 异步操作 resolve(data); }); } async function fetchDataAsync() { const data = await fetchData(); console.log(data); }

3.Map 和 Set 数据结构:

用途： 提供更灵活的键值对存储或存储唯一值。使用场景： 数据集合、唯一值存储。 const myMap = new Map(); myMap.set('key', 'value'); const mySet = new Set([1, 2, 3, 4, 5]);

4.Proxy 和 Reflect:

用途： 对对象的操作进行自定义处理。使用场景： 拦截对象操作、监控对象变化。 const handler = { get(target, prop) { console.log(`Getting property ${prop}`); return target[prop]; } }; const proxy = new Proxy(myObject, handler);

5.函数柯里化 (Function Currying):

用途： 将多参数函数转化为一系列单参数函数。使用场景： 部分应用函数、参数复用。 const curry = fn => (...args) => args.length >= fn.length ? fn(...args) : curry(fn.bind(null, ...args)); const add = (a, b, c) => a + b + c; const curriedAdd = curry(add);

6.Generator 函数:

用途： 暂停和继续执行的函数。使用场景： 数据流控制、异步流程管理。 function* generateSequence() { yield 1; yield 2; yield 3; } const myGenerator = generateSequence(); console.log(myGenerator.next().value); // 1

7.WeakMap 和 WeakSet:

用途： 提供弱引用的集合，不阻止垃圾回收。使用场景： 隐藏信息、轻量级缓存。 const myWeakMap = new WeakMap(); const keyObject = {}; myWeakMap.set(keyObject, 'value');

8.扩展运算符和剩余参数 (Spread Operator and Rest Parameters):

用途： 扩展数组、对象，或使用剩余参数收集函数参数。使用场景： 合并数组、对象，动态参数传递。 const newArray = [...oldArray, newValue]; function sum(...args) { return args.reduce((acc, val) => acc + val, 0); }

9.Web Workers:

用途： 在后台线程中运行 JavaScript 代码，提高性能。使用场景： 复杂计算、并发请求。 // In main.js const worker = new Worker('worker.js'); worker.postMessage('Hello from main.js!'); // In worker.js onmessage = event => { console.log('Message received in worker.js:', event.data); };

10.异步迭代器:

用途： 迭代异步数据流。使用场景： 从 API 获取流数据、处理异步序列。 const fetchData = async () => { const response = await fetch('https://api.example.com/data'); const dataStream = response.body.getReader(); while (true) { const { done, value } = await dataStream.read(); if (done) break; console.log(value); } }; fetchData();

11.Object.freeze():

用途： 使对象不可变，防止更改。使用场景： 确保数据完整性，防止意外修改。 const myObject = { prop1: 'value1', prop2: 'value2' }; const frozenObject = Object.freeze(myObject); // 试图修改将在严格模式下导致错误 frozenObject.prop1 = 'new value';

12.记忆化:

用途： 缓存函数结果，避免重复计算。使用场景： 大场景的函数调用、递归算法。 const memoize = (func) => { const cache = {}; return (...args) => { const key = JSON.stringify(args); if (cache[key]) { return cache[key]; } else { const result = func(...args); cache[key] = result; return result; } }; }; const expensiveCalculation = memoize((n) => { console.log('进行昂贵的计算...'); return n * 2; }); console.log(expensiveCalculation(5)); // 执行计算 console.log(expensiveCalculation(5)); // 返回缓存的结果

13.自定义事件:

用途： 实现自定义事件系统进行通信。使用场景： 组件通信、发布/订阅模式。 const eventEmitter = new EventTarget(); const handleCustomEvent = (event) => { console.log(`触发自定义事件：${event.detail}`); }; eventEmitter.addEventListener('customEvent', handleCustomEvent); eventEmitter.dispatchEvent(new CustomEvent('customEvent', { detail: '传递的数据' }));

14.代理验证:

用途： 验证和拦截对象属性访问。使用场景： 输入验证、强制数据约束。 const validator = (target, prop, value) => { if (prop === 'age' && (typeof value !== 'number' || value < 0)) { throw new Error('无效的年龄值'); } target[prop] = value; return true; }; const person = new Proxy({}, { set: validator }); person.age = 25; // 有效 person.age = -5; // 抛出错误

15.Object.fromEntries():

用途： 将键值对数组转换为对象。使用场景： 处理 API 返回的键值对数组。 const keyValueArray = [['key1', 'value1'], ['key2', 'value2']]; const myObject = Object.fromEntries(keyValueArray); console.log(myObject); // { key1: 'value1', key2: 'value2' }

16.AbortController 和 AbortSignal:

用途： 允许通过 AbortController 取消异步操作。使用场景： 中止不再需要的网络请求。 const controller = new AbortController(); const signal = controller.signal; fetch('https://api.example.com/data', { signal }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => { if (error.name === 'AbortError') { console.log('Request was aborted'); } else { console.error(error); } }); // 取消请求 controller.abort();

17.Blob 和 URL.createObjectURL():

用途： 在浏览器中创建可下载的二进制大对象（Blob）。使用场景： 文件下载、图像预览。 const textContent = 'Hello, Blob!'; const blob = new Blob([textContent], { type: 'text/plain' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = 'example.txt'; link.click();

18.IndexedDB:

用途： 客户端存储大量结构化数据。使用场景： 离线应用、大规模数据存储。 const request = indexedDB.open('myDatabase', 1); request.onupgradeneeded = event => { const db = event.target.result; const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' }); }; request.onsuccess = event => { const db = event.target.result; const transaction = db.transaction('myObjectStore', 'readwrite'); const objectStore = transaction.objectStore('myObjectStore'); objectStore.add({ id: 1, data: 'example' }); };

19.Speech Recognition API:

用途： 识别用户的语音输入。使用场景： 语音搜索、语音指令。 const recognition = new SpeechRecognition(); recognition.lang = 'en-US'; recognition.onresult = event => { const transcript = event.results[0][0].transcript; console.log(`User said: ${transcript}`); }; recognition.start();

20.Resize Observer:

用途： 观察元素的大小变化。使用场景： 响应式布局、动态调整 UI。 const observer = new ResizeObserver(entries => { entries.forEach(entry => { console.log(`Element size changed to ${entry.contentRect.width}x${entry.contentRect.height}`); }); }); const targetElement = document.getElementById('resizeMe'); observer.observe(targetElement);