Javascript observer or proxy without all changes going through proxy - javascript

I'm writing a subclass of arrays in Javascript to have better support for matrix operations (I know others exist, this is partially for me to re-teach myself linear algebra), and what I want is to have some properties that are reset whenever any values in the matrix are adjusted. Some calculations like the determinant are computationally intensive, and I'd like to be able to store them to avoid re-calculation, but then they need to be reset to null whenever any matrix elements are changed.
Essentially, it seems like what i want is the deprecated Array.observe(). And the replacement, proxies, seem like a lot of overhead for this one thing. As alluded to in some of the comments on Detecting Changes in a Javascript Array using the proxy object that were not directly addressed, I don't want to have to access my matrices only ever through proxies. I use a lot of handy [i][j] indexing and [mat[i], mat[j]] = [mat[j], mat[i]] in the code I've written so far.
class Matrix extends Array {
constructor() {
var args = [];
for (var i = 0; i < arguments.length; i++) {
if (Array.isArray(arguments[i])) {
args.push(new Matrix(...arguments[i]));
} else {
args.push(arguments[i]);
}
}
super(...args);
this._determinant = null;
}
determ(forceRecalculate = false) {
if (this._determinant === null || forceRecalculate) {
this.upperEchelon();
}
return this._determinant;
}
upperEchelon(reduced = false) {
//There's a lot of code here but in the process of doing this other thing
//you get 99% of the way to calculating the determinant so it does this
this._determinant = factor;
}
}
Basically, I want anything like mat[0][0] = 10 or mat.push([2,4,5]) that updates the values in the matrix to set mat._determinant = null. Or any equivalent method of flagging that it needs to be re-calculated next time it's asked for. I'm not opposed to using proxies necessarily if someone can help me figure out the implementation, I would just rather have this set-to-null-on-update property be inherent to my class functionality.
What I really want is a way to overload base methods like [] a la C# so the functions that do the updating would trigger this without changing syntax, but I've resigned myself to not having that in JS.

While a Proxy would work, it would also be pretty slow. A different approach would be for every method that needs to use the value of _determinant go through a different function first to check to see if the _determinant needs to be updated (and if so, updates it). This way, the expensive recalculation is not done every time the array changes, but only just in time for the result to be used. For example:
class Matrix extends Array {
constructor() {
var args = [];
for (var i = 0; i < arguments.length; i++) {
if (Array.isArray(arguments[i])) {
args.push(new Matrix(...arguments[i]));
} else {
args.push(arguments[i]);
}
}
super(...args);
this._determinant = null;
}
// next method is effectively a recursive deep join
// could also use toString if it doesn't interfere with anything else
getString() {
const itemsStr = this.map((item) => (
item instanceof Matrix
? item.getString()
: item
))
.join(',');
const result = '[' + itemsStr + ']';
return result;
}
getDeterm() {
const newString = this.getString();
if (newString !== this._lastString) {
this._lastString = newString;
this.upperEchelon();
}
return this._determinant;
}
upperEchelon() {
console.log('running upperEchelon');
this._determinant = Math.random();
}
}
const m = new Matrix([2, 3, 4], 5);
console.log(m.getDeterm());
// Not calculated again:
console.log(m.getDeterm());
// Mutation, next call of getDeterm will run upperEchelon:
m[0][0] = 1;
console.log(m.getDeterm());

Related

Performance optimizations for add, removeFirst, removeFirstN array operations

For my use case I've found that the shift/slice methods are stressing my CPU way too much, as the array grows in size. In theory the array could be as big as 86400 items, although usually it would much lower - around 10000 array elements.
I've tried to illustrate it with a simple example. Imagine this at a very large scale. It'll run decently up until a point, but generally it seems highly ineffective to remove the first (or first n) item(s) like this.
Hopefully somebody with more knowledge in "why that is", can fill out one or more of the 3 functions in the snippet below:
add()
removeFirst()
removeFirstN(n)
Immutability won't work here - or rather, since we're after the optimal performance, copying a growing and quite large datastructure (array in this case) definitely won't work.
Any good suggestions? :-)
let objArray = []
let maxCount = 10;
let i = 0;
function add(){
objArray.push({x: + new Date(), y: Math.floor(Math.random() * 10000) + 1});
console.log("add")
}
function removeFirst(){
objArray.shift();
console.log("removeFirst")
}
function removeFirstN(n){
objArray.splice(0,n)
console.log(`removeFirstN(${n})`)
}
// Every second and obj is added to the array
setInterval(function(){
if(objArray.length === maxCount){
removeFirst();
} else if(objArray.length > maxCount) { // this is possible since we're allowed to change maxCount
const diff = objArray.length+1 - maxCount;
removeFirstN(diff);
}
// Always add
add();
i++;
if(i === 15) {
maxCount--;
i = 0;
}
console.log(`length: ${[...objArray].length}`)
console.log([...objArray])
}, 1000)
Judging by the listed operations, you’re looking for a queue with constant-time enqueue and dequeue. When you use an array as a queue by moving all the elements for operations on one side, that operation instead takes time proportional to the number of elements in the array. An implementation based on a circular buffer or linked list (both satisfy the constant-time requirement) will be faster as the number of elements becomes larger.
Linked lists are simple enough to demonstrate in a post:
class LinkedQueue {
constructor() {
this.head = null;
this.tail = null;
}
enqueue(value) {
const node = {value, next: null};
if (this.tail === null) {
// Empty queue; make this the only node
this.tail = this.head = node;
} else {
// Make this the successor of the current last node,
// then make it the new last node
this.tail = this.tail.next = node;
}
}
dequeue() {
const result = this.head.value;
if (this.head === this.tail) {
// Last element remaining
this.head = this.tail = null;
} else {
// Remove the first element
this.head = this.head.next;
}
return result;
}
}
but for the best performance in practice, you’ll want to use a queue based on a circular buffer. double-ended-queue is one such npm package.

How do I change the Array in place when prototyping

I'm writing a custom sort function that I'm prototyping into Array. (PLEASE don't post answers explaining to me how I shouldn't bother prototyping into Array for whatever reason you feel prototyping into Array isn't a good idea).
so, my method looks like this:
//method
Array.prototype.mySort = function(memberName, ascOrDesc){
var labelRow = this.shift();
var ret = this.sort((function (a,b){
if(ascOrDesc > 0)
return (a[memberName] > b[memberName])?1:-1;
return (a[memberName] < b[memberName])?1:-1;
}));
ret.unshift(labelRow)
return ret;
}
Notice how this.shift() will affect the Array IN PLACE.
However, I'm not clear on how this is accomplished. If I wanted to write my own myShift method, at some point I'd need to say something to the effect of
this = this.myShift();
which is obviously illegal.
So, I'm trying to understand how shift() gets access to the array's members and is able to remove the first one in-place. And if I'm allowed to do something analogous, or if this is somehow baked in and not available to me to use.
You can access the array using this inside the method.
You can for example implement the shift method as:
Array.prototype.myShift = function() {
if (this.length == 0) return null;
var result = this[0];
for (var i = 1; i < this.length; i++) {
this[i-1] = this[i];
}
this.length--;
return result;
};
The problem is that you can't assign to this. This means you can't do things like this:
Array.prototype.myShift = function() {
this = this.slice(1);
};
This is because Array.prototype.slice returns a new array and does not modify the old array. Other methods, however, such as Array.prototype.splice, do modify the old array. So you can do something like this:
Array.prototype.myShift = function() {
return this.splice(0, 1)[0];
};
This will have exactly the same behaviour as the standard Array.prototype.shift method. It modifies the current array, so you can do this:
var labelRow = this.myShift();

Is this as fast as JS array copy can get without loop unrolling?

This is related to this question.
I have heard that the while pattern with a decrement and a greater than test is faster than any other loop pattern. Given that, is this the fastest possible array copy in js?
function arrayCopy(src,sstart,dst,dstart,length) {
length += sstart;
dstart += length;
while(--length >= sstart) {
dst[--dstart] = src[length];
}
}
Other test functions
function slowCopy(src,sstart,dst,dstart,length) {
for(var i = sstart; i < sstart+length;i+=1 ) {
dst[dstart++] = src[i];
}
}
function aCopy(src,sstart,dst,dstart,length) {
Array.prototype.splice.apply(dst,[dstart, length].concat(src.slice(sstart,sstart+length)));
}
Test Results http://jsperf.com/fastest-js-arraycopy
arrayCopy -
2,899
±5.27%
fastest
slowCopy - WINNER
2,977
±4.86%
fastest
aCopy -
2,810
±4.61%
fastest
I want to add some more of the suggested functions below to the jsPerf tests but none of them incorporate source start offset, destination start offset or length of copy. Anyway, I was somewhat surprised by these results which appear to be the opposite of what I expect
Who says you need a loop?
var myArrayCopy = JSON.parse(JSON.stringify(myArray));
This method makes a deep clone of the array. Here it is in a function:
function arrayCopy(src,sstart,dst,dstart,length) {
dst = JSON.parse(JSON.stringify(src));
}
Keep in mind the other variables (besides src and dst) are there just to maintain your original code structure in case you have pre-existing calls to this function. They won't be used and can be removed.
Slow Copy is, surprisingly, the winner. By a narrow margin:
function slowCopy(src,sstart,dst,dstart,length) {
for(var i = sstart; i < sstart+length;i+=1 ) {
dst[dstart++] = src[i];
}
}
I think this is the fastest way:
var original = [1, 2, 3];
var copy = original.slice(0);

Cleanest way to use multiple values in a complex routine?

See the following pseudocode snippet that approximates my situation:
function foo () {
for ( velocity=0; velocity<100; velocity++ ) {
root1 = computeRoot1();
root2 = computeRoot2();
// do a bunch of computation with root1
// if result of computation is undesirable, do computations again with root2
}
So, basically I want to do the computations in the body of the for loop with root1, and then root2 if root1's computation result is invalid.
My first instinct was the obvious approach, to wrap the computation in a help function, but I'm not sure this is the most clear approach. I'm trying for good collocation of information in my code, and a function call for code that will be executed at most twice (per iteration) defeats that goal without providing a great deal of conciseness to my code.
I was thinking perhaps a for loop like:
for ( root=root1; root1IsInvalid==true || bothRootsInvalid==true; root=root2 )
or a while with similar functionality. But I'm certainly open to other suggestions
As someone reading this code, which approach would make it the most readable and concise to you?
As an aside, I'm writing this particular function in JavaScript, but language-agnostic solutions would be awesome.
EDIT: clarified code snippet
You have several basic approaches:
Put the values in an array and use a for loop to run the same code on each item in the array, perhaps stopping the iterations when some condition is met.
Create a function that does the computation and then just write code that calls the function on the first one, then the second one and so on.
Create a while loop and repeat your code until some condition is met.
The first option is easier to extend to N items. The second option is perhaps simpler for just two items.
You can make the computation function be a local function (declared and used inside the function you are currently executing) so it doesn't add to the global namespace and your code remains more encapsulated.
I'm also not sure what you intend to be doing with this line:
root1, root2 = computeRoots();
But, it is only assigning the value to root2 and it looks like you probably want var in front of these to define them as local variables.
If eager evaluation is OK, you can collect your roots into an array and use roots.filter(isinvalid) to take out the invalid ones; then just use the first item in the resulting array.
If you need lazy evaluation, you can generalize this into a function that lazily evaluates a function over an array until a non-null result is found:
// call fn on items in arr until fn returns non-null
// returns [item, result]
// if result===false, no true value was returned
function firstNotNull(fn, arr) {
var i, length, item, result=null;
for (i = 0, length=arr.length; i < length; i++) {
item = arr[i];
result = fn(item);
if (result!==null) {
break;
}
}
return [item, result];
}
function rootComputations(root) {
var computationResult = null;
if (root==1) {
computationResult = 1;
}
return computationResult;
}
function computeRoots() {
return [0,1];
}
function foo() {
var velocity, roots, root, result, computations;
for (velocity = 0; velocity < 100; velocity++) {
roots = computeRoots();
computations = firstNotNull(rootComputations, roots);
console.log(computations);
root = computations[0];
result = computations[1];
}
}
foo();
You can generalize firstNotNull() even further:
// call fn on items in arr until cond(fn(item)) returns true
// returns [item, fn(item)], or null if unsatisfied
function firstSatisfying(cond, fn, arr) {
var i, length, item, fnitem, result=null;
for (i = 0, length=arr.length; i < length; i++) {
item = arr[i];
fnitem = fn(item);
if (cond(fnitem)) {
result = [item, fnitem];
break;
}
}
return result;
}
var firstNotNull = firstSatisfying.bind(null, function(item){return item!==null;});
You now have a generic function for taking the first of a list of things that satisfies any condition you want.
ECMAScript 5 added many methods which make eager functional application over arrays much easier, but Javascript doesn't have any native facilities for lazy evaluation. If this is something you think you'll be needing often, consider using stream.js, which provides a "stream" datatype with methods for partial application. Using stream.js, your logic would look like this:
// rootStream should be a function which returns a Stream
// It should construct a stream with the first root produced
// and a function that returns the remaining roots.
// Since I don't know how you get your roots, I'll use a stupid example:
function rootStream() {
return new Stream(0, function(){
return new Stream(1);
});
}
function isvalid(root) {
return root===1;
}
Stream.range(0,100)
.walk(function(v){
//v doesn't seem to be used?
var firstvalid = rootStream().filter(isvalid).head();
console.log(firstvalid);
});

How to lessen this comparing loop

I need to find which id numbers are missing inside s.data compared to users.
Is there a better(smaller code) way to compare?
Thanks ;)
if(users.length != undefined)
{
for(y=0;y<users.length;y++)
{
var left = true;
for(y2=0;y2<s.data.length;y2++)
{
if(users[y].client_id==s.data[y2].client_id) {left = false;break;}
}
if(left) {users[y].ref.remove();delete users[y];}
}
}
else if(!jQuery.isEmptyObject(users))
{
var left = true;
for(y2=0;y2<s.data.length;y2++)
{
if(users.client_id==s.data[y2].client_id) {left = false;break;}
}
if(left) {users.ref.remove();users = {};}
}
Haven't checked if this is working code. :)
First, off, the 2nd branch appears to be nothing but a specialization of the first branch. You can use this to either make the "2nd" users = [users] (in which case users really means users and not a-user) and eliminates the top branch entirely, or remove the the logic into a function invoked per-user.
Now, to tackle the inner loop: What this is a 'map' and a 'contains'. Looking at it just in terms of a contains:
// Returns true if any item in data.client_id (an array)
// is that of user.client_id
function dataContains (user, data) {
for (var i = 0; i < data.length; i++) {
if (data[i].client_id == user.client_id) {
return true
}
}
return false
}
Now the code is reduced to:
for (each user) {
if (!dataContains(user, data)) {
// do something here
}
}
However, we could go one step further and use a generic 'contains' if we also have a 'map'. The final form is then:
var dataIds = map(data, function (x) { return x.client_id })
for (each user) {
if (!contains(user.client_id, dataIds)) {
..
}
}
Where the 'contains' is much more generalized:
// Returns true iff item is contained within arr
function contains (item, arr) {
// Just do what the comment documentation says
}
If you are using jQuery you already have handy functions:
'contains' - inArray, and a "sorta" 'map' - map. However, be warned! The jQuery 'map' is really a flat-map and was given an incorrect name and incomplete documentation!
I believe ECMAScript ED5 has these functions standard.
Also, you could invert the client_id's in the data to object keys and simply test for key existence, which is O(1) vs. O(n) iff the look-up is built once (or at least much, much less than it's used) and so it may be "theoretically" better. The size of n makes a large difference if it will actually matter, if at all. In this case it's likely the look-up could be built incrementally and saved between times this code is executed.
var existingIds = {}
for (var i = 0; i < data.length; i++) {
existingIds[data[i].client_id] = true
}
for (each user) {
if (!existingIds[user.client_id]) {
..
}
}

Categories