JS 代码技巧 vol.1 — 10 个让代码少写 30% 的小套路 — 掘金

在 JavaScript 开发者的日常工作中，面对日益复杂的业务逻辑，代码的简洁性与可维护性往往成为衡量工程师水平的关键标尺。近期，一位资深前端工程师在技术社区分享了其多年实战中总结的“10 个让代码少写 30% 的小套路”，引发广泛讨论。这些技巧不仅能让代码量骤减，更能提升运行效率，堪称“懒人”的智慧。本文精选其中几项核心技巧，为读者解析如何用更少的代码实现更强大的功能。

一、巧用解构赋值，告别冗长取值

传统方式常需逐层访问对象属性，代码重复且易出错。而通过 ES6 解构赋值，可直接从对象或数组中提取值。例如：

// 传统写法
const name = user.name;
const age = user.age;

// 解构写法
const { name, age } = user;

更高级的用法是嵌套解构与默认值结合，处理深层数据时甚至可节省 50% 以上的赋值代码。

二、箭头函数 + 隐式返回，简化回调

普通函数需显式写 return，而箭头函数在仅有一条表达式时可省略大括号与 return 关键字。对比：

// 普通函数
const double = function(x) { return x * 2; };

// 箭头函数简写
const double = x => x * 2;

这种写法在数组方法 map、filter、reduce 等场景中尤为高效，一行代码即可替代传统三行甚至更多。

三、利用短路求值与空值合并运算符

处理默认值时，传统 if 语句或三元运算符往往啰嗦。使用 || 或 ??（空值合并）可大幅压缩代码：

// 传统
let title;
if (article.title) {
  title = article.title;
} else {
  title = '默认标题';
}

// 短路
const title = article.title || '默认标题';

// 更严谨的空值合并（仅针对 null/undefined）
const title = article.title ?? '默认标题';

这种写法在处理函数参数默认值、API 返回数据预处理时尤其高效。

四、展开运算符搞定对象合并与数组复制

深拷贝或合并对象常常让人头疼，而 ... 展开运算符一行搞定：

// 合并对象
const merged = { ...obj1, ...obj2 };

// 快速复制数组
const newArr = [...oldArr];

比 Object.assign() 更直观，且能避免修改原始数据。

五、可选链操作符，告别多层 && 判断

访问深层嵌套属性时，传统做法是逐层 && 检查：

// 传统
const city = user && user.address && user.address.city;

// 可选链
const city = user?.address?.city;

当属性不存在时，返回 undefined 而非报错，代码可读性大幅提升。

六、模板字面量让字符串拼接更优雅

传统字符串拼接使用 +，遇到多行文本或变量嵌入时混乱不堪。使用反引号与 ${} 插值，使代码结构清晰：

// 传统
const greeting = 'Hello, ' + user.name + ', welcome to ' + site;

// 模板字面量
const greeting = `Hello, ${user.name}, welcome to ${site}`;

配合标签模板还能实现更高级的字符串处理。

七、利用数组方法链式操作

将多个数组方法串联起来，避免中间变量。例如：从数组中筛选出偶数并乘以2后排序，传统方式需要多个步骤，链式写法一气呵成：

const result = arr
  .filter(n => n % 2 === 0)
  .map(n => n * 2)
  .sort((a, b) => a - b);

代码量减少 40% 以上，且逻辑一目了然。

八、Set 与 Map 代替数组对象实现去重与映射

传统数组去重需遍历，使用 Set 一行实现：

const unique = [...new Set(arr)];

而 Map 在处理键值对映射时比对象更灵活，避免了原型链污染问题。

九、函数参数默认值与剩余参数

在函数定义时直接为参数设置默认值，无需在函数体内判断：

function greet(name = 'Guest') { ... }

剩余参数 ...rest 可替代 arguments 对象，收集所有额外参数，便于处理不定长参数。

十、Promise 与 async/await 消除回调地狱

异步操作从回调到 Promise 再到 async/await，代码从嵌套走向线性：

// 回调嵌套
fetch(url1, data => {
  fetch(url2, data2 => { ... });
});

// async/await
async function fetchData() {
  const data1 = await fetch(url1);
  const data2 = await fetch(url2);
}

减少缩进层级，提升代码可维护性。

效率助力，质量同行

正如分享者所言，这些“小套路”并非炫技，而是从大量实战中提炼出的经验之谈。它们能帮助开发者避开常见陷阱，把精力聚焦于业务逻辑本身。不过，简洁并不意味着随意省略——在团队协作中，适度增加注释、保持风格统一同样重要。当你能用一行代码解决别人三行才能解决的问题时，你便掌握了 JavaScript 真正的魅力。

（全文约980字）

JS 代码技巧 vol.1 — 10 个让代码少写 30% 的小套路

相关阅读