美文网首页让前端飞
js利用数组巧妙的处理数据

js利用数组巧妙的处理数据

作者: linchwei | 来源:发表于2017-04-11 15:13 被阅读0次

    描述:存在这样的json数组数据,根据不同id(id也在json里面)获取相应的数据(数据必须存在才获取),具体看实例

    var data = [
        {
            "id": 363,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491815740687.jpg"
        },
        {
            "id": 363,
            "content": ""
        },
        {
            "id": 363,
            "content": ""
        },
        {
            "id": 363,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811216888.jpg"
        },
        {
            "id": 363,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811218552.JPG"
        },
        {
            "id": 364,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811159927.png"
        },
        {
            "id": 364,
            "content": ""
        },
        {
            "id": 364,
            "content": ""
        },
        {
            "id": 364,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811167815.jpg"
        },
        {
            "id": 364,
            "content": ""
        },
        {
            "id": 365,
            "content": ""
        },
        {
            "id": 365,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811175762.png"
        },
        {
            "id": 365,
            "content": ""
        },
        {
            "id": 365,
            "content": ""
        },
        {
            "id": 365,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811179370.jpg"
        },
        {
            "id": 366,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811185387.jpg"
        },
        {
            "id": 366,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811187146.jpg"
        },
        {
            "id": 366,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811188690.JPG"
        },
        {
            "id": 366,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811197842.JPG"
        },
        {
            "id": 366,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811199545.png"
        },
        {
            "id": 367,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811207099.png"
        },
        {
            "id": 367,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811208608.jpg"
        },
        {
            "id": 367,
            "content": ""
        },
        {
            "id": 367,
            "content": ""
        },
        {
            "id": 367,
            "content": ""
        },
        {
            "id": 368,
            "content": ""
        },
        {
            "id": 368,
            "content": ""
        },
        {
            "id": 368,
            "content": ""
        },
        {
            "id": 368,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811216888.jpg"
        },
        {
            "id": 368,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811218552.JPG"
        },
        {
            "id": 369,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811231985.png"
        },
        {
            "id": 369,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811230524.jpg"
        },
        {
            "id": 369,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811228955.jpg"
        },
        {
            "id": 369,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811227399.jpg"
        },
        {
              "id": 369,
              "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811225656.JPG"
        },
        {
            "id": 370,
            "content": ""
        },
        {
            "id": 370,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811238378.jpg"
        },
        {
            "id": 370,
            "content": "/upload/front/order/itemList/zanCut/2017/04/10/1491811240198.png"
        },
        {
            "id": 370,
            "content": ""
        },
        {
            "id": 370,
            "content": ""
        }
    ];
    
    // 数组去重
    Array.prototype.unique = function () {
        var obj = [],
            arr = [],
            val = '',
            type = '';
    
        for (var i = 0, len = this.length; i < len; i++) {
            val = this[i];
            type = typeof val;
    
            // 若不存在obj[val],则val一定会被push进arr
            if (!obj[val]) {
                // 将val的数据类型存放到obj[val],处理极端情况会用到
                obj[val] = [type];
                arr.push(val);
            } else if (obj[val].indexOf(type) < 0) {
                // 若obj[val]已存在(键值会执行toString()转换,可能会得到相同的obj[val],但obj[val]里的type一定是唯一的)
                obj[val].push(type);
                arr.push(val);
            }
        }
    
        return arr;
    }
    
    var idArr      = [],
        idTemp1    = [],
        idTemp2    = [],
        contentArr = [],
        valueObj   = {};
    
    for (var i = 0, len = data.length; i < len; i++) {
        if (data[i].content) {
            // 当且仅当data[i].content有值,才将id push进数组idArr
            // 以及将id、conetnt push进contentArr
            idArr.push(data[i].id);
            contentArr.push([data[i].id, data[i].content]);
        } else {
            // 若content为空,则push false 到idArr
            idArr.push(false);
        }
    }
    
    // 将数组里面的fasle值过滤掉
    idTemp1 = idArr.filter(function (val) {
        if (val !== false) return val;
    });
    
    // 去掉重复的id(数组去重)
    idTemp2 = idTemp1.unique();
    
    if (idTemp2.length > 0) {
        idTemp2.forEach(function (val) {
            valueObj[val] = [];
    
            contentArr.forEach(function (value) {
                if (val === value[0]) {
                    valueObj[value[0]].push(value[1]);
                }
            });
        });
    }
    console.log(valueObj);
    

    相关文章

      网友评论

        本文标题:js利用数组巧妙的处理数据

        本文链接:https://www.haomeiwen.com/subject/wxoyattx.html