メモリ節約！JavaScriptで配列を分割してメモリ使用量を削減する方法

2024-04-11

JavaScriptで配列を分割する方法

slice メソッドは、配列の指定した範囲をコピーした新しい配列を返します。

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

// 2個ずつ分割
const chunks = arr.slice(0, 2); // [1, 2]
chunks.push(arr.slice(2, 4)); // [1, 2, 3, 4]
chunks.push(arr.slice(4, 6)); // [1, 2, 3, 4, 5, 6]
chunks.push(arr.slice(6)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

console.log(chunks); // [[1, 2], [3, 4], [5, 6], [7, 8, 9, 10]]

この方法の利点は、非常にシンプルで分かりやすいことです。ただし、分割するサイズが固定されている場合にのみ使用できます。

reduce メソッドは、配列の要素を1つの値にまとめるために使用できます。この方法では、分割するサイズを動的に設定することができます。

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

const chunks = arr.reduce((acc, cur, i) => {
  if (i % 2 === 0) {
    acc.push([]);
  }
  acc[acc.length - 1].push(cur);
  return acc;
}, []);

console.log(chunks); // [[1, 3, 5, 7, 9], [2, 4, 6, 8, 10]]

この方法の利点は、分割するサイズを動的に設定できることです。ただし、reduce メソッドは少し複雑なので、初心者には理解しにくい場合があります。

Lodashなどのライブラリを使用すると、より簡単に配列を分割することができます。

import _ from 'lodash';

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

const chunks = _.chunk(arr, 2);

console.log(chunks); // [[1, 2], [3, 4], [5, 6], [7, 8, 9, 10]]

この方法の利点は、非常にシンプルで分かりやすいことです。ただし、Lodashなどのライブラリを別途インストールする必要があります。

JavaScriptで配列を分割するには、いくつかの方法があります。それぞれの特徴を理解して、目的に合った方法を選択してください。

slice メソッドを使う

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

// 2個ずつ分割
const chunks = arr.slice(0, 2); // [1, 2]
chunks.push(arr.slice(2, 4)); // [1, 2, 3, 4]
chunks.push(arr.slice(4, 6)); // [1, 2, 3, 4, 5, 6]
chunks.push(arr.slice(6)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

console.log(chunks); // [[1, 2], [3, 4], [5, 6], [7, 8, 9, 10]]

reduce メソッドを使う

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

const chunks = arr.reduce((acc, cur, i) => {
  if (i % 2 === 0) {
    acc.push([]);
  }
  acc[acc.length - 1].push(cur);
  return acc;
}, []);

console.log(chunks); // [[1, 3, 5, 7, 9], [2, 4, 6, 8, 10]]

Lodashなどのライブラリを使う

import _ from 'lodash';

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

const chunks = _.chunk(arr, 2);

console.log(chunks); // [[1, 2], [3, 4], [5, 6], [7, 8, 9, 10]]

上記のコードは、あくまでもサンプルです。目的に合わせて、コードを修正してください。

JavaScriptで配列を分割するその他の方法

forループを使う

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

const chunks = [];
for (let i = 0; i < arr.length; i += 2) {
  chunks.push(arr.slice(i, i + 2));
}

console.log(chunks); // [[1, 2], [3, 4], [5, 6], [7, 8, 9, 10]]

この方法は、slice メソッドを使う方法よりもシンプルですが、コードが冗長になりがちです。

Generatorを使う

function* chunk(arr, size) {
  for (let i = 0; i < arr.length; i += size) {
    yield arr.slice(i, i + size);
  }
}

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

const chunks = [...chunk(arr, 2)];

console.log(chunks); // [[1, 2], [3, 4], [5, 6], [7, 8, 9, 10]]

この方法は、forループを使う方法よりも簡潔ですが、Generator を理解する必要があります。

spread構文を使う

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

const chunks = [[...arr.slice(0, 2)], [...arr.slice(2, 4)], [...arr.slice(4, 6)], [...arr.slice(6)]];

console.log(chunks); // [[1, 2], [3, 4], [5, 6], [7, 8, 9, 10]]