11 个助力开发的 JS 技巧，收藏当作小词典！

在 JavaScript 开发的世界里，掌握一些实用的技巧能够大大提高开发效率和代码质量。以下为您分享 11 个不容错过的 JS 技巧。

1. 巧用解构赋值 解构赋值可以轻松地从数组和对象中提取值，使代码更简洁易读。

const [a, b] = [1, 2];
const { name, age } = { name: '张三', age: 20 };

2. 模板字符串 模板字符串让字符串拼接变得更加直观和灵活。

const name = '李四';
const message = `Hello, ${name}!`;

3. 箭头函数 箭头函数简洁明了，并且在处理 this 指向时更加方便。

const multiply = (a, b) => a * b;

4. 数组方法的运用 比如 map() 、 filter() 、 reduce() 等方法，能高效地处理数组数据。

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);

5. 对象属性简写 当属性名和变量名相可以使用简写形式。

const name = '王五';
const person = { name };

6. 展开运算符 用于合并数组或对象。

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

7. 函数默认参数 为函数参数设置默认值，增强函数的健壮性。

function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

8. 类型断言 在某些情况下，明确指定变量的类型。

const value = '123';
const num = Number(value as number);

9. 利用 Set 和 Map 数据结构 Set 用于存储唯一值，Map 用于键值对的存储。

const mySet = new Set([1, 2, 2, 3]);
const myMap = new Map([['key1', 'value1'], ['key2', 'value2']]);

10. 异步函数 async/await 使异步代码看起来像同步代码，更易理解和编写。

async function getData() {
  const response = await fetch('https://example.com/data');
  const data = await response.json();
  return data;
}

11. 立即执行函数表达式（IIFE） 创建一个独立的作用域，避免变量污染。

(
  function () {
    // 这里的代码在独立作用域中
  }
)();

掌握这些 JS 技巧，相信您在开发过程中能够更加得心应手，编写出更高效、优雅的代码。不断探索和实践，您会发现更多 JavaScript 的奇妙之处。