10 个每个程序员都应该知道的JavaScript技巧

1. 解构赋值

解构赋值允许您从数组或对象中提取值，并以简洁易读的方式将它们分配给变量。例如：

const person = { name: 'John', age: 30 };const { name, age } = person;console.log(name, age); // Output: John 30

2. 扩展语法

扩展语法 (…) 允许您将可迭代对象（例如数组或字符串）扩展为单个元素。它可以方便地连接数组、传递函数参数和克隆对象。

const arr1 = [1, 2, 3];const arr2 = [...arr1, 4, 5];console.log(arr2); // Output: [1, 2, 3, 4, 5]

3. 箭头函数

箭头函数为编写匿名函数提供了简洁的语法，对于回调函数和简化代码特别有用。

const add = (a, b) => a + b;console.log(add(2, 3)); // Output: 5

4. 模板文字

模板文字允许轻松的字符串插值和多行字符串，使代码更具可读性和可维护性。

const name = 'Alice';const greeting = `Hello, ${name}!Welcome to our website.`;console.log(greeting);

5. 可选链接

可选链接 (?.) 允许您安全地访问对象的嵌套属性，而不必担心 null 或未定义的值，从而减少了详细的 null 检查的需要。

const user = {  name: 'Bob',  address: {    city: 'New York'  }};console.log(user.address?.city); // Output: New York

6. 空值合并运算符

空值合并运算符 (??) 提供了一种处理 null 或未定义值的默认值的便捷方法，避免使用 0 或空字符串等虚假值出现意外行为。

const defaultValue = 'Hello';const userInput = null;const result = userInput ?? defaultValue;console.log(result); // Output: Hello

7. 数组方法：map、filter、reduce

这些数组方法是以函数式编程风格操作数组的强大工具，可实现简洁且富有表现力的代码。

const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map(num => num * 2);const even = numbers.filter(num => num % 2 === 0);const sum = numbers.reduce((acc, curr) => acc + curr, 0);console.log(doubled, even, sum); // Output: [2, 4, 6, 8, 10] [2, 4] 15

8. Promise 和 Async/Await

Promise 和 async/await 为处理异步代码、提高可读性和可维护性提供了优雅的解决方案。

function fetchData() {  return new Promise(resolve => {    setTimeout(() => {      resolve('Data fetched');    }, 2000);  });}
async function fetchDataAsync() {  const data = await fetchData();  console.log(data); // Output: Data fetched}
fetchDataAsync();

9. Object.assign() 用于对象合并

Object.assign() 允许您将多个对象合并为一个，提供了一种组合对象属性的便捷方法。

const obj1 = { a: 1 };const obj2 = { b: 2 };const merged = Object.assign({}, obj1, obj2);console.log(merged); // Output: { a: 1, b: 2 }

10. 用于性能优化的记忆

记忆化是一种用于缓存昂贵函数调用结果的技术，通过避免冗余计算来提高性能。

function memoize(fn) {  const cache = {};  return function(...args) {    const key = JSON.stringify(args);    if (!cache[key]) {      cache[key] = fn(...args);    }    return cache[key];  };}
const factorial = memoize(n => {  if (n === 0 || n === 1) return 1;  return n * factorial(n - 1);});
console.log(factorial(5)); // Output: 120