每日 30 秒 ⏱ 函数参数骚操做

前言

函数、参数、解构、优雅、可读性、技巧javascript

无论是调用第三方库或者是项目自身的函数,开发过程当中总少不了函数。能够说函数是解放代码的第一辈子产力,有的同窗会说了那你把类放在那里了。其实用函数和数据同样能够模拟出来类,类更多的是对函数的归集复用进行扩充升级。java

在调用函数时不得不提的就是 参数 了,不少小伙伴写函数很容易就写成了:git

function area (width, height) {  
    return width * height;
}
复制代码

两个参数还好脑子记得住,可是下面这种状况乍办:程序员

function infomation ( name, sex, height, birthday, color, likes, follow, age ) {
    // ...
}
复制代码

这么多参数每次开发调用时有使用 ide 会自动提示还好,若是没有则有可能须要翻文档或者跳转到定义处查看,除了比较麻烦点外还行。github

程序员何须为难程序员。编程

不知道你们有没有和别人对接过开发,有的同窗开发有时候不会考虑别人是否对他的代码有依赖,直接脑壳一拍就给你的参数顺序对调了,结果代码提交后全军崩溃各类报错飘红安全

传递对象而不是参数列表

能够利用 JavaScript 的对象来传递参数:微信

function infomation (user) {
    // user.name
}

infomation({ name: 'xiaoer', age: 18 })
复制代码

相对于参数列表传递对象属性更好记也没有强制的顺序,若是命名足够清晰在后期维护代码的时候甚至只要看属性名就能够立刻理解过来。若是其余同窗开发新的功能也不会怕他顺序乱调了,可是最好要对新加的参数作出兼容,否则仍是会让依赖的其余函数一路飘红。ide

使用解构赋值

参数列表被对象替换解决了参数列表顺序的问题,但是每次调用的时候都须要从对象中取值使得函数每次都要访问对象,带来了变量长度变长和不少无心义的赋值。再者若是调用者不当心多传递了参数,再不巧函数中遍历了对象这可能会产生BUG,能够利用解构赋值来解决:函数

function infomation ({ name, age, height }) {

}
复制代码

这样既对传递的参数作出了防护又能够方便的使用参数。

使用默认值

你永远不知道用户会怎么使用产品。

产品上线后总会出现各类奇奇怪怪的错误,用户老是不按照预期进行操做产品,不断的 BUG 传来实在让人难受。

其实在调用函数时咱们也是一个用户,有的参数不能为空可是咱们却给出了空值,致使函数不能按预期执行。在书写函数时应该作好别人调用函数时不按套路出牌的状况,例如给出默认值和对数据进行转化:

function infomation ({ name = 'anonymous', age = 0, height = 160 }) {
    // ...
}
复制代码

固然你也可使用 TypeScript 等工具来提高编程的安全性,但 巧妇难为无米之炊 在有的时候不是你想用就能用的,须要整个公司一块儿进行技术的升级。

参数变为可选参数

上面例子中的函数在 infomation({ age: 16 }) 这样调用的状况下,能够按照预期的默认值执行。可是想让这个对象也可选的时候 infomation() 将会报错,由于没有对象让其解构,能够利用 {} 来使得对象也可选:

function infomation ({ name = 'anonymous', age = 0, height = 160 } = {}) {
    // ...
}
复制代码

重命名

有时候须要对参数进行重命名,可是已经不少地方都使用了这个参数时。能够在函数执行最开始的时候进行重命名,可是这样显然不够 geek(主要是不够偷懒)依旧利用 解构赋值 来实现重命名:

function infomation ({ name:username = 'anonymous', age = 0, height = 160 } = {}) {
    // ...
}
复制代码

固然 解构赋值 也能够在日常开发中使用,方便咱们写出 规范奇淫技巧,带来偷懒摸鱼同时也带来优雅。

强制传递参数

除了使用参数默认值,也能够对函数参数进行强制传递参数:

脚本
// 帮助函数
const err = ( message ) => {
    throw new Error( message );
}

// 函数
const sum = function ( num = err('first param is not defined'), otherNum = err('second param is not defined') ) {
    return num + otherNum;
}
复制代码
调用测试
// 测试函数
// 输出: 3
console.log(sum(1, 2));

// 测试第一个参数不传递
// Uncaught Error: first param is not defined
sum( undefined, 10 );

// 测试第二个参数不传递
// Uncaught Error: second param is not defined
sum( 10 );
复制代码

一块儿成长

在困惑的城市里总少不了并肩同行的 伙伴 让咱们一块儿成长。

  • 若是您想让更多人看到文章能够点个 点赞
  • 若是您想激励小二能够到 Github 给个 小星星
  • 若是您想与小二更多交流添加微信 m353839115

微信公众号

本文原稿来自 PushMeTop

相关文章
相关标签/搜索