准备写一个js技巧系列，主要就是总结js各种实用的小窍门、小妙招。本文主要是研究如何让我们的函数更清晰明了。（注意以下只是提供了一些方式用于代码参考，但是并不代表一定要这样写哦）
对象参数使用解构
如果希望函数接收很多参数（如果超过两个），那么就应该使用对象。在此基础上，可以使用解构语法提取需要的参数。
普通写法
const greet = (obj) => {
return `${obj.greeting}, ${obj.firstName}${obj.lastName}`;
}
改写
const greet = ({
greeting,
firstName,
lastName
}) => {
return `${greeting}, ${firstName}${lastName}`;
}
默认值的设置
21/12/22新增
使用解构函数的时候可能会遇到这样问题：调用的时候什么都没传，调用会直接报错
function demo({x,y}){
console.log('x的值',x);
console.log('y的值',y);
}
为了解决这个问题，第一个想到的当然是设置一个默认值，像这样
但是你会发现还是报错。这是因为我们只设置了【解构的默认值】，没有使用【函数参数的默认值】
（只有当函数demo的参数是一个对象时，变量x和y才会通过解构赋值生成。如果函数demo调用时没提供参数，变量x和y就不会生成，从而报错））
所以最终版应该是这样
function demo({x=0,y=0} = {x:1,y:2}){
console.log('x的值',x);
console.log('y的值',y);
}
demo({x:3,y:4}) // 3 4
demo({}) // 0 0
demo() // 1 2
使用解构方式会更优雅,并且我们还可以少写很多重复的东西，命名也会更加清晰。
命名回调函数
好的命名会使阅读代码更容易，回调函数的命名也是一样。
普通写法
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设计模式与开发实践》
🎨【点赞】【关注】不迷路，更多前端干货等你解锁
往期推荐
