函数参数解构 · Javascript基础篇

[TOC] >[success] # 函数参数解构写之前先把参考链接附上[每日 30 秒 ⏱ 函数参数骚操作](https://juejin.im/post/5c9a9170e51d456b6147ebb2) >[success] ## 正常函数参数写法正常的传参形式使用时候需要按照顺序来传参 ~~~ function area (width, height) { return width * height; } ~~~ 一般情况一两个参数还好记住是干嘛的，如果想下面这样怎么办？ ~~~ function infomation ( name, sex, height, birthday, color, likes, follow, age ) { // ... } ~~~ >[success] ## 传递对象而不是参数列表多个参数记不住怎么办，这时候传递对象就可以了，对象的优势是，不用按照参数的顺序来传参，相对于参数列表传递对象属性更好记也没有强制的顺序，如果命名足够清晰在后期维护代码的时候甚至只要看`属性名`就可以马上理解过来。如果其他同学开发新的功能也不会怕他顺序乱调了，但是最好要对新加的参数做出兼容，不然还是会让依赖的其他函数一路飘红。 ~~~ function infomation (user) { // user.name } infomation({ name: 'xiaoer', age: 18 }) ~~~ >[success] ## 使用解构赋值参数列表被对象替换解决了参数列表顺序的问题，可是每次调用的时候都需要从`对象中取值`使得函数每次都要访问对象，带来了变量长度变长和很多无意义的`赋值`。再者如果调用者不小心`多传递了参数`，再不巧函数中遍历了对象这可能会产生BUG，可以利用解构赋值来解决： ~~~ function infomation ({ name, age, height }) { console.log(name) // 药水哥 console.log(age) // 18 console.log(height) // 173cm } infomation ({name: ' 药水哥 '，age: ' 18 ', height: ' 173cm '}) ~~~ >[success] ## 使用默认值产品上线后总会出现各种奇奇怪怪的错误，用户总是不按照预期进行操作产品，不断的 BUG 传来实在让人难受。其实在调用函数时我们也是一个用户，有的参数不能为空但是我们却给出了空值，导致函数不能按预期执行。在书写函数时应该做好别人调用函数时不按套路出牌的情况，例如给出默认值和对数据进行转化： ~~~ function infomation ({ name = 'anonymous', age = 0, height = 160 }) { console.log(name) // 药水哥 console.log(age) // 0 console.log(height) // 160 } infomation ({ name: ' 药水哥 '}) function move({x = 0, y = 0} = {}) { return [x, y]; } move({x: 3, y: 8}); // [3, 8] move({x: 3}); // [3, 0] move({}); // [0, 0] move(); // [0, 0] ~~~ >[success] ## 参数变为可选参数 ( 传不传都行，不传就给默认值 ) 上面例子中的函数在 infomation({ age: 16 }) 这样调用的情况下，可以按照预期的默认值执行。但是想让这个对象也可选的时候 infomation() 将会报错，因为没有对象让其解构，可以利用 {} 来使得对象也可选： ~~~ function infomation ({ name = 'anonymous', age = 0, height = 160 } = {}) { console.log(name) // anonymous console.log(age) // 0 console.log(height) // 160 } infomation () ~~~ >[success] ## 参数重命名有时候需要对参数进行重命名，但是已经很多地方都使用了这个参数时。可以在函数执行最开始的时候进行重命名，但是这样显然不够 geek（主要是不够偷懒）依旧利用`解构赋值`来实现重命名： ~~~ function infomation ({ name:username = 'anonymous', age = 0, height = 160 } = {}) { console.log(name) // undefined console.log(age) // 0 console.log(height) // 160 console.log(username) // anonymous } infomation() ~~~ 注意一下：如果参数使用了重命名原来的名字就会不生效，打印结果为 undefined >[success] ## 强制传递参数除了使用参数默认值，也可以对函数参数进行强制传递参数： ~~~ // 帮助函数 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 ); ~~~