常用ES技巧

一、前言

作为开发者，从JS到ES，在不断的提升前端开发效率。在这篇文章中，我们将分享几个超赞的 ES 技巧。

二、解构

通过重构赋值，可以轻松地从数组或对象中提取值。可以使用简洁的语法直接提取特定值，而不是传统的变量赋值。这有助于编写更简洁、更易读的代码，尤其是在处理复杂的数据结构时。

假设我们有一个对象，包含用户的姓名和年龄信息：

const user = { name: "张三", age: 30 };

但是通过解构赋值，我们可以提取这些信息：

const { name, age } = user;

这样，我们就能直接从 user 对象中提取 name 和 age 属性的值，并将它们分别赋给同名的变量。这种方法不仅代码更加简洁，而且提高了代码的可读性。

三、扩展运算符...

扩展运算符（三点： ... ）允许将数组、对象或函数参数扩展为单独的元素。这对于合并数组、克隆对象或向函数动态传递多个参数等任务非常有用。该功能可简化数据操作，大大减少代码的冗长度。

假设我们有两个数组，需要将它们合并成一个新数组：

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

实现如下所示：

let newArray = [...array1, ...array2];

这样，array1 和 array2 中的元素就被展开，并组成了一个新的数组 newArray。这种方法不仅代码更加简洁，而且更直观易懂。

四、可选链?.

可选链（?.）是一个强大的特性，用于防止在访问对象的嵌套属性或方法时出现错误。它允许我们优雅地处理某些属性或方法可能未定义或为空的情况。通过使用可选链，可以避免冗长的 if 语句，编写出更简洁、更健壮的代码。

假设我们有一个可能包含多层嵌套属性的对象：

let user = {
  name: "张三",
  contact: {
    email: "zhangsan@example.com",
    phone: null
  }
};

在没有可选链的情况下，如果我们想安全地访问用户的电话号码，我们可能需要进行多次检查以避免错误：

let phone = user && user.contact && user.contact.phone;

但是通过使用可选链，我们可以更简洁地实现相同的目的：

let phone = user?.contact?.phone;

这样，如果 user 或 user.contact 中的任何一个是 undefined ，则 phone 将安全地被赋值为 undefined，而不会抛出错误。这种方法让代码更加简洁，也更加健壮。

五、空值合并运算符??

空值合并运算符（??）提供了一种简洁的方式，在变量为 null 或 undefined 时分配一个默认值。这在处理条件表达式或检索对象值时特别有用。通过使用空值合并运算符，您可以省去繁琐的空值检查，使代码更加简洁。

假设我们有一个变量，可能未定义或为空，我们想要为它分配一个默认值：

let username = null;

在没有空值合并运算符的情况下，我们可能会使用逻辑或运算符 || 来分配默认值：

let displayName = username || "游客";

但是，如果 username 的值为一个空字符串或 0（这些值在 JavaScript 中被视为假值），那么 displayName 也会错误地被赋予 “游客”。

使用空值合并运算符，我们可以更准确地实现相同的目的：

let displayName = username ?? "游客";

这样，只有当 username 确实是 null 或 undefined 时，displayName 才会被赋值为 “游客”。这种方法可以更准确地处理变量的默认值分配。

六、promise 和 async/await

在 JavaScript 中，promise 和 async/await 是管理异步操作的重要特性。promise处理异步任务，并通过 .then() 和 .catch() 方法处理成功或失败的情况。async/await 提供了一种更优雅、更同步的语法来处理 promise，使异步代码更易读和可维护。

假设我们有一个异步函数 fetchData，用于从某个 API 获取数据：

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("数据获取成功");
    }, 1000);
  });
}

使用 promise的方法，我们可以这样处理成功或失败的情况：

fetchData()
  .then(data => {
    console.log(data); // 输出 "数据获取成功"
  })
  .catch(error => {
    console.error(error);
  });

但是，使用 async/await，我们可以以更同步的方式写出这段代码：

async function getData() {
  try {
    let data = await fetchData();
    console.log(data); // 输出 "数据获取成功"
  } catch (error) {
    console.error(error);
  }
}

getData();

在这个例子中，async/await使得异步代码的结构更清晰，更接近于传统的同步代码结构，从而提高了代码的可读性和可维护性。

七、import 和 export

ES6 为 JavaScript 引入了一种原生的模块系统，组织和模块化代码。通过使用模块，可以封装功能、鼓励重用，并提高代码的可维护性。import 和 export 语句从其他文件中导入函数、对象或类，并将它们导出以在其他模块中使用。

八、最后

本人每篇文章都是一字一句码出来，希望大佬们多提提意见。顺手来个三连击，点赞👍收藏💖关注✨。创作不易，给我打打气，加加油☕