无法到达已删除的数组对象

Question

We're working on an app that will show a list of an employee's shifts. If a shift has already passed, we want to delete it from the array of shifts and therefore not print it to the DOM.

We are effectively deleting the object with the delete property of arrays. Doing this, we know that deleting will leave the object as undefined . Yet when it prints on screen, the undefines appear (this part makes sense), but when we try to grab them with a function in order to fix this issue (we're going to copy the array without the undefines), we can't reach the undefines.

How do we snag the undefines?

HTML :

<ul>
    <li ng-repeat="shift in CurrentUser.orderedSchedule = (schedule | orderBy:Time.getSortingDate:false)">
        <p>Start time: {{Time.makeDate(shift.start)}} 
        {{Time.makeTime(shift.start)}}</p>
        <p>end time: {{Time.makeDate(shift.end)}} 
        {{Time.makeTime(shift.end)}}</p>
    </li>
</ul>

UserController.js :

$scope.getShifts = function(){
    $scope.schedule = $scope.CurrentUser.user.shifts; //array of objects that gets printed on screen
    var now = new Date();
    for (var indexOfShift in $scope.schedule){ //checks each shift
        var start = $scope.schedule[indexOfShift].start; //date object, the start of the shift
        if(start instanceof Date){
            if(parseInt(start.getTime())-parseInt(now.getTime())<0){
                //if the 'future time' has already passed now
                //remove the shift
                alert(start+" is in the past");
                delete $scope.CurrentUser.user.shifts[indexOfShift]; //deleting shift
                $scope.schedule = $scope.CurrentUser.user.shifts; //trying to update that we removed it, so we can find undefined
            }
        }
    }
    for(var indexOfShift in $scope.schedule){ //looping shifts again to look for undef
        console.log($scope.schedule[indexOfShift]); //this prints all of them but the undefines don't appear
        if($scope.schedule[indexOfShift].start===undefined){ //we never hit this
            alert("found a blank one");
        }
    }
};

And here is a sample of what our user data with the shifts look like (an array of objects):

$scope.CurrentUser.user = [
    { 
        'name': 'John Smith',
        'shifts':[
                {'start':new Date(2012, 07, 27, 4, 44),
                'end': new Date(2012, 07, 27, 12, 21)
                },
                {'start':new Date(2014, 09, 09, 20, 02),
                'end': new Date(2014, 09, 10, 7, 06)
                }
        ]
    }
];

Why can't we reach the undefines? Where have they gone?

Answer 1

The for (var i in arr) loop will not loop through undefined items. Two solutions:

1. Instead of delete arr[indexOfShift], use arr[indexOfShift] = null;
2. Instead of for(var i in arr), use a numerical loop as follows:

for (var i = 0; i < myLength; i++){ // do something }

Answer 2

Use Splice for your case.

Delete in this case will only set the element as undefined:

myArray = ['a', 'b', 'c', 'd']

delete myArray[0]

myArray

result: [undefined, "b", "c", "d"]

Splice actually removes the element from the array:

myArray = ['a', 'b', 'c', 'd']

myArray.splice(0, 2)

myArray

result: ["c", "d"]

for more about splice: Microsoft Link

FOR Example from Mizzila:

var myFish =["angel", "clown", "drum", "mandarin", "surgeon"];

//removes 1 element from index 3
removed = myFish.splice(3, 1);
//myFish is ["angel", "clown", "drum", "surgeon"]
//removed is ["mandarin"]

use this in your case.

 //delete $scope.CurrentUser.user.shifts[indexOfShift]; 
$scope.CurrentUser.user.shifts.splice(indexOfShift, 1);