JS优秀编码欣赏--复杂判断的更优雅写法

先上一下原文链接 https://juejin.im/post/5bdfef86e51d453bf8051bf8

一般写法

const onButtonClick = (status,identity)=>{
  if(identity == 'guest'){
    if(status == 1){
      //do sth
    }else if(status == 2){
      //do sth
    }else if(status == 3){
      //do sth
    }else if(status == 4){
      //do sth
    }else if(status == 5){
      //do sth
    }else {
      //do sth
    }
  }else if(identity == 'master') {
    if(status == 1){
      //do sth
    }else if(status == 2){
      //do sth
    }else if(status == 3){
      //do sth
    }else if(status == 4){
      //do sth
    }else if(status == 5){
      //do sth
    }else {
      //do sth
    }
  }
}

优雅写法

const actions = ()=>{
  const functionA = ()=>{/*do sth*/}
  const functionB = ()=>{/*do sth*/}
  return new Map([
    [{identity:'guest',status:1},functionA],
    [{identity:'guest',status:2},functionA],
    [{identity:'guest',status:3},functionA],
    [{identity:'guest',status:4},functionA],
    [{identity:'guest',status:5},functionB],
    //...
  ])
}

const onButtonClick = (identity,status)=>{
  let action = [...actions()].filter(([key,value])=>(key.identity == identity && key.status == status))
  action.forEach(([key,value])=>value.call(this))
}

知识点一点一点梳理

map:映射

  • 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。(map() 不会改变原始数组。)
  • 方法按照原始数组元素顺序依次处理元素。
  • Map 的key可以是任何类型的数据,对象也不例外。
  • Map.set 添加值
  • Map.delete 删除值
  • Map.has 判断是否有对应的key

对比一下forEach,forEach处理的是当前数组

对比一下普通数组,数组内添加的用push/unshift,没有has方法,但是可以用array.find查找。没有key这个概念。

对比一下字面两对象{},字面两对象的key不能是对象,但是map可以。

...Map

... 是es7的扩展运算符,查了查功能还挺多的,先用到哪部份说哪部份

对于map,...将map变成了s数组,第一个参数是key,第二个参数是val,更像是一个返回上一级的功能,把map最外层的[]去掉了。

array.filter:方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

filter 为数组中的每个元素调用一次 callback 函数,并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。callback 只会在已经赋值的索引上被调用,对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过,不会被包含在新数组中。

疑问:

这个问题我已经给作者提交留言了,我觉得,有一个无伤大雅的问题,这里的Map,在真正使用的时候,Map又转成了array,好像没啥用。

思路思路

作者的拆解整理功能做的非常棒,方法独立出来,角色和状态等筛选条件作为筛选key。这样扩展起来会非常方便

通过filter,将匹配等对应等方法提取出来,然后统一执行。

不用把判断这件事用手一步一步等打出来,通过统一判断调用,让代码看起来非常优雅而且高端

随机浏览