JavaScript将数组拆分成多个长度的区块

阳光穿透心脏的1/2处 2023-01-23 14:52 25阅读 0赞

在项目中，我们会遇到需要将一个完整的数组分割为固定大小的小数组，在这里我总结了两种方法，分享在这里：

#### 1.使用while进行自己解析 ####

此方案中，试用while循环进行遍历整个数组，考虑到遍历，那当然我们也能够使用for循环进行解决

function group(array, subGroupLength) { 
          let index = 0;
          let newArray = [];
          while(index < array.length) { 
              newArray.push(array.slice(index, index += subGroupLength));
          }
          return newArray;
      }

这里我简单的试用了下，可以看到处理结果还是挺理想的

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70_pic_center]

#### 2.使用lodash等工具库进行解析 ####

lodash是一个前端常用的工具库，当然这个需求是可以满足的，具体方法为`_.chunk`,文档地址在这里: [https://www.lodashjs.com/docs/lodash.chunk][https_www.lodashjs.com_docs_lodash.chunk]

对于该方法，我们能够通过文档学习到，也是需要两个参数的，分别是需要处理的数组和需要分割的大小区块，返回一个包含拆分区块的新数组（注：相当于一个二维数组）。

_.chunk(['a', 'b', 'c', 'd'], 2); // => [['a', 'b'], ['c', 'd']]
    _.chunk(['a', 'b', 'c', 'd'], 3); // => [['a', 'b', 'c'], ['d']]

顺便我也去看了看源码，大家也看看吧，这个是地址,大佬经常说我从源码学习到啥啥啥的，我们也学学看：[https://github.com/lodash/lodash/blob/master/chunk.js][https_github.com_lodash_lodash_blob_master_chunk.js]

import slice from './slice.js'
    import toInteger from './toInteger.js'
    
    /** * Creates an array of elements split into groups the length of `size`. * If `array` can't be split evenly, the final chunk will be the remaining * elements. * * @since 3.0.0 * @category Array * @param {Array} array The array to process. * @param {number} [size=1] The length of each chunk * @returns {Array} Returns the new array of chunks. * @example * * chunk(['a', 'b', 'c', 'd'], 2) * // => [['a', 'b'], ['c', 'd']] * * chunk(['a', 'b', 'c', 'd'], 3) * // => [['a', 'b', 'c'], ['d']] */
    function chunk(array, size = 1) { 
      size = Math.max(toInteger(size), 0)
      const length = array == null ? 0 : array.length
      if (!length || size < 1) { 
        return []
      }
      let index = 0
      let resIndex = 0
      const result = new Array(Math.ceil(length / size))
    
      while (index < length) { 
        result[resIndex++] = slice(array, index, (index += size))
      }
      return result
    }
    
    export default chunk

可以看到，这个写法和第一种方案差不多哈。

同样的，也可以通过工具库underscorejs进行处理，方法细节在这里，点击进入获取:[https://www.underscorejs.com.cn/chunk][https_www.underscorejs.com.cn_chunk]

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1d3UxNTA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221004/fa289ada3d5e4d97b2e1d1bd10dd65c1.png
[https_www.lodashjs.com_docs_lodash.chunk]: https://www.lodashjs.com/docs/lodash.chunk
[https_github.com_lodash_lodash_blob_master_chunk.js]: https://github.com/lodash/lodash/blob/master/chunk.js
[https_www.underscorejs.com.cn_chunk]: https://www.underscorejs.com.cn/chunk