js将一维数组转化为二维数组、二维数组转化为一维数组效果demo(整理)

简介: js将一维数组转化为二维数组、二维数组转化为一维数组效果demo(整理)

效果图:一维数组转成二维数组

效果图:二维数组转成一维数组

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js将一维数组转化为二维数组、二维数组转化为一维数组</title>
  </head>
  <body>
  </body>
  <script>
    // 调用
    // let list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    let list = [{
        id: '1',
        name: '一',
      },
      {
        id: '2',
        name: '二',
      },
      {
        id: '3',
        name: '三',
      },
      {
        id: '4',
        name: '四',
      },
      {
        id: '5',
        name: '五',
      },
      {
        id: '6',
        name: '六',
      },
      {
        id: '7',
        name: '七',
      },
      {
        id: '8',
        name: '八',
      },
      {
        id: '9',
        name: '九',
      },
      {
        id: '10',
        name: '十',
      },
      {
        id: '11',
        name: '十一',
      },
      {
        id: '12',
        name: '十二',
      },
    ]
    console.log(list, '全部数据')
    joinWayArray(list);
    // 转化函数
    function joinWayArray(list) {
      const listResult = []; // 最终返回的二维数组
      for (let i = 0; i < Math.ceil((list.length / 10)); i++) {
        listResult[i] = [];
        for (let j = 0; j < 10; j++) {
          // 如果是最后一个板块
          if (i === (Math.ceil((list.length / 10)) - 1)) {
            if (Math.ceil((list.length % 10)) !== 0) {
              // 只有最后一个板块的数据在余数以内的才赋值
              if (j < Math.ceil((list.length % 10))) {
                listResult[i][j] = list[i * 10 + j];
              }
            } else {
              // 如果刚好整整一个板块,则全部附上值
              listResult[i][j] = list[i * 10 + j];
            }
          } else {
            listResult[i][j] = list[i * 10 + j];
          }
        }
      }
      console.log(listResult, '转化十个为一组后的数据')
      return listResult;
    }
    //二维数组转一维数组
    // let arr = [
    //  ['一', '二'],
    //  ['三', '四'],
    //  ['五', '六']
    // ];
    let arr = [
      [
        {
          id: 1,
          name: '一',
        },
        {
          id: 2,
          name: '二',
        },
      ],
      [
        {
          id: 3,
          name: '三',
        },
        {
          id: 4,
          name: '四',
        },
      ],
      [
        {
          id: 5,
          name: '五',
        },
        {
          id: 6,
          name: '六',
        },
      ],
    ];
    console.log('二维数组:', arr);
    let newarr = [];
    for (const item of arr) {
      newarr = [...newarr, ...item];
    }
    console.log('一维数组:', newarr);
  </script>
</html>
相关文章
|
4月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
62 2
|
4月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
79 3
|
4月前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
48 0
|
4月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
73 1
|
4月前
|
JavaScript 前端开发 索引
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
62 0
|
4月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
67 4
|
4月前
|
前端开发 JavaScript 索引
JavaScript 数组常用高阶函数总结,包括插入,删除,更新,反转,排序等,如map、splice等
JavaScript数组的常用高阶函数,包括遍历、插入、删除、更新、反转和排序等操作,如map、splice、push、pop、reverse等。
34 0
|
4月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
46 5
|
4月前
|
JavaScript 前端开发 索引
JS 删除数组元素( 5种方法 )
JS 删除数组元素( 5种方法 )
105 1
|
4月前
|
JavaScript 前端开发 索引
探索JavaScript数组:基础
探索JavaScript数组:基础
33 3

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    46
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55