JavaScript 函数重构：提升代码优雅性的 5 个技巧

作者：函数茶馆时间：2026-10-24 12:50:24浏览：82

本文详解 JavaScript 函数优化的五个核心技巧：使用解构处理多参数、为回调命名提升可读性、用独立函数描述复杂条件、以 Map 或对象替代冗长 Switch 语句，以及利用 Object.assign 设置默认值。通过提炼函数消除重复代码，帮助开发者编写更清晰、易维护的 JavaScript 代码。

本文旨在总结 JavaScript 中实用的编码技巧，重点探讨如何使函数逻辑更加清晰直观。

对象参数使用解构

当函数需要接收多个参数（超过两个）时，建议改用对象作为参数载体。在此基础上，利用解构语法提取所需的具体参数，是更优的选择。

普通写法


const greet = (obj) => {
  return `${obj.greeting}, ${obj.firstName}${obj.lastName}`;
}

改写方案


const greet = ({
  greeting,
  firstName,
  lastName
}) => {
  return `${greeting}, ${firstName}${lastName}`;
}

采用解构方式不仅使代码更为优雅，还能减少大量重复的冗余代码，同时让变量命名更加清晰易读。

命名回调函数

良好的命名习惯能显著提升代码的可读性，回调函数的命名同样适用这一原则。

普通写法


const arr = [1, 2, 3].map(a => a * 2);

改写方案


const double = a => a * 2;
const arr = [1, 2, 3].map(double);

通过分离命名，可以让人一眼看清代码意图。例如，上述改写后的代码清晰地表明回调函数的作用是加倍原始数组中的每个元素。

让条件句具有描述性

对于复杂的条件判断逻辑，建议将其封装为独立的函数，这样能使条件语句更具描述性和可读性。

普通写法


if (score === 100 || remainingPlayers === 1 || remainingPlayers === 0) {
    quitGame();
  }

改写方案


const winnerExists = () => {
  return score === 100 ||
    remainingPlayers === 1 ||
    remainingPlayers === 0
}
if (winnerExists()) {
  quitGame();
}

原写法中括号内包含冗长的表达式，难以直观判断其判断逻辑。改写后将其放入命名函数中，通过函数名即可大致理解表达式的含义。

用 Map 或 Object 替换 switch 语句

当 Switch 语句变得冗长时，意味着代码需要简化。

普通写法


const getValue = (prop) => {
  switch (prop) {
    case 'a': {
      return 1;
    }
    case 'b': {
      return 2;
    }
    case 'c': {
      return 3;
    }
  }
}
const val = getValue('a');

Object 改写方案


const obj = {
  a: 1,
  b: 2,
  c: 3
}
const val = obj['a'];

当 Switch 语句嵌套多个带有多个 Return 语句的块，仅为了获取给定 Prop 值的返回值时，我们可以仅仅使用一个对象来实现同样的效果。

Map 改写方案


const map = new Map([['a', 1], ['b', 2], ['c', 3]])
const val = map.get('a')

使用 Map 时，代码长度显著缩短。通过传递一个数组，数组中的每项包含键和值，然后仅使用 Map 实例的 Get 方法从键中获取值。Map 优于对象的一个好处是，我们可以将数字、布尔值或对象等其他值用作键，而对象只能将字符串或 Symbol 作为键。

使用 Object.assign 设置默认属性

普通写法


const menuConfig = {
  title: null,
  body: 'Bar'
};
function createMenu(config) {
  config.title = config.title || 'Foo';
  config.body = config.body || 'Bar';
}
createMenu(menuConfig);

改写方案


const menuConfig = {
  title: 'Order',
  body: 'Send'
};
function createMenu(config) {
  config = Object.assign({
    title: 'Foo',
    body: 'Bar'
  }, config);
  // config : {title: "Order", body: "Bar"}
  // ...
}
createMenu(menuConfig);

删除重复代码，合并相似函数；删除弃用代码

不好的写法


var paging = function( currPage ){
    if ( currPage <= 0 ){
        currPage = 0;
        jump( currPage );    // 跳转
    }else if ( currPage >= totalPage ){
        currPage = totalPage;
        jump( currPage );    // 跳转
    }else{
        jump( currPage );    // 跳转
    }
};

改写方案


var paging = function( currPage ){
    if ( currPage <= 0 ){
        currPage = 0;
    }else if ( currPage >= totalPage ){
        currPage = totalPage;
    }
    jump( currPage );    // 把jump函数独立出来
};

提炼函数

如果一个函数过长，不得不加上若干注释才能让这个函数显得易读一些，那这些函数就很有必要进行重构。

如果在函数中有一段代码可以被独立出来，那我们最好把这些代码放进另外一个独立的函数。

示例

比如在一个负责取得用户信息的函数里面，我们还需要打印跟用户信息有关的 Log。


var getUserInfo = function(){
    ajax( 'http:// xxx.com/userInfo', function( data ){
        console.log( 'userId: ' + data.userId );
        console.log( 'userName: ' + data.userName );
        console.log( 'nickName: ' + data.nickName );
    });
};

改写方案

我们可以把打印 Log 的语句封装在一个独立的函数里。


var getUserInfo = function(){
    ajax( 'http:// xxx.com/userInfo', function( data ){
        printDetails( data );
    });
};

var printDetails = function( data ){
    console.log( 'userId: ' + data.userId );
    console.log( 'userName: ' + data.userName );
    console.log( 'nickName: ' + data.nickName );
};

引用参考：JavaScript Refactoring Tips — Making Functions Clearer and Cleaner《JavaScript设计模式与开发实践》

总结

到此这篇关于如何让你的 JavaScript 函数更加优雅的文章就介绍到这了,更多相关 JavaScript 函数优雅内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JS大数值转字符串出现科学计数法怎么办

2026-11-05 17:09:21

JS split切割后出现空字符串怎么过滤

2026-11-05 16:00:30

在 React 或 Vue 项目中封装使用 JS 节流防抖

2026-11-05 15:27:29

JavaScript中怎么将带小数的字符串转为整数？

2026-11-05 14:32:38

怎么用JavaScript策略模式重构电商促销计算逻辑？

2026-11-05 14:01:09