JavaScript如何实现多数组整体遍历且自动同步原数组变更？

你之前使用concat合并数组的方式无法同步变更，是因为concat会生成一个全新的独立数组，仅拷贝原数组的当前元素值，后续原数组的修改不会影响这个已经生成的新数组。以下是不需要每次变更后重新合并的实现方案：

方案1：生成器函数（最轻量实现） #

通过生成器动态迭代所有原数组，每次遍历都是实时读取原数组的最新内容：

// 定义多数组拼接生成器
function* concatArrays(...arrays) {
  for (const arr of arrays) {
    yield* arr;
  }
}

// 业务代码
const list_1 = [1, 2];
const list_2 = [3, 4];

list_2.push(5);

// 直接遍历即可拿到最新的合并内容
for (const item of concatArrays(list_1, list_2)) {
  console.log(item);
}
// 输出：1、2、3、4、5

方案2：封装forEach工具函数（适配常用遍历习惯） #

如果习惯用forEach方法遍历，可以直接封装对应的工具函数：

function forEachCombined(arrays, callback) {
  arrays.forEach(arr => arr.forEach(callback));
}

// 使用示例
const list_1 = [1, 2];
const list_2 = [3, 4];
list_2.push(5);

forEachCombined([list_1, list_2], item => {
  console.log(item);
});
// 输出：1、2、3、4、5

方案3：封装组合数组类（接近原生数组使用体验） #

如果需要更接近原生数组的使用体验，支持for...of、forEach、map等常用方法，可以封装一个专用类：

class CombinedArray {
  // 存储原数组引用
  #sourceArrays;
  constructor(...sourceArrays) {
    this.#sourceArrays = sourceArrays;
  }

  // 实现迭代器接口，支持for...of遍历
  *[Symbol.iterator]() {
    for (const arr of this.#sourceArrays) {
      yield* arr;
    }
  }

  // 实现forEach方法
  forEach(callback) {
    let index = 0;
    for (const arr of this.#sourceArrays) {
      for (const item of arr) {
        callback(item, index, this);
        index++;
      }
    }
  }

  // 可按需扩展map、filter等其他数组方法
  map(callback) {
    const result = [];
    this.forEach((item, index) => {
      result.push(callback(item, index, this));
    });
    return result;
  }
}

// 使用示例
const list_1 = [1, 2];
const list_2 = [3, 4];
const list_3 = new CombinedArray(list_1, list_2);

list_2.push(5);
list_3.forEach(item => console.log(item));
// 输出：1、2、3、4、5

核心逻辑说明 #

以上所有方案都没有提前生成静态的合并数组，每次遍历操作都直接访问原数组的最新内容，所以任意原数组发生增删改操作时，遍历结果都会自动同步更新，完全不需要每次变更后手动重新合并赋值。

内容的提问来源于stack exchange，提问作者Grape Dragon