常用 40 个 JavaScript 技巧及应用案例
JavaScript 是一种功能强大的编程语言，广泛应用于前端开发中。掌握一些常用的技巧，可以帮助开发者提升代码效率和可读性。以下是 40 个实用的 JavaScript 技巧及应用案例：
1. 使用 const 和 let 替代 var
const x = 5;
let y = 10;解释： const 和 let 是 ES6 引入的变量声明方式，具有块级作用域，相比 var 更加安全。
2. 解构赋值
const person = { name: 'John', age: 30 };
const { name, age } = person;解释： 解构赋值允许从对象或数组中提取数据，简化代码。
3. 模板字符串
const name = "John";
const greeting = `Hello, ${name}!`;解释： 模板字符串用反引号（`）包裹，支持插入变量，避免了字符串拼接的繁琐。
4. 箭头函数
const sum = (a, b) => a + b;解释： 箭头函数提供了更简洁的函数声明方式，并且 this 绑定更加直观。
5. 数组去重
const numbers = [1, 2, 2, 3, 4, 4];
const uniqueNumbers = [...new Set(numbers)];解释： 通过使用 Set 数据结构，可以轻松去除数组中的重复元素。
6. 数组遍历 (forEach 方法)
const numbers = [1, 2, 3];
numbers.forEach(num => console.log(num));解释： forEach 是一种数组遍历方式，适用于执行某些副作用操作。
7. 数组映射 (map 方法)
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);解释： map 方法用于遍历数组，并返回一个新数组，通常用于数据转换。
8. 数组过滤 (filter 方法)
const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter(num => num % 2 === 0);解释： filter 方法返回符合条件的数组元素。
9. 数组求和 (reduce 方法)
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);解释： reduce 方法可以将数组中的元素按某种方式合并或累加，适用于求和、求积等操作。
10. 异步操作 (async/await)
const fetchData = async () => {
const response = await fetch('https://api.example.com');
const data = await response.json();
console.log(data);
};解释： async/await 使异步代码更像同步代码，增加了代码的可读性。
11. 解构函数参数
const greet = ({ name, age }) => console.log(`${name} is ${age} years old.`);解释： 解构函数参数可以直接提取对象中的数据，减少代码冗余。
12. 扩展运算符 (...)
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];解释： 扩展运算符可以简便地合并数组或对象。
13. 对象合并 (Object.assign)
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const merged = Object.assign({}, obj1, obj2);解释： Object.assign 合并多个对象，并返回一个新对象。
14. 简化的 if 语句 (三元运算符)
const age = 18;
const status = age >= 18 ? 'Adult' : 'Minor';解释： 三元运算符可以简化简单的 if 判断，提升代码简洁性。
15. setInterval 与 setTimeout
setTimeout(() => console.log('Hello!'), 1000);
setInterval(() => console.log('Repeated!'), 1000);解释： setTimeout 用于延迟执行某个函数，setInterval 用于定时执行函数。
16. 防抖与节流
// 防抖
const debounce = (func, delay) => {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => func(...args), delay);
};
};
// 节流
const throttle = (func, delay) => {
let lastTime = 0;
return (...args) => {
const now = new Date().getTime();
if (now - lastTime > delay) {
func(...args);
lastTime = now;
}
};
};解释： 防抖和节流常用于优化高频率触发的事件，比如滚动、输入等操作。
17. 字符串转数字 (parseInt 和 parseFloat)
const integer = parseInt("123");
const floating = parseFloat("123.45");解释： parseInt 和 parseFloat 用于将字符串转为整数或浮动数。
18. 函数柯里化
const add = (a) => (b) => a + b;
const add5 = add(5);
console.log(add5(10)); // 15解释： 函数柯里化是将一个多参数函数转换为一系列单参数函数。
19. 计算数组的最大值和最小值
const numbers = [1, 2, 3, 4, 5];
const max = Math.max(...numbers);
const min = Math.min(...numbers);解释： Math.max 和 Math.min 可用于获取数组中的最大值和最小值。
20. 浅拷贝与深拷贝
const obj = { name: "John", age: 30 };
const shallowCopy = { ...obj }; // 浅拷贝
const deepCopy = JSON.parse(JSON.stringify(obj)); // 深拷贝解释： 浅拷贝复制对象的引用，深拷贝复制对象的值。
21. 动态创建 DOM 元素
const div = document.createElement('div');
div.textContent = 'Hello, World!';
document.body.appendChild(div);解释： 动态创建 DOM 元素并将其添加到页面中。
22. 使用 localStorage 存储数据
localStorage.setItem('username', 'John');
const username = localStorage.getItem('username');解释： localStorage 用于在浏览器中存储数据，数据持久化直到被手动清除。
23. 事件委托
document.getElementById('parent').addEventListener('click', (event) => {
if (event.target && event.target.matches('button.classname')) {
console.log('Button clicked');
}
});解释： 事件委托可以通过在父元素上监听事件，避免对每个子元素都绑定事件监听器。
24. 获取 URL 查询参数
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get('id');解释： URLSearchParams 用于解析 URL 查询字符串。
25. 判断数据类型
const type = (value) => Object.prototype.toString.call(value).slice(8, -1).toLowerCase();解释： 通过 Object.prototype.toString 获取详细的类型信息，避免 typeof 的一些误判。
26. 页面滚动到顶部
window.scrollTo(0, 0);解释： 使用 scrollTo 方法可以将页面滚动到指定位置。
27. 延迟加载图片 (懒加载)
const img = document.createElement('img');
img.src = 'image.jpg';
img.loading = 'lazy';
document.body.appendChild(img);解释： 通过设置 loading="lazy" 属性来实现图片的懒加载。
28. 防止表单重复提交
const submitButton = document.getElementById('submit');
submitButton.addEventListener('click', () => {
submitButton.disabled = true;
// 表单提交代码
});解释： 通过禁用提交按钮，防止用户多次提交表单。
29. 动态修改 CSS 样式
document.body.style.backgroundColor = 'lightblue';解释： 直接修改 DOM 元素的 style 属性来动态改变页面样式。
30. 模拟请求错误（HTTP 状态码模拟）
fetch('/api/endpoint')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.catch(error => console.error('Fetch error:', error));解释： 通过检查 response.ok，可以判断请求是否成功。
31. 数字格式化 (如千位分隔符)
const number = 123456789;
const formatted = number.toLocaleString();解释： toLocaleString 可以格式化数字，加上千位分隔符。
32. 简单的正则表达式匹配
const regex = /\d+/;
const match = '123abc'.match(regex);
console.log(match); // ['123']解释： 使用正则表达式匹配字符串中的数字。
33. 简化的条件判断
const status = userIsLoggedIn && 'Welcome!';解释： 通过短路运算符简化条件判断，提升代码简洁性。
34. 自定义事件
const event = new CustomEvent('myEvent', { detail: 'Hello' });
document.dispatchEvent(event);解释： 使用 CustomEvent 来创建并分发自定义事件。
35. Debounce 函数
const debounce = (func, delay) => {
let timeout;
return function() {
clearTimeout(timeout);
timeout = setTimeout(func, delay);
};
};解释： 使用防抖函数来延迟执行某些高频操作。
36. 动态加载 JavaScript 文件
const script = document.createElement('script');
script.src = 'path/to/script.js';
document.body.appendChild(script);解释： 通过动态创建 script 标签来异步加载外部 JavaScript 文件。
37. 模态框的显示与隐藏
const modal = document.getElementById('myModal');
modal.style.display = 'block'; // 显示模态框
modal.style.display = 'none'; // 隐藏模态框解释： 通过修改样式控制模态框的显示与隐藏。
38. 动态添加类名
element.classList.add('active');解释： 通过 classList 动态添加、删除或切换类名。
39. 性能优化：请求合并
const debouncedFetch = debounce(() => {
fetch('/api/data');
}, 300);解释： 通过请求合并优化性能，减少不必要的请求。
40. 监听元素的大小变化
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
console.log(entry.contentRect.width);
}
});
resizeObserver.observe(document.body);解释： ResizeObserver 用于监听元素的大小变化，适合响应式布局。