两个数组数据的高效合并方案

·  阅读 5417
两个数组数据的高效合并方案

这是我参与更文挑战的第8天,活动详情查看: 更文挑战

前言

作为一个前端,服务器返回的数据易用,能极大的提升开发效率。
能一个接口提供的数据,就不要用去调用两次或者更多网络请求,然后进行数据合并。

然而,理想和现实两者,现实总是找我,感觉不到理想对的温暖。

残酷的经历

说起来,你可能不信,但是请您相信我,因为我很善良。

我们某个业务,有一个列表数据,需要调用三个接口合并数据,具体如下:

  1. 单次返回10条基础信息
  2. 再分10次去请求详情信息
  3. 从第2步的结果中用某个ID值,再发10次请求,请求用户信息

打断你的施法,别问我为什么,之前就是这么实现的。

我们来做一个简单的算术: 1 + 10 + 10 = 21
我的天,原天堂没有数据合并。

后来在我再三的要求下,终于变成了调用两个接口:

  1. 单次返回10条基础信息
  2. 用第1步的数据集合中的ID值,再批量查询

我们来做一个更简单的算术: 1 + 1 = 2

虽然比一次返回全部数据仅仅多了一次,但是抛出了一个不可回避的问题,数组的数据合并。

今天,就让我们来一起探索数组数据合并。

demo数据

假设有两组数据, 一组是用户基础数据, 一组是分值数据,通过uid关联。

export const usersInfo = Array.from({ length: 10 }, (val, index) => {
    return {
        uid: `${index + 1}`,
        name: `user-name-${index}`,
        age: index + 10,
        avatar: `http://www.avatar.com/${index + 1}`
    }
});

export const scoresInfo = Array.from({ length: 8 }, (val, index) => {
    return {
        uid: `${index + 1}`,
        score: ~~(Math.random() * 10000),
        comments: ~~(Math.random() * 10000),
        stars: ~~(Math.random() * 1000)
    }
});

复制代码

基础版本

两层循环,通过某个key进行比较,然后赋值。
我想说,简单好用,XDM,你们不骂我才怪。 搞不好还建议掘金搞一个踩的功能。

import * as datas from "./data";

const { usersInfo, scoresInfo } = datas;

console.time("merge data")
for (let i = 0; i < usersInfo.length; i++) {
    var user = usersInfo[i] as any;
    for (let j = 0; j < scoresInfo.length; j++) {
        var score = scoresInfo[j];
        if (user.uid == score.uid) {
            user.score = score.score;
            user.comments = score.comments;
            user.stars = score.stars;
        }
    }
}
console.timeEnd("merge data")
console.log(usersInfo);
复制代码

基础-hash版本

这里的基本思路先把数组转换成对象。 当然也可以是转为Map对象。
用hash查找替换数组查找。

核心点:

  1. 找到能标记对象唯一的属性键,本文为 uid
  2. 遍历数组, 以单条数据属性uid的值作为属性键,单条数据作为值

对象属性的查找相比数组的查询要快得多,这里就能得到不少的性能提升。

你可能要问题,为啥要快得多,因为这里的数组查找不能按照下标查找的,而是链表形式来查找的。

import * as datas from "./data";

const { usersInfo, scoresInfo } = datas;

console.time("merge data")

const scoreMap = scoresInfo.reduce((obj, cur) => {
    obj[cur.uid] = cur;
    return obj;
}, Object.create(null));

for (let i = 0; i < usersInfo.length; i++) {
    const user = usersInfo[i] as any;
    const score = scoreMap[user.uid];

    if(score != null){
        user.score = score.score;
        user.comments = score.comments;
        user.stars = score.stars;
    }
}
console.timeEnd("merge data")

console.log(usersInfo);
复制代码

到这里,你也许会伸个懒腰,喝口水。
一不小心喝多了,你喝多了。

这种实现就存在多遍历的情况,所以我们在达到目标后,跳出。

基础-hash-跳出版

这个版本和上个版本的最大区别,就是增加了计数功能,记录已经合并的次数,达到预期后,跳出。
你也许会笑,这记个数有啥意思。

我们用数据说话:

假如我们的列表里面有100条数据,需要合并的数据只有10条。 假设列表中第40-49条是要合并的数据。

我们来算个数:100-50 = 50

此场景会多遍历50次。随着各种场景的不同,多遍历的次数也不一样。

import * as datas from "./data";

const { usersInfo, scoresInfo } = datas;

console.time("merge data")

const scoreMap = scoresInfo.reduce((obj, cur) => {
    obj[cur.uid] = cur;
    return obj;
}, Object.create(null));


const len = scoresInfo.length;
let count = 0;
let  walkCount = 0;
for (let i = 0; i < usersInfo.length; i++) {
    const user = usersInfo[i] as any;
    const score = scoreMap[user.uid];

    walkCount++;
    if(score != null){
        count++
        user.score = score.score;
        user.comments = score.comments;
        user.stars = score.stars;       

        if(count>=len){
            break;
        }
    }
}
console.log(`合并完毕:遍历次数${walkCount}, 实际命中次数${count}, 预期命中次数${len}`)

console.timeEnd("merge data");

console.log(usersInfo);
复制代码

到这里,你微微一笑很迷人,打开掘金,发现自己上了首页的文章,居然从首页跑到第二页去了。

划重点 第二页, 是的我们的数据一般是分页加载的。

我们理论上是拉取一页,合并一次数据。也就是说,大多数情况,后面拉取的数据都是追加原列表后面。

新数据都是追加到原列表后,那是不是倒序遍历就会更快呢? 答案,肯定是。
当然你要是后拉取的数据,往前放,顺序遍历更快。

基础-hash-跳出-倒序版

倒序遍历和顺序遍历的区别就是一个从前到后,一个从后往前。 代码如下

import * as datas from "./data";

const { usersInfo, scoresInfo } = datas;

console.time("merge data")

const scoreMap = scoresInfo.reduce((obj, cur) => {
    obj[cur.uid] = cur;
    return obj;
}, Object.create(null));


const len = scoresInfo.length;
let count = 0;
let  walkCount = 0;
for (let i = usersInfo.length - 1; i>=0 ; i--) {
    const user = usersInfo[i] as any;
    const score = scoreMap[user.uid];

    walkCount++;
    if(score != null){
        count++
        user.score = score.score;
        user.comments = score.comments;
        user.stars = score.stars;       

        if(count>=len){
            break;
        }
    }
}
console.log(`合并完毕:遍历次数${walkCount}, 实际命中次数${count}, 预期命中次数${len}`)

console.timeEnd("merge data");

console.log(usersInfo);
复制代码

到这里,你刚准备走,突然有同事甲围观你,发现你在写数组合并。

同事甲说: 哇,写数据合并啊,我这也有需求,你顺便抽象封装一下吧。 我的数据是追加型,也就是倒序遍历。

同事甲说完, 好几个同事站了起来,说,我这也有需求。

同事乙说:我的是插入头部的,需要顺序遍历。
同事丙说:我要合并的属性是 a.b.c这种。
同事丁说:我要合并的是 a[0].b这种。

此时的你,改怎么做呢?

求助开源

underscore和lodash都有关于数据的操作,但是还达不到我们的需求。 当然可以借助其完成。但是如果都依赖lodash了,那你这个可迁移性就有待商榷。

array-union, array-merge-by-key, deep-merger等等有合并的能力,但是都不如我们所期望。

算了,自己写吧。

准备工具类

属性读取和设置

我们先整理一下,数组的合并,具体操作的时候,其实是对象的合并。 对象的合并一级属性合并好办,多级呢,是个问题。

其他lodash.get已经完美实现,我们一起来看一下其官方的demo:

var object = { 'a': [{ 'b': { 'c': 3 } }] };
 
_.get(object, 'a[0].b.c');
// => 3
 
_.get(object, ['a', '0', 'b', 'c']);
// => 3
 
_.get(object, 'a.b.c', 'default');
// => 'default'

复制代码

是不是很强大,同理,属性的设置,lodash提供了lodash.set, 我们一睹风采。

var object = { 'a': [{ 'b': { 'c': 3 } }] };
 
_.set(object, 'a[0].b.c', 4);
console.log(object.a[0].b.c);
// => 4
 
_.set(object, ['x', '0', 'y', 'z'], 5);
console.log(object.x[0].y.z);
// => 5

复制代码

这里,你可能要说,你不是不依赖lodash嘛,这不都提的都是lodash嘛。
请掘友莫着急,我们要实施 拿来主义

删掉我们不太关心的,其核心就三个方法

  • stringToPath:路径转换成数组
  • getProperty:读属性
  • setProperty:设属性
const stringToPath = (string: string) => {
    const result = [];
    if (string.charCodeAt(0) === charCodeOfDot) {
        result.push('');
    }
    string.replace(rePropName, ((match, expression, quote, subString) => {
        let key = match;
        if (quote) {
            key = subString.replace(reEscapeChar, '$1');
        }
        else if (expression) {
            key = expression.trim();
        }
        result.push(key);
    }) as any);
    return result;
};

function getProperty(obj: Object, key: string, defaultValue: any = undefined) {

    if (!isObject(obj)) {
        return defaultValue;
    }

    const path = stringToPath(key);

    let index = 0;
    const length = path.length;

    while (obj != null && index < length) {
        obj = obj[path[index++]];
    }
    return (index && index == length) ? obj : undefined || defaultValue;
}

function setProperty(obj: Object, path: string, value: any = undefined) {

    if (!isObject(obj)) {
        return obj;
    }
    const keys = stringToPath(path);

    const length = keys.length;
    const lastIndex = length - 1;

    let index = -1;
    let nested = obj;

    while (nested != null && ++index < length) {
        const key = keys[index];
        let newValue = value;

        if (index != lastIndex) {
            const objValue = nested[key];
            newValue = undefined;
            if (newValue === undefined) {
                newValue = isObject(objValue) ? objValue : (isIndexLike[keys[index + 1]] ? [] : {})
            }
        }
        nested[key] = newValue;
        nested = nested[key];
    }
    return obj;
}

复制代码

到此,多级属性的读取设置问题解决。

准入下一个稍微复杂的问题,就是正序和倒叙的问题。

正序和倒叙-迭代器

不管是正序遍历还是倒叙遍历,其本质都是迭代。
按照传统实现,三种方式

  1. if/else + 两个 for循环
  2. while
  3. 数组的forEach, reduce等

但是都逃不出要分开逻辑判断是顺序还是倒叙, 这些判断写在遍历代码里,代码可读性会变差。

我们这里应该想到迭代器,迭代器。

利用高阶函数,封装递归逻辑,外部只关心hasNext和current。

function getStepIter(min: number, max: number, desc: boolean) {

    let start = desc ? max : min;
    let end = desc ? min : max;

    if (desc) {
        return {
            hasNext() {
                return start >= end
            },
            get current() {
                return start;
            },
            next() {
                return --start

            }
        }
    }
    return {
        hasNext() {
            return end >= start
        },
        get current() {
            return start;
        },
        next() {
            return ++start
        }
    }
}
复制代码

这两个大问题解决,就开始撸起袖子, just do it!.

感谢 SSShuai1999 提供的优化方案, 代码行数减少。 在 hasNext的时候有一个三目运算。

function getStepIter(min: number, max: number, desc: boolean): any { 
    let [start, end, operator] = desc ? [max, min, -1] : [min, max, +1] 
     return { 
         hasNext() { 
             return desc ? start >= end : end >= start 
         }, 
         get current() { 
             return start; 
         }, 
         next() { 
             return start += operator 
         } 
     } 
 }

复制代码

具体实现

略。
会不会有那个羊驼跑过,哈哈。
篇幅问题,全部代码请移步到 arrayMerge

演示

看代码

data.ts, 为了方便看到结果,我们减少数据量。
这里的usersInfo的uid是 1,2,3
这里的scoresInfo的uid是2,3
这么设计是为了演示倒叙遍历。

// data.ts
export const usersInfo = Array.from({ length: 3 }, (val, index) => {
    return {
        uid: `${index + 1}`,
        name: `user-name-${index}`,
        age: index + 10,
        avatar: `http://www.avatar.com/${index + 1}`
    }
});

export const scoresInfo = Array.from({ length: 2 }, (val, index) => {
    return {
        uid: `${index + 2}`,
        score: ~~(Math.random() * 10000),
        comments: ~~(Math.random() * 10000),
        stars: ~~(Math.random() * 1000)
    }
});


复制代码

test.ts

import { mergeArray } from "../lib/array";

import * as datas from "./data";

const { usersInfo, scoresInfo } = datas;


const arr = mergeArray(usersInfo, scoresInfo, {
    sourceKey: "uid", // 源列表对象的用来比较的属性键
    targetKey: "uid",  // 目标列表对象的用来比较的属性键
    sKMap: {
        "score": "data.score",  // 把源的score属性映射到目标对象的data.score属性上
        "comments": "data.comments"// 把源的comments属性映射到目标对象的data.comments属性上
        "stars": "stars" // 把源的stars属性映射到目标对象的stars属性上
    }
});

console.log("arr", arr);
复制代码

运行结果:
targetArr(3), sourceArr(2), 统计:遍历次数2, 命中次数2
其表示:列表长度为3,要合入的长度为2,累计遍历2次,命中2次。

mergeArray:: targetArr(3), sourceArr(2), 统计:遍历次数2, 命中次数2
arr [
  {
    uid: '1',
    name: 'user-name-0',
    age: 10,
    avatar: 'http://www.avatar.com/1'
  },
  [Object: null prototype] {
    uid: '2',
    name: 'user-name-1',
    age: 11,
    avatar: 'http://www.avatar.com/2',
    data: { score: 6979, comments: 3644 },
    stars: 434
  },
  [Object: null prototype] {
    uid: '3',
    name: 'user-name-2',
    age: 12,
    avatar: 'http://www.avatar.com/3',
    data: { score: 6348, comments: 320 },
    stars: 267
  }
]
复制代码

到此为止,真可以算是高一段段落。

提问

  1. 当前的版本还有什么问题,应该怎么解决。
  2. 当前的版本还有哪些改进方案。

凡是留言者,笔者100%回复并进入你的掘金空间去踩踩。

写在最后

写作不易,如果觉得还不错, 一赞一评,就是我最大的动力。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改