鍍金池/ 問(wèn)答/HTML/ 數(shù)組里很多條數(shù)據(jù),怎么每10條截取出來(lái)呢

數(shù)組里很多條數(shù)據(jù),怎么每10條截取出來(lái)呢

有一個(gè)data這樣的數(shù)組,大概500+的數(shù)據(jù),我想每10條組成一個(gè)數(shù)組,全放在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' },]
]
回答
編輯回答
忘了我

lodash.chunk了解一下

_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]
 
_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]
2018年5月22日 07:57
編輯回答
淺淺

分隔一下就可以了,這里涉及要不要更改源數(shù)據(jù)的問(wèn)題。
下面寫一個(gè) 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;
}
2017年12月18日 07:33
編輯回答
挽歌

手動(dòng)實(shí)現(xiàn)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]]
2018年5月20日 01:39
編輯回答
汐顏

這個(gè)你需要專門進(jìn)行轉(zhuǎn)換,可以自己實(shí)現(xiàn),也可以用諸如lodash之類的工具庫(kù),如果對(duì)資源加載沒(méi)有特別限制,推薦用庫(kù)。

2018年8月22日 07:26
編輯回答
選擇
(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)

clipboard.png

2018年4月22日 16:28