五个提升效率的前端开发技巧

前言#

前端开发日新月异，掌握一些实用技巧可以大幅提升开发效率和代码质量。今天分享五个我在日常工作中经常用到的技巧。

1. 使用可选链操作符#

在处理嵌套对象时，可选链操作符 ?. 可以避免大量的空值判断：

1
// 传统写法
2
const city = user && user.address && user.address.city;
3

4
// 使用可选链
5
const city = user?.address?.city;

代码瞬间简洁了很多，而且不会因为中间值为 undefined 而报错。

2. 利用 `structuredClone` 深拷贝对象#

以前深拷贝通常用 JSON.parse(JSON.stringify(obj))，但它无法处理 Date、RegExp 等特殊类型。现代浏览器已原生支持 structuredClone：

1
const original = { name: "Alice", birthday: new Date("2000-01-01") };
2
const cloned = structuredClone(original);
3

4
console.log(cloned.birthday instanceof Date); // true

3. CSS 容器查询#

媒体查询是基于视口宽度的，但组件往往需要基于自身容器的大小来调整样式。CSS 容器查询解决了这个问题：

1
.card-container {
2
  container-type: inline-size;
3
}
4

5
@container (min-width: 400px) {
6
  .card {
7
    display: grid;
8
    grid-template-columns: 1fr 2fr;
9
  }
10
}

这让组件真正做到了”自适应”，无论放在页面的哪个位置都能正确响应。

4. 用 `AbortController` 取消请求#

当组件卸载或用户切换页面时，应该取消未完成的网络请求，避免内存泄漏和不必要的资源消耗：

1
const controller = new AbortController();
2

3
fetch("/api/data", { signal: controller.signal })
4
  .then(res => res.json())
5
  .then(data => console.log(data))
6
  .catch(err => {
7
    if (err.name === "AbortError") {
8
      console.log("请求已取消");
9
    }
10
  });
11

12
// 需要取消时
13
controller.abort();

5. 善用 `console.table` 调试#

当需要查看一组结构相似的数据时，console.table 比 console.log 直观得多：

1
const users = [
2
  { name: "张三", age: 28, role: "前端" },
3
  { name: "李四", age: 32, role: "后端" },
4
];
5

6
console.table(users);

浏览器控制台会以表格形式展示数据，一目了然。

总结#

这五个技巧都是我在实际项目中反复验证过的。好的代码不仅仅是”能运行”，更要追求简洁、可维护和高性能。希望这些技巧对你也有所帮助。

前言#

1. 使用可选链操作符#

2. 利用 structuredClone 深拷贝对象#

3. CSS 容器查询#

4. 用 AbortController 取消请求#

5. 善用 console.table 调试#

总结#

2. 利用 `structuredClone` 深拷贝对象#

4. 用 `AbortController` 取消请求#

5. 善用 `console.table` 调试#