精通 JavaScript：揭秘 10 个鲜为人知的技巧和强大特性

作为 JavaScript 大师，我们不断追求精益求精，探求超越常规的技巧和特性。本文将深入剖析 10 个鲜为人知的宝藏，帮助你解锁 JavaScript 的无限潜力。

技巧 1：使用 Set 对象去重数组

创建唯一列表是 JavaScript 中的常见任务，通常通过过滤器或 for 循环来实现。然而，我们可以利用 Set 对象更优雅地解决这个问题：

const arr = [1, 2, 3, 4, 4, 5, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

技巧 2：展开运算符展开数组和对象

展开运算符（...）可以轻松地将数组或对象展开为单个元素或属性：

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

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObj = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

技巧 3：模板字符串增强可读性

模板字符串（使用反引号 ）提供了灵活的方式来创建字符串，同时支持表达式嵌入：

const name = 'John';
const age = 30;
const greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting); // "Hello, John! You are 30 years old."

技巧 4：箭头函数简化代码

箭头函数（=>）是简化函数表达式的语法糖，无需使用 function

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

const sum = (a, b) => {
  return a + b;
};

技巧 5：可选链优雅地处理 undefined

可选链（.）提供了优雅的方式来处理可能为 undefined 的嵌套属性或方法：

const user = { name: 'John', age: 30, address: { city: 'New York' } };
const city = user.address?.city; // "New York"

技巧 6：null 合并运算符替代三元运算符

null 合并运算符（??）提供了一种更简洁的方式来处理可能为 null 或 undefined 的值：

const name = user.name ?? 'Unknown'; // "John"

const age = user.age ?? 0; // 30

技巧 7：对象解构简化数据访问

对象解构允许我们从对象中提取属性到变量中：

const { name, age } = user; // name = 'John', age = 30

const { city: userCity } = user.address; // userCity = 'New York'

技巧 8：异步处理之 Promise

Promise 是一种处理异步操作的强大工具：

fetch('data.json')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

技巧 9：异步处理之 async/await

async/await 语法允许我们使用更同步的语法来处理异步操作：

async function getData() {
  const res = await fetch('data.json');
  const data = await res.json();
  console.log(data);
}
getData();

技巧 10：自定义 Setters/Getters 增强封装

我们可以通过定义自定义 Setters/Getters 来增强 JavaScript 对象的封装：

const user = {
  _name: '',

  get name() {
    return this._name;
  },

  set name(value) {
    this._name = value.toUpperCase();
  }
};

user.name = 'john';
console.log(user.name); // "JOHN"

这些技巧和特性将赋予你提升 JavaScript 技能所需的竞争优势，让你在开发之旅中勇攀高峰。