旁观者清，当局者迷，摘录部分同事的JS代码，并以旁观者的角度重写之！

xishiinsz

于 2019-12-04 19:45:41 发布

阅读量160

点赞数

分类专栏： Javascript 文章标签：代码优化

本文链接：https://blog.csdn.net/xishuiinsz/article/details/103393020

版权

Javascript 专栏收录该内容

26 篇文章

订阅专栏

本文通过具体案例，分析了代码中常见的Bug来源，包括条件判断不当和数据依赖变更导致的问题。通过对两段不同风格的代码进行对比，展示了如何从上帝视角审视代码，提前预防潜在的Bug。同时，文章还提供了一段修改后的代码示例，帮助读者理解正确的代码实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

别人的代码

list.forEach(v => {//判断跨分页是否选中
			//this.state.selectedMap是1个Map对象，它的has方法返回值为boolean
            if(this.state.selectedMap.has(v.headPoolId)){
                v._checked = true
            }else{
                v._checked = false
            }
        });

旁观者视角的代码

list.forEach( v=> v._checked = this.state.selectedMap.has(v.headPoolId) )

一段预留Bug代码

{
            title: "XXXXX附件",
            dataIndex: "file",
            key: "file",
            render: (text, record) => {
                let result = record ? record.result : ''
                return (
                    <span>
                        {result === 'T' && <a href="javascript:void(0);" onClick={handleCheck}>查看</a>}
                    </span>
                )
            }
        },

以上帝的视角来审视这段代码

其实这段代码一开始就为Bug埋下了伏笔
这样代码的用意是，当result==="T"时，会在第一行的最后1个单元格里渲染一个名叫【查看】的超链接，反之则什么也不用渲染。
某日，后台依业务需要进行了变更，result已经不再等于T了，结果Bug如期而至

##修改过的代码

{
            title: "XXXXX附件",
            dataIndex: "file",
            key: "file",
            render: (text, record, index) => index === 0 &&  <a href="javascript:void(0);" onClick={handleCheck}>查看</a>
        },