当前位置: 首页 > 知识库问答 >
问题:

javascript - js处理数组?

易宣
2024-08-05


arr数组最小长度是4最大是8
let num = 600;暂时写死600,这个数自定义输入的

麻烦各位大佬帮忙看看

共有2个答案

龙飞
2024-08-05

snipaste_20240805_142517.png

示例代码

// 原始数据
const arr = [
    { id: 1, test: 5 },
    { id: 2, test: 4 },
    { id: 3, test: 5 },
    { id: 4, test: 6 },
];
const sum = 600;

// 计算行最大值,为了补齐矩阵
const max = arr.reduce((max, { test }) => Math.max(max, test), 0);
// 计算列数
const size = arr.length;
const matrix = arr
    // 产生矩阵
    .flatMap(({ id, test }) => [...Array(test).fill(id), ...Array(max - test).fill(0)])
    // 转置
    .map((_, i, arr) => arr[(i % size) * max + ~~(i / size)])
    // 去掉 0 值
    .filter(n => n);

// 计算随机数范围 Step
const trunk = sum / matrix.length;
// 计算随机数或范围
const result = matrix.map((col, i) => `第 ${col} 列:${i * trunk + 1} ~ ${(i + 1) * trunk}`);

console.log(result);

结果

第 1 列:1 ~ 30
第 2 列:31 ~ 60
第 3 列:61 ~ 90
第 4 列:91 ~ 120
第 1 列:121 ~ 150
第 2 列:151 ~ 180
第 3 列:181 ~ 210
第 4 列:211 ~ 240
第 1 列:241 ~ 270
第 2 列:271 ~ 300
第 3 列:301 ~ 330
第 4 列:331 ~ 360
第 1 列:361 ~ 390
第 2 列:391 ~ 420
第 3 列:421 ~ 450
第 4 列:451 ~ 480
第 1 列:481 ~ 510
第 3 列:511 ~ 540
第 4 列:541 ~ 570
第 4 列:571 ~ 600

注1:这里 result 中每项给的是字符串,也可以处理成结构化数据或其他需要的数据类型。
注2:如果需要按列,可以对 result 按列号分组再展开即可。

鲁明知
2024-08-05

横向计算

function createListData(list, num = 600) {
    let count = list.reduce((n, i) => n + i.test, 0)
    let step = num / count | 0 // 不一定能整除,这里向下取整
    let data = list.map((item, index) => {
        return Array.from({length: item.test}).map(citem => {
            return {
                min: 0,
                max: 0
            }
        })
    })

    let max = Math.max(...list.map(i => i.test))
    let value = 0
    for (let index = 0; index < max; index++) {
        data.forEach(item => {
            if(item[index]){
                item[index].min = value + 1
                value += step
                item[index].max = num < value + step ? num : value
            }
        })
    }
    
    return data
}

let data = createListData(arr, 605)

image.png

竖向计算

function createListData(list, num = 600) {
    let count = list.reduce((n, i) => n + i.test, 0)
    let step = num / count | 0 // 不一定能整除,这里向下取整
    let value = 0
    let data = list.map((item, index) => {
        return Array.from({length: item.test}).map(citem => {
            let start = value
            value += step
            return {
                min: start + 1,
                max: num < value + step ? num : value
            }
        })
    })

    return data
}

image.png

 类似资料:
  • 处理成 [11,1201,1304,1305]

  • 右下角有一个按钮来控制滑块位置, 具体代码如下 但是当用户连续点击的时候页面就会卡死, 这个情况可以怎么进行防抖优化? debounce 是原先封装的方法, 但这个方法并不适用这个需求 debounce 是延迟执行, 也就是如果调这个方法传1秒, 那我点击这个按钮后1秒才开始执行里面的方法 想稍微改一下, 变成先执行, 后延迟1秒 (先执行$("html").animate, 并且在执行1期间将$

  • js:求一个数据处理方法,例如上述例子, tableList处理之后,可以得到 之前有如下方案 但是不能兼容account.t_sub_account_.*的场景,哪位大佬可以帮忙完善下吗?

  • (自己模拟的数据效果) 如上路径动画,目前的问题是运行的坐标数据是依照地图来的 需要转换为画布能够展示的范围,但运行数据之前差别大部分情况下都很小 我要怎样处理会合适一点? help大佬们

  • 这看起来真的很奇怪。。。 我有一些JSON。。。 但是当我试图解析它并使用它时。。。 什么都没有出现,但是如果我只是做$("p"). text(json);它告诉我这是一个对象,我可以看到JSON在Firebug中是正确的,有什么想法吗?

  • 本文向大家介绍javascript容错处理代码(屏蔽js错误),包括了javascript容错处理代码(屏蔽js错误)的使用技巧和注意事项,需要的朋友参考一下 有时候大家来浏览网页的时候发现IE浏览器左下角总有个黄色错误标志,有时候更是直接弹出错误无法继续浏览页面,这样对于网站的正规性与权威性发展不利。 国外银行页面就是因为这样的错误,导致用户大量流失不敢用这个银行的网上银行等导致损失惨重。 所以

  • id相同,ass里的数据根据 id相同,unicode 相同 ,把pearPlanFlag有属性的值加到第一个id出现的情况

  • 本文向大家介绍javascript日期处理函数,性能优化批处理,包括了javascript日期处理函数,性能优化批处理的使用技巧和注意事项,需要的朋友参考一下 其实网上写javascript日期格式化的博文很多,大体都看了看,都还不错。唯一遗憾的是只顾着实现了功能,没对函数进行性能优化。 俗话说:不要重复造轮子。google上找了一个比较不错的日期格式化函数,来开始我的优化之旅吧! google上