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>
相关文章
|
6天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
27 3
|
1天前
|
前端开发 JavaScript
前端 js 经典:数组常用方法总结
前端 js 经典:数组常用方法总结
11 0
|
6天前
|
JavaScript
通过使用online表单的获取使用,了解vue.js数组的常用操作
通过使用online表单的获取使用,了解vue.js数组的常用操作
|
6天前
|
存储 JavaScript 前端开发
深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
9 0
|
6天前
|
JavaScript 前端开发
JS实现网页页面的框架(demo)
JS实现网页页面的框架(demo)
13 1
|
6天前
|
JavaScript 前端开发
js关于数组的方法
js关于数组的方法
11 0
|
6天前
|
JavaScript 前端开发
js怎么清空数组?
js怎么清空数组?
14 0
|
6天前
|
存储 JavaScript 前端开发
js处理数组的方法
js处理数组的方法
14 2
|
6天前
|
JavaScript 前端开发 索引
JavaScript 数组的索引方法数组转换为字符串方法
JavaScript 数组的索引方法数组转换为字符串方法
|
6天前
|
JavaScript 前端开发
JavaScript 数组的添加删除和排序
JavaScript 数组的添加删除和排序