今天探讨 20 种 JAVAScript 技巧和窍门，每种技巧和窍门都有通俗易懂的示例。让我们一起来提升你的 JavaScript 技能吧！
解构允许你轻松地从数组或对象中解包值。以下是一个例子：
const person = { name: 'Alice’, age: 30 };
const { name, age } = person;
console.log(name); // Output: Alice
console.log(age); // Output: 30
扩展运算符（...）让你能轻松地创建数组的副本并合并对象：
const originalArray = [1, 2, 3];
const clonedArray = [...originalArray];
console.log(clonedArray); // Output: [1, 2, 3]
合并对象：
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // Output: { a: 1, b: 3, c: 4 }
map() 轻松实现转换map()方法是你转换数据的秘密武器：
const numbers = [1, 2, 3];
const squared = numbers.map(num => num * num);
console.log(squared); // Output: [1, 4, 9]
&& 和 || 的短路操作：优雅的条件判断使用 && 和 || 来创建清晰简洁的条件语句：
const name = user.name || 'Guest';
console.log(name); // Output: Guest
setTimeout()：延迟序列化将setTimeout()链接起来可以创建一系列的延迟操作：
function delayedLog(message, time) {
setTimeout(() => {
console.log(message);
}, time);
}
delayedLog('Hello', 1000); // Output (after 1 second): Hello
箭头函数(() => {})不仅简洁，而且还保留了this的值：
const greet = name => `Hello, ${name}!`;
console.log(greet(’Alice’)); // Output: Hello, Alice!
Promise.all()：处理多个 Promise使用 Promise.all() 来合并多个承诺并集体处理它们：
const promise1 = fetch('url1');
const promise2 = fetch('url2');
Promise.all([promise1, promise2])
.then(responses => console.log(responses))
.catch(error => console.error(error));
可以使用方括号将变量用作对象属性名称：
const key = 'name';
const person = { [key]: 'Alice' };
console.log(person.name); // Output: Alice
模板字面量 (${}) 允许你在字符串中嵌入表达式：
const name = 'Alice';
const greeting = `Hello, ${name}!`;
console.log(greeting); // Output: Hello, Alice!
使用 Number.isNaN() 来准确地检查一个值是否为 NaN：
const notANumber = 'Not a number';
console.log(Number.isNaN(notANumber)); // Output: false
?.）：驯服未定义的值在处理嵌套属性时，通过可选链来避免错误：
const user = { info: { name: 'Alice' } };
console.log(user.info?.age); // Output: undefined
正则表达式（RegExp）是用于模式匹配的强大工具：
const text = 'Hello, world!';
const pattern = /Hello/g;
console.log(text.match(pattern)); // Output: ['Hello']
在JSON.parse()中的reviver参数允许你转换解析后的JSON：
const data = '{"age":"30"}';
const parsed = JSON.parse(data, (key, value) => {
if (key === 'age') return Number(value);
return value;
});
console.log(parsed.age); // Output: 30
使用console.table()和console.groupCollapsed()超越console.log()：
const users = [{ name: 'Alice' }, { name: 'Bob' }];
console.table(users);
console.groupCollapsed(’DetAIls’);
console.log(’Name: Alice’);
console.log(’Age: 30’);
console.groupEnd();
async/await获取：异步简易性使用fetch()的async/await简化了处理异步请求：
async function fetchData() {
try {
const response = await fetch('url');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
fetchData();
闭包让你在函数中创建私有变量：
function createCounter() {
let count = 0;
return function () {
count++;
console.log(count);
};
}
const counter = createCounter();
counter(); // Output: 1
counter(); // Output: 2
备忘录化通过缓存函数结果来提高性能：
function fibonacci(n, memo = {}) {
if (n in memo) return memo[n];
if (n <= 2) return 1;
memo[n] = fibonacci(n - 1, memo) + fibonacci(n - 2, memo);
return memo[n];
}
console.log(fibonacci(10)); // Output: 55
使用 Intersection Observer 者API进行懒加载和滚动动画：
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in');
observer.unobserve(entry.target);
}
});
});
const elements = document.querySelectorAll('.animate');
elements.forEach(element => observer.observe(element));
使用ES6模块来编写整洁、模块化的代码：
// math.js
export function add(a, b) {
return a + b;
}
// App.js
import { add } from './math.js';
console.log(add(2, 3)); // Output: 5
代理允许你拦截并自定义对象操作：
const handler = {
get(target, prop) {
return `Property "${prop}" doesn't exist.`;
}
};
const proxy = new Proxy({}, handler);
console.log(proxy.name); // Output: Property "name" doesn’t exist.
配备了这20个JavaScript的小窍门和技巧，你已经有了足够的装备，可以将你的编程技能提升到新的水平。
