JavaScript 中的循环缓冲区

Question

有人已经在 J​​avaScript 中实现了循环缓冲区吗？如果没有指针，您将如何做到这一点？

Answer 1

奇怪的巧合，我今天早些时候刚刚写了一篇！我不知道您的具体要求是什么，但这可能有用。

它提供了一个类似于无限长度数组的界面，但“忘记”了旧项目：

// Circular buffer storage. Externally-apparent 'length' increases indefinitely
// while any items with indexes below length-n will be forgotten (undefined
// will be returned if you try to get them, trying to set is an exception).
// n represents the initial length of the array, not a maximum
function CircularBuffer(n) {
    this._array= new Array(n);
    this.length= 0;
}
CircularBuffer.prototype.toString= function() {
    return '[object CircularBuffer('+this._array.length+') length '+this.length+']';
};
CircularBuffer.prototype.get= function(i) {
    if (i<0 || i<this.length-this._array.length)
        return undefined;
    return this._array[i%this._array.length];
};
CircularBuffer.prototype.set= function(i, v) {
    if (i<0 || i<this.length-this._array.length)
        throw CircularBuffer.IndexError;
    while (i>this.length) {
        this._array[this.length%this._array.length]= undefined;
        this.length++;
    }
    this._array[i%this._array.length]= v;
    if (i==this.length)
        this.length++;
};
CircularBuffer.IndexError= {};

Answer 2

var createRingBuffer = function(length){

  var pointer = 0, buffer = []; 

  return {
    get  : function(key){return buffer[key];},
    push : function(item){
      buffer[pointer] = item;
      pointer = (length + pointer +1) % length;
    }
  };
};

更新：如果您仅用数字填充缓冲区，这里有一些单行插件：

min  : function(){return Math.min.apply(Math, buffer);},
sum  : function(){return buffer.reduce(function(a, b){ return a + b; }, 0);},

Answer 3

和其他许多人一样，我喜欢 noiv 的解决方案，但我想要一个更好的 API：

var createRingBuffer = function(length){
  /* https://stackoverflow.com/a/4774081 */
  var pointer = 0, buffer = []; 

  return {
    get  : function(key){
        if (key < 0){
            return buffer[pointer+key];
        } else if (key === false){
            return buffer[pointer - 1];
        } else{
            return buffer[key];
        }
    },
    push : function(item){
      buffer[pointer] = item;
      pointer = (pointer + 1) % length;
      return item;
    },
    prev : function(){
        var tmp_pointer = (pointer - 1) % length;
        if (buffer[tmp_pointer]){
            pointer = tmp_pointer;
            return buffer[pointer];
        }
    },
    next : function(){
        if (buffer[pointer]){
            pointer = (pointer + 1) % length;
            return buffer[pointer];
        }
    }
  };
};

对原始版本的改进：

• get< /code> 支持默认参数（返回推送到缓冲区的最后一项）
• get 支持负索引（从右开始计数）
• prev 将缓冲区向后移动一个并返回其中的内容（例如弹出而无需删除）
• next 撤消上一个（向前移动缓冲区并返回它）

我用它来存储命令历史记录，然后我可以使用其 prev 和 在应用程序中翻阅该命令历史记录>next 方法，当它们无处可去时，它们很好地返回未定义。

Answer 4

差不多 10 年后，一个使用 JavaScript ES6 的答案：

    class CircularBuffer {
      constructor(bufferLength) {
        this.buffer = [];
        this.pointer = 0;
        this.bufferLength = bufferLength;
      }
      
      push(element) {
        if(this.buffer.length === this.bufferLength) {
           this.buffer[this.pointer] = element;
        } else {
           this.buffer.push(element);
        }
        this.pointer = (this.pointer + 1) % this.bufferLength;
      }
    
      get(i) {
        return this.buffer[i];
      }
      
      //Gets the ith element before last one 
      getLast(i) {
        return this.buffer[this.pointer+this.bufferLength-1-i];
      }
    
    }

//To use it:

let circularBuffer = new CircularBuffer(3);
circularBuffer.push('a');
circularBuffer.push('b');
circularBuffer.push('c');
// should print a,b,c
console.log(`0 element: ${circularBuffer.get(0)}; 1 element: ${circularBuffer.get(1)}; 2 element: ${circularBuffer.get(2)};`);

console.log('Last element: '+circularBuffer.getLast(0)); // should print 'c'

circularBuffer.push('d');

// should print d,b,c
console.log(`0 element: ${circularBuffer.get(0)}; 1 element: ${circularBuffer.get(1)}; 2 element: ${circularBuffer.get(2)};`);

Answer 5

这是您可以使用的代码的快速模型（它可能不起作用并且存在错误，但它显示了它可以完成的方式）：

var CircularQueueItem = function(value, next, back) {
    this.next = next;
    this.value = value;
    this.back = back;
    return this;
};

var CircularQueue = function(queueLength){
    /// <summary>Creates a circular queue of specified length</summary>
    /// <param name="queueLength" type="int">Length of the circular queue</type>
    this._current = new CircularQueueItem(undefined, undefined, undefined);
    var item = this._current;
    for(var i = 0; i < queueLength - 1; i++)
    {
        item.next = new CircularQueueItem(undefined, undefined, item);
        item = item.next;
    }
    item.next = this._current;
    this._current.back = item;
}

CircularQueue.prototype.push = function(value){
    /// <summary>Pushes a value/object into the circular queue</summary>
    /// <param name="value">Any value/object that should be stored into the queue</param>
    this._current.value = value;
    this._current = this._current.next;
};

CircularQueue.prototype.pop = function(){
    /// <summary>Gets the last pushed value/object from the circular queue</summary>
    /// <returns>Returns the last pushed value/object from the circular queue</returns>
    this._current = this._current.back;
    return this._current.value;
};

使用这个对象就像：

var queue = new CircularQueue(10); // a circular queue with 10 items
queue.push(10);
queue.push(20);
alert(queue.pop());
alert(queue.pop());

您当然可以使用数组来实现它以及一个在内部使用数组并保留当前项目索引值并移动该索引的类。

Answer 6

我个人使用 Trevor Norris 的实现，您可以在这里找到：
https://github.com/trevnorris/cbuffer

我对此非常满意:-)

Answer 7

简短而甜蜜：

// IMPLEMENTATION
function CircularArray(maxLength) {
  this.maxLength = maxLength;
}

CircularArray.prototype = Object.create(Array.prototype);

CircularArray.prototype.push = function(element) {
  Array.prototype.push.call(this, element);
  while (this.length > this.maxLength) {
    this.shift();
  }
}

// USAGE
var ca = new CircularArray(2);
var i;

for (i = 0; i < 100; i++) {
  ca.push(i);
}

console.log(ca[0]);
console.log(ca[1]);
console.log("Length: " + ca.length);

输出：

98
99
Length: 2

Answer 8

这是我的看法。具体来说，这是一个非常简单的圆形/环形滑动缓冲区的对象实现。

一点旁注。尽管人们称其为相似的名称，“圆形”、“环”、“队列”，但还是值得澄清，因为它们可能意味着不同的东西。

1. 环形/循环队列。您可以将元素添加到头部，然后从末尾裁剪它们。最小大小为 0，最大大小是底层数组的大小。队列环绕底层数组。

2. 同样的东西，队列，先进先出，先进先出，但具有可变（不确定）最大大小，并使用标准 push() 和 unshift() 数组方法实现。要添加元素，您只需将其推送（）到数组中，并使用 unshift（） 它即可使用元素，就是这样，相当标准的函数，无需发明任何东西。

3. 大小恒定的滑动缓冲区，新元素添加到头部（右），缓冲区向后滑动（左），最左边多余的元素会自动丢失。从概念上讲，它是一个滑动缓冲区，它恰好作为循环/环形缓冲区实现最有效。

这是第(3)种的实现。这可以用作并且主要用作数据可视化小部件的后端，例如用于实时监控的滑动线图。

对象：

function make_CRS_Buffer(size) {
    return {
        A:  [],
        Ai: 0,
        Asz:    size,
        add:    function(value) {
            this.A[ this.Ai ] = value;
            this.Ai = (this.Ai + 1) % this.Asz;
        },
        forall: function(callback) {
            var mAi = this.A.length < this.Asz ? 0 : this.Ai;
            for (var i = 0; i < this.A.length; i++) {
                callback(this.A[ (mAi + i) % this.Asz ]);
            }

        }
    };
}

用法：

var buff1 = make_CRS_Buffer(5);

buff1.add(cnt);

buff1.forall(value => {
    b1.innerHTML += value + " ";
});

并且，一个完整的功能示例，两个缓冲区并行运行：

var b1 = document.getElementById("b1");
var b2 = document.getElementById("b2");

var cnt = 0;

var buff1 = make_CRS_Buffer(5);
var buff2 = make_CRS_Buffer(12);


function add() {
	buff1.add(cnt);
	buff2.add(cnt);
	cnt ++;
	
	b1.innerHTML = "";
	buff1.forall(value => {
		b1.innerHTML += value + " ";
	});
	
	b2.innerHTML = "";
	buff2.forall(value => {
		b2.innerHTML += value + " ";
	});
}

function make_CRS_Buffer(size) {
	return {
		A:	[],
		Ai:	0,
		Asz:	size,
		add:	function(value) {
			this.A[ this.Ai ] = value;
			this.Ai = (this.Ai + 1) % this.Asz;
		},
		forall:	function(callback) {
			var mAi = this.A.length < this.Asz ? 0 : this.Ai;
			for (var i = 0; i < this.A.length; i++) {
				callback(this.A[ (mAi + i) % this.Asz ]);
			}
		
		}
	};
}

<!DOCTYPE html>
<html>
<body>

<h1>Circular/Ring Sliding Buffer</h1>

<p><i>(c) 2020, Leonid Titov</i>

<div id="b1" style="
	background-color: hsl(0,0%,80%);
	padding: 5px;
">empty</div>

<div id="b2" style="
	background-color: hsl(0,0%,80%);
	padding: 5px;
">empty</div>

<br>
<button onclick="add()">Add one more</button>

</body>
</html>

希望它会有用。

Answer 9

我们可以不用JavaScript来实现循环队列，而是使用数组的一些内置函数来实现循环队列。

例子：
假设我们需要实现长度为4的循环队列。

var circular = new Array();
var maxLength = 4;
var addElementToQueue = function(element){
    if(circular.length == maxLength){
        circular.pop();
    }
    circular.unshift(element);
};
addElementToQueue(1);
addElementToQueue(2);
addElementToQueue(3);
addElementToQueue(4);

输出：

circular
[4, 3, 2, 1]

如果您尝试向此数组添加另一个元素，例如：

addElementToQueue(5);

输出：

circular
[5,4,3,2]

Answer 10

很多答案，但没有看到类似以下功能简单方法的东西...类似（ES6）的东西：

const circularAdd = maxSize => (queue, newItem) =>
  queue.concat([newItem]).slice(Math.max(0, queue.length + 1 - maxSize));

这可以用作减速器。例如，在 scan 中的可观察流中。

// Suppose newItem$ is a simple new value emitter
const itemBuffer$ = newItem$.pipe(scan(circularAdd(100), []));
// itemBuffer$ will now emit arrays with max 100 items, where the new item is last

编辑

并不是我现在看到的这个特定问题的真正答案，因为它不提供阅读位置...:)

Answer 11

我无法让 Robert Koritnik 的代码工作，所以我将其编辑为以下似乎有效的内容：

    var CircularQueueItem = function (value, next, back) {
        this.next = next;
        this.value = value;
        this.back = back;
        return this;
    };

    var CircularQueue = function (queueLength) {
        /// <summary>Creates a circular queue of specified length</summary>
        /// <param name="queueLength" type="int">Length of the circular queue</type>
        this._current = new CircularQueueItem(undefined, undefined, undefined);
        var item = this._current;
        for (var i = 0; i < queueLength - 1; i++) {
            item.next = new CircularQueueItem(undefined, undefined, item);
            item = item.next;
        }
        item.next = this._current;
        this._current.back = item;

        this.push = function (value) {
            /// <summary>Pushes a value/object into the circular queue</summary>
            /// <param name="value">Any value/object that should be stored into the queue</param>
            this._current.value = value;
            this._current = this._current.next;
        };
        this.pop = function () {
            /// <summary>Gets the last pushed value/object from the circular queue</summary>
            /// <returns>Returns the last pushed value/object from the circular queue</returns>
            this._current = this._current.back;
            return this._current.value;
        };
        return this;
    }

使用：

    var queue = new CircularQueue(3); // a circular queue with 3 items
    queue.push("a");
    queue.push("b");
    queue.push("c");
    queue.push("d");
    alert(queue.pop()); // d
    alert(queue.pop()); // c
    alert(queue.pop()); // b
    alert(queue.pop()); // d
    alert(queue.pop()); // c

Answer 12

我建议使用 TypeScript 循环数组实现： https://gist.github.com/jerome-benoit /c251bdf872473d1f86ea3a8b90063c90。
它很精简，API 与标准数组对象相同。

Answer 13

一种方法是像其他人建议的那样使用链表。另一种技术是使用一个简单的数组作为缓冲区，并通过该数组的索引来跟踪读取和写入位置。

Answer 14

我认为你应该能够通过使用对象来做到这一点。像这样的事情：

var link = function(next, value) {
    this.next = next;
    this.value = value;
};

var last = new link();
var second = link(last);
var first = link(second);
last.next = first;

现在您只需将值存储在每个链接的 value 属性中。

Answer 15

我真的很喜欢 noiv11 解决这个问题，并且根据我的需要，我添加了一个额外的属性“buffer”来返回缓冲区：

var createRingBuffer = function(length){

  var pointer = 0, buffer = []; 

  return {
    get  : function(key){return buffer[key];},
    push : function(item){
      buffer[pointer] = item;
      pointer = (length + pointer +1) % length;
    },
    buffer : buffer
  };
};

// sample use
var rbuffer = createRingBuffer(3);
rbuffer.push('a');
rbuffer.push('b');
rbuffer.push('c');
alert(rbuffer.buffer.toString());
rbuffer.push('d');
alert(rbuffer.buffer.toString());
var el = rbuffer.get(0);
alert(el);

Answer 16

感谢 noiv 提供的简单高效的解决方案。我还需要能够像 PerS 所做的 一样访问缓冲区，但我想按顺序获取项目额外。所以这就是我最终得到的结果：

function buffer(capacity) {
    if (!(capacity > 0)) {
        throw new Error();
    }

    var pointer = 0, buffer = [];

    var publicObj = {
        get: function (key) {
            if (key === undefined) {
                // return all items in the order they were added
                if (pointer == 0 || buffer.length < capacity) {
                    // the buffer as it is now is in order
                    return buffer;
                }
                // split and join the two parts so the result is in order
                return buffer.slice(pointer).concat(buffer.slice(0, pointer));
            }
            return buffer[key];
        },
        push: function (item) {
            buffer[pointer] = item;
            pointer = (capacity + pointer + 1) % capacity;
            // update public length field
            publicObj.length = buffer.length;
        },
        capacity: capacity,
        length: 0
    };

    return publicObj;
}

这是测试套件：

QUnit.module("buffer");

QUnit.test("constructor", function () {
    QUnit.expect(4);

    QUnit.equal(buffer(1).capacity, 1, "minimum length of 1 is allowed");
    QUnit.equal(buffer(10).capacity, 10);

    QUnit.throws(
        function () {
            buffer(-1);
        },
        Error,
        "must throuw exception on negative length"
    );

    QUnit.throws(
        function () {
            buffer(0);
        },
        Error,
        "must throw exception on zero length"
    );
});

QUnit.test("push", function () {
    QUnit.expect(5);

    var b = buffer(5);
    QUnit.equal(b.length, 0);
    b.push("1");
    QUnit.equal(b.length, 1);
    b.push("2");
    b.push("3");
    b.push("4");
    b.push("5");
    QUnit.equal(b.length, 5);
    b.push("6");
    QUnit.equal(b.length, 5);
    b.push("7");
    b.push("8");
    QUnit.equal(b.length, 5);
});

QUnit.test("get(key)", function () {
    QUnit.expect(8);

    var b = buffer(3);
    QUnit.equal(b.get(0), undefined);
    b.push("a");
    QUnit.equal(b.get(0), "a");
    b.push("b");
    QUnit.equal(b.get(1), "b");
    b.push("c");
    QUnit.equal(b.get(2), "c");
    b.push("d");
    QUnit.equal(b.get(0), "d");

    b = buffer(1);
    b.push("1");
    QUnit.equal(b.get(0), "1");
    b.push("2");
    QUnit.equal(b.get(0), "2");
    QUnit.equal(b.length, 1);
});

QUnit.test("get()", function () {
    QUnit.expect(7);

    var b = buffer(3);
    QUnit.deepEqual(b.get(), []);
    b.push("a");
    QUnit.deepEqual(b.get(), ["a"]);
    b.push("b");
    QUnit.deepEqual(b.get(), ["a", "b"]);
    b.push("c");
    QUnit.deepEqual(b.get(), ["a", "b", "c"]);
    b.push("d");
    QUnit.deepEqual(b.get(), ["b", "c", "d"]);
    b.push("e");
    QUnit.deepEqual(b.get(), ["c", "d", "e"]);
    b.push("f");
    QUnit.deepEqual(b.get(), ["d", "e", "f"]);
});

Answer 17

如果您现在 Array.prototype.length 是什么，那就非常简单了：

function CircularBuffer(size) {
  Array.call(this,size); //superclass
  this.length = 0; //current index
  this.size = size; //buffer size
};

CircularBuffer.prototype = Object.create(Array.prototype);
CircularBuffer.prototype.constructor = CircularBuffer;
CircularBuffer.prototype.constructor.name = "CircularBuffer";

CircularBuffer.prototype.push = function push(elem){
  Array.prototype.push.call(this,elem);
  if (this.length >= this.size) this.length = 0;
  return this.length;
}

CircularBuffer.prototype.pop = function pop(){
  var r = this[this.length];
  if (this.length <= 0) this.length = this.size;  
  this.length--;
  return r;
}

Answer 18

我更喜欢更简单的方法。在我看来，这应该是三行。

像这样

const makeRing = sz                   => ({ sz, buf: new Array(size) }),
      at       = ({sz, buf}, pos)     => buf[pos % sz],
      set      = ({sz, buf}, pos, to) => buf[pos % sz] = to;

你就可以

const ring = makeRing(10);

ring.buf.fill(1);
set(ring, 35, 'TWO!');

console.log(ring.buf);
console.log(at(ring, 65));

Answer 19

我没有进行任何性能检查，但根据我的理解，顺序数组访问应该比链表更快。我还注意到，多个实现都受到过时的基于 ES3（至少）原型的风格的困扰，这让我大吃一惊。而且它们都不支持动态大小增加，即“增长”。这就是我对这个实现的看法。请随意根据您的需要进行扩展：

export class Dequeue<T> {
    private buffer: T[];
    private head: number;
    private tail: number;
    private size: number;

    constructor(initialCapacity: number) {
        this.buffer = [];
        this.buffer.length = initialCapacity;
        this.head = this.tail = this.size = 0;
    }

    public enqueue(value: T): T {
        let next = this.head + 1;
        let buffer = this.buffer;
        let length = buffer.length;

        if (length <= next) {
            next -= length;
        }

        if (buffer.length <= this.size) {
            buffer.length += length;

            for (let index = next; index < length; index++) {
                buffer[index + length] = buffer[index];
            }
        }

        this.size++;
        buffer[this.head] = value;
        this.head = next;

        return value;
    }

    public dequeue(): T | undefined {
        if (this.size > 0) {
            this.size--;

            let buffer = this.buffer;
            let length = buffer.length;
            let value = buffer[this.tail];

            let next = this.tail + 1;

            if (length <= next) {
                next -= length;
            }

            this.tail = next;

            return value;
        } else {
            return undefined;
        }
    }

    public get length() {
        return this.size;
    }
}

为了防止在界面中传播 undefined 我可以建议以下版本：

export function Throw(message: string): never {
    throw new Error(message);
}

export class Dequeue<T> {
    private buffer: T[];
    private head: number;
    private tail: number;
    private size: number;

    constructor(initialCapacity: number) {
        this.buffer = [];
        this.buffer.length = initialCapacity;
        this.head = this.tail = this.size = 0;
    }

    public enqueue(value: T): T {
        let next = this.head + 1;
        let buffer = this.buffer;
        let length = buffer.length;

        if (length <= next) {
            next -= length;
        }

        if (buffer.length <= this.size) {
            buffer.length += length;

            for (let index = next; index < length; index++) {
                buffer[index + length] = buffer[index];
            }
        }

        this.size++;
        buffer[this.head] = value;
        this.head = next;

        return value;
    }

    public dequeue(defaultValueFactory: () => T = () => Throw('No elements to dequeue')): T {
        if (this.size > 0) {
            this.size--;

            let buffer = this.buffer;
            let length = buffer.length;
            let value = buffer[this.tail];

            let next = this.tail + 1;

            if (length <= next) {
                next -= length;
            }

            this.tail = next;

            return value;
        } else {
            return defaultValueFactory();
        }
    }

    public get length() {
        return this.size;
    }
}

Answer 20

  /**
    example: [1,2,3].bPush(-1,'a')   //[1,2,3,'a']
                    .bPush(0,'b')    //[1,2,3,'a']
                    .bPush(-1,'c')   //[1,2,3,'a','c']
                    .bPush(3,'e')    //['a','c','e']
    bufferSize zero or undefined does nothing; returns array as is
    bufferSize negative is same as push
    bufferSize > 0 creates a circular buffer appending newest & overwriting oldest
  */
  Array.prototype.bPush = function (bufferSize, newItem) {
    if (!bufferSize) return this;
    if (bufferSize > 0 && this.length >= bufferSize) {
      while( this.length >= bufferSize) this.shift();
    }
    this.push(newItem);
    return this;
  }

Answer 21

我已经通过 OpenAI 将我的 python 库移植到 JavaScript，它有点像 python 风格，但功能强大（支持 .slice、.extend、真正的 .pop，以及 python 风格 .remove(value)。使用 .append 而不是 .push）

class CircularList {
    /** https://stackoverflow.com/questions/4151320/efficient-circular-buffer/40784706#40784706 */
    constructor(size, data = []) {
        if (Array.isArray(size)) {
            this.size = size.length;
            this._data = [...size];
        } else {
            this.size = size;
            this._data = [...data].slice(-size);
        }
        this.end = this._data.length % this.size;
    }

    extend(data) {
        this._data.push(...data);
        this._data = this._data.slice(-this.size);
        this.end = this._data.length % this.size;
    }

    pop(index = -1) {
        /**
         * Remove and return item at index (default last).
         */
        if (this._data.length === 0) {
            throw new Error("pop from empty list");
        }

        const idx = (index + this.end) % this.size;
        const result = this._data.splice(idx, 1)[0];
        this.end = (this.end - 1 + this.size) % this.size;
        return result;
    }

    index(value) {
        try {
            let idx = this._data.indexOf(value);
            idx = (idx - this.end + this.size) % this.size;
            return idx;
        } catch {
            return -1;
        }
    }

    remove(value) {
        const idx = this.index(value);
        if (idx !== -1) {
            this.pop(idx);
        }
    }

    append(value) {
        /** Append an element */
        if (this._data.length === this.size) {
            this._data[this.end] = value;
        } else {
            this._data.splice(this.end, 0, value);
        }
        this.end = (this.end + 1) % this.size;
    }

    asArray() {
        return [...this._data.slice(this.end), ...this._data.slice(0, this.end)];
    }

    get(key = -1) {
        /** Get element by end, relative to the current end */
        let idx;
        key = key >>> 0;
        if (this._data.length === this.size) {
            idx = (key + this.end) % this.size;
        } else {
            idx = key % this._data.length;
        }
        return this._data[idx];
    }

    slice(...args) {
        const result = [];
        for (let i = 0; i < this._data.length; ++i) {
            result.push(this.get(i));
        }
        return Array.prototype.slice.apply(result, args);
    }

    toString() {
        /** Return string representation */
        return `Circular List: ${this.asArray().toString()} (${this._data.length} out of ${this.size} items)`;
    }
}

Answer 22

使用 ES6 类，您可以创建如下结构：

class CircularBuffer {
  constructor(size) {
    this.size = size;
    this.buffer = new Array(size);
    this.head = 0;
    this.tail = 0;
    this.length = 0;
  }

  isEmpty() {
    return this.length === 0;
  }

  isFull() {
    return this.length === this.size;
  }

  push(item) {
    if (this.isFull()) {
      this.head = (this.head + 1) % this.size; // Overwrite the oldest item
    }

    this.buffer[this.tail] = item;
    this.tail = (this.tail + 1) % this.size;
    this.length = Math.min(this.length + 1, this.size);
  }

  pop() {
    if (this.isEmpty()) {
      throw new Error("Buffer is empty");
    }

    const item = this.buffer[this.head];
    this.head = (this.head + 1) % this.size;
    this.length--;

    return item;
  }

  toArray() {
    const result = [];
    for (let i = 0; i < this.length; i++) {
      result.push(this.buffer[(this.head + i) % this.size]);
    }
    return result;
  }
}


// Example usage:
const buffer = new CircularBuffer(5);

buffer.push(1);
buffer.push(2);
buffer.push(3);

console.log(buffer.toArray()); // [1, 2, 3]

console.log(buffer.pop()); // 1
console.log(buffer.toArray()); // [2, 3]

buffer.push(4);
buffer.push(5);
buffer.push(6);

console.log(buffer.toArray()); // [2, 3, 4, 5, 6]

buffer.push(7);
buffer.push(8);
buffer.push(9);

console.log(buffer.toArray()); // [5, 6, 7, 8, 9]