摘要：數(shù)據(jù)格式轉(zhuǎn)換方法學(xué)習(xí)將數(shù)據(jù)轉(zhuǎn)為行列模式方便使用統(tǒng)一數(shù)據(jù)格式來循環(huán)遍歷來輸出所有屬性并且能根據(jù)需要轉(zhuǎn)換不同的值例子實(shí)現(xiàn)是用來演示的一般的實(shí)現(xiàn)方式原始數(shù)據(jù)是外面是包了一層是數(shù)組格式然后里面每一個(gè)數(shù)組元素都是一個(gè)對象代表每一個(gè)每個(gè)里面分別是屬性和

將數(shù)據(jù)轉(zhuǎn)為行列模式,方便使用統(tǒng)一數(shù)據(jù)格式來循環(huán)遍歷來輸出所有屬性,并且能根據(jù)需要轉(zhuǎn)換不同的值.

例子實(shí)現(xiàn)是用vue來演示的

原始數(shù)據(jù)是外面是items包了一層,是數(shù)組格式,然后里面每一個(gè)數(shù)組元素都是一個(gè)對象,代表每一個(gè)item,每個(gè)item里面分別是屬性和值

原始數(shù)據(jù):

"items": [
    {
    "goods_name": "哈哈哈",
    "goods_spec_name": "11111",
    "goods_price": 100,
    "goods_num": 1,
    "status": 2,
    },
    {
    "goods_name": "哈哈哈11111",
    "goods_spec_name": "11111",
    "goods_price": 100,
    "goods_num": 1,
    "status": 2,
    }    
]

一般的寫法會根據(jù)各個(gè)值進(jìn)行遍歷,這樣的話,

代碼會很長,也不整潔

不靈活,如果要處理一些值的格式化變化,就需要修改循環(huán)里面的代碼,或者數(shù)據(jù)格式萬一改變了,那么也要修改循環(huán)里面的代碼,很容易出錯(cuò)

用更好的方式實(shí)現(xiàn)去解決以上的問題

將原先的數(shù)據(jù)輸出改成行列模式,每一行包含多個(gè)列,每一行代表一個(gè)原始數(shù)據(jù)對象,每一列代表一個(gè)原始數(shù)據(jù)對象的一個(gè)屬性,節(jié)省了輸出代碼,也整潔了邏輯,每一行都代表一種類型的屬性,例如第一行都是商品名稱相關(guān)的,第二行都是商品狀態(tài)相關(guān)的

轉(zhuǎn)換是需要一個(gè)轉(zhuǎn)換函數(shù)進(jìn)行的,將原始數(shù)據(jù)和輸出數(shù)據(jù)之間搭建一個(gè)橋梁,這樣有什么修改都可以修改橋梁,避免去處理輸出數(shù)據(jù),也不用去改變原始數(shù)據(jù)(很多時(shí)候上層api數(shù)據(jù)格式是不能改變的)

轉(zhuǎn)換過程可以對值進(jìn)行一些多帶帶的轉(zhuǎn)換處理,很靈活

這是轉(zhuǎn)換函數(shù),轉(zhuǎn)換過后的值才能被行列寫法的循環(huán)遍歷使用

function change_list_data(all) {
    var ret = [];
    var data, x, y, z, row, col, def;
    var key, val, opt;
    var fmt = [ //建立一個(gè)過渡格式
        [   // 行
            // 格式說明；[key, 標(biāo)題名字, 值轉(zhuǎn)換函數(shù), 選項(xiàng)轉(zhuǎn)換函數(shù)]
            ["goods_name", "商品名", null, null],  // 列
            ["goods_spec_name", "規(guī)格", null, null],
            ["goods_price", "單價(jià)", fee2yuan, null], //這里有一個(gè)價(jià)格的轉(zhuǎn)換函數(shù),將分轉(zhuǎn)為元的單位
            ["goods_num", "數(shù)量", null, null]
        ],
        [
            ["status", "狀態(tài)", null, null]
        ]
    ];

    for (x = 0; x < all.length; ++x) {
    //遍歷原始數(shù)據(jù),并且每次循環(huán)的時(shí)候創(chuàng)建一個(gè)data變量,保存的是原始數(shù)據(jù)的當(dāng)前循環(huán)的值,即保存了一個(gè)商品對象的信息,用來獲取原始數(shù)據(jù)的數(shù)據(jù)的
        data = all[x];
        row = []; // 創(chuàng)建一個(gè)行變量
        for (y = 0; y < fmt.length; ++y) {
        //遍歷過渡格式的行
            col = []; //創(chuàng)建一個(gè)列變量
            for (z = 0; z < fmt[y].length; ++z) {
            //遍歷過渡格式的列
                def = fmt[y][z]; //獲得過渡格式的列的值,如fmt[0][0]就是["goods_name", "商品名", null, null]
                key = def[0];   // 先保存key
                if (typeof def[2] == "function") {  // 看看值是否需要做轉(zhuǎn)換處理
                    val = def[2](data[key]); //執(zhí)行特殊轉(zhuǎn)換函數(shù),并且傳入原始數(shù)據(jù)的這個(gè)key的值然后,例如轉(zhuǎn)換價(jià)格
                }
                else {
                    val = data[key];
                }
                if (typeof def[3] == "function") {  // 看看選項(xiàng)是否需要做轉(zhuǎn)換處理
                    opt = def[3](val, data[key]);//類似做法
                }
                else if (def[3] === null) {
                    opt = {}; //因?yàn)檫x項(xiàng)不能null
                }
                else {
                    opt = def[3];
                }
                //將修改后的數(shù)據(jù)push到列里
                col.push([def[1], val, opt]);
            }
            //將修改后的列數(shù)據(jù)push到行里
            row.push(col);
        }
        //將修改后的行數(shù)據(jù)push到行里
        ret.push(row);
    }
    return ret;
}

總的來說:

關(guān)鍵的關(guān)鍵是通過一個(gè)key來實(shí)現(xiàn)數(shù)據(jù)溝通,["goods_name", "商品名", null, null],這里的goods_name就是一個(gè)key,因?yàn)閷?yīng)到原始數(shù)據(jù)的goods_name,這樣轉(zhuǎn)換前后的數(shù)據(jù)之間就能夠互相處理

這是轉(zhuǎn)換后的數(shù)據(jù)是:

[
    [ //這里是一個(gè)商品對象
        [  //這里是一個(gè)商品的一行屬性,每行能夠顯示一種模式的列屬性,
            [ //這里是一個(gè)商品的列屬性,每一行有多列,這樣可以很方便的使用0,1這樣來調(diào)用數(shù)組的數(shù)據(jù),簡化了操作
                0=>"商品名", 
                1=>"哈哈哈"
            ],
            [
                0=>"規(guī)格",
                1=>"1"
            ]
        ],
        [ //這里是一個(gè)商品的一行屬性
            [
                0=>"狀態(tài)",
                1=>"1"
            ],
        ]
    ],
    [ //這里是第二個(gè)商品對象
        [ 
            [
                0=>"商品名",
                1=>"哈哈哈111"
            ],
            [
                0=>"規(guī)格",
                1=>"1111"
            ]
        ],
        [
            [
                0=>"狀態(tài)",
                1=>"2"
            ],
        ]
    ]  
]

在過渡格式里面,每一列都有4個(gè)參數(shù)

 // 格式說明；[key, 標(biāo)題名字, 值轉(zhuǎn)換函數(shù), 選項(xiàng)轉(zhuǎn)換函數(shù)]
 ["goods_name", "商品名", null, null],  // 列

在循環(huán)的時(shí)候通過判斷是否是轉(zhuǎn)換函數(shù)來進(jìn)行轉(zhuǎn)換

 if (typeof def[2] == "function") {                   
     val = def[2](data[key]); //這里拆開來看就是一個(gè)函數(shù)傳入?yún)?shù)的處理,因?yàn)閐ef[2]是一個(gè)含糊是,然后()進(jìn)行傳參
 }
 else {
     val = data[key];
 }

例如狀態(tài)值,在api數(shù)據(jù)里面是數(shù)字,但是在輸出顯示的時(shí)候就要用文字
所以傳入一個(gè)狀態(tài)轉(zhuǎn)換的函數(shù),然后方便轉(zhuǎn)換數(shù)字為文字

["status", "狀態(tài)", statusT, null]

//那么就使用這個(gè)轉(zhuǎn)換函數(shù)

//val = def[2](data[key]);
val = statusT(data[key]); //實(shí)際上會變成這樣


//例如statusT是這樣的,傳入數(shù)字,返回文字
function statusT(code) {
    var str;
    switch (code) {
        case 0:
            str = "未支付";
            break;
        case 1:
            str = "待發(fā)貨";
            break;
        case 2:
            str = "已發(fā)貨";
            break;
    }
    return str;
}