数组里很多条数据，怎么每10条截取出来呢

Question

有一个data这样的数组，大概500+的数据，我想每10条组成一个数组，全放在arr里，求指教下

const data = [
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  ...
]
const arr = [
  [{ img: 'a' }, { img: 'a' }, { img: 'a' },],
  [{ img: 'a' }, { img: 'a' }, { img: 'a' },],
  [{ img: 'a' }, { img: 'a' }, { img: 'a' },],
  [{ img: 'a' }, { img: 'a' }, { img: 'a' },]
]

Answer 1

lodash.chunk了解一下

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

Answer 2

分隔一下就可以了，这里涉及要不要更改源数据的问题。
下面写一个 demo，仅供参考：

function splitData(list) {
  var res = [];
  for (var i = 0, len = list.length; i < len; i += 10) {
    res.push(list.slice(i, i + 10));
  }
  return res;
}

Answer 3

(function(arr, length){
    var _arr = [];
    while(arr.length){
        _arr.push(arr.splice(0, length))
    }
    return _arr
})([
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' },
  { img: 'a' }
], 3)

Answer 4

这个你需要专门进行转换，可以自己实现，也可以用诸如lodash之类的工具库，如果对资源加载没有特别限制，推荐用库。

Answer 5

手动实现lodash的_chunk():

        function _chunk(arr, num) {
                let j = 0,
                    o = j;
                let newArray = [];
                while (j < arr.length) {
                    j += num;
                    newArray.push([arr.slice(o, j)]);
                    o = j;
                }
                return newArray;
            
        }
_chunk([1,2,3,4,5], 2)//[[1,2],[3,4],[5]]