欢迎来到高级 JavaScript 的世界！无论你是希望提高技能的经验丰富的开发人员，还是渴望深入了解 JavaScript 复杂性的爱好者，此博客都旨在激发和教育。让我们探索 20 个高级 JavaScript 技巧，这些技巧不仅可以提高您的编码能力，还可以在您发现新的、令人兴奋的方法来优化代码时让您脸上露出笑容。
1. 解构赋值
解构赋值是一项强大的功能，它允许您将数组中的值或对象的属性解包到不同的变量中。这可以使您的代码更具可读性和简洁性。
const [first, second] = [10, 20];
const {
name, age } = {
name: 'Alice', age: 30 };
2. 默认参数
Default parameters 允许您为函数参数设置默认值，从而使您的函数更加灵活和易于使用。
function greet(name = 'Guest') {
console.log(`Hello, ${
name}!`);
}
greet(); // Output: Hello, Guest!
3. 模板字面量
模板文本提供了一种在字符串中嵌入表达式的方法，使字符串插值变得轻而易举。
const name = 'Bob';
console.log(`Hello, ${
name}!`);
4. 箭头函数
箭头函数为编写函数表达式提供了简洁的语法，并自动将值绑定到周围的上下文。this
const add = (a, b) => a + b;
5. Spread 和 Rest 运算符
展开运算符 （） 允许您将可迭代对象（如数组）扩展为单个元素，而 rest 运算符将多个元素收集到一个数组中。...
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];
function sum(...args) {
return args.reduce((acc, val) => acc + val, 0);
}
6. Promise 和 Async/Await
Promise 和语法使异步代码更易于编写和理解。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);
}
}
7. 可选链接
可选的 chaining （） 允许您安全地访问深度嵌套的属性，而无需显式检查每个级别。?.
const user = {
name: 'Alice', address: {
city: 'Wonderland' } };
const city = user?.address?.city;
8. 空值合并
空值合并运算符 （） 在处理 或 时提供默认值。??nullundefined
const value = null ?? 'default';
console.log(value); // Output: default
9. 动态导入
动态导入允许您按需加载模块，通过拆分代码来提高性能。
import('./module.js').then(module => {
module.doSomething();
});
10. 代理对象
代理使您能够为基本作（例如，属性查找、赋值）创建具有自定义行为的对象。
const handler = {
get: (obj, prop) => {
if (prop in obj) {
return obj[prop];
} else {
return 'Property not found';
}
}
};
const proxy = new Proxy({
name: 'Alice' }, handler);
console.log(proxy.name); // Output: Alice
console.log(proxy.age); // Output: Property not found
11. 记忆化
记忆化是一种通过缓存结果来优化昂贵的函数调用的技术。
function memoize(fn) {
const cache = {
};
return function (...args) {
const key = JSON.stringify(args);
if (cache[key]) {
return cache[key];
} else {
const result = fn(...args);
cache[key] = result;
return result;
}
};
}
12. 柯里化
柯里化是一种函数式编程技术，其中具有多个参数的函数被转换为一元函数序列。
function curry(fn) {
return function curried(...args) {
if (args.length >= fn.length) {
return fn.apply(this, args);
} else {
return function (...args2) {
return curried.apply(this, args.concat(args2));
};
}
};
}
13. 高阶函数
高阶函数是将其他函数作为参数或将它们作为结果返回的函数。
function higherOrder(fn) {
return function (...args) {
console.log('Before function call');
const result = fn(...args);
console.log('After function call');
return result;
};
}
14. 活动委托
事件委托是一种通过向父元素添加单个事件侦听器来有效处理事件的技术。
document.querySelector('#parent').addEventListener('click', function (event) {
if (event.target.tagName === 'BUTTON') {
console.log('Button clicked:', event.target.textContent);
}
});
15. 去抖动和节流
去抖动和限制是控制函数调用速率的技术，可用于优化滚动事件或输入更改等情况下的性能。
function debounce(fn, delay) {
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => fn(...args), delay);
};
}
function throttle(fn, limit) {
let inThrottle;
return function (...args) {
if (!inThrottle) {
fn(...args);
inThrottle = true;
setTimeout(() => (inThrottle = false), limit);
}
};
}
16. React 中的自定义 Hook
React 中的自定义钩子允许你跨组件封装和重用有状态逻辑。
function useLocalStorage(key, initialValue) {
const [storedValue, setStoredValue] = React.useState(() => {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
});
const setValue = value => {
setStoredValue(value);
window.localStorage.setItem(key, JSON.stringify(value));
};
return [storedValue, setValue];
}
17. 网络工作者
Web Worker 使您能够在后台线程中运行脚本，从而保持用户界面的响应速度。
const worker = new Worker('worker.js');
worker.postMessage('Hello, Worker!');
worker.onmessage = function (event) {
console.log('Message from worker:', event.data);
};
18. 服务工作者
Service Worker 充当网络代理，允许您创建有效的离线体验并提高性能。
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').then(function (registration) {
console.log('Service Worker registered with scope:', registration.scope);
});
}
19. 交叉路口观察者 API
Intersection Observer API 提供了一种异步观察目标元素与上级元素或顶级文档视区交集的变化的方法。
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('Element is in view:', entry.target);
}
});
});
observer.observe(document.querySelector('#target'));
20. 自定义元素和影子 DOM
自定义元素和 Shadow DOM 允许您创建具有封装样式和行为的可重用组件。
class MyElement extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({
mode: 'open' });
shadow.innerHTML = `<style>:host { color: blue; }</style><p>Hello, World!</p>`;
}
}
customElements.define('my-element', MyElement);
