如何将一维数组转为嵌套数组并通过slice生成新数组（React）

嘿，这需求我刚好做过类似的，给你一步步拆解实现：

1. 先把一维数组拆成9元素一组的嵌套数组 #

首先我们需要一个工具函数，把原始的一维数组按每9个元素分割成子数组。用reduce来实现最直观：

const chunkArray = (arr, chunkSize) => {
  return arr.reduce((result, item, index) => {
    const chunkIndex = Math.floor(index / chunkSize);
    if (!result[chunkIndex]) {
      result[chunkIndex] = []; // 如果当前组不存在，新建一个空数组
    }
    result[chunkIndex].push(item);
    return result;
  }, []);
};

比如传入Array.from({length:97}, (_,i)=>i)（生成0到96的数组），就能得到你要的data = [[0,1,...,8], [9,...,17], ..., [88,...,96]]结构。

2. 拆分每个子数组并合并到new_data1和new_data2 #

拿到嵌套数组后，遍历每个子数组，用slice截取前3个和后6个元素，分别合并到两个目标数组里。这里用forEach配合扩展运算符实现，代码简洁易懂：

const processData = (chunkedData) => {
  let newData1 = [];
  let newData2 = [];
  chunkedData.forEach(subArr => {
    // 截取前3个元素，合并到newData1
    newData1 = [...newData1, ...subArr.slice(0, 3)];
    // 截取从索引3到末尾（共6个元素），合并到newData2
    newData2 = [...newData2, ...subArr.slice(3, 9)];
  });
  return { newData1, newData2 };
};

如果原始子数组长度不足9，你可以把slice(3,9)改成slice(3)，这样会自动截取从索引3到末尾的所有元素，适配边界情况。

3. React Hooks完整组件实现 #

把上面的逻辑结合React的useState和useEffect（或按钮触发）来管理状态，完整代码如下：

import { useState, useEffect } from 'react';

const DataProcessor = () => {
  // 初始化两个目标数组的状态
  const [newData1, setNewData1] = useState([]);
  const [newData2, setNewData2] = useState([]);

  // 模拟原始一维数组（你可以替换成自己的业务数据）
  const originalArray = Array.from({ length: 97 }, (_, i) => i);

  // 拆分数组的工具函数
  const chunkArray = (arr, chunkSize) => {
    return arr.reduce((result, item, index) => {
      const chunkIndex = Math.floor(index / chunkSize);
      if (!result[chunkIndex]) {
        result[chunkIndex] = [];
      }
      result[chunkIndex].push(item);
      return result;
    }, []);
  };

  // 处理数据并更新状态的核心函数
  const handleProcessData = () => {
    const chunkedData = chunkArray(originalArray, 9);
    let tempData1 = [];
    let tempData2 = [];
    chunkedData.forEach(subArr => {
      tempData1 = [...tempData1, ...subArr.slice(0, 3)];
      tempData2 = [...tempData2, ...subArr.slice(3, 9)];
    });
    // 更新React状态
    setNewData1(tempData1);
    setNewData2(tempData2);
  };

  // 组件挂载时自动处理数据（也可以改成按钮点击触发）
  useEffect(() => {
    handleProcessData();
  }, []);

  return (
    <div className="data-container">
      <h3>new_data1 结果：</h3>
      <pre>{JSON.stringify(newData1, null, 2)}</pre>
      <h3>new_data2 结果：</h3>
      <pre>{JSON.stringify(newData2, null, 2)}</pre>
    </div>
  );
};

export default DataProcessor;

类组件版本（如果用setState） #

要是你还在使用React类组件，逻辑完全一致，只是把状态管理换成this.state和this.setState：

import React, { Component } from 'react';

class DataProcessor extends Component {
  state = {
    newData1: [],
    newData2: []
  };

  chunkArray = (arr, chunkSize) => {
    return arr.reduce((result, item, index) => {
      const chunkIndex = Math.floor(index / chunkSize);
      if (!result[chunkIndex]) {
        result[chunkIndex] = [];
      }
      result[chunkIndex].push(item);
      return result;
    }, []);
  };

  handleProcessData = () => {
    const originalArray = Array.from({ length: 97 }, (_, i) => i);
    const chunkedData = this.chunkArray(originalArray, 9);
    let tempData1 = [];
    let tempData2 = [];
    chunkedData.forEach(subArr => {
      tempData1 = [...tempData1, ...subArr.slice(0, 3)];
      tempData2 = [...tempData2, ...subArr.slice(3, 9)];
    });
    this.setState({ newData1: tempData1, newData2: tempData2 });
  };

  componentDidMount() {
    this.handleProcessData();
  }

  render() {
    const { newData1, newData2 } = this.state;
    return (
      <div className="data-container">
        <h3>new_data1 结果：</h3>
        <pre>{JSON.stringify(newData1, null, 2)}</pre>
        <h3>new_data2 结果：</h3>
        <pre>{JSON.stringify(newData2, null, 2)}</pre>
      </div>
    );
  }
}

export default DataProcessor;

内容的提问来源于stack exchange，提问作者Younho Kim