JavaScript 拆分数组

在 JavaScript 中，我们经常需要对数组进行拆分操作，将数组中的元素按照某种规则分为多个新的数组。这在实际开发中非常常见，比如需要将一个大的数组按照每个子数组最大长度分为多组，或者按照元素属性值拆分为不同的数组等。

splitArray函数

下面我们来设计一个通用的 splitArray 函数，来实现上述需求。该函数接收两个参数：源数组和拆分方式。拆分方式可以是一个数字，表示每个子数组最大长度；也可以是一个回调函数，该函数接收数组元素并返回一个 boolean 值，表示是否需要将该元素与前面的元素一起放到一个新的子数组中。

/**
 * 将数组按照指定方式拆分为多个子数组
 * @param {Array} arr 源数组
 * @param {Number | Function} splitBy 拆分方式，可以是数字或回调函数
 * @returns {Array} 拆分后的子数组组成的数组
 */
function splitArray(arr, splitBy) {
  let subArr = [];
  let resultArr = [];

  if (typeof splitBy === "function") {
    for (let i = 0; i < arr.length; i++) {
      const isSameGroup = splitBy(arr[i], i, arr);
      subArr.push(arr[i]);
      if (!isSameGroup) {
        resultArr.push(subArr);
        subArr = [];
      }
    }
  } else {
    const groupSize = splitBy;

    for (let i = 0; i < arr.length; i++) {
      subArr.push(arr[i]);
      if ((i + 1) % groupSize === 0) {
        resultArr.push(subArr);
        subArr = [];
      }
    }
  }

  if (subArr.length > 0) {
    resultArr.push(subArr);
  }

  return resultArr;
}

使用示例

我们可以用以下方法来调用该函数：

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const maxLength = 5;
const result = splitArray(arr, maxLength); // [[1,2,3,4,5], [6,7,8,9,10], [11,12]]

const arr = ["aa", "ab", "ba", "bb", "ca", "cb"];
const result = splitArray(arr, (item, index, arr) => {
  return item[0] === arr[index - 1]?.[0];
}); // [["aa","ab"], ["ba","bb"], ["ca","cb"]]

上述两个示例分别演示了按照最大长度拆分和按照元素属性值拆分的用法。

总结

通过设计上述通用的 splitArray 函数，我们可以方便地对任何数组进行拆分操作，无需编写冗长的循环和判断语句。该函数也可以根据实际需求稍作修改，比如增加更多的拆分维度或进行特定的类型判断等。