• 就是不想用if


    好久没写代码了。最近一个POC项目的需求,找到指定产品的类型,显示对应的名称。理论上一个产品只有一种类型,如果遇到数据问题,一个产品有多种类型显示任一种就好。

    最简单最直白的实现。因为if的存在,复杂度也最高。

    1 var discontinuedProduct = ['10002', '1011', '01014'];
    2 var overStockProduct = ['10003', '1010', '01013'];
    3 var eolProduct = ['10004', '1009', '01012'];
    4 
    5 if (discontinuedProduct.includes(sku)) document.getElementsByClassName('distressed-text')[0].innerText = 'Discontinued';
    6 if (discontinuedProduct.includes(sku)) document.getElementsByClassName('distressed-text')[0].innerText = 'OverStock';
    7 if (discontinuedProduct.includes(sku)) document.getElementsByClassName('distressed-text')[0].innerText = 'End of Life';

    把if语句改成或运算,看起来清爽多了。因为短路计算,只有产品没有类型的时候才会判断三次。

    1 var distressedTexts = ['', 'Discontinued', 'OverStock', 'End of Life'];
    2 var textIndex = eolProdoct.includes(sku) * 3 || overStockProduct.includes(sku) * 2 || discontinuedProduct.includes(sku) * 1 || 0
    3 
    4 document.getElementsByClassName('distressed-text')[0].innerText = distressedTexts[textIndex];

    改用数据驱动的方式,把判断转移到findIndex方法中去,代码更简单了。

    1 var distressedProducts  = [
    2   ['10002', '1011', '01014'], //discontinued product
    3   ['10003', '1010', '01013'], //overStock product
    4   ['10004', '1009', '01012'] //eol product
    5 ];
    6 var distressedTexts = ['', 'Discontinued', 'OverStock', 'End of Life'];
    7 
    8 var distressedType = distressedProducts.findIndex(item => item.includes(sku));
    9 document.getElementsByClassName('distressed-text')[0].innerText = distressedTexts[distressedType + 1];
  • 相关阅读:
    hexo部署失败如何解决
    github设置添加SSH
    鼠标相对于屏幕的位置、鼠标相对于窗口的位置和获取鼠标相对于文档的位置
    git push origin master 错误解决办法
    js设计模式:工厂模式、构造函数模式、原型模式、混合模式
    d3.js实现自定义多y轴折线图
    计算机网络之HTTP(上)基础知识点
    Node.js学习笔记(一)基础介绍
    计算机组成
    Ajax及跨域
  • 原文地址:https://www.cnblogs.com/cypine/p/8047523.html
Copyright © 2020-2023  润新知