JavaScript如何将数组重复扩展至指定长度？

咱们先逐个拆解你的方法是否能达到预期效果：

1. Immutable版本的resize方法 #

这个方法完全可行：

• 它创建了指定长度的新数组，通过i % this.length循环取原数组元素填充，针对你的测试用例[1,2,3].resize(7)，确实会返回[1,2,3,1,2,3,1]，逻辑完全正确。
• 因为返回的是新数组，不会修改原数组，符合“Immutable（不可变）”的设计初衷，适合需要保留原数组的场景。

不过要注意一个边界情况：如果原数组是空数组，i % this.length会触发Division by zero错误，建议加个判断处理空数组：

// 优化后的Immutable版本
Array.prototype.resize = function(size) {
  if (this.length === 0) return Array(size).fill(undefined); // 或自定义默认值
  const array = Array(size);
  for(let i = 0; i < size; i++) {
    array[i] = this[i%this.length];
  }
  return array;
}

2. Mutable版本的resize方法 #

这个方法同样可行：

• 它先把原数组副本存在array变量里（避免后续修改this.length影响原数据），再将原数组长度设为目标值，最后用副本元素循环填充原数组，最终原数组会被修改为[1,2,3,1,2,3,1]，符合需求。
• 同样要注意空数组的边界问题，避免除以0的错误。

直接扩展Array.prototype是否妥当？ #

直接给Array.prototype加方法确实存在几个潜在问题：

- 可枚举性导致的遍历bug #

默认情况下，给原型添加的属性是可枚举的，用for...in循环遍历数组时，会把resize方法也当成数组的“键”遍历出来：

const arr = [1,2,3];
for (let key in arr) {
  console.log(key); // 会输出：0, 1, 2, resize
}

如果你的代码或依赖的第三方库用for...in遍历数组元素，就会出现意想不到的问题。

- 命名冲突风险 #

如果未来ECMAScript标准新增了Array.prototype.resize方法，或者你引入的其他库也加了同名方法，就会发生冲突——要么你的方法覆盖标准/库方法，要么被覆盖，导致代码行为异常。

- 跨环境原型链问题 #

在跨iframe的场景下，不同iframe的Array构造函数是独立的，原型链不共享，你的resize方法可能无法在其他iframe的数组上使用（这个场景相对少见，但也是潜在隐患）。

更好的替代方案 #

方案1：使用独立工具函数（推荐） #

完全避免原型扩展的问题，写一个独立函数：

// Immutable工具函数
function resizeArray(arr, size) {
  if (arr.length === 0) return Array(size).fill(undefined);
  const result = Array(size);
  for (let i = 0; i < size; i++) {
    result[i] = arr[i % arr.length];
  }
  return result;
}

// 使用示例
const original = [1,2,3];
const resized = resizeArray(original, 7);
console.log(resized); // [1,2,3,1,2,3,1]
console.log(original); // 原数组保持不变：[1,2,3]

方案2：用Object.defineProperty定义不可枚举的原型方法 #

如果一定要给Array原型加方法，可以用Object.defineProperty把方法设为不可枚举，避免for...in的问题：

// Immutable版本的不可枚举原型方法
Object.defineProperty(Array.prototype, 'resize', {
  value: function(size) {
    if (this.length === 0) return Array(size).fill(undefined);
    const array = Array(size);
    for(let i = 0; i < size; i++) {
      array[i] = this[i%this.length];
    }
    return array;
  },
  enumerable: false, // 关键：设为不可枚举
  writable: true,
  configurable: true
});

这样for...in遍历数组时就不会出现resize方法，同时保留了原型方法的调用方式。

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