摘要：數據格式轉換方法學習將數據轉為行列模式方便使用統一數據格式來循環遍歷來輸出所有屬性并且能根據需要轉換不同的值例子實現是用來演示的一般的實現方式原始數據是外面是包了一層是數組格式然后里面每一個數組元素都是一個對象代表每一個每個里面分別是屬性和

將數據轉為行列模式,方便使用統一數據格式來循環遍歷來輸出所有屬性,并且能根據需要轉換不同的值.

例子實現是用vue來演示的

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

原始數據:

"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,
    }    
]

一般的寫法會根據各個值進行遍歷,這樣的話,

代碼會很長,也不整潔

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

用更好的方式實現去解決以上的問題

將原先的數據輸出改成行列模式,每一行包含多個列,每一行代表一個原始數據對象,每一列代表一個原始數據對象的一個屬性,節省了輸出代碼,也整潔了邏輯,每一行都代表一種類型的屬性,例如第一行都是商品名稱相關的,第二行都是商品狀態相關的

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

轉換過程可以對值進行一些多帶帶的轉換處理,很靈活

這是轉換函數,轉換過后的值才能被行列寫法的循環遍歷使用

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

    for (x = 0; x < all.length; ++x) {
    //遍歷原始數據,并且每次循環的時候創建一個data變量,保存的是原始數據的當前循環的值,即保存了一個商品對象的信息,用來獲取原始數據的數據的
        data = all[x];
        row = []; // 創建一個行變量
        for (y = 0; y < fmt.length; ++y) {
        //遍歷過渡格式的行
            col = []; //創建一個列變量
            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") {  // 看看值是否需要做轉換處理
                    val = def[2](data[key]); //執行特殊轉換函數,并且傳入原始數據的這個key的值然后,例如轉換價格
                }
                else {
                    val = data[key];
                }
                if (typeof def[3] == "function") {  // 看看選項是否需要做轉換處理
                    opt = def[3](val, data[key]);//類似做法
                }
                else if (def[3] === null) {
                    opt = {}; //因為選項不能null
                }
                else {
                    opt = def[3];
                }
                //將修改后的數據push到列里
                col.push([def[1], val, opt]);
            }
            //將修改后的列數據push到行里
            row.push(col);
        }
        //將修改后的行數據push到行里
        ret.push(row);
    }
    return ret;
}

總的來說:

關鍵的關鍵是通過一個key來實現數據溝通,["goods_name", "商品名", null, null],這里的goods_name就是一個key,因為對應到原始數據的goods_name,這樣轉換前后的數據之間就能夠互相處理

這是轉換后的數據是:

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

在過渡格式里面,每一列都有4個參數

 // 格式說明；[key, 標題名字, 值轉換函數, 選項轉換函數]
 ["goods_name", "商品名", null, null],  // 列

在循環的時候通過判斷是否是轉換函數來進行轉換

 if (typeof def[2] == "function") {                   
     val = def[2](data[key]); //這里拆開來看就是一個函數傳入參數的處理,因為def[2]是一個含糊是,然后()進行傳參
 }
 else {
     val = data[key];
 }

例如狀態值,在api數據里面是數字,但是在輸出顯示的時候就要用文字
所以傳入一個狀態轉換的函數,然后方便轉換數字為文字

["status", "狀態", statusT, null]

//那么就使用這個轉換函數

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


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