如何让你的JavaScript函数更加优雅详解

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

对象参数使用解构

如果希望函数接收很多参数（如果超过两个），那么就应该使用对象。在此基础上，可以使用解构语法提取需要的参数。

普通写法


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设计模式与开发实践》