JavaScript：如何高效实现固定大小数组的元素进出操作？

Great question! Managing a fixed-size cache that evicts the oldest element when full is a super common task, and the performance pitfalls of basic array methods are easy to overlook. Let's break this down thoroughly.

The Basic (But Flawed) Approaches #

First, let's recap the two straightforward implementations you mentioned, along with their core issues:

1. push() + shift() #

This approach adds new elements to the end of the array, and removes the oldest element from the front when the cache hits its limit. Here, cache[0] is always the oldest element.

2. unshift() + pop() #

This flips the order: new elements are added to the front, and the oldest element is removed from the end. Now cache[0] is the newest element.

Here's the basic example you shared for the first approach:

var cache = [], limit = 10000;
function cacheItem( item ) {
    var oldest = [];
    cache.push( item );
    while ( cache.length >= limit ) {
        oldest.push( cache.shift() );
    }
    return oldest;
}

The problem with both? shift() and unshift() are slow for large caches. Every time you call either method, the JavaScript engine has to reindex every element in the array to fill the gap or make space at the front. This gets exponentially worse as your cache size grows.

Your Questions, Answered #

1. Is there a more performant implementation? #

Absolutely! After diving into community solutions and running benchmarks, here are the top options:

Circular Buffer (Ring Buffer)

This is the fastest option for basic add/evict operations. Instead of shifting elements, you use a pointer to track the position of the oldest element. When the cache is full, you just overwrite the oldest position and update the pointer—no element movement at all.

The tradeoff? It's less intuitive to work with. If you need to add custom logic (like iterating through elements in insertion order), you'll have to handle offset calculations carefully. For most projects, using a well-tested existing implementation is better than building your own from scratch.

Linked List (Or LRU Map for Advanced Scenarios)

If your use case ever requires more than just basic add/evict—like checking if an element exists and bumping it to the "newest" position—a doubly linked list-based approach (think LRU cache) outperforms all other options by a wide margin. Even for simple fixed-size caches, it's a robust, high-performance choice with great extensibility.

Honorable Mention: unshift() + pop() (The Intuitive Middle Ground)

This approach is surprisingly performant for most everyday cases. It's way more intuitive than a circular buffer, and only suffers performance hits in extreme scenarios (like cache sizes in the tens of thousands with constant writes).

Avoid copyWithin() Entirely

The copyWithin() approach is a non-starter. Benchmarks show it has unacceptable latency, and it doesn't support older browsers like IE. Save yourself the headache and skip this one.

2. If the two basic methods are the only simple options, what are their pros and cons? #

Let's break them down clearly:

push() + shift()

• Pros: Extremely intuitive—element order matches insertion sequence exactly, so cache[0] is always the oldest element. Dead simple to write and debug.
• Cons: Terrible performance with large caches. Every shift() triggers a full array reindex, which gets slow quickly as your cache limit increases.

unshift() + pop()

• Pros: Intuitive if you want the newest element at the front of the array (cache[0]). Still very easy to implement.
• Cons: Same performance flaw as the first approach—unshift() requires reindexing all elements, leading to slowdowns with large cache sizes.

Final Recommendations #

Pick your approach based on your needs:

• Raw performance for basic add/evict: Use a circular buffer (go with a pre-built implementation to avoid offset bugs).
• Extensibility (LRU, element existence checks): Use a doubly linked list (or adapt JavaScript's built-in Map—which preserves insertion order—for simpler cases).
• Quick, simple implementation (performance isn't critical): Stick with push() + shift() or unshift() + pop()—they're easy to maintain and get the job done for small caches.
• Avoid copyWithin(): It's slow and has compatibility issues.

Content sourced from Stack Exchange, question by Marcus Hughes