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

目录
  • 对象参数使用解构
  • 命名回调函数
  • 让条件句具有描述性
  • 用 Map 或 Object替换 switch 语句
  • 使用 Object.assign 设置默认属性
  • 删除重复代码,合并相似函数;删除弃用代码
  • 提炼函数
  • 总结

准备写一个js技巧系列,主要就是总结js各种实用的小窍门、小妙招。本文主要是研究如何让我们的函数更清晰明了。

对象参数使用解构

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

普通写法

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函数优雅内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • javascript中声明函数的方法及调用函数的返回值

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <!--js中声明函数的方法--> <script type="text/javascript"> //因为javascript是弱类型的语言,所以参数不需要加类型.函数的也不需要像c#那样要求所以路径都需要有返回值(这个不像c#语言,而且c#的方法也不需要在方法

  • js的回调函数详解

    现在做native App  和Web App是主流,也就是说现在各种基于浏览器的web app框架也会越来越火爆了,做js的也越来越有前途.我也决定从后端开发渐渐向前端开发和手机端开发靠拢,废话不说了,我们来切入正题"js的回调函数"相关的东西. 说起回调函数,好多人虽然知道意思,但是还是一知半解.至于怎么用,还是有点糊涂.网上的一些相关的也没有详细的说一下是怎么回事,说的比较片面.下面我只是说说个人的一点理解,大牛勿喷.我们来看一下一个粗略的一个定义"函数a有一个参数,这

  • js中回调函数的学习笔记

    回调函数是什么在学习之前还真不知道js回调函数怎么使用及作用了,下面本文章把我在学习回调函数例子给各位同学介绍一下吧,有需了解的同学不防进入参考. 回调函数原理: 我现在出发,到了通知你" 这是一个异步的流程,"我出发"这个过程中(函数执行),"你"可以去做任何事,"到了"(函数执行完毕)"通知你"(回调)进行之后的流程 例子 1.基本方法 <script language="javascript&q

  • JavaScript构造函数详解

    构造函数就是初始化一个实例对象,对象的prototype属性是继承一个实例对象. 构造函数注意事项: 1.默认函数首字母大写 2.构造函数并没有显示返回任何东西.new 操作符会自动创建给定的类型并返回他们,当调用构造函数时,new会自动创建this对象,且类型就是构造函数类型. 3.也可以在构造函数中显示调用return.如果返回的值是一个对象,它会代替新创建的对象实例返回.如果返回的值是一个原始类型,它会被忽略,新创建的实例会被返回. function Person( name){ this

  • js中递归函数的使用介绍

    下面我们就做一个10以内的阶乘试试看吧: js中递归函数的使用 function f(num){ if(num alert("10!的结果为:"+f(10)); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 递归函数的调用就说这么多了 js递归函数调用自身时的保险方式. 来自js高级程序设计 一个典型阶乘递归函数: 复制代码 代码如下: function fact(num){ if (num<=1){ return 1; }else{ return num*fact

  • Js数组排序函数sort()介绍

    JavaScript实现多维数组.对象数组排序,其实用的就是原生的sort()方法,用于对数组的元素进行排序. sort() 方法用于对数组的元素进行排序.语法如下: arrayObject.sort(sortby) 返回值为对数组的引用.请注意,数组在原数组上进行排序,不生成副本. 如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序.要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较. 如果想按照其他标准进行排序,

  • js 字符串操作函数

    concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串. indexOf() – 返回字符串中一个子串第一处出现的索引.如果没有匹配项,返回 -1 . charAt() – 返回指定位置的字符. lastIndexOf() – 返回字符串中一个子串最后一处出现的索引,如果没有匹配项,返回 -1 . match() – 检查一个字符串是否匹配一个正则表达式. substring() – 返回字符串的一个子串.传入参数是起始位置和结束位置. replace() – 用来查找匹配一个

  • js中匿名函数的N种写法

    匿名函数没有实际名字,也没有指针,怎么执行滴? 其实大家可以看看小括号的意义就应该可以理解.小括号有返回值,也就是小括号内的函数或者表达式的返回值,所以说小括号内的function返回值等于小括号的返回值,不难理解 (function(){})()可以将没有名字的函数执行了把- 关于匿名函数写法,很发散~ 最常见的用法: 复制代码 代码如下: (function() { alert('water'); })(); 当然也可以带参数: 复制代码 代码如下: (function(o) { alert

  • js split函数用法总结(从入门到精通)

    split定义和用法 split() 方法用于把一个字符串分割成字符串数组. 语法 stringObject.split(separator,howmany) 参数 描述 separator 必需.字符串或正则表达式,从该参数指定的地方分割 stringObject. howmany 可选.该参数可指定返回的数组的最大长度.如果设置了该参数,返回的子串不会多于这个参数指定的数组.如果没有设置该参数,整个字符串都会被分割,不考虑它的长度. 返回值 一个字符串数组.该数组是通过在 separator

  • 网页中JS函数自动执行常用三种方法

    本文为大家分享了在网页中JS函数自动执行常用方法,供大家参考,具体内容如下 一.JS方法 1.最简单的调用方式,直接写到html的body标签里面: <body onload="myfunction()"> <html> <body onload="func1();func2();func3();"> </body> </html> 2.在JS语句调用: <script type="text

随机推荐