js 随机取数组中的6-13条数据

js yekong 292℃

数据可视化大屏 项目开发中,需要渲染echarts地图,在地图中绘制标识点,为了提升交互,需要事先准备13条数据,然后每次请求mockjs接口都需要随机从接口中取6-13条数据。

[
    {
        name: '新百汇社区',
        value: [111.14152930113444, 36.15093718050324],
    }, {
        name: '新百汇社区',
        value: [111.38229588336162, 36.230560774625616],
    },{
        name: '御景社区',
        value: [111.3481714858806, 36.07813846587707],
    },{
        name: '社区1',
        value: [111.76780845154134, 36.07254273134508],
    },{
        name: '社区2',
        value: [111.63948259233273, 36.013652104483455],
    },{
        name: '社区3',
        value: [111.47534486543799, 36.1083545990312],
    },{
        name: '社区4',
        value: [111.53801563388872, 36.1943030814779],
    },{
        name: '社区5',
        value: [111.5131462813289, 36.0335475865313],
    },{
        name: '社区6',
        value: [111.31120713854327, 36.165653587329],
    },{
        name: '社区7',
        value: [111.41864274160163, 36.16963268373857],
    },{
        name: '社区8',
        value: [111.59471775772508, 36.10755877974929],
    },{
        name: '社区9',
        value: [111.24555204778537, 36.11472115328651],
    },{
        name: '社区10',
        value: [111.58278046849637, 35.978636056079246],
    },
] 

数据处理

要从数组中随机获取6到13个数据,你可以首先复制数组,然后将其打乱,最后截取所需的随机长度。以下是如何做到这一点:

function getRandomSubArray(arr) {
    // 首先,复制原始数组以避免修改它
    const tempArr = arr.slice();

    // 打乱数组
    for (let i = tempArr.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [tempArr[i], tempArr[j]] = [tempArr[j], tempArr[i]]; // 交换元素
    }

    // 获取6到13之间的随机数
    const randomLength = Math.floor(Math.random() * (13 - 6 + 1)) + 6;

    // 截取数组并返回
    return tempArr.slice(0, randomLength);
}

const data = [
    //... 你的数组数据
];

const randomData = getRandomSubArray(data);
console.log(randomData);

上述函数首先复制了传入的数组,并使用现代版的Fisher-Yates洗牌算法打乱它。之后,它使用Math.random()来获取一个介于6和13之间的随机数,并用这个数来截取打乱后的数组的前n个元素。

mockjs接口生成

// 地图数据生成
// vue3 使用mockjs生成 地图数据生成接口

{
    url: '/api/mapData',
    method: 'get',
    response: () => {
        function getRandomSubArray(arr) {
            // 首先,复制原始数组以避免修改它
            const tempArr = arr.slice();

            // 打乱数组
            for (let i = tempArr.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [tempArr[i], tempArr[j]] = [tempArr[j], tempArr[i]]; // 交换元素
            }

            // 获取6到13之间的随机数
            const randomLength = Math.floor(Math.random() * (13 - 6 + 1)) + 6;

            // 截取数组并返回
            return tempArr.slice(0, randomLength);
        }

        var list = [
            {
                name: '新百汇社区',
                value: [111.14152930113444, 36.15093718050324],
            }, {
                name: '新百汇社区',
                value: [111.38229588336162, 36.230560774625616],
            }, {
                name: '御景社区',
                value: [111.3481714858806, 36.07813846587707],
            }, {
                name: '社区1',
                value: [111.76780845154134, 36.07254273134508],
            }, {
                name: '社区2',
                value: [111.63948259233273, 36.013652104483455],
            }, {
                name: '社区3',
                value: [111.47534486543799, 36.1083545990312],
            }, {
                name: '社区4',
                value: [111.53801563388872, 36.1943030814779],
            }, {
                name: '社区5',
                value: [111.5131462813289, 36.0335475865313],
            }, {
                name: '社区6',
                value: [111.31120713854327, 36.165653587329],
            }, {
                name: '社区7',
                value: [111.41864274160163, 36.16963268373857],
            }, {
                name: '社区8',
                value: [111.59471775772508, 36.10755877974929],
            }, {
                name: '社区9',
                value: [111.24555204778537, 36.11472115328651],
            }, {
                name: '社区10',
                value: [111.58278046849637, 35.978636056079246],
            },
        ]
        return {
            data: getRandomSubArray(list),
            message: '成功',
            code: 0
        }
    },
},
喜欢 (0)