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

更新时间：2021年07月01日 10:05:02 作者：Axjy

在Js世界中有些操作会让你无法理解，但是却无比优雅,下面这篇文章主要给大家介绍了关于如何让你的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函数优雅内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vuex模块化应用实践示例
这篇文章主要介绍了Vuex模块化应用实践示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
有关JS中的0,null,undefined,[],{},'''''''''''''''',false之间的关系
这篇文章主要介绍了有关JS中的0,null,undefined,[],{},'',false之间的关系,需要的朋友可以参考下
2017-02-02
JS在Canvas元素内绘制钟表
这篇文章介绍了JS在Canvas元素内绘制钟表的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-01-01
使用原生javascript开发计算器实例代码
这篇文章主要给大家介绍了关于如何使用原生javascript开发计算器的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-02-02
微信小程序利用for循环解决内容变更问题
这篇文章主要介绍了微信小程序利用for循环解决内容变更问题，本文分步骤通过实例代码详解给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-03-03
JS利用prototype给类添加方法操作详解
这篇文章主要介绍了JS利用prototype给类添加方法操作,结合实例形式分析了javascript使用prototype实现给类添加方法的相关操作技巧,需要的朋友可以参考下
2019-06-06
在JS中解析HTML字符串示例代码
这篇文章主要介绍了在JS中如何解析HTML字符串,需要的朋友可以参考下
2014-04-04
javascript笛卡尔积算法实现方法
这篇文章主要介绍了javascript笛卡尔积算法实现方法,实例分析了笛卡尔积算法的javascript实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-04-04
javascript实现随机抽奖功能
这篇文章主要为大家详细介绍了javascript实现随机抽奖功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
JavaScript实现同时调用多个函数的方法
这篇文章主要介绍了JavaScript实现同时调用多个函数的方法,以一个简单实例分析了JavaScript同时调用两个函数的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11