前端数据结构处理（一）

业务相关的数据回显一直是前端经常做的事；

如果传递到后端的值跟获取到的值是一致的（或者大部分一致），那么万事大吉，省心省力；

但如果是特殊情况，比如操作画布字体有如下几种方法：

加粗、斜体、下划线、删除线、水平翻转、垂直翻转、垂直排列等等；

页面上也需要显示对应的一些按钮，如下：

这种需要选中的，大多数常用的方法是：用一个数组存起来，然后用for循环去渲染，根据数组元素对应的type去实现对应的操作，数据结构如下：

问题来了，画布object返回的格式如下：

可以看到fontWeight对应的type应该是blod,flipX对应的type是layer-horizontal；

这个时候数据回显就相对比较繁琐了，比如可以这样写：

    // 先获取需要回显的属性
     const {fontWeight, fontStyle, flipX,flipY,angle,underline,linethrough} = layerValue;  
     
     textStyleArrays.value[0].checked = fontWeight === 'blod';  // 加粗回显
     textStyleArrays.value[5].checked = !!flipX;            // 水平翻转回显
     
     .... 
     

这样写也没有任何问题，毕竟textStyleArrays数组的长度是固定且元素下标也是固定的，虽然看起来有些些不雅观，但是简单能用就行；

不过，如果数组内部一旦发生一些元素下标变化，就容易出问题，所以换一种写法：

    let changeStyleObject = {
        "bold":{
            label:'fontWeight',
            default:'normal'
        },
        "italic":{
            label:'fontStyle',
            default:'normal'
        },
        "layer-horizontal":{
            label:'flipX',
            default:false
        },
        "layer-vertical":{
            label:'flipY',
            default:false
        },
        "vertical":{
            label:'angle',
            default:0
        },
        "underline":{
            label:'underline',
            default:false
        },
        "delete":{
            label:'linethrough',
            default:false
        }
    }

    textStyleArrays.value.forEach(item=>{
        let layerKey = changeStyleObject[item.type].label
        item.checked =  layerValue[layerKey] !== changeStyleObject[item.type].default
    })

复杂度确实相较于上面的textStyleArrays.value[0].checked更复杂了一点，但是代码可读性、灵活性会更高，也适用于数组变化的情况；

就这样咯~