每位开发者必须知道的21个JavaScript技巧

以下是每位开发者都应该掌握的21个 JavaScript 技巧。这些技巧涵盖了从基础知识到高级用法，可以帮助你提高代码质量和开发效率。

1. 使用箭头函数简化语法

箭头函数提供了更简洁的语法，并且不会改变 this 的上下文。

javascript
// 传统函数
const add = function(a, b) {
return a + b;
};

// 箭头函数
const add = (a, b) => a + b;


## 2. 默认参数
为函数参数设置默认值，避免未定义参数导致的错误。

```javascript
function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5)); // 输出: 5
console.log(multiply(5, 2)); // 输出: 10

3. 解构赋值

从对象或数组中提取数据并赋值给变量。

const person = { name: 'Alice', age: 25 };
const { name, age } = person;

console.log(name); // 输出: Alice
console.log(age); // 输出: 25

const numbers = [1, 2, 3];
const [first, second] = numbers;

console.log(first); // 输出: 1
console.log(second); // 输出: 2

4. 模板字符串

使用反引号（`）创建多行字符串和嵌入表达式。

const name = 'Alice';
const greeting = `Hello, ${name}!`;

console.log(greeting); // 输出: Hello, Alice!

5. Spread 和 Rest 操作符

Spread (...)：展开数组或对象。
Rest (...)：收集剩余参数。

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

console.log(arr2); // 输出: [1, 2, 3, 4, 5]

function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 输出: 10

6. 对象字面量简写

在对象字面量中直接使用变量名作为键和值。

const name = 'Alice';
const age = 25;

const person = {
  name,
  age
};

console.log(person); // 输出: { name: 'Alice', age: 25 }

7. 计算属性名

在对象字面量中使用动态键名。

const key = 'dynamicKey';
const value = 'value';

const obj = {
  [key]: value
};

console.log(obj); // 输出: { dynamicKey: 'value' }

8. 快速交换变量

使用解构赋值快速交换两个变量的值。

let a = 5;
let b = 10;

[a, b] = [b, a];

console.log(a); // 输出: 10
console.log(b); // 输出: 5

9. 可选链操作符 (`?.`)

安全地访问嵌套对象属性，避免空指针异常。

const user = {
  profile: {
    name: 'Alice'
  }
};

console.log(user.profile?.name); // 输出: Alice
console.log(user.address?.street); // 输出: undefined

10. 空值合并操作符 (`??`)

提供默认值，当左侧操作数为 null 或 undefined 时。

const config = {
  apiUrl: ''
};

const url = config.apiUrl ?? 'https://api.example.com';

console.log(url); // 输出: https://api.example.com

11. 数组方法

熟悉常用的数组方法如 map、filter、reduce、find 等。

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(num => num * 2);
console.log(doubled); // 输出: [2, 4, 6, 8, 10]

const even = numbers.filter(num => num % 2 === 0);
console.log(even); // 输出: [2, 4]

const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 输出: 15

const found = numbers.find(num => num > 3);
console.log(found); // 输出: 4

12. 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);
  }
}

fetchData();

13. 类和继承

使用 ES6 类语法来组织代码。

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex');
dog.speak(); // 输出: Rex barks.

14. Proxy

拦截对对象的操作，实现自定义行为。

const handler = {
  get(target, prop) {
    if (prop in target) {
      return target[prop];
    } else {
      return `Property ${prop} does not exist.`;
    }
  }
};

const proxy = new Proxy({}, handler);

proxy.name = 'Alice';
console.log(proxy.name); // 输出: Alice
console.log(proxy.age); // 输出: Property age does not exist.

15. Set 和 Map

使用 Set 和 Map 数据结构来存储唯一值和键值对。

const set = new Set([1, 2, 3, 4, 4]);
console.log(set); // 输出: Set { 1, 2, 3, 4 }

const map = new Map();
map.set('name', 'Alice');
map.set('age', 25);
console.log(map.get('name')); // 输出: Alice
console.log(map.has('age')); // 输出: true

16. Symbol

创建唯一的标识符，用于对象属性。

const sym1 = Symbol('description');
const sym2 = Symbol('description');

console.log(sym1 === sym2); // 输出: false

const obj = {
  [sym1]: 'value'
};

console.log(obj[sym1]); // 输出: value

17. 异常处理

使用 try...catch 和 throw 进行异常处理。

function divide(a, b) {
  if (b === 0) {
    throw new Error('Division by zero');
  }
  return a / b;
}

try {
  console.log(divide(10, 0));
} catch (error) {
  console.error(error.message); // 输出: Division by zero
}

18. 闭包

理解闭包的概念及其应用场景。

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 输出: 1
console.log(counter()); // 输出: 2

19. 高阶函数

接受函数作为参数或返回函数的函数。

function multiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiplier(2);
console.log(double(5)); // 输出: 10

const triple = multiplier(3);
console.log(triple(5)); // 输出: 15

20. 函数柯里化

将一个多参数函数转换为一系列单参数函数。

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));
      };
    }
  };
}

function sum(a, b, c) {
  return a + b + c;
}

const curriedSum = curry(sum);
console.log(curriedSum(1)(2)(3)); // 输出: 6
console.log(curriedSum(1, 2)(3)); // 输出: 6
console.log(curriedSum(1)(2, 3)); // 输出: 6

21. 自我执行函数 (IIFE)

立即执行函数表达式，用于创建独立的作用域。

(function() {
  const message = 'Hello, world!';
  console.log(message); // 输出: Hello, world!
})();

// 使用箭头函数
(() => {
  const message = 'Hello again!';
  console.log(message); // 输出: Hello again!
})();

这些技巧可以帮助你在日常开发中编写更高效、更可维护的 JavaScript 代码。希望对你有所帮助！