What begins with injustice must be strengthened with evil.

— Shakespeare, Macbeth

A lot of recent events seem to confirm this saying, one lie ends with a hundred.

This is the second article to read the source code for LoDash. Future articles will be updated to this repository. Welcome to Star: Pocket-LoDash

Gitbook will also be updated with the warehouse. Gitbook address: Pocket-Lodash

Function and Usage

The chunk function splits an array into chunks of a specified size and returns a new array made up of those chunks.

The Chunk function can be used on the front end to alleviate some performance issues. A large number of DOM operations, for example, can be partitioned into chunks for the browser to handle at idle times to avoid page jams. The following code inserts a large amount of DOM into the page.

const arr = [] // 10,000 pieces of data
const chunks = _.chunk(arr, 100)

const append = function () {
  if (chunks.length > 0) {
    const current = chunks.pop()
    current.forEach(item= > {
      const node = document.createElement('div')
      node.innerText = item
      document.body.appendChild(node)
    })
    setTimeout(append, 0)
  }
}

append()
Copy the code

Rely on

import slice from './slice.js'
Copy the code

Read lodash source code from slice to see sparse arrays and dense arrays

The principle of

The principle of chunk boils down to cutting and placing.

Chunk finally returns results in the form of [[1],[1],[1]. Placement is to place the cut blocks into an array container.

So how do you cut it?

The size argument is a ruler that measures the length of each slice, and the slice function is a knife that cuts out the array piece by piece.

For example, if you have the array [1,2,3,4,5] and size is 2, the first cut will yield blocks of [1,2], the second cut will yield blocks of [4,5], and the rest will be [5]. The array will eventually be cut into three pieces.

Understand the principle, let’s look at the source code.

The overview of source code

function chunk(array, size) {
  size = Math.max(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
}
Copy the code

Processing parameters

size = Math.max(size, 0)
const length = array == null ? 0 : array.length
if(! length || size <1) {
  return[]}Copy the code

Make sure length exists and size is greater than 1, and return an empty array if the condition is not met.

‘

Before cutting, determine the number of cuts with a ruler.

From the above analysis of principle, it can be seen that the cutting is not fair, except that the front blocks are equal, the last piece may be less than the front one.

So how do you determine the number of cuts? If there is a remainder, then the remainder is the length of the last block, which needs to be rounded up.

This can be done in javascript with the math.ceil function, which returns the rounded up result.

Take a look at the code:

const result = new Array(Math.ceil(length / size))
Copy the code

A container called Result is created to hold all the blocks. The length of the container is exactly the same as the number of blocks.

The knife

let index = 0
let resIndex = 0
while (index < length) {
  result[resIndex++] = slice(array, index, (index += size))
}
Copy the code

After measuring the number of blocks, it is time to cut them. Each cut piece is immediately placed in the container Result.

ResIndex is where the block is placed and index is where the cut begins.

When index equals the number of blocks length, the cutting is complete, the cutting is stopped, and the result is returned at last.

reference

  1. Lodash source code parsing – chunk function

License

CC BY-NC-ND 4.0

Finally, all articles will be simultaneously sent to the wechat public account, welcome to pay attention to, welcome to comment:

Akik The opposite corner