Javascript: How to clear undefined values from an array

Question

I'm trying to loop through an array and delete and skip the elements until only one is existing. i've tried splicing but it messes up my loop because the element from arr[1] then becomes arr[0] etc.

Let's say there are 10 people. I'd like to remove person 1 then keep person 2 then remove person 3 and keep person 4. This pattern will go on until only one is left.

any kind of help will do.

What do you mean "until only one is left"? After one pass through the array you'll have cut it from 10 to 5 elements (people) - are you saying you want to keep repeating that process (with repeated passes through) until the array has only one element in it? — nnnnnn, Mar 07 '12 at 05:14
If you want only one element... Then why do you need a loop? — trumank, Mar 07 '12 at 05:21
@MathWizz, that was my thinking as well, the position of the remaining element can be calculated without the need for looping. — Cameron, Mar 07 '12 at 05:58
Yes I will be repeating the process until there is only one left. — KT., Mar 07 '12 at 19:56

score 29 · Answer 1 · answered Dec 15 '14 at 14:48

29

Filter the falsy items:

var a=[1,2,"b",0,{},"",NaN,3,undefined,null,5];
var b=a.filter(Boolean); // [1,2,"b",{},3,5]

answered Dec 15 '14 at 14:48

alexoviedo999

6,761
1
26
17

@alexoviedo999 Best one i've seen so far. I usually check against undefineds or true – Tatarin Jul 22 '16 at 13:06
alexoviedo999 Wow! Thanks! – John Rand Dec 31 '17 at 20:19

Ruan Mendes · Answer 2 · 2015-04-06T12:34:34.183

When you splice, just decrement your loop index.

There were lots of good suggestions, I'll post the code for the different options and you can decide which to use

Decrement index when splicing http://jsfiddle.net/mendesjuan/aFvVh/

var undef;
var arr = [1,2, undef, 3, 4, undef];
for (var i=0; i < arr.length; i++) {
    if ( arr[i] === undef ) {
        arr.splice(i,1);
        i--;
    }
}

Loop backwards http://jsfiddle.net/mendesjuan/aFvVh/1/

var undef;
var arr = [1,2, undef, 3, 4, undef];
for (var i=arr.length - 1; i >=0; i--) {
    if ( arr[i] === undef ) {
        arr.splice(i,1);
    }
}

Copy to new array http://jsfiddle.net/mendesjuan/aFvVh/2/

var undef;
var arr = [1,2, undef, 3, 4, undef];
var temp = [];
for (var i=0; i < arr.length; i++) {
    if ( arr[i] !== undef ) {
        temp.push(arr[i])
    }
}
arr = temp;

Use filter which is just a fancy way to create a new array

var undef;
var arr = [1,2, undef, 3, 4, undef];
arr = arr.filter(function(item){
    return item !== undef;
});

At the end of all those examples, arr will be [1,2,3,4]

Performance

IE 11, FF and Chrome agree that Array.splice is the fastest. 10 times (Chrome), 20 times (IE 11) as fast as Array.filter. Putting items into a new array was also slow when compared to Array.slice. See http://jsperf.com/clean-undefined-values-from-array2

I am really surprised to see IE lead the pack here, and to see Chrome behind FF and IE. I don't think I've ever run a test with that result.

score 9 · Accepted Answer · answered Mar 07 '12 at 05:08

9

you should not change the collection during the iterating, not just JavaScript but all language, define a new array and add those ones you want to delete in it, and iterate that one later to delete from first one.

answered Mar 07 '12 at 05:08

Simon Wang

2,843
1
16
32

You can change it, if you control the index. However, this is less error prone than my suggestion – Ruan Mendes Mar 07 '12 at 05:11
3

How about adding the ones you want to _keep_ to the second array, then at the end replace the first array with the second? Saves having to iterate through a second time. – nnnnnn Mar 07 '12 at 05:16
My opinion is just we should try to keep our code simple and easy to read, my expedience just tell me that writing a strange complex loop can only bring bugs and confuse others – Simon Wang Mar 07 '12 at 06:48
I misread Simon's suggestion, the real easy way to do it is what nnnnnn suggested (under this answer), copy it to a new array – Ruan Mendes Mar 07 '12 at 17:49
I ended up using 3 arrays, first as the original which is the basis for the loop. within the loop 2 arrays are used. the second array contains those that are skipped in that iteration and another is an empty array. at the end of each iteration, i do this. `arr1 = arr2;` `arr2 = arr3;` I'm not sure if this is the best solution but it made sense like what Simon said to make it simpler and it worked. – KT. Mar 07 '12 at 20:21

score 3 · Answer 4 · answered Dec 12 '12 at 17:10

3

If by any chance you're using CoffeeScript then to remove undefined from Array do this

values = ['one', undefined]
values = (item for item in values when item != undefined) 

values
/* => ['one'] */

answered Dec 12 '12 at 17:10

equivalent8

13,754
8
81
109

score 3 · Answer 5 · answered Mar 07 '12 at 05:10

3

Loop backwards. (Removing items will thus not affect the indexes of elements not yet processed.)

answered Mar 07 '12 at 05:10

nnnnnn

147,572
30
200
241

score 1 · Answer 6 · edited May 23 '17 at 12:34

1

Surprisingly, nobody have answered the best and correct way:

Create new array
Iterate on the old array and only push the elements you want to keep to the new array

some credit goes to @nnnnnn comment

edited May 23 '17 at 12:34

Community

1
1

answered Jun 12 '12 at 14:38

ajax333221

11,436
16
61
95

It's fairly slow when compared to using splice http://jsperf.com/clean-undefined-values-from-array2/2 – Ruan Mendes Apr 06 '15 at 12:42

Vishal Kumar · Answer 7 · 2018-04-07T16:33:27.017

>If you are getting undefined during deletion of the key-pair, Then to prevent "undefined" you can try code given below to delete key-pair  


   1) test = ["1","2","3","4",""," "];
   2) var delete = JSON.stringify(test);   
      case1) delete = delete.replace(/\,""/g,'');  
         or  
      case2) delete = delete.replace(/\," "/g,'');  
         or  
      case3) delete = delete.replace(/\,null/g,'');  

   3) var result = JSON.parse(delete);

score 0 · Answer 8 · answered Feb 02 '23 at 10:00

0

simply [NaN, undefined, null, 0, 1, 2, 2000, Infinity].filter(Boolean)

answered Feb 02 '23 at 10:00

Judith lobo

131
4

score 0 · Answer 9 · answered Mar 07 '12 at 05:11

Not gathering exactly what you are trying to achieve, but I feel you are relying on the position index of an item in the array to continue with your program. I would in this case suggest a hashed array, i.e., a Key<>Value pair array.

In which case, arr["2"] always points at the item you had placed in it originally. Thus you can logically/numerically loop through, while not worrying about changes in position.

Beware of the Type Conversion risk and pitfalls!

DdD · Answer 10 · 2012-03-07T05:18:53.630

0

Your best bet is to create a duplicate of the array, then splice from the original.

Or just go using a collection (key->value) and just delete the key eg

 People = {a: "Person A", b: "Person B", c:"Person C"};
 delete People.a;
 delete People.c;  //now the People collection only has 1 entry.

You can replace a,b,c with numbers just using it as an example,

 People = {0: "Person A", 1: "Person B", 2:"Person C"};
 delete People[0];
 delete People[1];

edited Mar 07 '12 at 05:18

answered Mar 07 '12 at 05:11

DdD

453
4
19

You missed the point, OP knows to splice, the problem is that the index is stale after removing an item – Ruan Mendes Mar 07 '12 at 05:12
@Juan Mendes, Better off using key->value collections instead then – DdD Mar 07 '12 at 05:16

trumank · Answer 11 · 2012-06-12T18:20:53.687

0

function removeUndefined(array)
{
    var i = 0;
    while (i < array.length)
        if (typeof array[i] === 'undefined')
            array.splice(i, i);
        else
            i++;
    return array;
}

EDIT: I wrote this based on the title. Looks like the question asks something completely different.

edited Jun 12 '12 at 18:20

answered Mar 07 '12 at 05:15

trumank

2,704
3
22
31

2

if array[i] is empty or false or 0 it will be also deleted. – shenhengbin Mar 07 '12 at 05:28
I think you meant `.splice(i, 1)` – nnnnnn Mar 07 '12 at 05:32
@shenhengbin I've fixed that. – trumank Jun 12 '12 at 18:21

shenhengbin · Answer 12 · 2012-03-07T05:35:28.787

0

this is a sample for you

<script lanauge = "javascript">
    var arr = ["1","2","3","4"];
    delete arr[1];// arr[1] is undefined
    delete arr[2];// arr[2] is undefined

    // now arr.length is 4

    var todelete = [];
    for (i = 0 ; i < arr.length ;i++)
    {
        if (typeof arr[i] == 'undefined') todelete.push(i);
    }

    todelete.sort(function(a, b) { return b-a }); // make the indeies from big to small

    for (i = 0;i < todelete.length; i ++)
    {
        arr.splice(todelete[i],1);
    }

    // now arr.length is 2

</script>

edited Mar 07 '12 at 05:35

answered Mar 07 '12 at 05:26

shenhengbin

4,236
1
24
33

That `.sort()` method isn't doing what the comment says it is. Without a callback function it will do an ascending lexicographic sort. – nnnnnn Mar 07 '12 at 05:31

score 0 · Answer 13 · answered Mar 07 '12 at 05:56

This may not be what you want, but you can easily calculate what the final element at the end of this procedure will be, then just grab it. Assuming that the elements of the array are contiguous and start at arr[0], you can find:

var logBase2OfLength = Math.floor(Math.log(arr.length) / Math.log(2));
var finalElement = arr[(1 << logBase2OfLength) - 1];

Basically, if you take the integer power of 2 that is less than or equal to the number of elements in your array, that is the position of the element that will remain after all of the looping and deleting.

avgusti · Answer 14 · 2012-06-24T18:51:15.460

-1

  while(yourarray.length>1) //only one left
    {
    // your code
    }

edited Jun 24 '12 at 18:51

answered Mar 07 '12 at 05:10

avgusti

123
1
2
6

2

`length` is a property of the array, not a function. – Cheery Mar 07 '12 at 05:15

Javascript: How to clear undefined values from an array

14 Answers14

Linked