Originally published on puruvj.dev

최근에 블로그를 만들다가 문제가 생겼습니다. 저는 헤드리스 크롬을 사용하여 Works 페이지에서 제공되는 URL의 스냅샷을 찍고 있었는데, 인터넷과 처리 속도가 최고인 클라우드 서버에서도 상당히 느린 것으로 나타났습니다.

나는 한 번에 URL을 전달하고 있었고, 그곳으로 이동하고, 스냅샷을 찍고, 다음 URL로 이동하는 식이었습니다. 그것은 매우 선형적인 과정이었습니다.

그러나 이러한 서버는 매우 강력하기 때문에 1페이지에 필요한 속도로 한 번에 5페이지의 스냅샷을 만들 수 있습니다. 그래서 나는 작업을 덩어리로 나누기로 결정했습니다. 나는 URL을 5개의 덩어리로 쪼개었다. 크롬은 그 5개를 동시에 스냅샷하고, 모두 끝나면 다음 5개로 넘어가는 식이다. 시간은 시간의 third로 단축되었습니다.

이 배열list을 고려하십시오. 우리의 목적을 위해 단순히 URL이 아닌 숫자를 다루겠습니다.

const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

이제 다음과 같이 5개의 덩어리로 나누고 싶습니다.

const splitList = [
  [1, 2, 3, 4, 5],
  [6, 7, 8, 9, 10],
  [11, 12],
];

또는 4개의 덩어리:

const SplitList = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9, 10, 11, 12],
];

당신은 아이디어를 얻을.

암호

가장 간단한 형태로 배열을 분할하는 코드는 다음과 같습니다.

/**
 * @param {Array} arr The array to be broken into chunks
 * @param {number} n The number of items in each chunk
 */
function chunks(arr, n) {
  let items = [...arr];
  return new Array(Math.ceil(items.length / n))
    .fill()
    .map(() => items.splice(0, n));
}

조각별로 분해해 보겠습니다.

Array 로 정의된 항목 수와 함께 Math.ceil(items.length / n) 를 반환합니다. items.length가 12이고 n가 5이면 편차를 2.4로 얻습니다. 2개 이상, 3개 미만. 2개 항목(11, 12)이 남게 되며 3번째 배열에 수용해야 하므로 Math.ceil 나눗셈을 합니다.

.fill() 는 단순히 배열을 undefined 로 채웁니다. 이것은 필요한 크기의 배열을 가져오기 위한 것이며 나중에 해당 값을 수정할 수 있습니다. 위의 예는 [undefined, undefined, undefined] 를 반환합니다.

.map() undefined 배열의 모든 값을 순회하고 items 배열 청크로 대체합니다. splice 주어진 배열에서 청크를 제거하고 .map

에 대한 값으로 반환

마지막으로 arr를 items 로 복제하고 있습니다. 이것은 원래 값을 변경하지 않기 위해 필요합니다.

설명

splice가 어떻게 작동하는지 보자

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const spliced = arr.splice(0, 3);

// let's print both the original array and spliced array
console.log(spliced); // Output: [1, 2, 3]

console.log(arr); // [4, 5, 6, 7, 8, 9]

splice 원래 배열을 변경했습니다.

그것이 chunks 함수에서 일어날 것입니다.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

const chunked = chunks(arr, 5);

console.log(arr); // Output: []

chunks는 원래 배열에서 모든 값을 제거합니다. 그러나 전달된 배열을 복제하고 작업하기 때문에 이 문제를 피할 수 있습니다.

결론

덩어리로 가세요 😉 😜 🤣