JavaScript数组长度问题：能否限制空数组的最大元素个数？

当然可以实现啦！不过JavaScript原生数组本身没有内置的「最大元素数量限制」，但我们可以通过几种简单的方式自己搞定这个需求，我给你详细说说：

方法一：push前手动检查长度（简单直接） #

这是最直观的方式，每次往数组里加元素前，先判断当前长度有没有达到上限，没到再push。如果是循环填充的话，还可以提前break终止循环，节省性能：

const maxLength = 10;
const emptyArray = [];

for (let i = 0; i < 50; i++) {
  if (emptyArray.length < maxLength) {
    emptyArray.push(i);
  } else {
    break; // 已经填满了，直接跳出循环
  }
}

console.log(emptyArray.length); // 输出 10
console.log(emptyArray); // 输出 [0,1,2,3,4,5,6,7,8,9]

这种方法适合一次性填充数组的场景，后续如果还要往数组里加元素，每次调用push前加个判断就行，成本很低。

方法二：用Proxy创建自动限制的数组（灵活全面） #

如果希望不管用什么方式（比如push、unshift、直接通过索引赋值arr[10] = 10）都不会超过最大长度，可以用ES6的Proxy来拦截数组的修改操作，自动维护长度限制：

function createLimitedArray(maxLength) {
  return new Proxy([], {
    set(target, prop, value) {
      // 拦截length属性的修改，强制不超过最大值
      if (prop === 'length') {
        target.length = Math.min(value, maxLength);
        return true;
      }
      // 拦截索引赋值，不允许给超过最大长度的索引赋值
      const index = parseInt(prop);
      if (!isNaN(index) && index >= maxLength) {
        return false;
      }
      // 先赋值，再检查长度，超过就截断
      target[prop] = value;
      if (target.length > maxLength) {
        target.length = maxLength;
      }
      return true;
    }
  });
}

const limitedArray = createLimitedArray(10);
for (let i = 0; i < 50; i++) {
  limitedArray.push(i);
}

console.log(limitedArray.length); // 输出 10
console.log(Array.from(limitedArray)); // 输出 [0,1,2,3,4,5,6,7,8,9]

这种方式一劳永逸，不管后续怎么操作这个数组，都不会突破长度限制，适合需要长期维护这个数组的场景。

方法三：自定义LimitedArray类（面向对象，可复用） #

如果需要多次创建这种带长度限制的数组，可以封装一个继承自Array的自定义类，重写push、unshift等添加元素的方法，让它们自动遵守长度规则：

class LimitedArray extends Array {
  constructor(maxLength) {
    super();
    this.maxLength = maxLength;
  }

  push(...items) {
    // 计算还能加多少个元素
    const availableSlots = this.maxLength - this.length;
    if (availableSlots <= 0) return this.length;
    // 只取能放下的元素
    const itemsToAdd = items.slice(0, availableSlots);
    super.push(...itemsToAdd);
    return this.length;
  }

  unshift(...items) {
    const availableSlots = this.maxLength - this.length;
    if (availableSlots <= 0) return this.length;
    // unshift是往开头加，所以从数组末尾取对应的数量，保证不超限
    const itemsToAdd = items.slice(-availableSlots);
    super.unshift(...itemsToAdd);
    return this.length;
  }
}

const myArray = new LimitedArray(10);
for (let i = 0; i < 50; i++) {
  myArray.push(i);
}

console.log(myArray.length); // 输出 10
console.log(myArray); // 输出 [0,1,2,3,4,5,6,7,8,9]

这种方式很适合面向对象的项目，可以根据需求重写更多数组方法（比如splice），让这个限制数组的行为更符合你的预期。

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