Javascript Array splice removes data but does not reset index

Question

I have an array of objects. It had 3 objects

Print out in console. Array of three objects starting at index 0

I then deleted them one by one using arr.splice(0,1) which I repeated 3 times. I then added a new object to the (what is supposed to be an empty array) and printed out the ENTIRE array in console. Console output after adding object to emptied array

As you can see, it IS the only object in the array, but instead of starting with index 0, it starts with index 3. Also, the indexes for 0,1,2 are not there, they are not "null" or anything like it. their gone. What's going on?

This is the actual code for removal. I invoke it 3 times.

this.removeSelected = function () {

        //Remove from array
        //I have verified that selFramePos=0 many times. 
        f.splice(selFramePos, 1);
}

This object that I keep in each array slot(Just a bunch of data, nothing special):

  Data = {
        normal : normData,
        imageUrl: selfDefaults.viewport.src,
        topLeftX: norm(cf.paper.width, vpo.cx, vpw),
        topLeftY: norm(cf.paper.width, vpo.cy, vpw),
        width: norm(cf.paper.width, vpo.width, vpw),
        height: norm(cf.paper.width, vpo.height, vpw),
        rotation: selfRotator.getRotation().rotation,
        cropping:
        {
            shape: selfSelector.getSelection().shape,
            tlx: mathUtils.normalize(cf.paper.width, selfSelector.getSelection().left, vpw),
            tly: mathUtils.normalize(cf.paper.width, selfSelector.getSelection().top, vpw),
            w: mathUtils.normalize(cf.paper.width, selfSelector.getSelection().width, vpw),
            h: mathUtils.normalize(cf.paper.width, selfSelector.getSelection().height, vpw),
            color: selfSelector.getSelection().color,
            opacity: selfSelector.getSelection().opacity
        },
        filters: null,
        transition:
{
    type: 'dissolve',
    time: 500
},
        requireUserInput: true
    }

My problem was that I kept creating new array slots with an increasing index number like so:

        var i=0
        function add2Array () {
        arr[i]='something'
        i++
        }

So every time I called the function, it created a 'unique id' of sort instead of working with indexes and positions.

I fixed it by removing i and just using 'push' instead of arbitrarily increasing indexes.

Please show your actual code, including the data structure you start with and the code you use that modifies it. I'm also not sure what is and isn't an array vs. an object which could be part of your problem. Also not sure if you're using sparse arrays that might be confusing you. — jfriend00, Jan 29 '15 at 00:55
Can't reproduce: `var arr = [1,2,3]; for(var i=0; i<3; ++i) arr.splice(0,1); arr.push(4); Object.keys(arr);` — Oriol, Jan 29 '15 at 00:57
Works fine in the [fiddle](http://jsfiddle.net/z1e72nd5/). Restarts at 0 when repopulating. And also works fine with the push method [fiddle](http://jsfiddle.net/z1e72nd5/1/) — Michelangelo, Jan 29 '15 at 01:01
@Bergi Thank you!!!!! That was my problem. (If you want to write an answer about "make sure you insert objects at position 0 or whatever, I'll mark it as the correct answer") — Michael Seltenreich, Jan 29 '15 at 01:10
@MichaelSeltenreich: Done. Though I don't feel it's a proper answer :-/ — Bergi, Jan 29 '15 at 01:13
I know, but you made me look in the right place.. fudge it :) — Michael Seltenreich, Jan 29 '15 at 01:14

score 1 · Accepted Answer · answered Jan 29 '15 at 01:13

1

then I added a new object to the (what is supposed to be an empty) array

But not incorporating its new length, it seems. Use push to add the item and this will be done automatically.

answered Jan 29 '15 at 01:13

Bergi

630,263
148
957
1,375

@MichaelSeltenreich - It is not clear to me how this answer provides an answer to your question. I gather from your comments that it made you look in the right place, but this question and answer doesn't appear to offer any utility to the StackOverflow community because question and answer don't seem to go together. – jfriend00 Jan 29 '15 at 01:18
You are right. I will add an explanation in my question – Michael Seltenreich Jan 29 '15 at 01:26

PM 77-1 · Answer 2 · 2015-01-29T01:20:37.793

0

JavaScript does not have arrays the way they are implemented in most other languages.

The docs state:

Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations.

ar[i] notation merely refers to property i of object ar that could be numeric.

The following is perfectly legal in JavaScript:

var ar={};
ar[1] = 1;
ar[3] = 2;

We still call it an array. But it does not have to have contiguous indices. What should be noted, that length property of such array will be 3 (the largest value of its index).

So the most logical way to think about JS arrays as special objects (see the quote from docs above) with numeric properties.

edited Jan 29 '15 at 01:20

answered Jan 29 '15 at 00:59

PM 77-1

12,933
21
68
111

Is there a simple way to remove gaps? A function that will return your array like this: ar[0] = 1; ar[1] = 2; – Michael Seltenreich Jan 29 '15 at 01:05
Without a `.length` it's not an array :-) Or at least, no array methods would work with it (they assume length=0). – Bergi Jan 29 '15 at 01:06
3

"*`length` property of such* array *will be `3`*". Unless you set the `length` property to `ar` or to `Object.prototype`, there won't be any `length` property, so `ar.length` will return `undefined`. – Oriol Jan 29 '15 at 01:06
@Oriol - true. Made a clarification. – PM 77-1 Jan 29 '15 at 01:14

Javascript Array splice removes data but does not reset index

2 Answers2