web-dev-qa-db-ja.com

JavaScriptの循環バッファー

誰かがJavaScriptで循環バッファをすでに実装していますか?ポインターなしでそれをどのように行いますか?

36
user191800

奇妙な偶然、私は今日、以前に書いたばかりです!私はあなたの要件が正確に何であるかわかりませんが、これは役に立つかもしれません。

無制限の長さの配列のようなインターフェイスを提供しますが、古いアイテムを「忘れて」しまいます。

// 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= {};
31
bobince
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);},
21
Torsten Becker

他の多くの人と同様に、私は 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はデフォルトの引数をサポートします(バッファーにプッシュされた最後の項目を返します)
  • getは負のインデックスをサポートします(右から数えます)
  • prevはバッファを1つ戻し、そこにあるものを返します(削除せずにポップするなど)
  • next prevを元に戻します(バッファーを前方に移動して戻します)

これを使用してコマンド履歴を保存し、prevメソッドとnextメソッドを使用してアプリ内をめくることができます。

6

これは、使用できるコードの簡単なモックアップです(おそらく機能しておらず、バグがありますが、実行方法を示しています)。

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());

もちろん、内部的に配列を使用し、現在のアイテムインデックスの値を保持し、それを移動するクラスで、配列を使用して実装することもできます。

4
Robert Koritnik

私はここで見つけることができるTrevor Norrisの実装を個人的に使用しています: https://github.com/trevnorris/cbuffer

そして私はそれにとても満足しています:-)

3

短くて甘い:

// 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
2
Oliver Heard

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
1
Mr. Flibble

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);

出力:

円形[4、3、2、1]

この配列に別の要素を追加しようとすると、例えば:

addElementToQueue(5);

出力:

円形[5、4、3、2]

1
Puneet

私は本当に 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);
1
soderlind

ほぼ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)};`);
1
Ivan Hristov

私はより単純なアプローチを好む。これはIMOの3つのライナーである必要があります。

何かのようなもの

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));
0
John Haugeland

たくさんの答えがありますが、次の機能的な単純なアプローチのようなものは見当たりません...(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

編集する

私が今見るこの特定の質問への答えではありません、それは読み取り位置を提供しないためです... :)

0
Johan t Hart

私はパフォーマンスチェックを何もしていませんでしたが、私の理解では、シーケンシャル配列アクセスはリンクリストよりも高速であるはずです。また、複数の実装が(少なくとも)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;
    }
}
0
Lu4

恥知らずなセルフプラグ:

回転するnode.jsバッファーを探している場合は、ここにあるものを書きました: http://npmjs.org/packages/pivot-buffer

ドキュメントは現在不足していますが、RotatingBuffer#Pushを使用すると、現在のバッファーにバッファーを追加して、新しい長さがコンストラクターで指定された長さよりも長い場合に前のデータを回転させることができます。

0
Yotam Ofek

オブジェクトを使用するだけでこれを実行できるはずです。このようなもの:

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;

これで、各リンクの値プロパティに値を格納するだけです。

0

これが私の見解です。具体的には、これは循環/リングスライドバッファの非常に単純なオブジェクト実装です。

少し注意。人々がそれを「円形」、「リング」、「キュー」などの類似した名前で呼ぶという事実にもかかわらず、それらは異なることを意味する可能性があるため、明確にする価値があります。

  1. リング/循環キュー。頭に要素を追加し、最後から切り取ることができます。最小サイズは0、最大サイズは基本となる配列のサイズです。キューは基になる配列をラップします。

  2. 同じこと、キュー、FIFO、先入れ先出しですが、可変(不定)最大サイズで、標準のPush()およびunshift()配列メソッドを使用して実装されます。要素を追加するには、それを配列にPush()し、要素を消費するには、それをunshift()します。

  3. 一定サイズのスライディングバッファー。新しい要素がヘッドに追加され(右)、バッファーがスライドして戻り(左)、左端の余分な要素が自動的に失われます。概念的にはisスライディングバッファです。たまたま、循環/リングバッファとして最も効率的に実装されます。

これは(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 + " ";
});

そして、2つのバッファーが並行して実行される完全な機能例:

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>

お役に立てれば幸いです。

0
Leonid Titov

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;
}
0
Uncle Leo

シンプルで効率的な solution を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"]);
});
0
Muxa

他の人が示唆しているように、1つのアプローチはリンクリストを使用することです。別の手法は、単純な配列をバッファーとして使用し、その配列へのインデックスを介して読み取り位置と書き込み位置を追跡することです。

0
user191817