数组对象数据处理

前端在开发中经常会处理数据,如果是简单的取某个key值的,通常filter、forEach、map、some、every等常用的ES6语法就够了.但是遇到对数组对象进行分类就稍微复杂点了.

请看下面例子.如果只是根据数组的单个key去分组，就很容易，但是根据 ean和sku甚至更多key值相同的分组，就需要巧妙地应用了。

  // 把下列数组按ean进行分组
    const arr = [
            { id: 1, name: "手机1" ,ean: "6901443393268", sku: "51095BKR" },
            { id: 2, name: "手机2", ean: "6901443393262", sku:"51095BBQ" },
            {id: 3, name: "手机3" ,ean: "6901443393262", sku: "51095BKR" },
            { id: 4, name: "手机2", ean: "6901443393262", sku: "51095BKR" },
            {id: 5, name: "手机5", ean: "6901443393268", sku: "51095BBQ" },
            {id: 6, name: "手机3", ean: "6901443393262", sku:"51095BKR" },
            {id: 7, name: "手机7", ean: "6901443393262", sku: "51095BKR" },
            { id: 8, name: "手机5" ,ean: "6901443393268", sku: "51095BBQ" }
        ]

只是根据ean相同分组的话，so easy。代码如下

   function handlerArr(arr, key) {
        const obj = {};
        arr.forEach((item) => {
            const value = item[key];
            obj[value] ? obj[value].push(item) : (obj[value] = [item]);
        });
        return Object.keys(obj).map((item) => obj[item]);
    }

    handlerArr(arr, "ean");

利用每一项的获取的值设置为key，去添加到obj对象里面去，如果有直接push，如果没有直接设置这个key为空数组，同时将这个数组分类。

最终obj对象内的分组如下

然后使用 Object.keys(obj).map((item) => obj[item]) ，关键在于obj[item]取出每一项放入返回的新数组内。

上面只是单个key的，如果根据多个key去分组，如sku和ean进行分组代码可以如下。

     function handlerArr(arr, key) {
        const obj = {};
        arr.forEach((item) => {
            let value = Array.isArray(key) ? key.map((el) => item[el]).join() : item[key];
            obj[value] ? obj[value].push(item) : (obj[value] = [item]);
        });
        return Object.keys(obj).map((item) => obj[item]);
    }
    handlerArr(arr, ["ean", "sku"]);

注意上面是可以传单个key值也可以传多个key值，如果是多个的话，需要以数组的方式传参。下列结果是根据ean和sku相同的进行分组。

注意，后面发现有些大佬的写法如下，单个属性也能达到效果，多个属性的传参也需要做拼接。

    function groupBy(array, f) {
        const groups = {};
        array.forEach(function (o) {
            const group = JSON.stringify(f(o));
            groups[group] = groups[group] || [];
            groups[group].push(o);
        });
        return Object.keys(groups).map(function (group) {
            return groups[group];
        });
    }
    const arrList = groupBy(arr, function (item) {
        return [item.ean];
    });

如果是根据多个属性key值相同分组写法如下，调用时函数传参为 [item.ean+item.sku]，如果还有更多得比较key，就需要继续用+号做拼接了。

   function groupBy(array, f) {
        const groups = {};
        array.forEach(function (o) {
            const group = JSON.stringify(f(o));
            groups[group] = groups[group] || [];
            groups[group].push(o);
        });
        return Object.keys(groups).map(function (group) {
            return groups[group];
        });
    }
    const arrList = groupBy(arr, function (item) {
        return [item.ean + item.sku];
    });